+ First off: A big thank you to the developers of
+ Webkid. Their amazing work made it possible for me
+ to create this port to Vue 3 - without them there is no Vue Flow.
+
+
+
+ Vue Flow is built on top of existing features and code taken from
+ React Flow. It replicates the basic features
+ found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
+ the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
+
+
+ please consider supporting Webkid by donating.
+
+
+ On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
+
+
+ Plus it's built for composition, making the access of the internal state easy as can be!
+
+ Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
+ elements, customizable nodes and edges and a bunch of event handlers.
+
diff --git a/docs2/src/examples/edges/connection-line.md b/docs2/src/examples/edges/connection-line.md
new file mode 100644
index 00000000..1c241cca
--- /dev/null
+++ b/docs2/src/examples/edges/connection-line.md
@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Custom Connection Line
+
+If the default connection lines aren't to your liking, or you want to expand on the existing
+functionality you can use your own custom connection line.
+
+Simply pass a component in the designated template slot, and you're good to go.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/edges/index.md b/docs2/src/examples/edges/index.md
new file mode 100644
index 00000000..ad0fb745
--- /dev/null
+++ b/docs2/src/examples/edges/index.md
@@ -0,0 +1,17 @@
+---
+pageClass: examples
+
+---
+
+# Edges
+
+Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
+In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/edges/updatable-edge.md b/docs2/src/examples/edges/updatable-edge.md
new file mode 100644
index 00000000..7699da5d
--- /dev/null
+++ b/docs2/src/examples/edges/updatable-edge.md
@@ -0,0 +1,22 @@
+---
+pageClass: examples
+
+---
+
+# Updatable Edge
+
+Existing edges can be updated, meaning their source / target position can be changed interactively.
+
+Update an edge by simply dragging it from one node to another at the edge-anchor (handles).
+
+You can enable updating edges either globally by passing the `edgesUpdatable` prop or you can enable it
+for specific edges by using the `updatable` attribute.
+
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/edges/validation.md b/docs2/src/examples/edges/validation.md
new file mode 100644
index 00000000..c4037601
--- /dev/null
+++ b/docs2/src/examples/edges/validation.md
@@ -0,0 +1,39 @@
+---
+pageClass: examples
+
+---
+
+# Connection Validation
+
+Connections can be validated before edges are created and nodes get connected.
+
+## Using a handle in a custom node
+```vue:no-line-numbers
+
diff --git a/docs2/src/examples/empty.md b/docs2/src/examples/empty.md
new file mode 100644
index 00000000..9e265861
--- /dev/null
+++ b/docs2/src/examples/empty.md
@@ -0,0 +1,17 @@
+---
+pageClass: examples
+
+---
+
+# Empty
+
+Similar to the drag and drop example, we can also add nodes to an empty graph on a button click,
+which triggers a push into our elements / nodes array.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/floating-edges.md b/docs2/src/examples/floating-edges.md
new file mode 100644
index 00000000..e713787f
--- /dev/null
+++ b/docs2/src/examples/floating-edges.md
@@ -0,0 +1,25 @@
+---
+pageClass: examples
+
+---
+
+This example demonstrates "floating edges".
+
+The positions of the source and target nodes are calculated dynamically,
+the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
+so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
+
+
+
+
+
diff --git a/docs2/src/examples/hidden.md b/docs2/src/examples/hidden.md
new file mode 100644
index 00000000..a3ca4422
--- /dev/null
+++ b/docs2/src/examples/hidden.md
@@ -0,0 +1,24 @@
+---
+pageClass: examples
+
+---
+
+# Hidden
+
+You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
+
+Edges that are connected to a hidden node will also be hidden.
+
+If you set the `onlyRenderVisibleElements` prop to `true`, only elements that are visible inside the current viewpane will be rendered.
+This behavior is disabled by default, meaning all elements are rendered whether they are inside the view or not.
+
+This can save you some time on initial renders but consider that moving the pane can cause multiple renders of nodes into the dom,
+which can cause performance spikes depending on the complexity of the components that have to be mounted.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/horizontal.md b/docs2/src/examples/horizontal.md
new file mode 100644
index 00000000..30f329ba
--- /dev/null
+++ b/docs2/src/examples/horizontal.md
@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Horizontal Layout
+
+Vue Flow doesn't require you to use vertical layouts.
+You can use horizontal layouts with the default node types as well.
+
+You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/index.md b/docs2/src/examples/index.md
new file mode 100644
index 00000000..072bb7fe
--- /dev/null
+++ b/docs2/src/examples/index.md
@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Basic
+
+This is a basic example to help you familiarize with the basic features of Vue Flow.
+
+On the bottom left you see the viewport-controls and on the bottom right the minimap.
+You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/interaction.md b/docs2/src/examples/interaction.md
new file mode 100644
index 00000000..228a9d79
--- /dev/null
+++ b/docs2/src/examples/interaction.md
@@ -0,0 +1,18 @@
+---
+pageClass: examples
+
+---
+# Interaction
+
+Vue Flow provides options to interact and limit interaction with the viewport and graph.
+This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
+
+In the sandbox below you can find an example showing you how to toggle interaction options.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/multi.md b/docs2/src/examples/multi.md
new file mode 100644
index 00000000..48abeb05
--- /dev/null
+++ b/docs2/src/examples/multi.md
@@ -0,0 +1,18 @@
+---
+pageClass: examples
+
+---
+
+# Multi Flows
+
+Vue Flow is not limited to a single instance on a page.
+
+You can use as many component instances as you like.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/nodes/index.md b/docs2/src/examples/nodes/index.md
new file mode 100644
index 00000000..eed446db
--- /dev/null
+++ b/docs2/src/examples/nodes/index.md
@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Custom Node
+
+One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
+
+You can display any content and functionality inside a custom node. More documentation about how to set
+up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/nodes/nesting.md b/docs2/src/examples/nodes/nesting.md
new file mode 100644
index 00000000..0630efa2
--- /dev/null
+++ b/docs2/src/examples/nodes/nesting.md
@@ -0,0 +1,20 @@
+---
+pageClass: examples
+
+---
+
+# Nested Nodes
+
+Another key feature is nested nodes (or even nested flows).
+
+You can define parents of a node, which are then nested inside that node.
+You can also define the boundaries of a node, i.e. if the node can be dragged outside it's parent or if it's contained to the parent
+or even let Vue Flow extend the area of a node to fit all it's children.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/nodes/update-node.md b/docs2/src/examples/nodes/update-node.md
new file mode 100644
index 00000000..ab6a6f81
--- /dev/null
+++ b/docs2/src/examples/nodes/update-node.md
@@ -0,0 +1,22 @@
+---
+pageClass: examples
+
+---
+
+# Update Node
+
+Updating internal node data is simple.
+After initializing your elements and parsing them into either `GraphNode` or `GraphEdge`
+Vue Flow will emit the changes back into your initial `ref`.
+
+That means you can manipulate any property of your original nodes, and it will trigger changes in the graph.
+
+You can of course also access the nodes directly from the state and change their properties from there.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/pinia.md b/docs2/src/examples/pinia.md
new file mode 100644
index 00000000..30305b49
--- /dev/null
+++ b/docs2/src/examples/pinia.md
@@ -0,0 +1,15 @@
+---
+pageClass: examples
+
+---
+
+# Pinia
+
+Using your existing storage implementation is not an issue.
+You can store your elements in whatever store you're already using, mutate them there and pass the result to Vue Flow.
+
+In this example we use [pinia](https://pinia.vuejs.org/) to store our elements, update their positions and toggle classes.
+
+
+
+
diff --git a/docs2/src/examples/save.md b/docs2/src/examples/save.md
new file mode 100644
index 00000000..87dc09fa
--- /dev/null
+++ b/docs2/src/examples/save.md
@@ -0,0 +1,25 @@
+---
+pageClass: examples
+
+---
+
+# Save & Restore
+
+There is no built-in persistent storage feature, however you can use your own storage implementation.
+
+::: tip State Management Libraries
+ Check the [pinia](/examples/pinia.html) example to see how to use Vue Flow with a state management library.
+:::
+
+This example demonstrates save & restore functionality using the [`LocalStorage`](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) of the browser.
+
+You can extend on this basic idea however you like, i.e. fetch data that you transform into elements which are then passed to Vue Flow or
+some other business logic you would like to handle.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/stress.md b/docs2/src/examples/stress.md
new file mode 100644
index 00000000..ab96f358
--- /dev/null
+++ b/docs2/src/examples/stress.md
@@ -0,0 +1,18 @@
+---
+pageClass: examples
+
+---
+
+# Stress
+
+Vue Flow is built to be fast but there are limits.
+
+Try out how many nodes you can get to render before your browser crashes.
+
+
+
+
+
+
+
+
diff --git a/docs2/src/examples/teleport.md b/docs2/src/examples/teleport.md
new file mode 100644
index 00000000..5d769ee4
--- /dev/null
+++ b/docs2/src/examples/teleport.md
@@ -0,0 +1,16 @@
+---
+pageClass: examples
+
+---
+
+# Teleport
+
+Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
+
+
+
+
+
+
+
+
diff --git a/docs2/src/guide/components/background.md b/docs2/src/guide/components/background.md
new file mode 100644
index 00000000..1f8b3236
--- /dev/null
+++ b/docs2/src/guide/components/background.md
@@ -0,0 +1,29 @@
+# Background
+
+Vue Flow comes with two background pattern variants: dots and lines.
+
+## Usage
+
+To use the background simply pass the `Background` component as a child to the `VueFlow` component.
+
+```vue
+
+
+
+
+
+```
+
+## [Props](/typedocs/interfaces/BackgroundProps.html/)
+
+| Name | Definition | Type | Optional | Default |
+|--------------|-------------------|--------------------------------------------------------------|----------|---------|
+| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant.html/) | true | dots |
+| gap | Pattern gap | number | true | 10 |
+| size | Pattern size | number | true | 0.4 |
+| patternColor | Pattern color | string | true | #81818a |
+| bgColor | Is node dragging | boolean | true | #fff |
+| height | Background height | number | true | 100 |
+| width | Background width | number | true | 100 |
+| x | X-offset | number | true | 0 |
+| y | Y-offset | number | true | 0 |
diff --git a/docs2/src/guide/components/control-button.md b/docs2/src/guide/components/control-button.md
new file mode 100644
index 00000000..78fd2bb3
--- /dev/null
+++ b/docs2/src/guide/components/control-button.md
@@ -0,0 +1,26 @@
+# Control Button
+
+You can use the existing `ControlButton` component to create new control buttons.
+
+## Usage
+
+To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button.html/) component.
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+## Slots
+
+| Name | Definition |
+|---------|--------------------------------------------------------|
+| default | inner slot of btn (is wrapped by a `