maxGraph
diff --git a/packages/html/stories/HelloWorld.stories.js → packages/html/stories/HelloWorld.stories.ts b/packages/html/stories/HelloWorld.stories.js → packages/html/stories/HelloWorld.stories.ts
@@ -15,7 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Graph, InternalEvent, RubberBandHandler } from '@maxgraph/core';
+import {
+  getDefaultPlugins,
+  Graph,
+  InternalEvent,
+  RubberBandHandler,
+} from '@maxgraph/core';
 import {
   contextMenuTypes,
   contextMenuValues,
@@ -42,37 +47,35 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => {
+const Template = ({ label, ...args }: Record<string, string>) => {
   const container = createGraphContainer(args);
 
   if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
-  const graph = new Graph(container);
-
-  if (args.rubberBand) new RubberBandHandler(graph);
+  // Enables rubberband selection
+  const plugins = getDefaultPlugins();
+  if (args.rubberBand) plugins.push(RubberBandHandler);
 
-  const parent = graph.getDefaultParent();
+  // Creates the graph inside the given container
+  const graph = new Graph(container, undefined, plugins);
 
+  // Add cells to the model in a single step
   graph.batchUpdate(() => {
-    // Add cells to the model in a single step
     const vertex1 = graph.insertVertex({
-      parent,
       value: 'Hello',
       position: [20, 20],
       size: [80, 30],
       relative: false,
     });
 
     const vertex2 = graph.insertVertex({
-      parent,
       value: 'World!',
       position: [200, 150],
       size: [80, 30],
       relative: false,
     });
 
-    const edge = graph.insertEdge({
-      parent,
+    graph.insertEdge({
       source: vertex1,
       target: vertex2,
     });

diff --git a/packages/website/docs/tutorials/the-hello-world-example.md b/packages/website/docs/tutorials/the-hello-world-example.md
@@ -20,14 +20,14 @@ Copyright (c) JGraph Ltd 2006-2017
 
 The _Hello, World!_ example of `maxGraph` ships in a Storybook story called `HelloWorld` which is available in the `HelloWorld` page of the [maxGraph demo](https://maxgraph.github.io/maxGraph/demo/?path=/story/basic-helloworld--default).
 
-The source of the example is available in [HelloWorld.stories.js](https://github.com/maxGraph/maxGraph/blob/main/packages/html/stories/HelloWorld.stories.js).
+The source of the example is available in [HelloWorld.stories.ts](https://github.com/maxGraph/maxGraph/blob/main/packages/html/stories/HelloWorld.stories.ts).
 
 ![Screenshot of the Hello World example](./assets/hello-world-example.png)
 
 
 ## Container
 
-For the JavaScript to actually render the graph, the page contains an DOM node which will display the graph.
+For the JavaScript to actually render the graph, the page contains a DOM node which will display the graph.
 This DOM node is either dynamically created or it is obtained via an ID using `document.getElementById` as in the _Hello, World!_ example.
 The DOM node is passed to the main function and is used to construct the graph instance as shown below.
 
@@ -57,20 +57,14 @@ However, the `beginUpdate` should not be part of the try-block to make sure `end
 This is required for the model to remain in a consistent state, that is, for each call to `beginUpdate` there should always be exactly one call to `endUpdate`.
 
 The part within the try-block creates the vertices and edges for the graph.
-The default parent is obtained from the graph and is typically the first child of the root cell in the model,
-which is created automatically when using the graph model constructor with no arguments.
 
 ```javascript
-// Gets the default parent for inserting new cells.
-// This is normally the first child of the root (ie. layer 0).
-const parent = graph.getDefaultParent();
-
 // Adds cells to the model in a single step
 model.beginUpdate();
 try  {
-    const v1 = graph.insertVertex({ parent, value: 'Hello,', position: [20, 20], size: [80, 30] });
-    const v2 = graph.insertVertex({ parent, value: 'World!', position:[200, 150], size: [80, 30] });
-    graph.insertEdge({ parent, source: v1, target: v2 });
+    const v1 = graph.insertVertex({ value: 'Hello,', position: [20, 20], size: [80, 30] });
+    const v2 = graph.insertVertex({ value: 'World!', position:[200, 150], size: [80, 30] });
+    graph.insertEdge({ source: v1, target: v2 });
 }
 finally {
     // Updates the display