From 8b62b14bf5f3a4d4e8e5d9c13583afdf21dca931 Mon Sep 17 00:00:00 2001
From: superstar54 <xingwang1991@gmail.com>
Date: Wed, 29 May 2024 22:42:44 +0200
Subject: [PATCH] add `to_html` method

---
 aiida_workgraph/node.py                       |    5 +
 aiida_workgraph/widget/src/widget/__init__.py |   18 +-
 .../widget/src/widget/html_template.py        |  244 ++++
 aiida_workgraph/workgraph.py                  |    5 +
 docs/source/add0.html                         |  243 ++++
 docs/source/atomization_energy.html           |  243 ++++
 docs/source/conf.py                           |   21 +
 docs/source/eos.html                          |  243 ++++
 docs/source/first_workflow.html               |  243 ++++
 docs/source/howto/Electronic Structure.html   |  243 ++++
 docs/source/howto/WorkGraph.html              |  243 ++++
 docs/source/howto/combine_workgraph.ipynb     |  108 +-
 docs/source/if_node.html                      |  243 ++++
 docs/source/quick_start.ipynb                 | 1278 +++--------------
 docs/source/relax_eos.html                    |  243 ++++
 docs/source/second_workflow.html              |  243 ++++
 docs/source/test_add_multiply.html            |  243 ++++
 docs/source/third_workflow.html               |  243 ++++
 docs/source/tutorial/eos.ipynb                |    2 +-
 docs/source/tutorial/pw1.html                 |  243 ++++
 docs/source/tutorial/qe.ipynb                 |   46 +-
 docs/source/zero_to_hero.ipynb                |  132 +-
 22 files changed, 3577 insertions(+), 1198 deletions(-)
 create mode 100644 aiida_workgraph/widget/src/widget/html_template.py
 create mode 100644 docs/source/add0.html
 create mode 100644 docs/source/atomization_energy.html
 create mode 100644 docs/source/eos.html
 create mode 100644 docs/source/first_workflow.html
 create mode 100644 docs/source/howto/Electronic Structure.html
 create mode 100644 docs/source/howto/WorkGraph.html
 create mode 100644 docs/source/if_node.html
 create mode 100644 docs/source/relax_eos.html
 create mode 100644 docs/source/second_workflow.html
 create mode 100644 docs/source/test_add_multiply.html
 create mode 100644 docs/source/third_workflow.html
 create mode 100644 docs/source/tutorial/pw1.html

diff --git a/aiida_workgraph/node.py b/aiida_workgraph/node.py
index 22f466f2..fcbb2875 100644
--- a/aiida_workgraph/node.py
+++ b/aiida_workgraph/node.py
@@ -111,3 +111,8 @@ def _repr_mimebundle_(self, *args: Any, **kwargs: Any) -> any:
             return self._widget._repr_mimebundle_(*args, **kwargs)
         else:
             return self._widget._ipython_display_(*args, **kwargs)
+
+    def to_html(self, output: str = None, **kwargs):
+        """Write a standalone html file to visualize the node."""
+        self._widget.from_node(self)
+        return self._widget.to_html(output=output, **kwargs)
diff --git a/aiida_workgraph/widget/src/widget/__init__.py b/aiida_workgraph/widget/src/widget/__init__.py
index e86ed6ce..05a02b21 100644
--- a/aiida_workgraph/widget/src/widget/__init__.py
+++ b/aiida_workgraph/widget/src/widget/__init__.py
@@ -44,9 +44,25 @@ def from_node(self, node: Any) -> None:
         ndata.pop("node_class", None)
         ndata.pop("process", None)
         ndata["label"] = ndata["metadata"]["identifier"]
-        wgdata = {"nodes": {node.name: ndata}, "links": []}
+        wgdata = {"name": node.name, "nodes": {node.name: ndata}, "links": []}
         self.value = wgdata
 
+    def to_html(self, output: str = None, width: str = "100%", height: str = "600px"):
+        """Write a standalone html file to visualize the workgraph."""
+        from IPython.display import IFrame
+        from .html_template import html_template
+        import json
+
+        if output is None:
+            output = f"{self.value['name']}.html"
+        # Replace the placeholder with the actual workgraphData
+        html_content = html_template.replace(
+            "__WORKGRAPH_DATA__", json.dumps(self.value)
+        )
+        with open(output, "w") as f:
+            f.write(html_content)
+        return IFrame(output, width=width, height=height)
+
     @traitlets.observe("positions")
     def _observe_positions(self, change: Dict[str, Any]) -> None:
         if not self.parent:
diff --git a/aiida_workgraph/widget/src/widget/html_template.py b/aiida_workgraph/widget/src/widget/html_template.py
new file mode 100644
index 00000000..815c5914
--- /dev/null
+++ b/aiida_workgraph/widget/src/widget/html_template.py
@@ -0,0 +1,244 @@
+html_template = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+            background: rgb(200, 190, 190);
+        }
+        .rete {
+          position: relative;
+          font-size: 1rem;
+          margin: 1em;
+          border-radius: 1em;
+          text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = __WORKGRAPH_DATA__
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
+"""
diff --git a/aiida_workgraph/workgraph.py b/aiida_workgraph/workgraph.py
index 1cba5518..3e2847a9 100644
--- a/aiida_workgraph/workgraph.py
+++ b/aiida_workgraph/workgraph.py
@@ -381,3 +381,8 @@ def _repr_mimebundle_(self, *args, **kwargs):
             return self._widget._repr_mimebundle_(*args, **kwargs)
         else:
             return self._widget._ipython_display_(*args, **kwargs)
+
+    def to_html(self, output: str = None, **kwargs):
+        """Write a standalone html file to visualize the workgraph."""
+        self._widget.from_workgraph(self)
+        return self._widget.to_html(output=output, **kwargs)
diff --git a/docs/source/add0.html b/docs/source/add0.html
new file mode 100644
index 00000000..a0cfed4c
--- /dev/null
+++ b/docs/source/add0.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "add0", "nodes": {"add0": {"version": "node_graph@0.0.1", "uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "name": "add0", "inner_id": 0, "state": "CREATED", "action": "NONE", "error": "", "metadata": {"node_type": "CALCFUNCTION", "catalog": "Others", "identifier": "add", "parent_uuid": "", "platform": "node_graph", "args": ["x", "y"], "kwargs": ["metadata", "metadata.store_provenance", "metadata.description", "metadata.label", "metadata.call_link_label"], "var_args": null, "var_kwargs": null, "group_properties": [], "group_inputs": [], "group_outputs": [], "hash": "f6500e66-1df9-11ef-bdc8-906584de3e5b", "pk": null, "is_aiida_component": true}, "inputs": [{"name": "metadata", "identifier": "General", "uuid": "f64cda48-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.store_provenance", "identifier": "General", "uuid": "f64cdc14-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.description", "identifier": "General", "uuid": "f64cdd04-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.label", "identifier": "General", "uuid": "f64cdde0-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.call_link_label", "identifier": "General", "uuid": "f64cdebc-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x", "identifier": "General", "uuid": "f64cdf8e-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "f64ce060-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_wait", "identifier": "General", "uuid": "f64ce132-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1000000.0, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result", "identifier": "General", "uuid": "f64ce218-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_outputs", "identifier": "General", "uuid": "f64ce2e0-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_wait", "identifier": "General", "uuid": "f64ce3a8-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "ctrl_inputs": [{"name": "entry", "identifier": "General", "uuid": "f64ce48e-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "ctrl", "identifier": "General", "uuid": "f64ce54c-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "ctrl_outputs": [{"name": "exit", "identifier": "General", "uuid": "f64ce5f6-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "ctrl", "identifier": "General", "uuid": "f64ce6a0-1df9-11ef-bdc8-906584de3e5b", "node_uuid": "f64cd732-1df9-11ef-bdc8-906584de3e5b", "type": "OUTPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "position": [0, 0], "description": "", "log": "", "hash": "", "to_context": [], "wait": [], "label": "add"}}, "links": []}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/atomization_energy.html b/docs/source/atomization_energy.html
new file mode 100644
index 00000000..1cddfd75
--- /dev/null
+++ b/docs/source/atomization_energy.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "atomization_energy", "uuid": "278f7ace-1dfb-11ef-aed6-906584de3e5b", "state": "CREATED", "nodes": {"pw_atom": {"label": "pw_atom", "inputs": [{"name": "structure", "identifier": "General", "uuid": "2791dcf6-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2791ca9a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parameters", "identifier": "General", "uuid": "2791dd6e-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2791ca9a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pseudos", "identifier": "General", "uuid": "2791df44-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2791ca9a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "kpoints", "identifier": "General", "uuid": "2791e048-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2791ca9a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "output_parameters"}], "position": [30, 30]}, "pw_mol": {"label": "pw_mol", "inputs": [{"name": "structure", "identifier": "General", "uuid": "2793f8d8-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2793c2f0-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parameters", "identifier": "General", "uuid": "2793f946-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2793c2f0-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pseudos", "identifier": "General", "uuid": "2793fb1c-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2793c2f0-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "kpoints", "identifier": "General", "uuid": "2793fc20-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2793c2f0-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "output_parameters"}], "position": [60, 60]}, "atomization_energy": {"label": "atomization_energy", "inputs": [{"name": "output_atom", "identifier": "General", "uuid": "279643ae-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2796402a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "pw_atom", "from_socket": "output_parameters", "from_socket_uuid": "2791e28c-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_mol", "identifier": "General", "uuid": "2796441c-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "2796402a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "pw_mol", "from_socket": "output_parameters", "from_socket_uuid": "2793fe6e-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_atom"}, {"name": "output_mol"}], "outputs": [], "position": [90, 90]}}, "links": [{"from_socket": "output_parameters", "from_node": "pw_atom", "from_socket_uuid": "2791e28c-1dfb-11ef-aed6-906584de3e5b", "to_socket": "output_atom", "to_node": "atomization_energy", "state": false}, {"from_socket": "output_parameters", "from_node": "pw_mol", "from_socket_uuid": "2793fe6e-1dfb-11ef-aed6-906584de3e5b", "to_socket": "output_mol", "to_node": "atomization_energy", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 31f336fb..9fc5f5f4 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -12,6 +12,8 @@
 #
 import os
 import sys
+import shutil
+from pathlib import Path
 
 sys.path.insert(0, os.path.abspath("../.."))
 
@@ -61,3 +63,22 @@
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
+
+
+# Function to copy HTML files
+def copy_html_files(src, dst):
+    """
+    Copy all .html files from src to dst, maintaining the directory structure.
+    """
+    src_path = Path(src)
+    for html_file in src_path.rglob("*.html"):
+        relative_path = html_file.relative_to(src_path)
+        destination_file = Path(dst) / relative_path
+        destination_file.parent.mkdir(parents=True, exist_ok=True)
+        shutil.copy(html_file, destination_file)
+
+
+def setup(app):
+    app.connect(
+        "build-finished", lambda app, exception: copy_html_files("source", app.outdir)
+    )
diff --git a/docs/source/eos.html b/docs/source/eos.html
new file mode 100644
index 00000000..8d9a039c
--- /dev/null
+++ b/docs/source/eos.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "eos", "uuid": "4db8744e-1dfb-11ef-aed6-906584de3e5b", "state": "CREATED", "nodes": {"scale_structure1": {"label": "scale_structure1", "inputs": [{"name": "structure", "identifier": "General", "uuid": "4dbb0132-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4dbaf96c-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "scales", "identifier": "General", "uuid": "4dbb01f0-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4dbaf96c-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "structures"}], "position": [30, 30]}, "all_scf1": {"label": "all_scf1", "inputs": [{"name": "structures", "identifier": "General", "uuid": "4dbd37ea-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4dbd3678-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "scale_structure1", "from_socket": "structures", "from_socket_uuid": "4dbb0380-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "scf_inputs", "identifier": "General", "uuid": "4dbd38a8-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4dbd3678-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "structures"}], "outputs": [{"name": "result"}], "position": [60, 60]}, "eos1": {"label": "eos1", "inputs": [{"name": "datas"}], "outputs": [], "position": [90, 90]}}, "links": [{"from_socket": "structures", "from_node": "scale_structure1", "from_socket_uuid": "4dbb0380-1dfb-11ef-aed6-906584de3e5b", "to_socket": "structures", "to_node": "all_scf1", "state": false}, {"from_socket": "result", "from_node": "all_scf1", "from_socket_uuid": "4dbd3970-1dfb-11ef-aed6-906584de3e5b", "to_socket": "datas", "to_node": "eos1", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/first_workflow.html b/docs/source/first_workflow.html
new file mode 100644
index 00000000..1e9ee8df
--- /dev/null
+++ b/docs/source/first_workflow.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "first_workflow", "uuid": "019c4b9e-1dfb-11ef-aed6-906584de3e5b", "state": "CREATED", "nodes": {"add1": {"label": "add1", "inputs": [{"name": "x", "identifier": "General", "uuid": "019ed954-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "019ed468-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "019ed9e0-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "019ed468-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result"}], "position": [30, 30]}, "multiply1": {"label": "multiply1", "inputs": [{"name": "x", "identifier": "General", "uuid": "01a10d46-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "01a10990-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add1", "from_socket": "result", "from_socket_uuid": "019edb2a-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "01a10da0-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "01a10990-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [], "position": [60, 60]}}, "links": [{"from_socket": "result", "from_node": "add1", "from_socket_uuid": "019edb2a-1dfb-11ef-aed6-906584de3e5b", "to_socket": "x", "to_node": "multiply1", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/howto/Electronic Structure.html b/docs/source/howto/Electronic Structure.html
new file mode 100644
index 00000000..42694b26
--- /dev/null
+++ b/docs/source/howto/Electronic Structure.html	
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "Electronic Structure", "uuid": "98e9ccf6-1dfb-11ef-a23e-906584de3e5b", "state": "CREATED", "nodes": {"relax": {"label": "relax", "inputs": [{"name": "base", "identifier": "General", "uuid": "98ec8964-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "98ec81b2-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "base.pw", "identifier": "General", "uuid": "98ec9044-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "98ec81b2-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "base.pw.parameters", "identifier": "General", "uuid": "98ecb5a6-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "98ec81b2-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "base.pw.pseudos", "identifier": "General", "uuid": "98ecb8e4-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "98ec81b2-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "structure", "identifier": "General", "uuid": "98ed3760-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "98ec81b2-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "output_structure"}, {"name": "output_structure"}], "position": [30, 30]}, "bands_group": {"label": "bands_group", "inputs": [{"name": "structure"}], "outputs": [], "position": [60, 60]}, "pdos_group": {"label": "pdos_group", "inputs": [{"name": "structure"}], "outputs": [], "position": [90, 90]}}, "links": [{"from_socket": "output_structure", "from_node": "relax", "from_socket_uuid": "98ed4c1e-1dfb-11ef-a23e-906584de3e5b", "to_socket": "structure", "to_node": "bands_group", "state": false}, {"from_socket": "output_structure", "from_node": "relax", "from_socket_uuid": "98ed4c1e-1dfb-11ef-a23e-906584de3e5b", "to_socket": "structure", "to_node": "pdos_group", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/howto/WorkGraph.html b/docs/source/howto/WorkGraph.html
new file mode 100644
index 00000000..911d6018
--- /dev/null
+++ b/docs/source/howto/WorkGraph.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "WorkGraph", "uuid": "8ca60e3c-1dfb-11ef-a23e-906584de3e5b", "state": "CREATED", "nodes": {"scf": {"label": "scf", "inputs": [{"name": "pw", "identifier": "General", "uuid": "8ca87578-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8ca86f56-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.structure", "identifier": "General", "uuid": "8ca8a084-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8ca86f56-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.parameters", "identifier": "General", "uuid": "8ca8a110-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8ca86f56-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.pseudos", "identifier": "General", "uuid": "8ca8a32c-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8ca86f56-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "_wait"}], "position": [30, 30]}, "nscf": {"label": "nscf", "inputs": [{"name": "pw", "identifier": "General", "uuid": "8caacbac-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8caac4ea-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.structure", "identifier": "General", "uuid": "8caae182-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8caac4ea-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.parameters", "identifier": "General", "uuid": "8caae20e-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8caac4ea-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pw.pseudos", "identifier": "General", "uuid": "8caae43e-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8caac4ea-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_wait"}], "outputs": [{"name": "remote_folder"}, {"name": "_outputs"}, {"name": "remote_folder"}, {"name": "_outputs"}], "position": [60, 60]}, "dos": {"label": "dos", "inputs": [{"name": "parent_folder", "identifier": "General", "uuid": "8cad61a0-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8cad4fda-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "nscf", "from_socket": "remote_folder", "from_socket_uuid": "8caae812-1dfb-11ef-a23e-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parent_folder"}, {"name": "parameters"}], "outputs": [], "position": [90, 90]}, "dos_parameters": {"label": "dos_parameters", "inputs": [{"name": "nscf_outputs", "identifier": "General", "uuid": "8caf6ec8-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8caf6d2e-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "nscf", "from_socket": "_outputs", "from_socket_uuid": "8caaeb32-1dfb-11ef-a23e-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "nscf_outputs"}], "outputs": [{"name": "result"}], "position": [120, 120]}, "projwfc": {"label": "projwfc", "inputs": [{"name": "parent_folder", "identifier": "General", "uuid": "8cb16336-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8cb14e8c-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "nscf", "from_socket": "remote_folder", "from_socket_uuid": "8caae812-1dfb-11ef-a23e-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parent_folder"}, {"name": "parameters"}], "outputs": [], "position": [150, 150]}, "projwfc_parameters": {"label": "projwfc_parameters", "inputs": [{"name": "nscf_outputs", "identifier": "General", "uuid": "8cb46040-1dfb-11ef-a23e-906584de3e5b", "node_uuid": "8cb45cf8-1dfb-11ef-a23e-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "nscf", "from_socket": "_outputs", "from_socket_uuid": "8caaeb32-1dfb-11ef-a23e-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "nscf_outputs"}], "outputs": [{"name": "result"}], "position": [180, 180]}}, "links": [{"from_socket": "remote_folder", "from_node": "nscf", "from_socket_uuid": "8caae812-1dfb-11ef-a23e-906584de3e5b", "to_socket": "parent_folder", "to_node": "dos", "state": false}, {"from_socket": "_outputs", "from_node": "nscf", "from_socket_uuid": "8caaeb32-1dfb-11ef-a23e-906584de3e5b", "to_socket": "nscf_outputs", "to_node": "dos_parameters", "state": false}, {"from_socket": "result", "from_node": "dos_parameters", "from_socket_uuid": "8caf7044-1dfb-11ef-a23e-906584de3e5b", "to_socket": "parameters", "to_node": "dos", "state": false}, {"from_socket": "remote_folder", "from_node": "nscf", "from_socket_uuid": "8caae812-1dfb-11ef-a23e-906584de3e5b", "to_socket": "parent_folder", "to_node": "projwfc", "state": false}, {"from_socket": "_outputs", "from_node": "nscf", "from_socket_uuid": "8caaeb32-1dfb-11ef-a23e-906584de3e5b", "to_socket": "nscf_outputs", "to_node": "projwfc_parameters", "state": false}, {"from_socket": "result", "from_node": "projwfc_parameters", "from_socket_uuid": "8cb46428-1dfb-11ef-a23e-906584de3e5b", "to_socket": "parameters", "to_node": "projwfc", "state": false}, {"from_node": "scf", "from_socket": "_wait", "to_node": "nscf", "to_socket": "_wait"}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/howto/combine_workgraph.ipynb b/docs/source/howto/combine_workgraph.ipynb
index 56eb9f70..e0f26cf2 100644
--- a/docs/source/howto/combine_workgraph.ipynb
+++ b/docs/source/howto/combine_workgraph.ipynb
@@ -17,25 +17,17 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 1,
    "id": "c6b83fb5",
    "metadata": {},
    "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "The aiida extension is already loaded. To reload it, use:\n",
-      "  %reload_ext aiida\n"
-     ]
-    },
     {
      "data": {
       "text/plain": [
        "Profile<uuid='57ccbf7d9e2b41b39edb2bfdaf725feb' name='default'>"
       ]
      },
-     "execution_count": 2,
+     "execution_count": 1,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -59,22 +51,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 2,
    "id": "1d04eea7",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "74b0cc0818d145bbb4fd2da7c5209538",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"WorkGraph.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'WorkGra…"
+       "<IPython.lib.display.IFrame at 0x7778c1618750>"
       ]
      },
-     "execution_count": 3,
+     "execution_count": 2,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -85,7 +84,7 @@
     "load_profile()\n",
     "\n",
     "bands_wg = bands_workgraph(run_relax=False)\n",
-    "bands_wg"
+    "bands_wg.to_html()"
    ]
   },
   {
@@ -98,22 +97,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 3,
    "id": "16c26bd4",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "38ac0d9eaaf544ee81368640cbcde0cb",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"WorkGraph.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'WorkGra…"
+       "<IPython.lib.display.IFrame at 0x7778c15357d0>"
       ]
      },
-     "execution_count": 4,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -121,7 +127,7 @@
    "source": [
     "from workgraph_collections.qe.pdos import pdos_workgraph\n",
     "pdos_wg = pdos_workgraph(run_scf=True)\n",
-    "pdos_wg"
+    "pdos_wg.to_html()"
    ]
   },
   {
@@ -143,9 +149,9 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "af256013c6324e96bf06dfc8c7d318c4",
+       "model_id": "2d414ff5308d4ae3bcdda49cc1cb3248",
        "version_major": 2,
-       "version_minor": 0
+       "version_minor": 1
       },
       "text/plain": [
        "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'Electro…"
@@ -186,13 +192,20 @@
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "af256013c6324e96bf06dfc8c7d318c4",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"Electronic Structure.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(positions={'relax': [30, 30]}, settings={'minimap': True}, style={'width': '90%', 'height': '6…"
+       "<IPython.lib.display.IFrame at 0x7778c0c89dd0>"
       ]
      },
      "execution_count": 6,
@@ -207,7 +220,7 @@
     "# adjust the links\n",
     "wg.links.new(relax_node.outputs['output_structure'], wg.nodes['bands_scf'].inputs['pw.structure'])\n",
     "wg.links.new(relax_node.outputs['output_structure'], wg.nodes['pdos_scf'].inputs['pw.structure'])\n",
-    "wg"
+    "wg.to_html()"
    ]
   },
   {
@@ -228,13 +241,20 @@
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "677a83d3198041dd998b63802aeaf66b",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"Electronic Structure.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'Electro…"
+       "<IPython.lib.display.IFrame at 0x7778c0c7a790>"
       ]
      },
      "execution_count": 7,
@@ -249,7 +269,7 @@
     "pdos_job = wg.nodes.new(pdos_workgraph, name='pdos_group')\n",
     "wg.links.new(relax_node.outputs['output_structure'], bands_job.inputs['structure'])\n",
     "wg.links.new(relax_node.outputs['output_structure'], pdos_job.inputs['structure'])\n",
-    "wg"
+    "wg.to_html()"
    ]
   },
   {
diff --git a/docs/source/if_node.html b/docs/source/if_node.html
new file mode 100644
index 00000000..acfbda09
--- /dev/null
+++ b/docs/source/if_node.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "if_node", "uuid": "46421d3c-1dfb-11ef-aed6-906584de3e5b", "state": "CREATED", "nodes": {"add1": {"label": "add1", "inputs": [{"name": "x", "identifier": "General", "uuid": "46451fc8-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "46451a0a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "4645204a-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "46451a0a-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result"}], "position": [30, 30]}, "add_multiply_if1": {"label": "add_multiply_if1", "inputs": [{"name": "x", "identifier": "General", "uuid": "46475338-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4647511c-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add1", "from_socket": "result", "from_socket_uuid": "4645214e-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "4647543c-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4647511c-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [{"name": "result"}], "position": [60, 60]}, "add2": {"label": "add2", "inputs": [{"name": "x", "identifier": "General", "uuid": "4649c4ba-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4649bff6-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add_multiply_if1", "from_socket": "result", "from_socket_uuid": "46475540-1dfb-11ef-aed6-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "4649c514-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "4649bff6-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [], "position": [90, 90]}}, "links": [{"from_socket": "result", "from_node": "add1", "from_socket_uuid": "4645214e-1dfb-11ef-aed6-906584de3e5b", "to_socket": "x", "to_node": "add_multiply_if1", "state": false}, {"from_socket": "result", "from_node": "add_multiply_if1", "from_socket_uuid": "46475540-1dfb-11ef-aed6-906584de3e5b", "to_socket": "x", "to_node": "add2", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/quick_start.ipynb b/docs/source/quick_start.ipynb
index 8d319b74..e9d3240f 100644
--- a/docs/source/quick_start.ipynb
+++ b/docs/source/quick_start.ipynb
@@ -71,26 +71,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 8,
    "id": "11e3bca1-dda6-44e9-9585-54feeda7e7db",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e6cc9bc2e73949d0bc7d26ad9fce8319",
-       "version_major": 2,
-       "version_minor": 1
-      },
-      "text/plain": [
-       "NodeGraphWidget(settings={'minmap': False}, style={'width': '80%', 'height': '600px'}, value={'nodes': {'add0'…"
-      ]
-     },
-     "execution_count": 2,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from aiida_workgraph import node\n",
     "\n",
@@ -102,10 +86,7 @@
     "# define multiply node\n",
     "@node.calcfunction()\n",
     "def multiply(x, y):\n",
-    "    return x*y\n",
-    "\n",
-    "# visualize the node in Jupiter-notebook\n",
-    "add.node()"
+    "    return x*y\n"
    ]
   },
   {
@@ -115,28 +96,65 @@
    "source": [
     "\n",
     "#### Visualize the node\n",
-    "If you are running in a Jupiter notebook, you can visualize the node.\n",
-    "<img src=\"_static/images/add-node.png\" width=250 />\n",
+    "If you are running in a Jupiter notebook, you can visualize the node by adding the following code to the last line of the cell:\n",
     "\n",
-    "\n",
-    "The input sockets are generated automatically based on the function arguments. The default name of the output socket is `result`. There are also some built-in sockets for all nodes, like `_wait` and `_outputs`.  In case of `calcfunction`, it also has several built-in sockets, such as `metadata`. One can also create a node instance and inpsect its inputs and outputs:"
+    "```python\n",
+    "add.node()\n",
+    "```\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
-   "id": "13adc082",
+   "execution_count": 9,
+   "id": "b6eb5dad",
    "metadata": {},
    "outputs": [
     {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "Inputs: ['metadata', 'metadata.store_provenance', 'metadata.description', 'metadata.label', 'metadata.call_link_label', 'x', 'y', '_wait']\n",
-      "Outputs: ['result', '_outputs', '_wait']\n"
-     ]
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"add0.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x730d4145c250>"
+      ]
+     },
+     "execution_count": 9,
+     "metadata": {},
+     "output_type": "execute_result"
     }
    ],
+   "source": [
+    "\n",
+    "# export the node to html file so that it can be visualized in a browser\n",
+    "add.node().to_html()\n",
+    "\n",
+    "# visualize the node in jupyter-notebook\n",
+    "# add.node()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e99dbcb5",
+   "metadata": {},
+   "source": [
+    "The input sockets are generated automatically based on the function arguments. The default name of the output socket is `result`. There are also some built-in sockets for all nodes, like `_wait` and `_outputs`.  In case of `calcfunction`, it also has several built-in sockets, such as `metadata`. One can also create a node instance and inpsect its inputs and outputs:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "13adc082",
+   "metadata": {},
+   "outputs": [],
    "source": [
     "add1 = add.node()\n",
     "print(\"Inputs:\", add1.inputs.keys())\n",
@@ -154,19 +172,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": null,
    "id": "eef6b12f",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "Inputs: ['metadata', 'metadata.store_provenance', 'metadata.description', 'metadata.label', 'metadata.call_link_label', 'x', 'y', '_wait']\n",
-      "Outputs: ['sum', 'difference', '_outputs', '_wait']\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "# define add calcfunction node\n",
     "@node.calcfunction(outputs=[[\"General\", \"sum\"],\n",
@@ -200,29 +209,38 @@
     "\n",
     "\n",
     "#### Visualize the workgraph\n",
-    "If you are running in a Jupiter notebook, you can visualize the workgraph.\n",
+    "If you are running in a Jupiter notebook, you can visualize the workgraph by adding the following code to the last line of the cell:\n",
     "\n",
-    "<img src=\"_static/images/first-workflow.png\" />"
+    "```python\n",
+    "wg\n",
+    "```\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 3,
    "id": "8ee799d2-0b5b-4609-957f-6b3f2cd451f0",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "416be46a0f83461c91b4da034ec9cca1",
-       "version_major": 2,
-       "version_minor": 1
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"first_workflow.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'first_w…"
+       "<IPython.lib.display.IFrame at 0x730d819630d0>"
       ]
      },
-     "execution_count": 5,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -236,8 +254,10 @@
     "wg.nodes.new(multiply, name=\"multiply\", y=Int(4.0))\n",
     "wg.links.new(wg.nodes[\"add\"].outputs[0], wg.nodes[\"multiply\"].inputs[\"x\"])\n",
     "\n",
-    "# visualize the workgraph\n",
-    "wg"
+    "# export the workgraph to html file so that it can be visualized in a browser\n",
+    "wg.to_html()\n",
+    "# visualize the workgraph in jupyter-notebook\n",
+    "# wg"
    ]
   },
   {
@@ -250,21 +270,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": null,
    "id": "9ebf35aa",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "WorkGraph node created, PK: 44955\n",
-      "State of WorkGraph:   FINISHED\n",
-      "Result of add      : uuid: bf5b9b9a-e35b-453d-818e-9e9e18446c6e (pk: 44957) value: 5\n",
-      "Result of multiply : uuid: 7e58fd41-80d4-472a-b9bf-691674c621ea (pk: 44959) value: 20\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "wg.submit(wait=True)\n",
     "\n",
@@ -283,167 +292,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": null,
    "id": "0060e380",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "image/svg+xml": [
-       "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n",
-       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
-       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
-       "<!-- Generated by graphviz version 9.0.0 (20231125.0833)\n",
-       " -->\n",
-       "<!-- Pages: 1 -->\n",
-       "<svg width=\"984pt\" height=\"648pt\"\n",
-       " viewBox=\"0.00 0.00 984.02 647.75\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
-       "<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 643.75)\">\n",
-       "<polygon fill=\"white\" stroke=\"none\" points=\"-4,4 -4,-643.75 980.02,-643.75 980.02,4 -4,4\"/>\n",
-       "<!-- N44955 -->\n",
-       "<g id=\"node1\" class=\"node\">\n",
-       "<title>N44955</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"red\" stroke-width=\"6\" points=\"509.27,-533.25 227.77,-533.25 227.77,-473.5 509.27,-473.5 509.27,-533.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"368.52\" y=\"-515.95\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;first_workflow&gt; (44955)</text>\n",
-       "<text text-anchor=\"middle\" x=\"368.52\" y=\"-498.7\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"368.52\" y=\"-481.45\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44956 -->\n",
-       "<g id=\"node5\" class=\"node\">\n",
-       "<title>N44956</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"326.27,-403 206.77,-403 206.77,-343.25 326.27,-343.25 326.27,-403\"/>\n",
-       "<text text-anchor=\"middle\" x=\"266.52\" y=\"-385.7\" font-family=\"Times,serif\" font-size=\"14.00\">add (44956)</text>\n",
-       "<text text-anchor=\"middle\" x=\"266.52\" y=\"-368.45\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"266.52\" y=\"-351.2\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44955&#45;&gt;N44956 -->\n",
-       "<g id=\"edge4\" class=\"edge\">\n",
-       "<title>N44955&#45;&gt;N44956</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M283.42,-470.65C278.19,-466.22 273.53,-461.2 269.77,-455.5 261.85,-443.52 259.71,-428.24 260,-414.16\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"263.49,-414.43 260.64,-404.22 256.5,-413.98 263.49,-414.43\"/>\n",
-       "<text text-anchor=\"middle\" x=\"312.89\" y=\"-442.2\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"312.89\" y=\"-424.95\" font-family=\"Times,serif\" font-size=\"14.00\">add</text>\n",
-       "</g>\n",
-       "<!-- N44958 -->\n",
-       "<g id=\"node7\" class=\"node\">\n",
-       "<title>N44958</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"381.14,-166.25 245.89,-166.25 245.89,-106.5 381.14,-106.5 381.14,-166.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"313.52\" y=\"-148.95\" font-family=\"Times,serif\" font-size=\"14.00\">multiply (44958)</text>\n",
-       "<text text-anchor=\"middle\" x=\"313.52\" y=\"-131.7\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"313.52\" y=\"-114.45\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44955&#45;&gt;N44958 -->\n",
-       "<g id=\"edge5\" class=\"edge\">\n",
-       "<title>N44955&#45;&gt;N44958</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M373.8,-470.68C382.2,-411.78 393.91,-282.51 354.52,-184.25 353.31,-181.24 351.82,-178.29 350.14,-175.43\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"353.14,-173.63 344.62,-167.34 347.36,-177.57 353.14,-173.63\"/>\n",
-       "<text text-anchor=\"middle\" x=\"422.89\" y=\"-311.95\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"422.89\" y=\"-294.7\" font-family=\"Times,serif\" font-size=\"14.00\">multiply</text>\n",
-       "</g>\n",
-       "<!-- N44960 -->\n",
-       "<g id=\"node9\" class=\"node\">\n",
-       "<title>N44960</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"464.52\" cy=\"-373.12\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"464.52\" y=\"-368.45\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44960)</text>\n",
-       "</g>\n",
-       "<!-- N44955&#45;&gt;N44960 -->\n",
-       "<g id=\"edge8\" class=\"edge\">\n",
-       "<title>N44955&#45;&gt;N44960</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M392.25,-470.67C408.64,-448.77 430.16,-420.03 445.44,-399.61\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"448.09,-401.91 451.28,-391.81 442.49,-397.72 448.09,-401.91\"/>\n",
-       "<text text-anchor=\"middle\" x=\"485.27\" y=\"-442.2\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"485.27\" y=\"-424.95\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N44952 -->\n",
-       "<g id=\"node2\" class=\"node\">\n",
-       "<title>N44952</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"67.52\" cy=\"-621.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"67.52\" y=\"-617.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44952)</text>\n",
-       "</g>\n",
-       "<!-- N44952&#45;&gt;N44955 -->\n",
-       "<g id=\"edge3\" class=\"edge\">\n",
-       "<title>N44952&#45;&gt;N44955</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M67.42,-603.81C68.3,-587.85 72.28,-564.47 87.02,-551.25 106.77,-533.53 159.28,-522.43 213.68,-515.52\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"213.93,-519.01 223.43,-514.33 213.08,-512.07 213.93,-519.01\"/>\n",
-       "<text text-anchor=\"middle\" x=\"226.27\" y=\"-572.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"226.27\" y=\"-555.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add__properties__x__value</text>\n",
-       "</g>\n",
-       "<!-- N44953 -->\n",
-       "<g id=\"node3\" class=\"node\">\n",
-       "<title>N44953</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"368.52\" cy=\"-621.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"368.52\" y=\"-617.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44953)</text>\n",
-       "</g>\n",
-       "<!-- N44953&#45;&gt;N44955 -->\n",
-       "<g id=\"edge1\" class=\"edge\">\n",
-       "<title>N44953&#45;&gt;N44955</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M368.52,-604.08C368.52,-589.26 368.52,-566.95 368.52,-547.19\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"372.02,-547.44 368.52,-537.44 365.02,-547.44 372.02,-547.44\"/>\n",
-       "<text text-anchor=\"middle\" x=\"507.27\" y=\"-572.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"507.27\" y=\"-555.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N44954 -->\n",
-       "<g id=\"node4\" class=\"node\">\n",
-       "<title>N44954</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"669.52\" cy=\"-621.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"669.52\" y=\"-617.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44954)</text>\n",
-       "</g>\n",
-       "<!-- N44954&#45;&gt;N44955 -->\n",
-       "<g id=\"edge2\" class=\"edge\">\n",
-       "<title>N44954&#45;&gt;N44955</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M668.95,-603.76C667.45,-587.77 662.61,-564.37 647.52,-551.25 627.87,-534.18 576.69,-523.21 523.44,-516.22\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"523.92,-512.75 513.56,-514.97 523.05,-519.7 523.92,-512.75\"/>\n",
-       "<text text-anchor=\"middle\" x=\"820.77\" y=\"-572.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"820.77\" y=\"-555.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__multiply__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N44957 -->\n",
-       "<g id=\"node6\" class=\"node\">\n",
-       "<title>N44957</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"260.52\" cy=\"-254.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"260.52\" y=\"-250.07\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44957)</text>\n",
-       "</g>\n",
-       "<!-- N44956&#45;&gt;N44957 -->\n",
-       "<g id=\"edge9\" class=\"edge\">\n",
-       "<title>N44956&#45;&gt;N44957</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M265.03,-343.36C264.1,-325.31 262.91,-302.14 261.98,-284.16\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"265.48,-283.99 261.47,-274.18 258.49,-284.35 265.48,-283.99\"/>\n",
-       "<text text-anchor=\"middle\" x=\"294.52\" y=\"-311.95\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"294.52\" y=\"-294.7\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "<!-- N44957&#45;&gt;N44958 -->\n",
-       "<g id=\"edge6\" class=\"edge\">\n",
-       "<title>N44957&#45;&gt;N44958</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M256.87,-236.94C254.55,-222.33 253.22,-200.97 260.77,-184.25 262.21,-181.06 263.98,-178 266,-175.07\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"268.64,-177.38 272.21,-167.4 263.2,-172.97 268.64,-177.38\"/>\n",
-       "<text text-anchor=\"middle\" x=\"308.39\" y=\"-205.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"308.39\" y=\"-188.2\" font-family=\"Times,serif\" font-size=\"14.00\">x</text>\n",
-       "</g>\n",
-       "<!-- N44959 -->\n",
-       "<g id=\"node8\" class=\"node\">\n",
-       "<title>N44959</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"313.52\" cy=\"-18\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"313.52\" y=\"-13.32\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44959)</text>\n",
-       "</g>\n",
-       "<!-- N44958&#45;&gt;N44959 -->\n",
-       "<g id=\"edge7\" class=\"edge\">\n",
-       "<title>N44958&#45;&gt;N44959</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M313.52,-106.61C313.52,-88.56 313.52,-65.39 313.52,-47.41\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"317.02,-47.43 313.52,-37.43 310.02,-47.43 317.02,-47.43\"/>\n",
-       "<text text-anchor=\"middle\" x=\"343.52\" y=\"-75.2\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"343.52\" y=\"-57.95\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "</g>\n",
-       "</svg>\n"
-      ],
-      "text/plain": [
-       "<graphviz.graphs.Digraph at 0x73b31ff53050>"
-      ]
-     },
-     "execution_count": 7,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from aiida_workgraph.utils import generate_node_graph\n",
     "generate_node_graph(wg.pk)"
@@ -462,22 +314,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 16,
+   "execution_count": 12,
    "id": "f57573bd",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "8f2dc9d226ff4246a9a8a60a7edff0cf",
-       "version_major": 2,
-       "version_minor": 1
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"second_workflow.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'first_w…"
+       "<IPython.lib.display.IFrame at 0x730d412bbf10>"
       ]
      },
-     "execution_count": 16,
+     "execution_count": 12,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -495,10 +354,14 @@
     "def multiply(x, y):\n",
     "    return x*y\n",
     "\n",
-    "wg = WorkGraph(\"first_workflow\")\n",
+    "wg = WorkGraph(\"second_workflow\")\n",
     "wg.nodes.new(add, name=\"add\", run_remotely=True)\n",
     "wg.nodes.new(multiply, name=\"multiply\", x=wg.nodes[\"add\"].outputs[0], run_remotely=True)\n",
-    "wg"
+    "\n",
+    "# export the workgraph to html file so that it can be visualized in a browser\n",
+    "wg.to_html()\n",
+    "# visualize the workgraph in jupyter-notebook\n",
+    "# wg"
    ]
   },
   {
@@ -528,194 +391,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 17,
+   "execution_count": null,
    "id": "f6865793",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "WorkGraph node created, PK: 44961\n",
-      "\n",
-      "Result of multiply is uuid: 8e46221e-15b5-4d13-83c0-7be55d38eb11 (pk: 44978) value: 20 \n",
-      "\n",
-      "\n"
-     ]
-    },
-    {
-     "data": {
-      "image/svg+xml": [
-       "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n",
-       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
-       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
-       "<!-- Generated by graphviz version 9.0.0 (20231125.0833)\n",
-       " -->\n",
-       "<!-- Pages: 1 -->\n",
-       "<svg width=\"872pt\" height=\"589pt\"\n",
-       " viewBox=\"0.00 0.00 871.84 589.46\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
-       "<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 585.46)\">\n",
-       "<polygon fill=\"white\" stroke=\"none\" points=\"-4,4 -4,-585.46 867.84,-585.46 867.84,4 -4,4\"/>\n",
-       "<!-- N44961 -->\n",
-       "<g id=\"node1\" class=\"node\">\n",
-       "<title>N44961</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"red\" stroke-width=\"6\" points=\"797.07,-581.46 515.57,-581.46 515.57,-521.71 797.07,-521.71 797.07,-581.46\"/>\n",
-       "<text text-anchor=\"middle\" x=\"656.32\" y=\"-564.16\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;first_workflow&gt; (44961)</text>\n",
-       "<text text-anchor=\"middle\" x=\"656.32\" y=\"-546.91\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"656.32\" y=\"-529.66\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44967 -->\n",
-       "<g id=\"node2\" class=\"node\">\n",
-       "<title>N44967</title>\n",
-       "<polygon fill=\"#de707f\" stroke=\"black\" stroke-width=\"0\" points=\"546.82,-451.21 347.82,-451.21 347.82,-391.46 546.82,-391.46 546.82,-451.21\"/>\n",
-       "<text text-anchor=\"middle\" x=\"447.32\" y=\"-433.91\" font-family=\"Times,serif\" font-size=\"14.00\">PythonJob&lt;add&gt; (44967)</text>\n",
-       "<text text-anchor=\"middle\" x=\"447.32\" y=\"-416.66\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"447.32\" y=\"-399.41\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44961&#45;&gt;N44967 -->\n",
-       "<g id=\"edge1\" class=\"edge\">\n",
-       "<title>N44961&#45;&gt;N44967</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M585.06,-518.78C575.66,-514.01 566.28,-508.92 557.57,-503.71 534.84,-490.1 511.02,-472.93 491.36,-457.88\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"493.61,-455.18 483.56,-451.83 489.32,-460.72 493.61,-455.18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"600.69\" y=\"-490.41\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"600.69\" y=\"-473.16\" font-family=\"Times,serif\" font-size=\"14.00\">add</text>\n",
-       "</g>\n",
-       "<!-- N44975 -->\n",
-       "<g id=\"node6\" class=\"node\">\n",
-       "<title>N44975</title>\n",
-       "<polygon fill=\"#de707f\" stroke=\"black\" stroke-width=\"0\" points=\"717.32,-190.35 485.32,-190.35 485.32,-130.6 717.32,-130.6 717.32,-190.35\"/>\n",
-       "<text text-anchor=\"middle\" x=\"601.32\" y=\"-173.05\" font-family=\"Times,serif\" font-size=\"14.00\">PythonJob&lt;multiply&gt; (44975)</text>\n",
-       "<text text-anchor=\"middle\" x=\"601.32\" y=\"-155.8\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"601.32\" y=\"-138.55\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N44961&#45;&gt;N44975 -->\n",
-       "<g id=\"edge2\" class=\"edge\">\n",
-       "<title>N44961&#45;&gt;N44975</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M661.78,-518.94C671.07,-456.79 685.08,-315.5 642.32,-208.35 641.12,-205.34 639.63,-202.39 637.95,-199.53\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"640.96,-197.73 632.44,-191.44 635.17,-201.67 640.96,-197.73\"/>\n",
-       "<text text-anchor=\"middle\" x=\"714.69\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"714.69\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">multiply</text>\n",
-       "</g>\n",
-       "<!-- N44979 -->\n",
-       "<g id=\"node10\" class=\"node\">\n",
-       "<title>N44979</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"752.32\" cy=\"-421.33\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"752.32\" y=\"-416.66\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44979)</text>\n",
-       "</g>\n",
-       "<!-- N44961&#45;&gt;N44979 -->\n",
-       "<g id=\"edge6\" class=\"edge\">\n",
-       "<title>N44961&#45;&gt;N44979</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M680.05,-518.88C696.44,-496.98 717.96,-468.23 733.24,-447.82\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"735.89,-450.12 739.08,-440.02 730.29,-445.93 735.89,-450.12\"/>\n",
-       "<text text-anchor=\"middle\" x=\"774.07\" y=\"-490.41\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"774.07\" y=\"-473.16\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N44968 -->\n",
-       "<g id=\"node3\" class=\"node\">\n",
-       "<title>N44968</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"116.32\" cy=\"-290.91\" rx=\"116.32\" ry=\"30.05\"/>\n",
-       "<text text-anchor=\"middle\" x=\"116.32\" y=\"-294.86\" font-family=\"Times,serif\" font-size=\"14.00\">RemoteData (44968)</text>\n",
-       "<text text-anchor=\"middle\" x=\"116.32\" y=\"-277.61\" font-family=\"Times,serif\" font-size=\"14.00\">@localhost</text>\n",
-       "</g>\n",
-       "<!-- N44967&#45;&gt;N44968 -->\n",
-       "<g id=\"edge3\" class=\"edge\">\n",
-       "<title>N44967&#45;&gt;N44968</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M348.08,-393.88C327.86,-387.75 306.87,-380.83 287.57,-373.46 249.54,-358.93 208.31,-339.42 175.83,-323.12\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"177.46,-320.02 166.96,-318.63 174.31,-326.27 177.46,-320.02\"/>\n",
-       "<text text-anchor=\"middle\" x=\"338.19\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"338.19\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">remote_folder</text>\n",
-       "</g>\n",
-       "<!-- N44969 -->\n",
-       "<g id=\"node4\" class=\"node\">\n",
-       "<title>N44969</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"359.32\" cy=\"-290.91\" rx=\"109.08\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"359.32\" y=\"-286.23\" font-family=\"Times,serif\" font-size=\"14.00\">FolderData (44969)</text>\n",
-       "</g>\n",
-       "<!-- N44967&#45;&gt;N44969 -->\n",
-       "<g id=\"edge10\" class=\"edge\">\n",
-       "<title>N44967&#45;&gt;N44969</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M426.09,-391.47C421.81,-385.54 417.39,-379.32 413.32,-373.46 400.58,-355.08 386.66,-334.04 376.14,-317.93\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"379.29,-316.34 370.9,-309.87 373.42,-320.16 379.29,-316.34\"/>\n",
-       "<text text-anchor=\"middle\" x=\"446.32\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"446.32\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">retrieved</text>\n",
-       "</g>\n",
-       "<!-- N44970 -->\n",
-       "<g id=\"node5\" class=\"node\">\n",
-       "<title>N44970</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"554.32\" cy=\"-290.91\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"554.32\" y=\"-286.23\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44970)</text>\n",
-       "</g>\n",
-       "<!-- N44967&#45;&gt;N44970 -->\n",
-       "<g id=\"edge9\" class=\"edge\">\n",
-       "<title>N44967&#45;&gt;N44970</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M471.33,-391.51C489.9,-369.22 515.37,-338.66 533.17,-317.29\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"535.85,-319.54 539.56,-309.62 530.47,-315.06 535.85,-319.54\"/>\n",
-       "<text text-anchor=\"middle\" x=\"544.32\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"544.32\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "<!-- N44970&#45;&gt;N44975 -->\n",
-       "<g id=\"edge5\" class=\"edge\">\n",
-       "<title>N44970&#45;&gt;N44975</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M548.66,-273.16C543.89,-256.08 539.21,-229.2 548.57,-208.35 550,-205.16 551.78,-202.1 553.79,-199.17\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"556.43,-201.47 559.99,-191.5 550.99,-197.07 556.43,-201.47\"/>\n",
-       "<text text-anchor=\"middle\" x=\"596.19\" y=\"-229.55\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"596.19\" y=\"-212.3\" font-family=\"Times,serif\" font-size=\"14.00\">kwargs__x</text>\n",
-       "</g>\n",
-       "<!-- N44976 -->\n",
-       "<g id=\"node7\" class=\"node\">\n",
-       "<title>N44976</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"358.32\" cy=\"-30.05\" rx=\"116.32\" ry=\"30.05\"/>\n",
-       "<text text-anchor=\"middle\" x=\"358.32\" y=\"-34\" font-family=\"Times,serif\" font-size=\"14.00\">RemoteData (44976)</text>\n",
-       "<text text-anchor=\"middle\" x=\"358.32\" y=\"-16.75\" font-family=\"Times,serif\" font-size=\"14.00\">@localhost</text>\n",
-       "</g>\n",
-       "<!-- N44975&#45;&gt;N44976 -->\n",
-       "<g id=\"edge8\" class=\"edge\">\n",
-       "<title>N44975&#45;&gt;N44976</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M534.68,-130.63C522.24,-124.88 509.42,-118.73 497.57,-112.6 468.33,-97.49 436.6,-79.07 410.82,-63.56\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"412.91,-60.74 402.55,-58.56 409.29,-66.73 412.91,-60.74\"/>\n",
-       "<text text-anchor=\"middle\" x=\"548.19\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"548.19\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">remote_folder</text>\n",
-       "</g>\n",
-       "<!-- N44977 -->\n",
-       "<g id=\"node8\" class=\"node\">\n",
-       "<title>N44977</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"601.32\" cy=\"-30.05\" rx=\"109.08\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"601.32\" y=\"-25.38\" font-family=\"Times,serif\" font-size=\"14.00\">FolderData (44977)</text>\n",
-       "</g>\n",
-       "<!-- N44975&#45;&gt;N44977 -->\n",
-       "<g id=\"edge4\" class=\"edge\">\n",
-       "<title>N44975&#45;&gt;N44977</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M601.32,-130.66C601.32,-109.39 601.32,-80.59 601.32,-59.43\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"604.82,-59.48 601.32,-49.48 597.82,-59.48 604.82,-59.48\"/>\n",
-       "<text text-anchor=\"middle\" x=\"634.32\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"634.32\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">retrieved</text>\n",
-       "</g>\n",
-       "<!-- N44978 -->\n",
-       "<g id=\"node9\" class=\"node\">\n",
-       "<title>N44978</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"796.32\" cy=\"-30.05\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"796.32\" y=\"-25.38\" font-family=\"Times,serif\" font-size=\"14.00\">Int (44978)</text>\n",
-       "</g>\n",
-       "<!-- N44975&#45;&gt;N44978 -->\n",
-       "<g id=\"edge7\" class=\"edge\">\n",
-       "<title>N44975&#45;&gt;N44978</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M645.08,-130.66C680.8,-107.13 730.51,-74.39 763.04,-52.97\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"764.86,-55.96 771.29,-47.54 761.01,-50.11 764.86,-55.96\"/>\n",
-       "<text text-anchor=\"middle\" x=\"751.32\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"751.32\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "</g>\n",
-       "</svg>\n"
-      ],
-      "text/plain": [
-       "<graphviz.graphs.Digraph at 0x73b35daeae10>"
-      ]
-     },
-     "execution_count": 17,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from aiida_workgraph.utils import generate_node_graph\n",
     "\n",
@@ -754,34 +433,31 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 18,
+   "execution_count": 13,
    "id": "265dcd9f",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a7831ebabe0e49afa4a0c26f66787532",
-       "version_major": 2,
-       "version_minor": 1
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"third_workflow.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'first_w…"
+       "<IPython.lib.display.IFrame at 0x730d4127a690>"
       ]
      },
+     "execution_count": 13,
      "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "WorkGraph node created, PK: 44980\n",
-      "\n",
-      "Result of multiply is uuid: 62dcca06-9fbe-4fc5-b2a4-11673a8f7cd4 (pk: 44998) value: 17 \n",
-      "\n",
-      "\n"
-     ]
+     "output_type": "execute_result"
     }
    ],
    "source": [
@@ -801,15 +477,44 @@
     "        z = int(f.read())\n",
     "    return x*y + z\n",
     "\n",
-    "wg = WorkGraph(\"first_workflow\")\n",
+    "wg = WorkGraph(\"third_workflow\")\n",
     "wg.nodes.new(add, name=\"add\", run_remotely=True)\n",
     "wg.nodes.new(multiply, name=\"multiply\",\n",
     "             parent_folder=wg.nodes[\"add\"].outputs[\"remote_folder\"],\n",
     "             run_remotely=True,\n",
     "             )\n",
     "\n",
+    "wg.to_html()\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "83e7d2bc",
+   "metadata": {},
+   "source": [
+    "Submit the calculation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "c8323395",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "WorkGraph node created, PK: 49497\n",
+      "\n",
+      "Result of multiply is uuid: c0020724-b5bf-4e8b-8dbb-014e68999cc5 (pk: 49511) value: 17 \n",
+      "\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
     "#------------------------- Submit the calculation -------------------\n",
-    "display(wg)\n",
     "wg.submit(inputs = {\"add\": {\"x\": 2, \"y\": 3, \"computer\": \"localhost\"},\n",
     "                    \"multiply\": {\"x\": 3, \"y\": 4, \"computer\": \"localhost\"}},\n",
     "          wait=True)\n",
@@ -829,38 +534,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 19,
+   "execution_count": 10,
    "id": "d05167e6",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "d3f4ab991b4d4ced90ba33f607f166ee",
-       "version_major": 2,
-       "version_minor": 1
-      },
-      "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'test_ad…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "WorkGraph node created, PK: 45003\n"
-     ]
-    },
-    {
-     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"test_add_multiply.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "<WorkChainNode: uuid: 65453dff-54e4-4a46-8f76-d3d01d31da0d (pk: 45003) (aiida_workgraph.engine.workgraph.WorkGraphEngine)>"
+       "<IPython.lib.display.IFrame at 0x730d4146bd90>"
       ]
      },
-     "execution_count": 19,
+     "execution_count": 10,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -876,8 +572,7 @@
     "add1 = wg.nodes.new(ArithmeticAddCalculation, name=\"add1\", x=Int(2), y=Int(3), code=code)\n",
     "add2 = wg.nodes.new(ArithmeticAddCalculation, name=\"add2\", y=Int(3), code=code)\n",
     "wg.links.new(wg.nodes[\"add1\"].outputs[\"sum\"], wg.nodes[\"add2\"].inputs[\"x\"])\n",
-    "display(wg)\n",
-    "wg.submit(wait=True)"
+    "wg.to_html()\n"
    ]
   },
   {
@@ -885,12 +580,12 @@
    "id": "a357ba7e",
    "metadata": {},
    "source": [
-    "Get the result of the nodes:"
+    "Submit the workgraph and wait for the result."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 20,
+   "execution_count": 11,
    "id": "fbbb4f10",
    "metadata": {},
    "outputs": [
@@ -898,265 +593,22 @@
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "Result of node add1: uuid: 139bf2e4-ef2b-4368-b9f5-7fc87121be35 (pk: 45011) value: 8\n"
+      "WorkGraph node created, PK: 49516\n",
+      "Result of node add1: uuid: 7e3b768d-efdd-4d78-bc3d-289aa12df210 (pk: 49524) value: 8\n"
      ]
     }
    ],
    "source": [
+    "wg.submit(wait=True)\n",
     "print('Result of node add1: {}'.format(wg.nodes[\"add2\"].outputs[\"sum\"].value))"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 21,
+   "execution_count": null,
    "id": "dce628d4",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "/home/xing/miniconda3/envs/aiida/lib/python3.11/site-packages/aiida/orm/nodes/data/code/legacy.py:172: AiidaDeprecationWarning: `Code.get_description` method is deprecated, use the `description` property instead. (this will be removed in v3)\n",
-      "  warn_deprecation(\n"
-     ]
-    },
-    {
-     "data": {
-      "image/svg+xml": [
-       "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n",
-       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
-       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
-       "<!-- Generated by graphviz version 9.0.0 (20231125.0833)\n",
-       " -->\n",
-       "<!-- Pages: 1 -->\n",
-       "<svg width=\"1585pt\" height=\"696pt\"\n",
-       " viewBox=\"0.00 0.00 1585.34 695.96\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
-       "<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 691.96)\">\n",
-       "<polygon fill=\"white\" stroke=\"none\" points=\"-4,4 -4,-691.96 1581.34,-691.96 1581.34,4 -4,4\"/>\n",
-       "<!-- N45003 -->\n",
-       "<g id=\"node1\" class=\"node\">\n",
-       "<title>N45003</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"red\" stroke-width=\"6\" points=\"828.72,-581.46 520.97,-581.46 520.97,-521.71 828.72,-521.71 828.72,-581.46\"/>\n",
-       "<text text-anchor=\"middle\" x=\"674.84\" y=\"-564.16\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;test_add_multiply&gt; (45003)</text>\n",
-       "<text text-anchor=\"middle\" x=\"674.84\" y=\"-546.91\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"674.84\" y=\"-529.66\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45004 -->\n",
-       "<g id=\"node6\" class=\"node\">\n",
-       "<title>N45004</title>\n",
-       "<polygon fill=\"#de707f\" stroke=\"black\" stroke-width=\"0\" points=\"577.72,-451.21 317.97,-451.21 317.97,-391.46 577.72,-391.46 577.72,-451.21\"/>\n",
-       "<text text-anchor=\"middle\" x=\"447.84\" y=\"-433.91\" font-family=\"Times,serif\" font-size=\"14.00\">ArithmeticAddCalculation (45004)</text>\n",
-       "<text text-anchor=\"middle\" x=\"447.84\" y=\"-416.66\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"447.84\" y=\"-399.41\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45003&#45;&gt;N45004 -->\n",
-       "<g id=\"edge6\" class=\"edge\">\n",
-       "<title>N45003&#45;&gt;N45004</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M604.97,-518.73C595.18,-513.88 585.31,-508.8 576.09,-503.71 550.44,-489.55 522.89,-472.35 499.93,-457.42\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"501.93,-454.55 491.65,-452 498.1,-460.4 501.93,-454.55\"/>\n",
-       "<text text-anchor=\"middle\" x=\"619.22\" y=\"-490.41\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"619.22\" y=\"-473.16\" font-family=\"Times,serif\" font-size=\"14.00\">add1</text>\n",
-       "</g>\n",
-       "<!-- N45008 -->\n",
-       "<g id=\"node10\" class=\"node\">\n",
-       "<title>N45008</title>\n",
-       "<polygon fill=\"#de707f\" stroke=\"black\" stroke-width=\"0\" points=\"749.72,-190.35 489.97,-190.35 489.97,-130.6 749.72,-130.6 749.72,-190.35\"/>\n",
-       "<text text-anchor=\"middle\" x=\"619.84\" y=\"-173.05\" font-family=\"Times,serif\" font-size=\"14.00\">ArithmeticAddCalculation (45008)</text>\n",
-       "<text text-anchor=\"middle\" x=\"619.84\" y=\"-155.8\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"619.84\" y=\"-138.55\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45003&#45;&gt;N45008 -->\n",
-       "<g id=\"edge15\" class=\"edge\">\n",
-       "<title>N45003&#45;&gt;N45008</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M680.3,-518.94C689.6,-456.79 703.61,-315.5 660.84,-208.35 659.64,-205.34 658.16,-202.39 656.47,-199.53\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"659.48,-197.73 650.96,-191.44 653.7,-201.67 659.48,-197.73\"/>\n",
-       "<text text-anchor=\"middle\" x=\"733.22\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"733.22\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">add2</text>\n",
-       "</g>\n",
-       "<!-- N45012 -->\n",
-       "<g id=\"node14\" class=\"node\">\n",
-       "<title>N45012</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"770.84\" cy=\"-421.33\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"770.84\" y=\"-416.66\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45012)</text>\n",
-       "</g>\n",
-       "<!-- N45003&#45;&gt;N45012 -->\n",
-       "<g id=\"edge9\" class=\"edge\">\n",
-       "<title>N45003&#45;&gt;N45012</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M698.57,-518.88C714.97,-496.98 736.48,-468.23 751.77,-447.82\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"754.41,-450.12 757.61,-440.02 748.81,-445.93 754.41,-450.12\"/>\n",
-       "<text text-anchor=\"middle\" x=\"792.59\" y=\"-490.41\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"792.59\" y=\"-473.16\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N37 -->\n",
-       "<g id=\"node2\" class=\"node\">\n",
-       "<title>N37</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"173.84\" cy=\"-669.96\" rx=\"103.29\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"173.84\" y=\"-665.28\" font-family=\"Times,serif\" font-size=\"14.00\">InstalledCode (37)</text>\n",
-       "</g>\n",
-       "<!-- N37&#45;&gt;N45003 -->\n",
-       "<g id=\"edge2\" class=\"edge\">\n",
-       "<title>N37&#45;&gt;N45003</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M86,-660.51C51.72,-655.23 18.09,-646.9 7.59,-633.96 -2.07,-622.05 -2.86,-610.67 7.59,-599.46 41.01,-563.61 320.47,-554.66 506.97,-552.72\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"506.8,-556.22 516.76,-552.62 506.73,-549.22 506.8,-556.22\"/>\n",
-       "<text text-anchor=\"middle\" x=\"163.47\" y=\"-620.66\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"163.47\" y=\"-603.41\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add1__properties__code__value</text>\n",
-       "</g>\n",
-       "<!-- N37&#45;&gt;N45003 -->\n",
-       "<g id=\"edge5\" class=\"edge\">\n",
-       "<title>N37&#45;&gt;N45003</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M249.22,-657.72C272.36,-652.46 297.37,-644.86 318.84,-633.96 340,-623.22 337.97,-609.24 359.59,-599.46 405.07,-578.87 457.65,-566.97 506.68,-560.2\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"507.1,-563.67 516.56,-558.9 506.19,-556.73 507.1,-563.67\"/>\n",
-       "<text text-anchor=\"middle\" x=\"515.47\" y=\"-620.66\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"515.47\" y=\"-603.41\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add2__properties__code__value</text>\n",
-       "</g>\n",
-       "<!-- N45000 -->\n",
-       "<g id=\"node3\" class=\"node\">\n",
-       "<title>N45000</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"674.84\" cy=\"-669.96\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"674.84\" y=\"-665.28\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45000)</text>\n",
-       "</g>\n",
-       "<!-- N45000&#45;&gt;N45003 -->\n",
-       "<g id=\"edge1\" class=\"edge\">\n",
-       "<title>N45000&#45;&gt;N45003</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M674.84,-652.28C674.84,-637.47 674.84,-615.16 674.84,-595.4\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"678.34,-595.65 674.84,-585.65 671.34,-595.65 678.34,-595.65\"/>\n",
-       "<text text-anchor=\"middle\" x=\"818.09\" y=\"-620.66\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"818.09\" y=\"-603.41\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add1__properties__x__value</text>\n",
-       "</g>\n",
-       "<!-- N45001 -->\n",
-       "<g id=\"node4\" class=\"node\">\n",
-       "<title>N45001</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"984.84\" cy=\"-669.96\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"984.84\" y=\"-665.28\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45001)</text>\n",
-       "</g>\n",
-       "<!-- N45001&#45;&gt;N45003 -->\n",
-       "<g id=\"edge3\" class=\"edge\">\n",
-       "<title>N45001&#45;&gt;N45003</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M984.32,-652.25C982.87,-636.24 978.07,-612.62 962.84,-599.46 943.52,-582.76 894.74,-571.94 842.71,-564.96\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"843.43,-561.53 833.07,-563.73 842.54,-568.47 843.43,-561.53\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1124.09\" y=\"-620.66\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"1124.09\" y=\"-603.41\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add1__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N45002 -->\n",
-       "<g id=\"node5\" class=\"node\">\n",
-       "<title>N45002</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"1294.84\" cy=\"-669.96\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1294.84\" y=\"-665.28\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45002)</text>\n",
-       "</g>\n",
-       "<!-- N45002&#45;&gt;N45003 -->\n",
-       "<g id=\"edge4\" class=\"edge\">\n",
-       "<title>N45002&#45;&gt;N45003</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M1294.32,-652.26C1292.83,-636.02 1287.85,-612 1271.84,-599.46 1238.62,-573.42 1007.32,-561.55 842.6,-556.36\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"842.97,-552.87 832.87,-556.06 842.76,-559.86 842.97,-552.87\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1434.09\" y=\"-620.66\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"1434.09\" y=\"-603.41\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add2__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N45005 -->\n",
-       "<g id=\"node7\" class=\"node\">\n",
-       "<title>N45005</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"134.84\" cy=\"-290.91\" rx=\"116.32\" ry=\"30.05\"/>\n",
-       "<text text-anchor=\"middle\" x=\"134.84\" y=\"-294.86\" font-family=\"Times,serif\" font-size=\"14.00\">RemoteData (45005)</text>\n",
-       "<text text-anchor=\"middle\" x=\"134.84\" y=\"-277.61\" font-family=\"Times,serif\" font-size=\"14.00\">@localhost</text>\n",
-       "</g>\n",
-       "<!-- N45004&#45;&gt;N45005 -->\n",
-       "<g id=\"edge11\" class=\"edge\">\n",
-       "<title>N45004&#45;&gt;N45005</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M350.82,-391.57C334.08,-385.97 316.97,-379.85 301.09,-373.46 264.49,-358.73 224.78,-339.38 193.35,-323.23\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"195.28,-320.29 184.79,-318.8 192.07,-326.5 195.28,-320.29\"/>\n",
-       "<text text-anchor=\"middle\" x=\"351.72\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"351.72\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">remote_folder</text>\n",
-       "</g>\n",
-       "<!-- N45006 -->\n",
-       "<g id=\"node8\" class=\"node\">\n",
-       "<title>N45006</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"377.84\" cy=\"-290.91\" rx=\"109.08\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"377.84\" y=\"-286.23\" font-family=\"Times,serif\" font-size=\"14.00\">FolderData (45006)</text>\n",
-       "</g>\n",
-       "<!-- N45004&#45;&gt;N45006 -->\n",
-       "<g id=\"edge10\" class=\"edge\">\n",
-       "<title>N45004&#45;&gt;N45006</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M432.13,-391.51C420.27,-369.75 404.11,-340.1 392.51,-318.82\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"395.65,-317.26 387.79,-310.15 389.5,-320.61 395.65,-317.26\"/>\n",
-       "<text text-anchor=\"middle\" x=\"454.84\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"454.84\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">retrieved</text>\n",
-       "</g>\n",
-       "<!-- N45007 -->\n",
-       "<g id=\"node9\" class=\"node\">\n",
-       "<title>N45007</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"572.84\" cy=\"-290.91\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"572.84\" y=\"-286.23\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45007)</text>\n",
-       "</g>\n",
-       "<!-- N45004&#45;&gt;N45007 -->\n",
-       "<g id=\"edge8\" class=\"edge\">\n",
-       "<title>N45004&#45;&gt;N45007</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M475.9,-391.51C497.91,-368.89 528.22,-337.75 549.06,-316.34\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"551.56,-318.79 556.03,-309.18 546.55,-313.91 551.56,-318.79\"/>\n",
-       "<text text-anchor=\"middle\" x=\"555.84\" y=\"-360.16\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"555.84\" y=\"-342.91\" font-family=\"Times,serif\" font-size=\"14.00\">sum</text>\n",
-       "</g>\n",
-       "<!-- N45007&#45;&gt;N45008 -->\n",
-       "<g id=\"edge14\" class=\"edge\">\n",
-       "<title>N45007&#45;&gt;N45008</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M567.19,-273.16C562.42,-256.08 557.73,-229.2 567.09,-208.35 568.53,-205.16 570.3,-202.1 572.32,-199.17\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"574.95,-201.47 578.52,-191.5 569.51,-197.07 574.95,-201.47\"/>\n",
-       "<text text-anchor=\"middle\" x=\"614.72\" y=\"-229.55\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"614.72\" y=\"-212.3\" font-family=\"Times,serif\" font-size=\"14.00\">x</text>\n",
-       "</g>\n",
-       "<!-- N45009 -->\n",
-       "<g id=\"node11\" class=\"node\">\n",
-       "<title>N45009</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"376.84\" cy=\"-30.05\" rx=\"116.32\" ry=\"30.05\"/>\n",
-       "<text text-anchor=\"middle\" x=\"376.84\" y=\"-34\" font-family=\"Times,serif\" font-size=\"14.00\">RemoteData (45009)</text>\n",
-       "<text text-anchor=\"middle\" x=\"376.84\" y=\"-16.75\" font-family=\"Times,serif\" font-size=\"14.00\">@localhost</text>\n",
-       "</g>\n",
-       "<!-- N45008&#45;&gt;N45009 -->\n",
-       "<g id=\"edge13\" class=\"edge\">\n",
-       "<title>N45008&#45;&gt;N45009</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M553.21,-130.63C540.76,-124.88 527.95,-118.73 516.09,-112.6 486.85,-97.49 455.12,-79.07 429.34,-63.56\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"431.44,-60.74 421.07,-58.56 427.82,-66.73 431.44,-60.74\"/>\n",
-       "<text text-anchor=\"middle\" x=\"566.72\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"566.72\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">remote_folder</text>\n",
-       "</g>\n",
-       "<!-- N45010 -->\n",
-       "<g id=\"node12\" class=\"node\">\n",
-       "<title>N45010</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"619.84\" cy=\"-30.05\" rx=\"109.08\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"619.84\" y=\"-25.38\" font-family=\"Times,serif\" font-size=\"14.00\">FolderData (45010)</text>\n",
-       "</g>\n",
-       "<!-- N45008&#45;&gt;N45010 -->\n",
-       "<g id=\"edge7\" class=\"edge\">\n",
-       "<title>N45008&#45;&gt;N45010</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M619.84,-130.66C619.84,-109.39 619.84,-80.59 619.84,-59.43\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"623.34,-59.48 619.84,-49.48 616.34,-59.48 623.34,-59.48\"/>\n",
-       "<text text-anchor=\"middle\" x=\"652.84\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"652.84\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">retrieved</text>\n",
-       "</g>\n",
-       "<!-- N45011 -->\n",
-       "<g id=\"node13\" class=\"node\">\n",
-       "<title>N45011</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"814.84\" cy=\"-30.05\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"814.84\" y=\"-25.38\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45011)</text>\n",
-       "</g>\n",
-       "<!-- N45008&#45;&gt;N45011 -->\n",
-       "<g id=\"edge12\" class=\"edge\">\n",
-       "<title>N45008&#45;&gt;N45011</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M663.61,-130.66C699.32,-107.13 749.04,-74.39 781.57,-52.97\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"783.39,-55.96 789.81,-47.54 779.54,-50.11 783.39,-55.96\"/>\n",
-       "<text text-anchor=\"middle\" x=\"770.84\" y=\"-99.3\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"770.84\" y=\"-82.05\" font-family=\"Times,serif\" font-size=\"14.00\">sum</text>\n",
-       "</g>\n",
-       "</g>\n",
-       "</svg>\n"
-      ],
-      "text/plain": [
-       "<graphviz.graphs.Digraph at 0x73b31e58c050>"
-      ]
-     },
-     "execution_count": 21,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from aiida_workgraph.utils import generate_node_graph\n",
     "\n",
@@ -1179,7 +631,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 25,
+   "execution_count": null,
    "id": "7c9d6ed8",
    "metadata": {},
    "outputs": [],
@@ -1220,19 +672,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 26,
+   "execution_count": null,
    "id": "a4d961eb",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "WorkGraph node created, PK: 45025\n",
-      "Worktree state:  FINISHED\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "\n",
     "from aiida_workgraph import WorkGraph\n",
@@ -1258,373 +701,20 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": null,
    "id": "bccf4f63",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "Result of node add_multiply1: uuid: ae059be8-70f6-488e-a880-18412e07679b (pk: 45030) value: 20\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "print('Result of node add_multiply1: {}'.format(add_multiply1.outputs[\"result\"].value))"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 28,
+   "execution_count": null,
    "id": "788aea02",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "image/svg+xml": [
-       "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n",
-       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
-       " \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
-       "<!-- Generated by graphviz version 9.0.0 (20231125.0833)\n",
-       " -->\n",
-       "<!-- Pages: 1 -->\n",
-       "<svg width=\"1927pt\" height=\"1382pt\"\n",
-       " viewBox=\"0.00 0.00 1927.02 1381.75\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
-       "<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 1377.75)\">\n",
-       "<polygon fill=\"white\" stroke=\"none\" points=\"-4,4 -4,-1377.75 1923.02,-1377.75 1923.02,4 -4,4\"/>\n",
-       "<!-- N45025 -->\n",
-       "<g id=\"node1\" class=\"node\">\n",
-       "<title>N45025</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"red\" stroke-width=\"6\" points=\"969.64,-1267.25 669.39,-1267.25 669.39,-1207.5 969.64,-1207.5 969.64,-1267.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"819.52\" y=\"-1249.95\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;test_graph_build&gt; (45025)</text>\n",
-       "<text text-anchor=\"middle\" x=\"819.52\" y=\"-1232.7\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"819.52\" y=\"-1215.45\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45026 -->\n",
-       "<g id=\"node7\" class=\"node\">\n",
-       "<title>N45026</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"black\" stroke-width=\"0\" points=\"634.64,-1137 352.39,-1137 352.39,-1077.25 634.64,-1077.25 634.64,-1137\"/>\n",
-       "<text text-anchor=\"middle\" x=\"493.52\" y=\"-1119.7\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;add_multiply1&gt; (45026)</text>\n",
-       "<text text-anchor=\"middle\" x=\"493.52\" y=\"-1102.45\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"493.52\" y=\"-1085.2\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45025&#45;&gt;N45026 -->\n",
-       "<g id=\"edge11\" class=\"edge\">\n",
-       "<title>N45025&#45;&gt;N45026</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M738.51,-1204.51C689.5,-1185.23 627.11,-1160.68 577.55,-1141.19\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"578.86,-1137.94 568.27,-1137.53 576.3,-1144.45 578.86,-1137.94\"/>\n",
-       "<text text-anchor=\"middle\" x=\"746.14\" y=\"-1176.2\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"746.14\" y=\"-1158.95\" font-family=\"Times,serif\" font-size=\"14.00\">add_multiply1</text>\n",
-       "</g>\n",
-       "<!-- N45032 -->\n",
-       "<g id=\"node13\" class=\"node\">\n",
-       "<title>N45032</title>\n",
-       "<polygon fill=\"#e38851\" stroke=\"black\" stroke-width=\"0\" points=\"866.64,-533.25 584.39,-533.25 584.39,-473.5 866.64,-473.5 866.64,-533.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"725.52\" y=\"-515.95\" font-family=\"Times,serif\" font-size=\"14.00\">WorkGraph&lt;add_multiply2&gt; (45032)</text>\n",
-       "<text text-anchor=\"middle\" x=\"725.52\" y=\"-498.7\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"725.52\" y=\"-481.45\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45025&#45;&gt;N45032 -->\n",
-       "<g id=\"edge14\" class=\"edge\">\n",
-       "<title>N45025&#45;&gt;N45032</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M819.52,-1204.75C819.52,-1178.79 819.52,-1141.08 819.52,-1108.12 819.52,-1108.12 819.52,-1108.12 819.52,-620.75 819.52,-589.24 823.82,-576.9 805.52,-551.25 802.73,-547.34 799.51,-543.71 795.99,-540.34\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"798.34,-537.75 788.45,-533.93 793.8,-543.08 798.34,-537.75\"/>\n",
-       "<text text-anchor=\"middle\" x=\"870.14\" y=\"-862.45\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"870.14\" y=\"-845.2\" font-family=\"Times,serif\" font-size=\"14.00\">add_multiply2</text>\n",
-       "</g>\n",
-       "<!-- N45038 -->\n",
-       "<g id=\"node19\" class=\"node\">\n",
-       "<title>N45038</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"915.52\" cy=\"-1107.12\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"915.52\" y=\"-1102.45\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45038)</text>\n",
-       "</g>\n",
-       "<!-- N45025&#45;&gt;N45038 -->\n",
-       "<g id=\"edge19\" class=\"edge\">\n",
-       "<title>N45025&#45;&gt;N45038</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M843.25,-1204.67C859.64,-1182.77 881.16,-1154.03 896.44,-1133.61\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"899.09,-1135.91 902.28,-1125.81 893.49,-1131.72 899.09,-1135.91\"/>\n",
-       "<text text-anchor=\"middle\" x=\"937.27\" y=\"-1176.2\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"937.27\" y=\"-1158.95\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N45020 -->\n",
-       "<g id=\"node2\" class=\"node\">\n",
-       "<title>N45020</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"67.52\" cy=\"-1355.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"67.52\" y=\"-1351.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45020)</text>\n",
-       "</g>\n",
-       "<!-- N45020&#45;&gt;N45025 -->\n",
-       "<g id=\"edge1\" class=\"edge\">\n",
-       "<title>N45020&#45;&gt;N45025</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M67.88,-1338.01C69.21,-1321.74 74,-1297.71 90.02,-1285.25 133.53,-1251.42 453.9,-1241.92 655.35,-1239.3\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"655.18,-1242.81 665.13,-1239.18 655.09,-1235.81 655.18,-1242.81\"/>\n",
-       "<text text-anchor=\"middle\" x=\"266.77\" y=\"-1306.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"266.77\" y=\"-1289.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add_multiply1__properties__x__value</text>\n",
-       "</g>\n",
-       "<!-- N45021 -->\n",
-       "<g id=\"node3\" class=\"node\">\n",
-       "<title>N45021</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"443.52\" cy=\"-1355.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"443.52\" y=\"-1351.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45021)</text>\n",
-       "</g>\n",
-       "<!-- N45021&#45;&gt;N45025 -->\n",
-       "<g id=\"edge4\" class=\"edge\">\n",
-       "<title>N45021&#45;&gt;N45025</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M443.31,-1338C444.08,-1321.95 447.96,-1298.3 463.02,-1285.25 492.19,-1259.97 576.39,-1248.18 655.63,-1242.74\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"655.52,-1246.25 665.27,-1242.11 655.06,-1239.27 655.52,-1246.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"639.77\" y=\"-1306.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"639.77\" y=\"-1289.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add_multiply1__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N45022 -->\n",
-       "<g id=\"node4\" class=\"node\">\n",
-       "<title>N45022</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"819.52\" cy=\"-1355.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"819.52\" y=\"-1351.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45022)</text>\n",
-       "</g>\n",
-       "<!-- N45022&#45;&gt;N45025 -->\n",
-       "<g id=\"edge3\" class=\"edge\">\n",
-       "<title>N45022&#45;&gt;N45025</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M819.52,-1338.08C819.52,-1323.26 819.52,-1300.95 819.52,-1281.19\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"823.02,-1281.44 819.52,-1271.44 816.02,-1281.44 823.02,-1281.44\"/>\n",
-       "<text text-anchor=\"middle\" x=\"995.39\" y=\"-1306.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"995.39\" y=\"-1289.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add_multiply1__properties__z__value</text>\n",
-       "</g>\n",
-       "<!-- N45023 -->\n",
-       "<g id=\"node5\" class=\"node\">\n",
-       "<title>N45023</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"1194.52\" cy=\"-1355.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1194.52\" y=\"-1351.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45023)</text>\n",
-       "</g>\n",
-       "<!-- N45023&#45;&gt;N45025 -->\n",
-       "<g id=\"edge5\" class=\"edge\">\n",
-       "<title>N45023&#45;&gt;N45025</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M1194.07,-1337.95C1192.69,-1321.86 1187.93,-1298.18 1172.52,-1285.25 1143.52,-1260.91 1061.47,-1249.14 983.77,-1243.47\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"984.07,-1239.98 973.85,-1242.78 983.58,-1246.96 984.07,-1239.98\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1366.77\" y=\"-1306.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"1366.77\" y=\"-1289.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add_multiply2__properties__x__value</text>\n",
-       "</g>\n",
-       "<!-- N45024 -->\n",
-       "<g id=\"node6\" class=\"node\">\n",
-       "<title>N45024</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"1570.52\" cy=\"-1355.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1570.52\" y=\"-1351.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45024)</text>\n",
-       "</g>\n",
-       "<!-- N45024&#45;&gt;N45025 -->\n",
-       "<g id=\"edge2\" class=\"edge\">\n",
-       "<title>N45024&#45;&gt;N45025</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M1570.03,-1338C1568.57,-1321.72 1563.61,-1297.68 1547.52,-1285.25 1504.02,-1251.65 1184.77,-1242.06 983.74,-1239.37\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"984.02,-1235.88 973.98,-1239.25 983.93,-1242.88 984.02,-1235.88\"/>\n",
-       "<text text-anchor=\"middle\" x=\"1742.77\" y=\"-1306.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"1742.77\" y=\"-1289.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__add_multiply2__properties__y__value</text>\n",
-       "</g>\n",
-       "<!-- N45027 -->\n",
-       "<g id=\"node8\" class=\"node\">\n",
-       "<title>N45027</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"387.27,-1006.75 267.77,-1006.75 267.77,-947 387.27,-947 387.27,-1006.75\"/>\n",
-       "<text text-anchor=\"middle\" x=\"327.52\" y=\"-989.45\" font-family=\"Times,serif\" font-size=\"14.00\">add (45027)</text>\n",
-       "<text text-anchor=\"middle\" x=\"327.52\" y=\"-972.2\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"327.52\" y=\"-954.95\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45026&#45;&gt;N45027 -->\n",
-       "<g id=\"edge24\" class=\"edge\">\n",
-       "<title>N45026&#45;&gt;N45027</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M353.3,-1077.28C346.03,-1072.17 339.41,-1066.21 333.77,-1059.25 324.48,-1047.78 321.71,-1032.18 321.7,-1017.7\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"325.18,-1018.09 322.14,-1007.94 318.19,-1017.77 325.18,-1018.09\"/>\n",
-       "<text text-anchor=\"middle\" x=\"376.89\" y=\"-1045.95\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"376.89\" y=\"-1028.7\" font-family=\"Times,serif\" font-size=\"14.00\">add</text>\n",
-       "</g>\n",
-       "<!-- N45029 -->\n",
-       "<g id=\"node10\" class=\"node\">\n",
-       "<title>N45029</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"500.14,-770 364.89,-770 364.89,-710.25 500.14,-710.25 500.14,-770\"/>\n",
-       "<text text-anchor=\"middle\" x=\"432.52\" y=\"-752.7\" font-family=\"Times,serif\" font-size=\"14.00\">multiply (45029)</text>\n",
-       "<text text-anchor=\"middle\" x=\"432.52\" y=\"-735.45\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"432.52\" y=\"-718.2\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45026&#45;&gt;N45029 -->\n",
-       "<g id=\"edge16\" class=\"edge\">\n",
-       "<title>N45026&#45;&gt;N45029</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M478.4,-1077.42C468.95,-1058.02 457.46,-1031.52 451.52,-1006.75 432.74,-928.55 430.71,-833.98 431.34,-781.39\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"434.83,-781.47 431.5,-771.41 427.84,-781.35 434.83,-781.47\"/>\n",
-       "<text text-anchor=\"middle\" x=\"480.89\" y=\"-915.7\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"480.89\" y=\"-898.45\" font-family=\"Times,serif\" font-size=\"14.00\">multiply</text>\n",
-       "</g>\n",
-       "<!-- N45030 -->\n",
-       "<g id=\"node11\" class=\"node\">\n",
-       "<title>N45030</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"476.52\" cy=\"-621.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"476.52\" y=\"-617.08\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45030)</text>\n",
-       "</g>\n",
-       "<!-- N45026&#45;&gt;N45030 -->\n",
-       "<g id=\"edge8\" class=\"edge\">\n",
-       "<title>N45026&#45;&gt;N45030</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M590.26,-1077.42C597.87,-1072.31 604.81,-1066.31 610.52,-1059.25 633.59,-1030.72 624.52,-1014.57 624.52,-977.88 624.52,-977.88 624.52,-977.88 624.52,-739.12 624.52,-689.1 571.63,-657.3 529.09,-639.81\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"530.53,-636.62 519.94,-636.22 527.97,-643.13 530.53,-636.62\"/>\n",
-       "<text text-anchor=\"middle\" x=\"704.02\" y=\"-862.45\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"704.02\" y=\"-845.2\" font-family=\"Times,serif\" font-size=\"14.00\">group_outputs__result</text>\n",
-       "</g>\n",
-       "<!-- N45031 -->\n",
-       "<g id=\"node12\" class=\"node\">\n",
-       "<title>N45031</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"528.52\" cy=\"-976.88\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"528.52\" y=\"-972.2\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45031)</text>\n",
-       "</g>\n",
-       "<!-- N45026&#45;&gt;N45031 -->\n",
-       "<g id=\"edge6\" class=\"edge\">\n",
-       "<title>N45026&#45;&gt;N45031</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M489.96,-1077.56C488.98,-1061.63 489.43,-1041.65 495.02,-1024.75 497.51,-1017.22 501.67,-1009.86 506.23,-1003.28\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"508.88,-1005.58 512.13,-995.49 503.3,-1001.35 508.88,-1005.58\"/>\n",
-       "<text text-anchor=\"middle\" x=\"553.27\" y=\"-1045.95\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"553.27\" y=\"-1028.7\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N45028 -->\n",
-       "<g id=\"node9\" class=\"node\">\n",
-       "<title>N45028</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"324.52\" cy=\"-858.5\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"324.52\" y=\"-853.83\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45028)</text>\n",
-       "</g>\n",
-       "<!-- N45027&#45;&gt;N45028 -->\n",
-       "<g id=\"edge7\" class=\"edge\">\n",
-       "<title>N45027&#45;&gt;N45028</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M326.78,-947.11C326.31,-929.06 325.71,-905.89 325.25,-887.91\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"328.75,-887.84 324.99,-877.93 321.75,-888.02 328.75,-887.84\"/>\n",
-       "<text text-anchor=\"middle\" x=\"356.52\" y=\"-915.7\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"356.52\" y=\"-898.45\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "<!-- N45028&#45;&gt;N45029 -->\n",
-       "<g id=\"edge9\" class=\"edge\">\n",
-       "<title>N45028&#45;&gt;N45029</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M319.74,-840.58C316.54,-825.52 314.55,-803.52 324.77,-788 332.17,-776.75 342.92,-768.19 354.8,-761.67\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"356.2,-764.88 363.64,-757.33 353.12,-758.6 356.2,-764.88\"/>\n",
-       "<text text-anchor=\"middle\" x=\"372.39\" y=\"-809.2\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"372.39\" y=\"-791.95\" font-family=\"Times,serif\" font-size=\"14.00\">y</text>\n",
-       "</g>\n",
-       "<!-- N45029&#45;&gt;N45030 -->\n",
-       "<g id=\"edge17\" class=\"edge\">\n",
-       "<title>N45029&#45;&gt;N45030</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M443.39,-710.36C450.36,-691.94 459.34,-668.18 466.19,-650.06\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"469.45,-651.34 469.71,-640.75 462.9,-648.87 469.45,-651.34\"/>\n",
-       "<text text-anchor=\"middle\" x=\"492.52\" y=\"-678.95\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"492.52\" y=\"-661.7\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "<!-- N45030&#45;&gt;N45032 -->\n",
-       "<g id=\"edge22\" class=\"edge\">\n",
-       "<title>N45030&#45;&gt;N45032</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M476.26,-603.94C476.98,-588.08 480.66,-564.78 495.02,-551.25 507.95,-539.07 538.71,-529.75 573.69,-522.76\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"574.01,-526.26 583.18,-520.95 572.7,-519.39 574.01,-526.26\"/>\n",
-       "<text text-anchor=\"middle\" x=\"650.77\" y=\"-572.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_WORK</text>\n",
-       "<text text-anchor=\"middle\" x=\"650.77\" y=\"-555.2\" font-family=\"Times,serif\" font-size=\"14.00\">wg__nodes__multiply__properties__x__value</text>\n",
-       "</g>\n",
-       "<!-- N45035 -->\n",
-       "<g id=\"node16\" class=\"node\">\n",
-       "<title>N45035</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"674.14,-166.25 538.89,-166.25 538.89,-106.5 674.14,-106.5 674.14,-166.25\"/>\n",
-       "<text text-anchor=\"middle\" x=\"606.52\" y=\"-148.95\" font-family=\"Times,serif\" font-size=\"14.00\">multiply (45035)</text>\n",
-       "<text text-anchor=\"middle\" x=\"606.52\" y=\"-131.7\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"606.52\" y=\"-114.45\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45030&#45;&gt;N45035 -->\n",
-       "<g id=\"edge13\" class=\"edge\">\n",
-       "<title>N45030&#45;&gt;N45035</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M472.73,-603.89C467.99,-581.34 460.52,-540.06 460.52,-504.38 460.52,-504.38 460.52,-504.38 460.52,-253.75 460.52,-213.9 494.19,-185.48 529.19,-166.71\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"530.41,-170.02 537.72,-162.36 527.23,-163.79 530.41,-170.02\"/>\n",
-       "<text text-anchor=\"middle\" x=\"507.39\" y=\"-377.07\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"507.39\" y=\"-359.82\" font-family=\"Times,serif\" font-size=\"14.00\">x</text>\n",
-       "</g>\n",
-       "<!-- N45033 -->\n",
-       "<g id=\"node14\" class=\"node\">\n",
-       "<title>N45033</title>\n",
-       "<polygon fill=\"#de707f\" fill-opacity=\"0.466667\" stroke=\"black\" stroke-width=\"0\" points=\"730.27,-403 610.77,-403 610.77,-343.25 730.27,-343.25 730.27,-403\"/>\n",
-       "<text text-anchor=\"middle\" x=\"670.52\" y=\"-385.7\" font-family=\"Times,serif\" font-size=\"14.00\">add (45033)</text>\n",
-       "<text text-anchor=\"middle\" x=\"670.52\" y=\"-368.45\" font-family=\"Times,serif\" font-size=\"14.00\">State: finished</text>\n",
-       "<text text-anchor=\"middle\" x=\"670.52\" y=\"-351.2\" font-family=\"Times,serif\" font-size=\"14.00\">Exit Code: 0</text>\n",
-       "</g>\n",
-       "<!-- N45032&#45;&gt;N45033 -->\n",
-       "<g id=\"edge15\" class=\"edge\">\n",
-       "<title>N45032&#45;&gt;N45033</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M686.38,-473.6C681.33,-468.16 676.85,-462.09 673.77,-455.5 667.83,-442.79 666,-427.71 666,-414.01\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"669.48,-414.52 666.32,-404.41 662.48,-414.29 669.48,-414.52\"/>\n",
-       "<text text-anchor=\"middle\" x=\"716.89\" y=\"-442.2\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"716.89\" y=\"-424.95\" font-family=\"Times,serif\" font-size=\"14.00\">add</text>\n",
-       "</g>\n",
-       "<!-- N45032&#45;&gt;N45035 -->\n",
-       "<g id=\"edge12\" class=\"edge\">\n",
-       "<title>N45032&#45;&gt;N45035</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"1,5\" d=\"M673.48,-473.66C647.59,-456.58 618.31,-432.49 601.52,-403 561.04,-331.9 579.05,-231.8 593.94,-177.03\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"597.28,-178.08 596.63,-167.51 590.54,-176.18 597.28,-178.08\"/>\n",
-       "<text text-anchor=\"middle\" x=\"620.89\" y=\"-311.95\" font-family=\"Times,serif\" font-size=\"14.00\">CALL_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"620.89\" y=\"-294.7\" font-family=\"Times,serif\" font-size=\"14.00\">multiply</text>\n",
-       "</g>\n",
-       "<!-- N45036 -->\n",
-       "<g id=\"node17\" class=\"node\">\n",
-       "<title>N45036</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"800.52\" cy=\"-18\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"800.52\" y=\"-13.32\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45036)</text>\n",
-       "</g>\n",
-       "<!-- N45032&#45;&gt;N45036 -->\n",
-       "<g id=\"edge23\" class=\"edge\">\n",
-       "<title>N45032&#45;&gt;N45036</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M866.41,-479.26C878.02,-473.03 888.67,-465.24 897.52,-455.5 922.2,-428.34 911.52,-410.82 911.52,-374.12 911.52,-374.12 911.52,-374.12 911.52,-135.38 911.52,-92.74 872.02,-59.56 840.15,-39.73\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"842.24,-36.9 831.86,-34.78 838.65,-42.91 842.24,-36.9\"/>\n",
-       "<text text-anchor=\"middle\" x=\"991.02\" y=\"-258.7\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"991.02\" y=\"-241.45\" font-family=\"Times,serif\" font-size=\"14.00\">group_outputs__result</text>\n",
-       "</g>\n",
-       "<!-- N45037 -->\n",
-       "<g id=\"node18\" class=\"node\">\n",
-       "<title>N45037</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"815.52\" cy=\"-373.12\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"815.52\" y=\"-368.45\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45037)</text>\n",
-       "</g>\n",
-       "<!-- N45032&#45;&gt;N45037 -->\n",
-       "<g id=\"edge21\" class=\"edge\">\n",
-       "<title>N45032&#45;&gt;N45037</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" stroke-dasharray=\"5,2\" d=\"M745.83,-473.67C750.04,-467.68 754.44,-461.39 758.52,-455.5 769.08,-440.25 771.4,-436.21 782.02,-421 786.9,-414.01 792.24,-406.47 797.2,-399.53\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"799.78,-401.94 802.76,-391.78 794.09,-397.87 799.78,-401.94\"/>\n",
-       "<text text-anchor=\"middle\" x=\"840.27\" y=\"-442.2\" font-family=\"Times,serif\" font-size=\"14.00\">RETURN</text>\n",
-       "<text text-anchor=\"middle\" x=\"840.27\" y=\"-424.95\" font-family=\"Times,serif\" font-size=\"14.00\">execution_count</text>\n",
-       "</g>\n",
-       "<!-- N45034 -->\n",
-       "<g id=\"node15\" class=\"node\">\n",
-       "<title>N45034</title>\n",
-       "<ellipse fill=\"#8cd499\" stroke=\"black\" stroke-width=\"0\" cx=\"684.52\" cy=\"-254.75\" rx=\"67.52\" ry=\"18\"/>\n",
-       "<text text-anchor=\"middle\" x=\"684.52\" y=\"-250.07\" font-family=\"Times,serif\" font-size=\"14.00\">Int (45034)</text>\n",
-       "</g>\n",
-       "<!-- N45033&#45;&gt;N45034 -->\n",
-       "<g id=\"edge20\" class=\"edge\">\n",
-       "<title>N45033&#45;&gt;N45034</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M673.98,-343.36C676.16,-325.22 678.96,-301.92 681.13,-283.9\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"684.58,-284.52 682.3,-274.17 677.63,-283.68 684.58,-284.52\"/>\n",
-       "<text text-anchor=\"middle\" x=\"710.52\" y=\"-311.95\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"710.52\" y=\"-294.7\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "<!-- N45034&#45;&gt;N45035 -->\n",
-       "<g id=\"edge18\" class=\"edge\">\n",
-       "<title>N45034&#45;&gt;N45035</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M673.34,-237.08C662.65,-221.12 646.14,-196.49 632.2,-175.7\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"635.13,-173.77 626.65,-167.42 629.31,-177.67 635.13,-173.77\"/>\n",
-       "<text text-anchor=\"middle\" x=\"706.39\" y=\"-205.45\" font-family=\"Times,serif\" font-size=\"14.00\">INPUT_CALC</text>\n",
-       "<text text-anchor=\"middle\" x=\"706.39\" y=\"-188.2\" font-family=\"Times,serif\" font-size=\"14.00\">y</text>\n",
-       "</g>\n",
-       "<!-- N45035&#45;&gt;N45036 -->\n",
-       "<g id=\"edge10\" class=\"edge\">\n",
-       "<title>N45035&#45;&gt;N45036</title>\n",
-       "<path fill=\"none\" stroke=\"#000000\" d=\"M654.47,-106.61C688.69,-86.08 733.97,-58.92 764.98,-40.32\"/>\n",
-       "<polygon fill=\"#000000\" stroke=\"#000000\" points=\"766.45,-43.52 773.22,-35.37 762.85,-37.52 766.45,-43.52\"/>\n",
-       "<text text-anchor=\"middle\" x=\"768.52\" y=\"-75.2\" font-family=\"Times,serif\" font-size=\"14.00\">CREATE</text>\n",
-       "<text text-anchor=\"middle\" x=\"768.52\" y=\"-57.95\" font-family=\"Times,serif\" font-size=\"14.00\">result</text>\n",
-       "</g>\n",
-       "</g>\n",
-       "</svg>\n"
-      ],
-      "text/plain": [
-       "<graphviz.graphs.Digraph at 0x73b35436fad0>"
-      ]
-     },
-     "execution_count": 28,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "generate_node_graph(wg.pk)"
    ]
@@ -1655,12 +745,6 @@
     "| [Tutorials](tutorial/index.rst)                        | Real-world examples in computational materials science and more.                     |\n",
     "| [HowTo](howto/index.rst)                              | Advanced topics and tips, e.g flow control using `if`, `for`, `while` and `context`.    |"
    ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "6ff140c8",
-   "metadata": {},
-   "source": []
   }
  ],
  "metadata": {
diff --git a/docs/source/relax_eos.html b/docs/source/relax_eos.html
new file mode 100644
index 00000000..f9d0d4eb
--- /dev/null
+++ b/docs/source/relax_eos.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "relax_eos", "uuid": "51f790f8-1dfb-11ef-aed6-906584de3e5b", "state": "CREATED", "nodes": {"relax1": {"label": "relax1", "inputs": [{"name": "structure", "identifier": "General", "uuid": "51fa2570-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "51fa0b4e-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parameters", "identifier": "General", "uuid": "51fa262e-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "51fa0b4e-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pseudos", "identifier": "General", "uuid": "51fa2930-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "51fa0b4e-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "kpoints", "identifier": "General", "uuid": "51fa35c4-1dfb-11ef-aed6-906584de3e5b", "node_uuid": "51fa0b4e-1dfb-11ef-aed6-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "output_structure"}], "position": [30, 30]}, "eos1": {"label": "eos1", "inputs": [{"name": "structure"}], "outputs": [], "position": [60, 60]}}, "links": [{"from_socket": "output_structure", "from_node": "relax1", "from_socket_uuid": "51fa3c22-1dfb-11ef-aed6-906584de3e5b", "to_socket": "structure", "to_node": "eos1", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/second_workflow.html b/docs/source/second_workflow.html
new file mode 100644
index 00000000..c9c4b6cd
--- /dev/null
+++ b/docs/source/second_workflow.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "second_workflow", "uuid": "7121f30c-1dfa-11ef-bdc8-906584de3e5b", "state": "CREATED", "nodes": {"add": {"label": "add", "inputs": [{"name": "x", "identifier": "General", "uuid": "71243504-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "71243338-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "712435e0-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "71243338-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result"}], "position": [30, 30]}, "multiply": {"label": "multiply", "inputs": [{"name": "x", "identifier": "General", "uuid": "71265820-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "71265618-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add", "from_socket": "result", "from_socket_uuid": "71244e0e-1dfa-11ef-bdc8-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "7126591a-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "71265618-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [], "position": [60, 60]}}, "links": [{"from_socket": "result", "from_node": "add", "from_socket_uuid": "71244e0e-1dfa-11ef-bdc8-906584de3e5b", "to_socket": "x", "to_node": "multiply", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/test_add_multiply.html b/docs/source/test_add_multiply.html
new file mode 100644
index 00000000..eb99bd18
--- /dev/null
+++ b/docs/source/test_add_multiply.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "test_add_multiply", "uuid": "3b759056-1dfa-11ef-bdc8-906584de3e5b", "state": "CREATED", "nodes": {"add1": {"label": "add1", "inputs": [{"name": "x", "identifier": "General", "uuid": "3b77dfdc-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "3b77ce02-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "3b77e054-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "3b77ce02-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "sum"}], "position": [30, 30]}, "add2": {"label": "add2", "inputs": [{"name": "x", "identifier": "General", "uuid": "3b7a0ba4-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "3b79f9fc-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add1", "from_socket": "sum", "from_socket_uuid": "3b77e20c-1dfa-11ef-bdc8-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "3b7a0c12-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "3b79f9fc-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [], "position": [60, 60]}}, "links": [{"from_socket": "sum", "from_node": "add1", "from_socket_uuid": "3b77e20c-1dfa-11ef-bdc8-906584de3e5b", "to_socket": "x", "to_node": "add2", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/third_workflow.html b/docs/source/third_workflow.html
new file mode 100644
index 00000000..c4e5ad6f
--- /dev/null
+++ b/docs/source/third_workflow.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "third_workflow", "uuid": "788e01b2-1dfa-11ef-bdc8-906584de3e5b", "state": "CREATED", "nodes": {"add": {"label": "add", "inputs": [{"name": "x", "identifier": "General", "uuid": "7890233e-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "789021cc-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "78902410-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "789021cc-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "remote_folder"}], "position": [30, 30]}, "multiply": {"label": "multiply", "inputs": [{"name": "x", "identifier": "General", "uuid": "7892618a-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "78926004-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "General", "uuid": "7892625c-1dfa-11ef-bdc8-906584de3e5b", "node_uuid": "78926004-1dfa-11ef-bdc8-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parent_folder"}], "outputs": [], "position": [60, 60]}}, "links": [{"from_socket": "remote_folder", "from_node": "add", "from_socket_uuid": "78904134-1dfa-11ef-bdc8-906584de3e5b", "to_socket": "parent_folder", "to_node": "multiply", "state": false}]}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/tutorial/eos.ipynb b/docs/source/tutorial/eos.ipynb
index 84e5aa7d..bd00ee5d 100644
--- a/docs/source/tutorial/eos.ipynb
+++ b/docs/source/tutorial/eos.ipynb
@@ -83,7 +83,7 @@
     "- link the output and input sockets for the nodes.\n",
     "\n",
     "### Visualize the workgraph\n",
-    "If you are running in a Jupiter notebook, you can visualize the workgraph directly."
+    "If you are running in a jupyter notebook, you can visualize the workgraph directly."
    ]
   },
   {
diff --git a/docs/source/tutorial/pw1.html b/docs/source/tutorial/pw1.html
new file mode 100644
index 00000000..52611ba8
--- /dev/null
+++ b/docs/source/tutorial/pw1.html
@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rete.js with React in Vanilla JS</title>
+    <!-- Import React, ReactDOM, and Babel from CDN -->
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.2.0/umd/react-is.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.6/dist/styled-components.min.js"></script>
+    <script src="https://unpkg.com/elkjs@0.8.2/lib/elk.bundled.js"></script>
+
+    <!-- Import Rete.js and its plugins from CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/rete@2.0.3/rete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-area-plugin@2.0.3/rete-area-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@2.0.2/rete-connection-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-render-utils@2.0.2/rete-render-utils.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-react-plugin@2.0.5/rete-react-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-auto-arrange-plugin@2.0.1/rete-auto-arrange-plugin.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rete-minimap-plugin@2.0.1/rete-minimap-plugin.min.js"></script>
+
+    <style>
+        .App {
+            font-family: sans-serif;
+	          background: rgb(200, 190, 190);
+        }
+        .rete {
+	        position: relative;
+	        font-size: 1rem;
+	        margin: 1em;
+	        border-radius: 1em;
+	        text-align: left;
+        }
+        body {
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+
+        const { useState, useRef, useEffect } = React;
+        const { createRoot } = ReactDOM;
+        const { NodeEditor, ClassicPreset } = Rete;
+        const { AreaPlugin, AreaExtensions } = ReteAreaPlugin;
+        const { ConnectionPlugin, Presets: ConnectionPresets } = ReteConnectionPlugin;
+        const { ReactPlugin, Presets } = ReteReactPlugin;
+        const { AutoArrangePlugin, Presets: ArrangePresets, ArrangeAppliers} = ReteAutoArrangePlugin;
+        const { MinimapExtra, MinimapPlugin } = ReteMinimapPlugin;
+        const { RenderUtils } = ReteRenderUtils;
+        const styled = window.styled;
+
+        const workgraphData = {"name": "pw1", "nodes": {"pw1": {"version": "node_graph@0.0.1", "uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "name": "pw1", "inner_id": 1, "state": "CREATED", "action": "NONE", "error": "", "metadata": {"node_type": "CALCJOB", "catalog": "Others", "identifier": "PwCalculation", "parent_uuid": "a167f64c-1dfa-11ef-8c18-906584de3e5b", "platform": "node_graph", "args": ["structure", "parameters", "pseudos", "kpoints"], "kwargs": ["metadata", "metadata.store_provenance", "metadata.description", "metadata.label", "metadata.call_link_label", "metadata.dry_run", "metadata.computer", "metadata.options", "metadata.options.input_filename", "metadata.options.output_filename", "metadata.options.submit_script_filename", "metadata.options.scheduler_stdout", "metadata.options.scheduler_stderr", "metadata.options.resources", "metadata.options.max_wallclock_seconds", "metadata.options.custom_scheduler_commands", "metadata.options.queue_name", "metadata.options.rerunnable", "metadata.options.account", "metadata.options.qos", "metadata.options.withmpi", "metadata.options.mpirun_extra_params", "metadata.options.import_sys_environment", "metadata.options.environment_variables", "metadata.options.environment_variables_double_quotes", "metadata.options.priority", "metadata.options.max_memory_kb", "metadata.options.prepend_text", "metadata.options.append_text", "metadata.options.parser_name", "metadata.options.additional_retrieve_list", "metadata.options.stash", "metadata.options.stash.target_base", "metadata.options.stash.source_list", "metadata.options.stash.stash_mode", "metadata.options.without_xml", "code", "monitors", "remote_folder", "settings", "parent_folder", "vdw_table", "parallelization", "hubbard_file"], "var_args": null, "var_kwargs": null, "group_properties": [], "group_inputs": [], "group_outputs": [], "hash": "a16ca5f2-1dfa-11ef-8c18-906584de3e5b", "pk": null, "is_aiida_component": true}, "inputs": [{"name": "metadata", "identifier": "General", "uuid": "a16a569e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.store_provenance", "identifier": "General", "uuid": "a16a57a2-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.description", "identifier": "General", "uuid": "a16a5824-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.label", "identifier": "General", "uuid": "a16a5892-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.call_link_label", "identifier": "General", "uuid": "a16a58ec-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.dry_run", "identifier": "General", "uuid": "a16a5964-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.computer", "identifier": "General", "uuid": "a16a59dc-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options", "identifier": "General", "uuid": "a16a5a90-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.input_filename", "identifier": "General", "uuid": "a16a5b30-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.output_filename", "identifier": "General", "uuid": "a16a5b94-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.submit_script_filename", "identifier": "General", "uuid": "a16a5bf8-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.scheduler_stdout", "identifier": "General", "uuid": "a16a5c48-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.scheduler_stderr", "identifier": "General", "uuid": "a16a5cac-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.resources", "identifier": "General", "uuid": "a16a5d10-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.max_wallclock_seconds", "identifier": "General", "uuid": "a16a5d6a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.custom_scheduler_commands", "identifier": "General", "uuid": "a16a5dba-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.queue_name", "identifier": "General", "uuid": "a16a5e0a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.rerunnable", "identifier": "General", "uuid": "a16a5e6e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.account", "identifier": "General", "uuid": "a16a5ec8-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.qos", "identifier": "General", "uuid": "a16a5f22-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.withmpi", "identifier": "General", "uuid": "a16a5f7c-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.mpirun_extra_params", "identifier": "General", "uuid": "a16a5fcc-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.import_sys_environment", "identifier": "General", "uuid": "a16a6026-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.environment_variables", "identifier": "General", "uuid": "a16a608a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.environment_variables_double_quotes", "identifier": "General", "uuid": "a16a60e4-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.priority", "identifier": "General", "uuid": "a16a613e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.max_memory_kb", "identifier": "General", "uuid": "a16a6198-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.prepend_text", "identifier": "General", "uuid": "a16a61fc-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.append_text", "identifier": "General", "uuid": "a16a626a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.parser_name", "identifier": "General", "uuid": "a16a62ce-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.additional_retrieve_list", "identifier": "General", "uuid": "a16a633c-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.stash", "identifier": "General", "uuid": "a16a63aa-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.stash.target_base", "identifier": "General", "uuid": "a16a6422-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.stash.source_list", "identifier": "General", "uuid": "a16a6486-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.stash.stash_mode", "identifier": "General", "uuid": "a16a64ea-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "metadata.options.without_xml", "identifier": "General", "uuid": "a16a6558-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "code", "identifier": "General", "uuid": "a16a65bc-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "monitors", "identifier": "General", "uuid": "a16a662a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "remote_folder", "identifier": "General", "uuid": "a16a66a2-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "structure", "identifier": "General", "uuid": "a16a6710-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parameters", "identifier": "General", "uuid": "a16a6774-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "settings", "identifier": "General", "uuid": "a16a67ec-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parent_folder", "identifier": "General", "uuid": "a16a6864-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "vdw_table", "identifier": "General", "uuid": "a16a68c8-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "pseudos", "identifier": "General", "uuid": "a16a6936-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "parallelization", "identifier": "General", "uuid": "a16a69ae-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "kpoints", "identifier": "General", "uuid": "a16a6a26-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "hubbard_file", "identifier": "General", "uuid": "a16a6a9e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_wait", "identifier": "General", "uuid": "a16a6b16-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1000000.0, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "remote_folder", "identifier": "General", "uuid": "a16a6b8e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "remote_stash", "identifier": "General", "uuid": "a16a6be8-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "retrieved", "identifier": "General", "uuid": "a16a6c2e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_parameters", "identifier": "General", "uuid": "a16a6c74-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_structure", "identifier": "General", "uuid": "a16a6cba-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_trajectory", "identifier": "General", "uuid": "a16a6d00-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_band", "identifier": "General", "uuid": "a16a6d46-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_kpoints", "identifier": "General", "uuid": "a16a6daa-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "output_atomic_occupations", "identifier": "General", "uuid": "a16a6dfa-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_outputs", "identifier": "General", "uuid": "a16a6e4a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "_wait", "identifier": "General", "uuid": "a16a6e90-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "ctrl_inputs": [{"name": "entry", "identifier": "General", "uuid": "a16a7098-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "ctrl", "identifier": "General", "uuid": "a16a70f2-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "INPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "ctrl_outputs": [{"name": "exit", "identifier": "General", "uuid": "a16a712e-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "ctrl", "identifier": "General", "uuid": "a16a716a-1dfa-11ef-8c18-906584de3e5b", "node_uuid": "a16a5536-1dfa-11ef-8c18-906584de3e5b", "type": "OUTPUT", "link_limit": 1000, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "position": [30, 30], "description": "", "log": "", "hash": "", "to_context": [], "wait": [], "label": "PwCalculation"}}, "links": []}
+
+        // Define Schemes to use in vanilla JS
+        const Schemes = {
+            Node: ClassicPreset.Node,
+            Connection: ClassicPreset.Connection
+        };
+
+        class Node extends ClassicPreset.Node {
+          width = 180;
+          height = 100;
+        }
+        class Connection extends ClassicPreset.Connection {}
+
+        function createDynamicNode(nodeData) {
+          const node = new Node(nodeData.label);
+          // resize the node based on the max length of the input/output names
+          let maxSocketNameLength = 0;
+          nodeData.inputs.forEach((input) => {
+            let socket = new ClassicPreset.Socket(input.name);
+            if (!node.inputs.hasOwnProperty(input.name)) {
+              node.addInput(input.name, new ClassicPreset.Input(socket, input.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, input.name.length);
+            }
+          });
+
+          nodeData.outputs.forEach((output) => {
+            let socket = new ClassicPreset.Socket(output.name);
+            if (!node.outputs.hasOwnProperty(output.name)) {
+              node.addOutput(output.name, new ClassicPreset.Output(socket, output.name));
+              maxSocketNameLength = Math.max(maxSocketNameLength, output.name.length);
+            }
+          });
+          node.height = Math.max(140, node.height + (nodeData.inputs.length + nodeData.outputs.length) * 35)
+          node.width += maxSocketNameLength * 5;
+
+          return node;
+        }
+
+
+        async function addNode(editor, area, nodeData) {
+          console.log("Adding node", nodeData);
+          const node = createDynamicNode(nodeData);
+          await editor.addNode(node);
+          editor.nodeMap[nodeData.label] = node; // Assuming each nodeData has a unique ID
+          await area.translate(node.id, { x: nodeData.position[0], y: nodeData.position[1] });
+        }
+
+        async function addLink(editor, area, layout, linkData) {
+          const fromNode = editor.nodeMap[linkData.from_node];
+          const toNode = editor.nodeMap[linkData.to_node];
+          console.log("fromNode", fromNode, "toNode", toNode);
+          let socket;
+          if (fromNode && toNode) {
+            socket = new ClassicPreset.Socket(linkData.from_socket);
+            if (!fromNode.outputs.hasOwnProperty(linkData.from_socket)) {
+              fromNode.addOutput(linkData.from_socket, new ClassicPreset.Output(socket, linkData.from_socket));
+              fromNode.height += 25; // Increase height of node for each output
+              area.update('node', fromNode.id);
+            }
+            socket = new ClassicPreset.Socket(linkData.to_socket);
+            if (!toNode.inputs.hasOwnProperty(linkData.to_socket)) {
+              toNode.addInput(linkData.to_socket, new ClassicPreset.Input(socket, linkData.to_socket));
+              toNode.height += 25; // Increase height of node for each input
+              area.update('node', toNode.id);
+            }
+            await editor.addConnection(new Connection(fromNode, linkData.from_socket, toNode, linkData.to_socket));
+            // await layout(true);
+
+          }
+        }
+
+        async function loadJSON(editor, area, layout, workgraphData) {
+          for (const nodeId in workgraphData.nodes) {
+            const nodeData = workgraphData.nodes[nodeId];
+            await addNode(editor, area, nodeData);
+          }
+
+          // Adding connections based on workgraphData
+          workgraphData.links.forEach(async (link) => { // Specify the type of link here
+            await addLink(editor, area, layout, link);
+          });
+        }
+
+        async function createEditor(container) {
+            const socket = new ClassicPreset.Socket("socket");
+
+            const editor = new NodeEditor(Schemes);
+            const area = new AreaPlugin(container);
+            const connection = new ConnectionPlugin();
+            const render = new ReactPlugin({ createRoot });
+            const arrange = new AutoArrangePlugin();
+
+            const minimap = new MinimapPlugin({
+              boundViewport: true
+            });
+
+            AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
+                accumulating: AreaExtensions.accumulateOnCtrl(),
+            });
+
+            render.addPreset(Presets.classic.setup());
+            render.addPreset(Presets.minimap.setup({ size: 200 }));
+
+            connection.addPreset(ConnectionPresets.classic.setup());
+
+            const applier = new ArrangeAppliers.TransitionApplier({
+              duration: 500,
+              timingFunction: (t) => t,
+              async onTick() {
+                await AreaExtensions.zoomAt(area, editor.getNodes());
+              }
+            });
+
+            arrange.addPreset(ArrangePresets.classic.setup());
+
+
+            editor.use(area);
+            area.use(connection);
+            area.use(render);
+            area.use(arrange);
+            area.use(minimap);
+
+
+            AreaExtensions.simpleNodesOrder(area);
+
+            async function layout(animate) {
+              await arrange.layout({ applier: animate ? applier : undefined });
+              AreaExtensions.zoomAt(area, editor.getNodes());
+            }
+
+            // Adding nodes based on workgraphData
+            const nodeMap = {}; // To keep track of created nodes for linking
+            editor.nodeMap = nodeMap;
+
+
+            return {
+              editor: editor,
+              area: area,
+              layout: layout,
+              destroy: () => area.destroy()
+            };
+        }
+
+        function App() {
+            const [editor, setEditor] = useState(null);
+            const containerRef = useRef(null);
+
+            useEffect(() => {
+                if (containerRef.current && !editor) {
+                    createEditor(containerRef.current).then((editor) => {
+                        setEditor(editor);
+                        loadJSON(editor.editor, editor.area, editor.layout, workgraphData).then(() => {
+                          // aplly layout twice to ensure all nodes are arranged
+                          editor?.layout(false).then(() => editor?.layout(true));
+                        });
+                    });
+                }
+                return () => {
+                    if (editor) {
+                        editor.destroy();
+                    }
+                };
+            }, [containerRef, editor]);
+
+            return (
+
+                <div className="App">
+                    <div>
+                      <button onClick={() => editor?.layout(true)}>Arrange</button>
+                    </div>
+                    <div ref={containerRef} className="rete" style={{ height: "100vh", width: "100vh" }}></div>
+                </div>
+            );
+        }
+
+        const rootElement = document.getElementById("root");
+        const root = createRoot(rootElement);
+
+        root.render(
+                <App />
+        );
+    </script>
+</body>
+</html>
diff --git a/docs/source/tutorial/qe.ipynb b/docs/source/tutorial/qe.ipynb
index 796e440f..fc4505a5 100644
--- a/docs/source/tutorial/qe.ipynb
+++ b/docs/source/tutorial/qe.ipynb
@@ -80,22 +80,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 2,
    "id": "01bedd69",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e6efbe02f6f444acab07a4610be2429f",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"pw1.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minmap': False}, style={'width': '40%', 'height': '600px'}, value={'nodes': {'pw1':…"
+       "<IPython.lib.display.IFrame at 0x709c664e1fd0>"
       ]
      },
-     "execution_count": 3,
+     "execution_count": 2,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -106,7 +113,10 @@
     "\n",
     "wg = WorkGraph(\"energy_n2\")\n",
     "pw1 = wg.nodes.new(PwCalculation, name=\"pw1\")\n",
-    "pw1"
+    "pw1.to_html()\n",
+    "\n",
+    "# visualize the node in jupyter-notebook\n",
+    "# pw1"
    ]
   },
   {
@@ -511,6 +521,24 @@
     "atomization = wg.nodes.new(atomization_energy, name=\"atomization_energy\")\n",
     "wg.links.new(pw_n.outputs[\"output_parameters\"], atomization.inputs[\"output_atom\"])\n",
     "wg.links.new(pw_n2.outputs[\"output_parameters\"], atomization.inputs[\"output_mol\"])\n",
+    "wg.to_html()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "202f236d",
+   "metadata": {},
+   "source": [
+    "Submit the workgraph and print the atomization energy."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0763c7da",
+   "metadata": {},
+   "outputs": [],
+   "source": [
     "wg.submit(wait=True, timeout=300)\n",
     "print('Atomization energy: {:0.3f} eV'.format(atomization.outputs[\"result\"].value.value))"
    ]
diff --git a/docs/source/zero_to_hero.ipynb b/docs/source/zero_to_hero.ipynb
index 84f142d9..4dfb238b 100644
--- a/docs/source/zero_to_hero.ipynb
+++ b/docs/source/zero_to_hero.ipynb
@@ -97,7 +97,7 @@
     "- link the output of the `add` node to one of the `x` input of the `multiply` node.\n",
     "\n",
     "\n",
-    "In a Jupiter notebook, you can visualize the workgraph directly."
+    "In a jupyter notebook, you can visualize the workgraph directly."
    ]
   },
   {
@@ -108,13 +108,20 @@
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "2799477b57ba474e8632f11728b36843",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"first_workflow.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'first_w…"
+       "<IPython.lib.display.IFrame at 0x7c2734c71ad0>"
       ]
      },
      "execution_count": 3,
@@ -128,8 +135,10 @@
     "wg = WorkGraph(\"first_workflow\")\n",
     "wg.nodes.new(add, name=\"add1\")\n",
     "wg.nodes.new(multiply, name=\"multiply1\", x = wg.nodes[\"add1\"].outputs[\"result\"])\n",
-    "# visualize the workgraph\n",
-    "wg"
+    "# export the workgraph to html file so that it can be visualized in a browser\n",
+    "wg.to_html()\n",
+    "# visualize the workgraph in jupyter-notebook\n",
+    "# wg"
    ]
   },
   {
@@ -484,22 +493,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 4,
    "id": "01bedd69",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "9c7265f8da80419698a3b256614d3a97",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"atomization_energy.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'atomiza…"
+       "<IPython.lib.display.IFrame at 0x7c26f92d4250>"
       ]
      },
-     "execution_count": 7,
+     "execution_count": 4,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -523,7 +539,10 @@
     "wg.nodes.new(atomization_energy, name=\"atomization_energy\",\n",
     "             output_atom=pw_atom.outputs[\"output_parameters\"],\n",
     "             output_mol=pw_mol.outputs[\"output_parameters\"])\n",
-    "wg"
+    "# export the workgraph to html file so that it can be visualized in a browser\n",
+    "wg.to_html()\n",
+    "# visualize the workgraph in jupyter-notebook\n",
+    "# wg"
    ]
   },
   {
@@ -1054,22 +1073,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": 5,
    "id": "5740bb79",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "b704edce426e45e8999e3cd3b9306757",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"if_node.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'if_node…"
+       "<IPython.lib.display.IFrame at 0x7c27f87e89d0>"
       ]
      },
-     "execution_count": 9,
+     "execution_count": 5,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -1096,7 +1122,7 @@
     "wg.nodes.new(add, name=\"add1\")\n",
     "wg.nodes.new(add_multiply_if_generator, name=\"add_multiply_if1\", x = wg.nodes[\"add1\"].outputs[\"result\"])\n",
     "wg.nodes.new(add, name=\"add2\", x = wg.nodes[\"add_multiply_if1\"].outputs[\"result\"])\n",
-    "wg\n"
+    "wg.to_html()\n"
    ]
   },
   {
@@ -1147,7 +1173,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": 7,
    "id": "9d859c51",
    "metadata": {},
    "outputs": [],
@@ -1212,22 +1238,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 28,
+   "execution_count": 8,
    "id": "f97040fe",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "29b4d95f63894ba8aadfc21da41bc978",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"eos.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'eos', '…"
+       "<IPython.lib.display.IFrame at 0x7c27dee0a190>"
       ]
      },
-     "execution_count": 28,
+     "execution_count": 8,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -1239,7 +1272,7 @@
     "scale_structure1 = wg.nodes.new(scale_structure, name=\"scale_structure1\")\n",
     "all_scf1 = wg.nodes.new(all_scf, name=\"all_scf1\", structures=scale_structure1.outputs[\"structures\"])\n",
     "eos1 = wg.nodes.new(eos, name=\"eos1\", datas=all_scf1.outputs[\"result\"])\n",
-    "wg"
+    "wg.to_html()"
    ]
   },
   {
@@ -1252,22 +1285,29 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 29,
+   "execution_count": 9,
    "id": "5d6a4528",
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "c5c615d30a754e5fa67f051730d9e72c",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"600px\"\n",
+       "            src=\"relax_eos.html\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
       "text/plain": [
-       "NodeGraphWidget(settings={'minimap': True}, style={'width': '90%', 'height': '600px'}, value={'name': 'relax_e…"
+       "<IPython.lib.display.IFrame at 0x7c27dee1e950>"
       ]
      },
-     "execution_count": 29,
+     "execution_count": 9,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -1291,7 +1331,7 @@
     "wg = WorkGraph(\"relax_eos\")\n",
     "relax_node = wg.nodes.new(PwCalculation, name=\"relax1\")\n",
     "eos_wg_node = wg.nodes.new(eos_workgraph, name=\"eos1\", structure=relax_node.outputs[\"output_structure\"])\n",
-    "wg"
+    "wg.to_html()"
    ]
   },
   {