diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
new file mode 100644
index 00000000..32498af0
--- /dev/null
+++ b/examples/Basic/Basic.vue
@@ -0,0 +1,102 @@
+<template>
+  <RevueFlow
+    v-model="elements"
+    class="revue-flow-basic-example"
+    :onElementsRemove="onElementsRemove"
+    :onConnect="onConnect"
+    :onNodeDragStop="onNodeDragStop"
+    :defaultZoom="1.5"
+    :minZoom="0.2"
+    :maxZoom="4"
+    @elementClick="onElementClick"
+    @load="onLoad"
+  >
+    <MiniMap />
+    <Controls />
+    <Background color="#aaa" :gap="8" />
+    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
+      <button :onClick="resetTransform" style="margin-right: 5px">reset transform</button>
+      <button :onClick="updatePos" style="margin-right: 5px">change pos</button>
+      <button :onClick="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
+      <button :onClick="logToObject">toObject</button>
+    </div>
+  </RevueFlow>
+</template>
+<script lang="ts">
+import RevueFlow, {
+  MiniMap,
+  Controls,
+  Background,
+  Connection,
+  Edge,
+  Elements,
+  FlowElement,
+  Node,
+  OnLoadParams,
+  addEdge,
+  isNode,
+  removeElements
+} from '../../src';
+import { defineComponent, ref } from 'vue';
+
+const BasicFlow = defineComponent({
+  components: { RevueFlow, MiniMap, Controls, Background },
+  setup() {
+    const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+    const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+    const elements = ref<Elements>([
+      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+      { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+      { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+      { id: 'e1-2', source: '1', target: '2', animated: true },
+      { id: 'e1-3', source: '1', target: '3' }
+    ]);
+    const rfInstance = ref<OnLoadParams | null>(null);
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements));
+    const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
+
+    const updatePos = () => {
+      elements.value = elements.value.map((el: FlowElement) => {
+        if (isNode(el)) {
+          el.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400
+          };
+        }
+
+        return el;
+      });
+    };
+
+    const logToObject = () => console.log(rfInstance.value?.toObject());
+    const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
+
+    const toggleClassnames = () => {
+      elements.value = elements.value.map((el: FlowElement) => {
+        if (isNode(el)) {
+          el.className = el.className === 'light' ? 'dark' : 'light';
+        }
+
+        return el;
+      });
+    };
+    return {
+      onLoad,
+      onConnect,
+      onElementClick,
+      onElementsRemove,
+      onNodeDragStop,
+      logToObject,
+      resetTransform,
+      toggleClassnames,
+      updatePos,
+      elements
+    };
+  }
+});
+
+export default BasicFlow;
+</script>
diff --git a/examples/Basic/index.tsx b/examples/Basic/index.tsx
deleted file mode 100644
index ecf6fc77..00000000
--- a/examples/Basic/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import RevueFlow, {
-  MiniMap,
-  Controls,
-  Background,
-  Connection,
-  Edge,
-  Elements,
-  FlowElement,
-  Node,
-  OnLoadParams,
-  addEdge,
-  isNode,
-  removeElements
-} from '../../src';
-import { defineComponent, ref } from 'vue';
-
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
-const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' }
-];
-
-const BasicFlow = defineComponent({
-  components: { RevueFlow, MiniMap, Controls, Background },
-  setup() {
-    const elements = ref<Elements>(initialElements);
-    const rfInstance = ref<OnLoadParams | null>(null);
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
-    const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
-
-    const updatePos = () => {
-      elements.value = elements.value.map((el) => {
-        if (isNode(el)) {
-          el.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400
-          };
-        }
-
-        return el;
-      });
-    };
-
-    const logToObject = () => console.log(rfInstance.value?.toObject());
-    const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
-
-    const toggleClassnames = () => {
-      elements.value = elements.value.map((el) => {
-        if (isNode(el)) {
-          el.className = el.className === 'light' ? 'dark' : 'light';
-        }
-
-        return el;
-      });
-    };
-
-    return () => (
-      <RevueFlow
-        elements={elements.value}
-        onLoad={onLoad}
-        onElementClick={onElementClick}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-        onNodeDragStop={onNodeDragStop}
-        class="revue-flow-basic-example"
-        defaultZoom={1.5}
-        minZoom={0.2}
-        maxZoom={4}
-      >
-        <MiniMap />
-        <Controls />
-        <Background color="#aaa" gap={16} />
-        <div style={{ position: 'absolute', right: '10px', top: '10px', zIndex: 4 }}>
-          <button onClick={resetTransform} style={{ marginRight: '5px' }}>
-            reset transform
-          </button>
-          <button onClick={updatePos} style={{ marginRight: '5px' }}>
-            change pos
-          </button>
-          <button onClick={toggleClassnames} style={{ marginRight: '5px' }}>
-            toggle classnames
-          </button>
-          <button onClick={logToObject}>toObject</button>
-        </div>
-      </RevueFlow>
-    );
-  }
-});
-
-export default BasicFlow;
diff --git a/examples/CustomConnectionLine/ConnectionLine.tsx b/examples/CustomConnectionLine/ConnectionLine.vue
similarity index 59%
rename from examples/CustomConnectionLine/ConnectionLine.tsx
rename to examples/CustomConnectionLine/ConnectionLine.vue
index 6570adbf..afee9f5e 100644
--- a/examples/CustomConnectionLine/ConnectionLine.tsx
+++ b/examples/CustomConnectionLine/ConnectionLine.vue
@@ -1,3 +1,16 @@
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="#222"
+      :stroke-width="1.5"
+      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
+    />
+    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>
+<script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { ConnectionLineComponentProps } from '../../src';
 
@@ -19,21 +32,8 @@ const ConnectionLine = defineComponent({
       type: Number as PropType<ConnectionLineComponentProps['targetY']>,
       required: true
     }
-  },
-  setup(props) {
-    return () => (
-      <g>
-        <path
-          fill="none"
-          stroke="#222"
-          stroke-width={1.5}
-          class="animated"
-          d={`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`}
-        />
-        <circle cx={props.targetX} cy={props.targetY} fill="#fff" r={3} stroke="#222" stroke-width={1.5} />
-      </g>
-    );
   }
 });
 
 export default ConnectionLine;
+</script>
diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
new file mode 100644
index 00000000..0f848b3c
--- /dev/null
+++ b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -0,0 +1,36 @@
+<template>
+  <RevueFlow
+    v-model="elements"
+    :connectionLineComponent="ConnectionLine"
+    :onElementsRemove="onElementsRemove"
+    :onConnect="onConnect"
+  >
+    <Background :variant="bgVariant" />
+  </RevueFlow>
+</template>
+<script lang="ts">
+import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
+
+import ConnectionLine from './ConnectionLine.vue';
+import { defineComponent, ref } from 'vue';
+
+const ConnectionLineFlow = defineComponent({
+  components: { RevueFlow, Background },
+  setup() {
+    const elements = ref<Elements>([{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }]);
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
+
+    return {
+      ConnectionLine,
+      elements,
+      onElementsRemove,
+      onConnect,
+      bgVariant: BackgroundVariant.Lines
+    };
+  }
+});
+
+export default ConnectionLineFlow;
+</script>
diff --git a/examples/CustomConnectionLine/index.tsx b/examples/CustomConnectionLine/index.tsx
deleted file mode 100644
index 62e400f7..00000000
--- a/examples/CustomConnectionLine/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
-
-import ConnectionLine from './ConnectionLine';
-import { defineComponent, ref } from 'vue';
-
-const initialElements: Elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
-
-const ConnectionLineFlow = defineComponent({
-  components: { Background },
-  setup() {
-    const elements = ref(initialElements);
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
-
-    return () => (
-      <RevueFlow
-        elements={elements.value}
-        connectionLineComponent={ConnectionLine as any}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-      >
-        <Background variant={BackgroundVariant.Lines} />
-      </RevueFlow>
-    );
-  }
-});
-
-export default ConnectionLineFlow;
diff --git a/examples/CustomNode/ColorSelectorNode.tsx b/examples/CustomNode/ColorSelectorNode.tsx
deleted file mode 100644
index 3058fe7e..00000000
--- a/examples/CustomNode/ColorSelectorNode.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { CSSProperties, defineComponent } from 'vue';
-import { Handle, Position, Connection, Edge } from '../../src';
-
-const targetHandleStyle: CSSProperties = { background: '#555' };
-const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
-const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
-
-const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-
-const ColorSelectorNode = defineComponent({
-  props: {
-    data: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    return () => (
-      <>
-        <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
-        <div>
-          Custom Color Picker Node: <strong>{props.data.color}</strong>
-        </div>
-        <input class="nodrag" type="color" onInput={props.data.onChange} v-model={props.data.color} />
-        <Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} />
-        <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} />
-      </>
-    );
-  }
-});
-
-export default ColorSelectorNode;
diff --git a/examples/CustomNode/ColorSelectorNode.vue b/examples/CustomNode/ColorSelectorNode.vue
new file mode 100644
index 00000000..2b88dcc3
--- /dev/null
+++ b/examples/CustomNode/ColorSelectorNode.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
+    <div>
+      Custom Color Picker Node: <strong>{{ data.color }}</strong>
+    </div>
+    <input class="nodrag" type="color" :value="data.color" @input="onChange" />
+    <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+    <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+  </div>
+</template>
+<script lang="ts">
+import { CSSProperties, defineComponent } from 'vue';
+import { Handle, Position, Connection, Edge } from '../../src';
+
+const ColorSelectorNode = defineComponent({
+  components: { Handle },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const targetHandleStyle: CSSProperties = { background: '#555' };
+    const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
+    const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
+
+    const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+    return {
+      Position,
+      targetHandleStyle,
+      sourceHandleStyleA,
+      sourceHandleStyleB,
+      onConnect,
+      onChange: props.data.onChange as any
+    };
+  }
+});
+
+export default ColorSelectorNode;
+</script>
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
new file mode 100644
index 00000000..a7a7b08b
--- /dev/null
+++ b/examples/CustomNode/CustomNode.vue
@@ -0,0 +1,152 @@
+<template>
+  <RevueFlow
+    v-model="elements"
+    :onElementClick="onElementClick"
+    :onElementsRemove="onElementsRemove"
+    :onConnect="onConnect"
+    :onNodeDragStop="onNodeDragStop"
+    :style="`background: ${bgColor}`"
+    :onLoad="onLoad"
+    :nodeTypes="nodeTypes"
+    :connectionLineStyle="connectionLineStyle"
+    :snapToGrid="true"
+    :snapGrid="snapGrid"
+    :defaultZoom="1.5"
+  >
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </RevueFlow>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import RevueFlow, {
+  isEdge,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Node,
+  FlowElement,
+  OnLoadParams,
+  Elements,
+  Position,
+  SnapGrid,
+  Connection,
+  Edge
+} from '../../src';
+import ColorSelectorNode from './ColorSelectorNode.vue';
+
+const CustomNodeFlow = defineComponent({
+  components: { RevueFlow, MiniMap, Controls },
+  setup() {
+    const connectionLineStyle = { stroke: '#fff' };
+    const snapGrid: SnapGrid = [16, 16];
+    const nodeTypes = {
+      selectorNode: ColorSelectorNode
+    };
+
+    const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
+    const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+    const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+    const nodeStroke = (n: Node): string => {
+      if (n.type === 'input') return '#0041d0';
+      if (n.type === 'selectorNode') return bgColor.value;
+      if (n.type === 'output') return '#ff0072';
+      return '#eee';
+    };
+    const nodeColor = (n: Node): string => {
+      if (n.type === 'selectorNode') return bgColor.value;
+      return '#fff';
+    };
+
+    const elements = ref<Elements>([]);
+    const bgColor = ref('#1A192B');
+
+    onMounted(() => {
+      const onChange = (event: Event) => {
+        elements.value = elements.value.map((e: FlowElement) => {
+          if (isEdge(e) || e.id !== '2') {
+            return e;
+          }
+
+          const color = (event.target as HTMLInputElement).value;
+
+          bgColor.value = color;
+
+          return {
+            ...e,
+            data: {
+              ...e.data,
+              color
+            }
+          };
+        });
+      };
+
+      elements.value = [
+        {
+          id: '1',
+          type: 'input',
+          data: { label: 'An input node' },
+          position: { x: 0, y: 50 },
+          sourcePosition: Position.Right
+        },
+        {
+          id: '2',
+          type: 'selectorNode',
+          data: { onChange: onChange, color: bgColor.value },
+          style: { border: '1px solid #777', padding: 10 },
+          position: { x: 250, y: 50 }
+        },
+        {
+          id: '3',
+          type: 'output',
+          data: { label: 'Output A' },
+          position: { x: 550, y: 25 },
+          targetPosition: Position.Left
+        },
+        {
+          id: '4',
+          type: 'output',
+          data: { label: 'Output B' },
+          position: { x: 550, y: 100 },
+          targetPosition: Position.Left
+        },
+
+        { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
+        { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+        { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
+      ];
+    });
+
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onConnect = (params: Connection | Edge) =>
+      (elements.value = addEdge(
+        {
+          ...params,
+          animated: true,
+          style: { stroke: '#fff' }
+        } as Edge,
+        elements.value as Elements
+      ));
+
+    return {
+      elements,
+      onConnect,
+      onElementsRemove,
+      onLoad,
+      onNodeDragStop,
+      onElementClick,
+      nodeStroke,
+      nodeColor,
+      connectionLineStyle,
+      snapGrid,
+      nodeTypes,
+      bgColor
+    };
+  }
+});
+
+export default CustomNodeFlow;
+</script>
diff --git a/examples/CustomNode/index.tsx b/examples/CustomNode/index.tsx
deleted file mode 100644
index 5ce2553a..00000000
--- a/examples/CustomNode/index.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { defineComponent, onMounted, ref } from 'vue';
-import RevueFlow, {
-  isEdge,
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Node,
-  FlowElement,
-  OnLoadParams,
-  Elements,
-  Position,
-  SnapGrid,
-  Connection,
-  Edge
-} from '../../src';
-import ColorSelectorNode from './ColorSelectorNode';
-
-const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
-const initBgColor = '#1A192B';
-
-const connectionLineStyle = { stroke: '#fff' };
-const snapGrid: SnapGrid = [16, 16];
-const nodeTypes = {
-  selectorNode: ColorSelectorNode
-};
-
-const CustomNodeFlow = defineComponent({
-  setup() {
-    const elements = ref<Elements>([]);
-    const bgColor = ref(initBgColor);
-
-    onMounted(() => {
-      const onChange = (event: Event) => {
-        elements.value = elements.value.map((e) => {
-          if (isEdge(e) || e.id !== '2') {
-            return e;
-          }
-
-          const color = (event.target as HTMLInputElement).value;
-
-          bgColor.value = color;
-
-          return {
-            ...e,
-            data: {
-              ...e.data,
-              color
-            }
-          };
-        });
-      };
-
-      elements.value = [
-        {
-          id: '1',
-          type: 'input',
-          data: { label: 'An input node' },
-          position: { x: 0, y: 50 },
-          sourcePosition: Position.Right
-        },
-        {
-          id: '2',
-          type: 'selectorNode',
-          data: { onChange: onChange, color: initBgColor },
-          style: { border: '1px solid #777', padding: 10 },
-          position: { x: 250, y: 50 }
-        },
-        {
-          id: '3',
-          type: 'output',
-          data: { label: 'Output A' },
-          position: { x: 550, y: 25 },
-          targetPosition: Position.Left
-        },
-        {
-          id: '4',
-          type: 'output',
-          data: { label: 'Output B' },
-          position: { x: 550, y: 100 },
-          targetPosition: Position.Left
-        },
-
-        { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-        { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
-        { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
-      ];
-    });
-
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onConnect = (params: Connection | Edge) =>
-      (elements.value = addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, elements.value));
-
-    return () => (
-      <RevueFlow
-        elements={elements.value}
-        onElementClick={onElementClick}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-        onNodeDragStop={onNodeDragStop}
-        style={{ background: bgColor.value }}
-        onLoad={onLoad}
-        nodeTypes={nodeTypes}
-        connectionLineStyle={connectionLineStyle}
-        snapToGrid={true}
-        snapGrid={snapGrid}
-        defaultZoom={1.5}
-      >
-        <MiniMap
-          nodeStrokeColor={(n: Node): string => {
-            if (n.type === 'input') return '#0041d0';
-            if (n.type === 'selectorNode') return bgColor.value;
-            if (n.type === 'output') return '#ff0072';
-
-            return '#eee';
-          }}
-          nodeColor={(n: Node): string => {
-            if (n.type === 'selectorNode') return bgColor.value;
-
-            return '#fff';
-          }}
-        />
-        <Controls />
-      </RevueFlow>
-    );
-  }
-});
-
-export default CustomNodeFlow;
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
new file mode 100644
index 00000000..b477ad13
--- /dev/null
+++ b/examples/DragNDrop/DnD.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="dndflow">
+    <div class="revueflow-wrapper" @drop="onDrop">
+      <RevueFlow
+        v-model="elements"
+        :onConnect="onConnect"
+        :onElementsRemove="onElementsRemove"
+        :onLoad="onLoad"
+        @dragover="onDragOver"
+        @click="onDrop"
+      >
+        <Controls />
+      </RevueFlow>
+    </div>
+    <Sidebar />
+  </div>
+</template>
+<script lang="ts">
+import RevueFlow, {
+  addEdge,
+  removeElements,
+  Controls,
+  OnLoadParams,
+  Elements,
+  Connection,
+  Edge,
+  ElementId,
+  Node
+} from '../../src';
+import Sidebar from './Sidebar';
+
+import './dnd.css';
+import { defineComponent, ref } from 'vue';
+
+const DnDFlow = defineComponent({
+  components: { RevueFlow, Controls, Sidebar },
+  setup() {
+    const revueFlowInstance = ref<OnLoadParams>();
+    const elements = ref<Elements>([
+      {
+        id: '1',
+        type: 'input',
+        data: { label: 'input node' },
+        position: { x: 250, y: 5 }
+      }
+    ]);
+
+    let id = 0;
+    const getId = (): ElementId => `dndnode_${id++}`;
+
+    const onDragOver = (event: DragEvent) => {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move';
+      }
+    };
+
+    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
+
+    const onDrop = (event: DragEvent) => {
+      event.preventDefault();
+
+      if (revueFlowInstance.value) {
+        console.log(event.dataTransfer?.getData('application/revueflow'));
+        const type = event.dataTransfer?.getData('application/revueflow');
+        const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
+        const newNode: Node = {
+          id: getId(),
+          type,
+          position,
+          data: { label: `${type} node` }
+        };
+
+        elements.value.push(newNode);
+      }
+    };
+
+    return {
+      onConnect,
+      onElementsRemove,
+      onLoad,
+      onDrop,
+      onDragOver,
+      elements
+    };
+  }
+});
+
+export default DnDFlow;
+</script>
diff --git a/examples/DragNDrop/index.tsx b/examples/DragNDrop/index.tsx
deleted file mode 100644
index fe4eebaf..00000000
--- a/examples/DragNDrop/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import RevueFlow, {
-  addEdge,
-  removeElements,
-  Controls,
-  OnLoadParams,
-  Elements,
-  Connection,
-  Edge,
-  ElementId,
-  Node
-} from '../../src';
-import Sidebar from './Sidebar';
-
-import './dnd.css';
-import { defineComponent, ref } from 'vue';
-
-const initialElements = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];
-
-const onDragOver = (event: DragEvent) => {
-  event.preventDefault();
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move';
-  }
-};
-
-let id = 0;
-const getId = (): ElementId => `dndnode_${id++}`;
-
-const DnDFlow = defineComponent({
-  setup() {
-    const revueFlowInstance = ref<OnLoadParams>();
-    const elements = ref<Elements>(initialElements);
-
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
-
-    const onDrop = (event: DragEvent) => {
-      event.preventDefault();
-
-      if (revueFlowInstance.value) {
-        console.log(event.dataTransfer?.getData('application/revueflow'));
-        const type = event.dataTransfer?.getData('application/revueflow');
-        const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
-        const newNode: Node = {
-          id: getId(),
-          type,
-          position,
-          data: { label: `${type} node` }
-        };
-
-        elements.value.push(newNode);
-      }
-    };
-
-    return () => (
-      <div class="dndflow">
-        <div class="revueflow-wrapper">
-          <RevueFlow
-            elements={elements.value}
-            onConnect={onConnect}
-            onElementsRemove={onElementsRemove}
-            onLoad={onLoad}
-            onDrop={onDrop}
-            onDragover={onDragOver}
-          >
-            <Controls />
-          </RevueFlow>
-        </div>
-        <Sidebar />
-      </div>
-    );
-  }
-});
-
-export default DnDFlow;
diff --git a/examples/router.ts b/examples/router.ts
index 76e8959c..efbe90b0 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -3,19 +3,19 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 export const routes = [
   {
     path: '/basic',
-    component: () => import('./Basic')
+    component: () => import('./Basic/Basic.vue')
   },
   {
     path: '/custom-connectionline',
-    component: () => import('./CustomConnectionLine')
+    component: () => import('./CustomConnectionLine/CustomConnectionLine.vue')
   },
   {
     path: '/custom-node',
-    component: () => import('./CustomNode')
+    component: () => import('./CustomNode/CustomNode.vue')
   },
   {
     path: '/drag-n-drop',
-    component: () => import('./DragNDrop')
+    component: () => import('./DragNDrop/DnD.vue')
   }
 ];
 
diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index d8d1e0a9..53709ecc 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
-import { FitViewParams, RevueFlowStore } from '../../types';
+import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '../../types';
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
 import Fitview from '../../../assets/icons/fitview.svg';
@@ -89,27 +89,28 @@ const Controls = defineComponent({
   setup(props, { slots }) {
     const store = inject<RevueFlowStore>('store')!;
     const isVisible = ref<boolean>(false);
-    const zoomHelper = ref(useZoomPanHelper());
+    const zoomHelper = ref<ZoomPanHelperFunctions>();
+    const { onReady } = useZoomPanHelper(store);
 
-    onMounted(() => {
-      zoomHelper.value = useZoomPanHelper();
+    onReady((helper) => {
+      zoomHelper.value = helper;
     });
 
     const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable;
     const mapClasses = ['revue-flow__controls'];
 
     const onZoomInHandler = () => {
-      zoomHelper.value.zoomIn?.();
+      zoomHelper.value?.zoomIn?.();
       props.onZoomIn?.();
     };
 
     const onZoomOutHandler = () => {
-      zoomHelper.value.zoomOut?.();
+      zoomHelper.value?.zoomOut?.();
       props.onZoomOut?.();
     };
 
     const onFitViewHandler = () => {
-      zoomHelper.value.fitView?.(props.fitViewParams);
+      zoomHelper.value?.fitView?.(props.fitViewParams);
       props.onFitView?.();
     };
 
diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts
index bab08dfc..b792b25a 100644
--- a/src/components/Handle/handler.ts
+++ b/src/components/Handle/handler.ts
@@ -4,14 +4,13 @@ import {
   ElementId,
   XYPosition,
   OnConnectFunc,
-  OnConnectStartFunc,
-  OnConnectStopFunc,
-  OnConnectEndFunc,
   ConnectionMode,
   SetConnectionId,
   Connection,
-  HandleType
+  HandleType,
+  RevueFlowStore
 } from '../../types';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
 export type SetSourceIdFunc = (params: SetConnectionId) => void;
@@ -85,19 +84,19 @@ function resetRecentHandle(hoveredHandle: Element): void {
 
 export function onMouseDown(
   event: MouseEvent,
+  store: RevueFlowStore,
+  hooks: {
+    connectStart: RevueFlowHooks['connectStart'];
+    connectStop: RevueFlowHooks['connectStop'];
+    connectEnd: RevueFlowHooks['connectEnd'];
+  },
   handleId: ElementId | null,
   nodeId: ElementId,
-  setConnectionNodeId: SetSourceIdFunc,
-  setPosition: SetPosition,
   onConnect: OnConnectFunc,
   isTarget: boolean,
   isValidConnection: ValidConnectionFunc,
-  connectionMode: ConnectionMode,
   elementEdgeUpdaterType?: HandleType,
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void,
-  onConnectStart?: OnConnectStartFunc,
-  onConnectStop?: OnConnectStopFunc,
-  onConnectEnd?: OnConnectEndFunc
+  onEdgeUpdateEnd?: (evt: MouseEvent) => void
 ): void {
   const revueFlowNode = (event.target as Element).closest('.revue-flow');
   // when revue-flow is used inside a shadow root we can't use document
@@ -119,23 +118,23 @@ export function onMouseDown(
   const containerBounds = revueFlowNode.getBoundingClientRect();
   let recentHoveredHandle: Element;
 
-  setPosition({
-    x: event.clientX - containerBounds.left,
-    y: event.clientY - containerBounds.top
-  });
+  store.connectionPosition.x = event.clientX - containerBounds.left;
+  store.connectionPosition.y = event.clientY - containerBounds.top;
 
-  setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
-  onConnectStart?.(event, { nodeId, handleId, handleType });
+  store.setConnectionNodeId({
+    connectionNodeId: nodeId,
+    connectionHandleId: handleId,
+    connectionHandleType: handleType
+  });
+  hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } });
 
   function onMouseMove(event: MouseEvent) {
-    setPosition({
-      x: event.clientX - containerBounds.left,
-      y: event.clientY - containerBounds.top
-    });
+    store.connectionPosition.x = event.clientX - containerBounds.left;
+    store.connectionPosition.y = event.clientY - containerBounds.top;
 
     const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
       event,
-      connectionMode,
+      store.connectionMode,
       isTarget,
       nodeId,
       handleId,
@@ -159,7 +158,7 @@ export function onMouseDown(
   function onMouseUp(event: MouseEvent) {
     const { connection, isValid } = checkElementBelowIsValid(
       event,
-      connectionMode,
+      store.connectionMode,
       isTarget,
       nodeId,
       handleId,
@@ -167,20 +166,20 @@ export function onMouseDown(
       doc
     );
 
-    onConnectStop?.(event);
+    hooks.connectStop.trigger(event);
 
     if (isValid) {
       onConnect?.(connection);
     }
 
-    onConnectEnd?.(event);
+    hooks.connectEnd.trigger(event);
 
     if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
       onEdgeUpdateEnd(event);
     }
 
     resetRecentHandle(recentHoveredHandle);
-    setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
+    store.setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 
     doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
     doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index 28e5ce7b..3c149ae7 100644
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -1,6 +1,7 @@
 import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
 import { computed, defineComponent, inject, PropType } from 'vue';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 const alwaysValid = () => true;
 
@@ -39,6 +40,7 @@ const Handle = defineComponent({
   },
   setup(props, { slots }) {
     const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
     const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
     const isTarget = computed(() => props.type === 'target');
     const onConnect = computed(() => store.onConnect);
@@ -51,19 +53,15 @@ const Handle = defineComponent({
     const onMouseDownHandler = (event: MouseEvent) => {
       onMouseDown(
         event,
+        store,
+        hooks,
         props.id as string,
         nodeId,
-        store.setConnectionNodeId,
-        store.setConnectionPosition,
         onConnectExtended,
         isTarget.value,
         props.isValidConnection,
-        store.connectionMode,
         undefined,
-        undefined,
-        store.onConnectStart,
-        store.onConnectStop,
-        store.onConnectEnd
+        undefined
       );
     };
 
diff --git a/src/container/FlowRenderer/FlowRenderer.vue b/src/container/FlowRenderer/FlowRenderer.vue
new file mode 100644
index 00000000..13566cfd
--- /dev/null
+++ b/src/container/FlowRenderer/FlowRenderer.vue
@@ -0,0 +1,225 @@
+<template>
+  <ZoomPane
+    :onMove="onMove"
+    :onMoveStart="onMoveStart"
+    :onMoveEnd="onMoveEnd"
+    :selectionKeyPressed="keyPressed"
+    :elementsSelectable="elementsSelectable"
+    :zoomOnScroll="zoomOnScroll"
+    :zoomOnPinch="zoomOnPinch"
+    :panOnScroll="panOnScroll"
+    :panOnScrollSpeed="panOnScrollSpeed"
+    :panOnScrollMode="panOnScrollMode"
+    :zoomOnDoubleClick="zoomOnDoubleClick"
+    :paneMoveable="paneMoveable"
+    :defaultPosition="defaultPosition"
+    :defaultZoom="defaultZoom"
+    :translateExtent="translateExtent"
+    :zoomActivationKeyCode="zoomActivationKeyCode"
+  >
+    <slot></slot>
+    <UserSelection v-if="keyPressed" />
+    <NodesSelection
+      v-if="selectionActive"
+      :onSelectionDragStart="onSelectionDragStart"
+      :onSelectionDrag="onSelectionDrag"
+      :onSelectionDragStop="onSelectionDragStop"
+      :onSelectionContextMenu="onSelectionContextMenu"
+    />
+    <div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
+  </ZoomPane>
+</template>
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+import ZoomPane from '../ZoomPane';
+import UserSelection from '../../components/UserSelection';
+import NodesSelection from '../../components/NodesSelection';
+import { RevueFlowStore, GraphViewProps } from '../../types';
+import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
+import useKeyPress from '../../hooks/useKeyPress';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+type FlowRendererProps = Omit<
+  GraphViewProps,
+  | 'elements'
+  | 'snapToGrid'
+  | 'nodeTypes'
+  | 'edgeTypes'
+  | 'snapGrid'
+  | 'connectionLineType'
+  | 'arrowHeadColor'
+  | 'onlyRenderVisibleElements'
+  | 'selectNodesOnDrag'
+>;
+
+const FlowRenderer = defineComponent({
+  name: 'FlowRenderer',
+  components: { UserSelection, ZoomPane, NodesSelection },
+  props: {
+    onPaneClick: {
+      type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
+      required: false,
+      default: undefined
+    },
+    onPaneContextMenu: {
+      type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onPaneScroll: {
+      type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
+      required: false,
+      default: undefined
+    },
+    onElementsRemove: {
+      type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
+      required: false,
+      default: undefined
+    },
+    onMove: {
+      type: Function as unknown as PropType<FlowRendererProps['onMove']>,
+      required: false,
+      default: undefined
+    },
+    onMoveStart: {
+      type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
+      required: false,
+      default: undefined
+    },
+    onMoveEnd: {
+      type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStart: {
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDrag: {
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStop: {
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionContextMenu: {
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    deleteKeyCode: {
+      type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    selectionKeyCode: {
+      type: [Number, String] as PropType<FlowRendererProps['selectionKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    multiSelectionKeyCode: {
+      type: [Number, String] as PropType<FlowRendererProps['multiSelectionKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    zoomActivationKeyCode: {
+      type: [Number, String] as PropType<FlowRendererProps['zoomActivationKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    elementsSelectable: {
+      type: Boolean as PropType<FlowRendererProps['elementsSelectable']>,
+      required: false,
+      default: false
+    },
+    zoomOnScroll: {
+      type: Boolean as PropType<FlowRendererProps['zoomOnScroll']>,
+      required: false,
+      default: false
+    },
+    zoomOnPinch: {
+      type: Boolean as PropType<FlowRendererProps['zoomOnPinch']>,
+      required: false,
+      default: false
+    },
+    panOnScroll: {
+      type: Boolean as PropType<FlowRendererProps['panOnScroll']>,
+      required: false,
+      default: false
+    },
+    panOnScrollSpeed: {
+      type: Number as PropType<FlowRendererProps['panOnScrollSpeed']>,
+      required: false,
+      default: undefined
+    },
+    panOnScrollMode: {
+      type: String as PropType<FlowRendererProps['panOnScrollMode']>,
+      required: false,
+      default: undefined
+    },
+    zoomOnDoubleClick: {
+      type: Boolean as PropType<FlowRendererProps['zoomOnDoubleClick']>,
+      required: false,
+      default: false
+    },
+    paneMoveable: {
+      type: Boolean as PropType<FlowRendererProps['paneMoveable']>,
+      required: false,
+      default: false
+    },
+    defaultPosition: {
+      type: Array as unknown as PropType<FlowRendererProps['defaultPosition']>,
+      required: false,
+      default: undefined
+    },
+    defaultZoom: {
+      type: Number as PropType<FlowRendererProps['defaultZoom']>,
+      required: false,
+      default: undefined
+    },
+    translateExtent: {
+      type: Array as unknown as PropType<FlowRendererProps['translateExtent']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    const keyPressed = useKeyPress(props.selectionKeyCode);
+
+    useGlobalKeyHandler({
+      store,
+      onElementsRemove: props.onElementsRemove,
+      deleteKeyCode: props.deleteKeyCode,
+      multiSelectionKeyCode: props.multiSelectionKeyCode
+    });
+
+    const onClick = (event: MouseEvent) => {
+      hooks.paneClick.trigger(event);
+      store.unsetNodesSelection();
+      store.resetSelectedElements();
+    };
+
+    const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event);
+
+    const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event);
+
+    const selectionActive = computed(() => store.nodesSelectionActive);
+
+    return {
+      onClick,
+      onContextMenu,
+      onWheel,
+      keyPressed,
+      selectionActive
+    };
+  }
+});
+
+export default FlowRenderer;
+</script>
diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index 353dc824..27d17607 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -155,10 +155,11 @@ const FlowRenderer = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const store = inject<RevueFlowStore>('store');
+    const store = inject<RevueFlowStore>('store')!;
     const keyPressed = useKeyPress(props.selectionKeyCode);
 
     useGlobalKeyHandler({
+      store,
       onElementsRemove: props.onElementsRemove,
       deleteKeyCode: props.deleteKeyCode as string,
       multiSelectionKeyCode: props.multiSelectionKeyCode as string
diff --git a/src/container/GraphView/GraphView.vue b/src/container/GraphView/GraphView.vue
new file mode 100644
index 00000000..8b4d0d10
--- /dev/null
+++ b/src/container/GraphView/GraphView.vue
@@ -0,0 +1,480 @@
+<template>
+  <FlowRenderer
+    :onPaneClick="onPaneClick"
+    :onPaneContextMenu="onPaneContextMenu"
+    :onPaneScroll="onPaneScroll"
+    :onElementsRemove="onElementsRemove"
+    :deleteKeyCode="deleteKeyCode"
+    :selectionKeyCode="selectionKeyCode"
+    :multiSelectionKeyCode="multiSelectionKeyCode"
+    :zoomActivationKeyCode="zoomActivationKeyCode"
+    :elementsSelectable="elementsSelectable"
+    :onMove="onMove"
+    :onMoveStart="onMoveStart"
+    :onMoveEnd="onMoveEnd"
+    :zoomOnScroll="zoomOnScroll"
+    :zoomOnPinch="zoomOnPinch"
+    :zoomOnDoubleClick="zoomOnDoubleClick"
+    :panOnScroll="panOnScroll"
+    :panOnScrollSpeed="panOnScrollSpeed"
+    :panOnScrollMode="panOnScrollMode"
+    :paneMoveable="paneMoveable"
+    :defaultPosition="defaultPosition"
+    :defaultZoom="defaultZoom"
+    :translateExtent="translateExtent"
+    :onSelectionDragStart="onSelectionDragStart"
+    :onSelectionDrag="onSelectionDrag"
+    :onSelectionDragStop="onSelectionDragStop"
+    :onSelectionContextMenu="onSelectionContextMenu"
+  >
+    <NodeRenderer
+      :nodeTypes="nodeTypes"
+      :onElementClick="onElementClick"
+      :onNodeDoubleClick="onNodeDoubleClick"
+      :onNodeMouseEnter="onNodeMouseEnter"
+      :onNodeMouseMove="onNodeMouseMove"
+      :onNodeMouseLeave="onNodeMouseLeave"
+      :onNodeContextMenu="onNodeContextMenu"
+      :onNodeDragStop="onNodeDragStop"
+      :onNodeDrag="onNodeDrag"
+      :onNodeDragStart="onNodeDragStart"
+      :selectNodesOnDrag="selectNodesOnDrag"
+      :snapToGrid="snapToGrid"
+      :snapGrid="snapGrid"
+      :onlyRenderVisibleElements="onlyRenderVisibleElements"
+    />
+    <EdgeRenderer
+      :edgeTypes="edgeTypes"
+      :onElementClick="onElementClick"
+      :onEdgeDoubleClick="onEdgeDoubleClick"
+      :connectionLineType="connectionLineType"
+      :connectionLineStyle="connectionLineStyle"
+      :connectionLineComponent="connectionLineComponent"
+      :connectionMode="connectionMode"
+      :arrowHeadColor="arrowHeadColor"
+      :markerEndId="markerEndId"
+      :onEdgeUpdate="onEdgeUpdate"
+      :onlyRenderVisibleElements="onlyRenderVisibleElements"
+      :onEdgeContextMenu="onEdgeContextMenu"
+      :onEdgeMouseEnter="onEdgeMouseEnter"
+      :onEdgeMouseMove="onEdgeMouseMove"
+      :onEdgeMouseLeave="onEdgeMouseLeave"
+      :onEdgeUpdateStart="onEdgeUpdateStart"
+      :onEdgeUpdateEnd="onEdgeUpdateEnd"
+      :edgeUpdaterRadius="edgeUpdaterRadius"
+    />
+  </FlowRenderer>
+</template>
+<script lang="ts">
+import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
+import FlowRenderer from '../FlowRenderer/FlowRenderer.vue';
+import NodeRenderer from '../NodeRenderer';
+import EdgeRenderer from '../EdgeRenderer';
+import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
+import { GraphViewProps, RevueFlowStore } from '../../types';
+import useZoomPanHelper from '../../hooks/useZoomPanHelper';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+const GraphView = defineComponent({
+  name: 'GraphView',
+  components: { NodeRenderer, EdgeRenderer, FlowRenderer },
+  props: {
+    nodeTypes: {
+      type: Object as PropType<GraphViewProps['nodeTypes']>,
+      required: false,
+      default: undefined
+    },
+    edgeTypes: {
+      type: Object as PropType<GraphViewProps['edgeTypes']>,
+      required: false,
+      default: undefined
+    },
+    onMove: {
+      type: Function as unknown as PropType<GraphViewProps['onMove']>,
+      required: false,
+      default: undefined
+    },
+    onMoveStart: {
+      type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
+      required: false,
+      default: undefined
+    },
+    onMoveEnd: {
+      type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
+      required: false,
+      default: undefined
+    },
+    onLoad: {
+      type: Function as unknown as PropType<GraphViewProps['onLoad']>,
+      required: false,
+      default: undefined
+    },
+    onElementClick: {
+      type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDoubleClick: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeDoubleClick: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseEnter: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseMove: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseLeave: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
+      required: false,
+      default: undefined
+    },
+    onNodeContextMenu: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStart: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDrag: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStop: {
+      type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionContextMenu: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onElementsRemove: {
+      type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
+      required: false,
+      default: undefined
+    },
+    onConnect: {
+      type: Function as unknown as PropType<GraphViewProps['onConnect']>,
+      required: false,
+      default: undefined
+    },
+    onConnectStart: {
+      type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
+      required: false,
+      default: undefined
+    },
+    onConnectStop: {
+      type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
+      required: false,
+      default: undefined
+    },
+    onConnectEnd: {
+      type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
+      required: false,
+      default: undefined
+    },
+    connectionMode: {
+      type: String as PropType<GraphViewProps['connectionMode']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineType: {
+      type: String as PropType<GraphViewProps['connectionLineType']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineStyle: {
+      type: Object as PropType<GraphViewProps['connectionLineStyle']>,
+      required: false,
+      default: () => ({} as CSSProperties)
+    },
+    connectionLineComponent: {
+      type: Object as PropType<GraphViewProps['connectionLineComponent']>,
+      required: false,
+      default: undefined
+    },
+    selectionKeyCode: {
+      type: [Number, String] as PropType<GraphViewProps['selectionKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    multiSelectionKeyCode: {
+      type: [Number, String] as PropType<GraphViewProps['multiSelectionKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    zoomActivationKeyCode: {
+      type: [Number, String] as PropType<GraphViewProps['zoomActivationKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    deleteKeyCode: {
+      type: [Number, String] as PropType<GraphViewProps['deleteKeyCode']>,
+      required: false,
+      default: undefined
+    },
+    snapToGrid: {
+      type: Boolean as PropType<GraphViewProps['snapToGrid']>,
+      required: false,
+      default: undefined
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<GraphViewProps['snapGrid']>,
+      required: false,
+      default: undefined
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<GraphViewProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: undefined
+    },
+    nodesDraggable: {
+      type: Boolean as PropType<GraphViewProps['nodesDraggable']>,
+      required: false,
+      default: undefined
+    },
+    nodesConnectable: {
+      type: Boolean as PropType<GraphViewProps['nodesConnectable']>,
+      required: false,
+      default: undefined
+    },
+    elementsSelectable: {
+      type: Boolean as PropType<GraphViewProps['elementsSelectable']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<GraphViewProps['selectNodesOnDrag']>,
+      required: false,
+      default: undefined
+    },
+    minZoom: {
+      type: Number as PropType<GraphViewProps['minZoom']>,
+      required: false,
+      default: undefined
+    },
+    maxZoom: {
+      type: Number as PropType<GraphViewProps['maxZoom']>,
+      required: false,
+      default: undefined
+    },
+    defaultZoom: {
+      type: Number as PropType<GraphViewProps['defaultZoom']>,
+      required: false,
+      default: undefined
+    },
+    defaultPosition: {
+      type: Array as unknown as PropType<GraphViewProps['defaultPosition']>,
+      required: false,
+      default: undefined
+    },
+    translateExtent: {
+      type: Array as unknown as PropType<GraphViewProps['translateExtent']>,
+      required: false,
+      default: undefined
+    },
+    nodeExtent: {
+      type: Array as unknown as PropType<GraphViewProps['nodeExtent']>,
+      required: false,
+      default: undefined
+    },
+    arrowHeadColor: {
+      type: String as PropType<GraphViewProps['arrowHeadColor']>,
+      required: false,
+      default: undefined
+    },
+    markerEndId: {
+      type: String as PropType<GraphViewProps['markerEndId']>,
+      required: false,
+      default: undefined
+    },
+    zoomOnScroll: {
+      type: Boolean as PropType<GraphViewProps['zoomOnScroll']>,
+      required: false,
+      default: undefined
+    },
+    zoomOnPinch: {
+      type: Boolean as PropType<GraphViewProps['zoomOnPinch']>,
+      required: false,
+      default: undefined
+    },
+    panOnScroll: {
+      type: Boolean as PropType<GraphViewProps['panOnScroll']>,
+      required: false,
+      default: undefined
+    },
+    panOnScrollSpeed: {
+      type: Number as PropType<GraphViewProps['panOnScrollSpeed']>,
+      required: false,
+      default: undefined
+    },
+    panOnScrollMode: {
+      type: String as PropType<GraphViewProps['panOnScrollMode']>,
+      required: false,
+      default: undefined
+    },
+    zoomOnDoubleClick: {
+      type: Boolean as PropType<GraphViewProps['zoomOnDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    paneMoveable: {
+      type: Boolean as PropType<GraphViewProps['paneMoveable']>,
+      required: false,
+      default: undefined
+    },
+    onPaneClick: {
+      type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
+      required: false,
+      default: undefined
+    },
+    onPaneScroll: {
+      type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
+      required: false,
+      default: undefined
+    },
+    onPaneContextMenu: {
+      type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdate: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseEnter: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeContextMenu: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseMove: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseLeave: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdateEnd: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdateStart: {
+      type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStart: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDrag: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStop: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
+      required: false,
+      default: undefined
+    },
+    edgeUpdaterRadius: {
+      type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+
+    const { onReady } = useZoomPanHelper(store);
+    onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
+      if (initialized) {
+        hooks.load.trigger({
+          fitView: (params = { padding: 0.1 }) => fitView(params),
+          zoomIn,
+          zoomOut,
+          zoomTo,
+          setTransform: transform,
+          project: onLoadProject(store),
+          getElements: onLoadGetElements(store),
+          toObject: onLoadToObject(store)
+        });
+      }
+    });
+
+    const init = () => {
+      if (typeof props.snapToGrid !== 'undefined') {
+        store.snapToGrid = props.snapToGrid;
+      }
+
+      if (typeof props.snapGrid !== 'undefined') {
+        store.snapGrid = props.snapGrid;
+      }
+
+      if (typeof props.minZoom !== 'undefined') {
+        store.setMinZoom(props.minZoom);
+      }
+
+      if (typeof props.maxZoom !== 'undefined') {
+        store.setMaxZoom(props.maxZoom);
+      }
+
+      if (typeof props.translateExtent !== 'undefined') {
+        store.setTranslateExtent(props.translateExtent);
+      }
+
+      if (typeof props.nodeExtent !== 'undefined') {
+        store.setNodeExtent(props.nodeExtent);
+      }
+
+      if (typeof props.nodesConnectable !== 'undefined') {
+        store.nodesConnectable = !!props.nodesConnectable;
+      }
+      if (typeof props.elementsSelectable !== 'undefined') {
+        store.elementsSelectable = !!props.elementsSelectable;
+      }
+      if (typeof props.nodesDraggable !== 'undefined') {
+        store.nodesDraggable = !!props.nodesDraggable;
+      }
+
+      if (typeof props.connectionMode !== 'undefined') {
+        store.connectionMode = props.connectionMode;
+      }
+    };
+
+    watchEffect(() => {
+      init();
+    });
+  }
+});
+
+export default GraphView;
+</script>
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index c797a79e..b5127753 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, inject, onBeforeMount, onMounted, ref, PropType, CSSProperties } from 'vue';
+import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -342,13 +342,11 @@ const GraphView = defineComponent({
     }
   },
   setup(props) {
-    const store = inject<RevueFlowStore>('store');
-    const isInitialized = ref<boolean>(false);
+    const store = inject<RevueFlowStore>('store')!;
 
-    onMounted(() => {
-      const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
-
-      if (!isInitialized.value && initialized) {
+    const { onReady } = useZoomPanHelper(store);
+    onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
+      if (initialized) {
         if (props.onLoad && store) {
           props.onLoad({
             fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -361,58 +359,32 @@ const GraphView = defineComponent({
             toObject: onLoadToObject(store)
           });
         }
-        isInitialized.value = true;
       }
     });
 
     onMounted(() => {
       if (typeof props.nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
+        store.nodesConnectable = !!props.nodesConnectable;
       }
       if (typeof props.elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store.elementsSelectable = !!props.elementsSelectable;
+      }
+      if (typeof props.nodesDraggable !== 'undefined') {
+        store.nodesDraggable = !!props.nodesDraggable;
       }
 
       if (typeof props.connectionMode !== 'undefined') {
-        store?.setConnectionMode(props.connectionMode);
+        store.connectionMode = props.connectionMode;
       }
     });
 
     onBeforeMount(() => {
-      if (props.onConnect) {
-        store?.setOnConnect(props.onConnect);
-      }
-
-      if (props.onConnectStart) {
-        store?.setOnConnectStart(props.onConnectStart);
-      }
-
-      if (props.onConnectStop) {
-        store?.setOnConnectStop(props.onConnectStop);
-      }
-
-      if (props.onConnectEnd) {
-        store?.setOnConnectEnd(props.onConnectEnd);
-      }
-
       if (typeof props.snapToGrid !== 'undefined') {
-        store?.setSnapToGrid(props.snapToGrid);
+        store.snapToGrid = props.snapToGrid;
       }
 
       if (typeof props.snapGrid !== 'undefined') {
-        store?.setSnapGrid(props.snapGrid);
-      }
-
-      if (typeof props.nodesDraggable !== 'undefined') {
-        store?.setNodesDraggable(!!props.nodesDraggable);
-      }
-
-      if (typeof props.nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
-      }
-
-      if (typeof props.elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store.snapGrid = props.snapGrid;
       }
 
       if (typeof props.minZoom !== 'undefined') {
diff --git a/src/container/RevueFlow/RevueFlow.vue b/src/container/RevueFlow/RevueFlow.vue
new file mode 100644
index 00000000..ef75fe13
--- /dev/null
+++ b/src/container/RevueFlow/RevueFlow.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="revue-flow">
+    <GraphView
+      :onLoad="onLoad"
+      :onMove="onMove"
+      :onMoveStart="onMoveStart"
+      :onMoveEnd="onMoveEnd"
+      :onElementClick="onElementClick"
+      :onNodeMouseEnter="onNodeMouseEnter"
+      :onNodeMouseMove="onNodeMouseMove"
+      :onNodeMouseLeave="onNodeMouseLeave"
+      :onNodeContextMenu="onNodeContextMenu"
+      :onNodeDoubleClick="onNodeDoubleClick"
+      :onNodeDragStart="onNodeDragStart"
+      :onNodeDrag="onNodeDrag"
+      :onNodeDragStop="onNodeDragStop"
+      :nodeTypes="nodeTypesParsed"
+      :edgeTypes="edgeTypesParsed"
+      :connectionMode="connectionMode"
+      :connectionLineType="connectionLineType"
+      :connectionLineStyle="connectionLineStyle"
+      :connectionLineComponent="connectionLineComponent"
+      :selectionKeyCode="selectionKeyCode"
+      :onElementsRemove="onElementsRemove"
+      :deleteKeyCode="deleteKeyCode"
+      :multiSelectionKeyCode="multiSelectionKeyCode"
+      :zoomActivationKeyCode="zoomActivationKeyCode"
+      :onConnect="onConnect"
+      :onConnectStart="onConnectStart"
+      :onConnectStop="onConnectStop"
+      :onConnectEnd="onConnectEnd"
+      :snapToGrid="snapToGrid"
+      :snapGrid="snapGrid"
+      :onlyRenderVisibleElements="onlyRenderVisibleElements"
+      :nodesDraggable="nodesDraggable"
+      :nodesConnectable="nodesConnectable"
+      :elementsSelectable="elementsSelectable"
+      :selectNodesOnDrag="selectNodesOnDrag"
+      :minZoom="minZoom"
+      :maxZoom="maxZoom"
+      :defaultZoom="defaultZoom"
+      :defaultPosition="defaultPosition"
+      :translateExtent="translateExtent"
+      :nodeExtent="nodeExtent"
+      :arrowHeadColor="arrowHeadColor"
+      :markerEndId="markerEndId"
+      :zoomOnScroll="zoomOnScroll"
+      :zoomOnPinch="zoomOnPinch"
+      :zoomOnDoubleClick="zoomOnDoubleClick"
+      :panOnScroll="panOnScroll"
+      :panOnScrollSpeed="panOnScrollSpeed"
+      :panOnScrollMode="panOnScrollMode"
+      :paneMoveable="paneMoveable"
+      :onPaneClick="onPaneClick"
+      :onPaneScroll="onPaneScroll"
+      :onPaneContextMenu="onPaneContextMenu"
+      :onSelectionDragStart="onSelectionDragStart"
+      :onSelectionDrag="onSelectionDrag"
+      :onSelectionDragStop="onSelectionDragStop"
+      :onSelectionContextMenu="onSelectionContextMenu"
+      :onEdgeUpdate="onEdgeUpdate"
+      :onEdgeContextMenu="onEdgeContextMenu"
+      :onEdgeDoubleClick="onEdgeDoubleClick"
+      :onEdgeMouseEnter="onEdgeMouseEnter"
+      :onEdgeMouseMove="onEdgeMouseMove"
+      :onEdgeMouseLeave="onEdgeMouseLeave"
+      :onEdgeUpdateStart="onEdgeUpdateStart"
+      :onEdgeUpdateEnd="onEdgeUpdateEnd"
+      :edgeUpdaterRadius="edgeUpdaterRadius"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
+import { useVModel } from '@vueuse/core';
+import '../../style.css';
+import '../../theme-default.css';
+import GraphView from '../GraphView/GraphView.vue';
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import { createNodeTypes } from '../NodeRenderer/utils';
+import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import { ConnectionMode, ConnectionLineType, PanOnScrollMode, RevueFlowStore, RevueFlowProps } from '../../types';
+import { initialState } from '../../store';
+import configureStore from '../../store/configure-store';
+import { RevueFlowHooks, useRevueFlow } from '../../hooks/RevueFlowHooks';
+
+const defaultNodeTypes = {
+  input: InputNode,
+  default: DefaultNode,
+  output: OutputNode
+};
+
+const defaultEdgeTypes = {
+  default: BezierEdge,
+  straight: StraightEdge,
+  step: StepEdge,
+  smoothstep: SmoothStepEdge
+};
+
+const RevueFlow = defineComponent({
+  name: 'RevueFlow',
+  components: { GraphView },
+  props: {
+    modelValue: {
+      type: Array as PropType<RevueFlowProps['elements']>,
+      required: false,
+      default: () => []
+    },
+    nodeTypesId: {
+      type: String as PropType<RevueFlowProps['nodeTypesId']>,
+      required: false,
+      default: '1'
+    },
+    edgeTypesId: {
+      type: String as PropType<RevueFlowProps['edgeTypesId']>,
+      required: false,
+      default: '1'
+    },
+    nodeTypes: {
+      type: Object as PropType<RevueFlowProps['nodeTypes']>,
+      required: false,
+      default: () => defaultNodeTypes
+    },
+    edgeTypes: {
+      type: Object as PropType<RevueFlowProps['edgeTypes']>,
+      required: false,
+      default: () => defaultEdgeTypes
+    },
+    onMove: {
+      type: Function as unknown as PropType<RevueFlowProps['onMove']>,
+      required: false,
+      default: undefined
+    },
+    onMoveStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
+      required: false,
+      default: undefined
+    },
+    onMoveEnd: {
+      type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
+      required: false,
+      default: undefined
+    },
+    onLoad: {
+      type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
+      required: false,
+      default: undefined
+    },
+    onElementClick: {
+      type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDoubleClick: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeDoubleClick: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseEnter: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseMove: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
+      required: false,
+      default: undefined
+    },
+    onNodeMouseLeave: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
+      required: false,
+      default: undefined
+    },
+    onNodeContextMenu: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDrag: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
+      required: false,
+      default: undefined
+    },
+    onNodeDragStop: {
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionContextMenu: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onElementsRemove: {
+      type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
+      required: false,
+      default: undefined
+    },
+    onConnect: {
+      type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
+      required: false,
+      default: undefined
+    },
+    onConnectStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
+      required: false,
+      default: undefined
+    },
+    onConnectStop: {
+      type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
+      required: false,
+      default: undefined
+    },
+    onConnectEnd: {
+      type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
+      required: false,
+      default: undefined
+    },
+    connectionMode: {
+      type: String as PropType<RevueFlowProps['connectionMode']>,
+      required: false,
+      default: ConnectionMode.Strict
+    },
+    connectionLineType: {
+      type: String as PropType<RevueFlowProps['connectionLineType']>,
+      required: false,
+      default: ConnectionLineType.Bezier
+    },
+    connectionLineStyle: {
+      type: Object as PropType<RevueFlowProps['connectionLineStyle']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineComponent: {
+      type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
+      required: false,
+      default: undefined
+    },
+    selectionKeyCode: {
+      type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
+      required: false,
+      default: 'Shift'
+    },
+    multiSelectionKeyCode: {
+      type: [Number, String] as PropType<RevueFlowProps['multiSelectionKeyCode']>,
+      required: false,
+      default: 'Meta'
+    },
+    zoomActivationKeyCode: {
+      type: [Number, String] as PropType<RevueFlowProps['zoomActivationKeyCode']>,
+      required: false,
+      default: 'Meta'
+    },
+    deleteKeyCode: {
+      type: [Number, String] as PropType<RevueFlowProps['deleteKeyCode']>,
+      required: false,
+      default: 'Backspace'
+    },
+    snapToGrid: {
+      type: Boolean as PropType<RevueFlowProps['snapToGrid']>,
+      required: false,
+      default: false
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<RevueFlowProps['snapGrid']>,
+      required: false,
+      default: () => [15, 15]
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<RevueFlowProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: false
+    },
+    nodesDraggable: {
+      type: Boolean as PropType<RevueFlowProps['nodesDraggable']>,
+      required: false,
+      default: undefined
+    },
+    nodesConnectable: {
+      type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
+      required: false,
+      default: undefined
+    },
+    elementsSelectable: {
+      type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
+      required: false,
+      default: true
+    },
+    minZoom: {
+      type: Number as PropType<RevueFlowProps['minZoom']>,
+      required: false,
+      default: undefined
+    },
+    maxZoom: {
+      type: Number as PropType<RevueFlowProps['maxZoom']>,
+      required: false,
+      default: undefined
+    },
+    defaultZoom: {
+      type: Number as PropType<RevueFlowProps['defaultZoom']>,
+      required: false,
+      default: 1
+    },
+    defaultPosition: {
+      type: Array as unknown as PropType<RevueFlowProps['defaultPosition']>,
+      required: false,
+      default: () => [0, 0]
+    },
+    translateExtent: {
+      type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
+      required: false,
+      default: undefined
+    },
+    nodeExtent: {
+      type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
+      required: false,
+      default: undefined
+    },
+    arrowHeadColor: {
+      type: String as PropType<RevueFlowProps['arrowHeadColor']>,
+      required: false,
+      default: '#b1b1b7'
+    },
+    markerEndId: {
+      type: String as PropType<RevueFlowProps['markerEndId']>,
+      required: false,
+      default: undefined
+    },
+    zoomOnScroll: {
+      type: Boolean as PropType<RevueFlowProps['zoomOnScroll']>,
+      required: false,
+      default: true
+    },
+    zoomOnPinch: {
+      type: Boolean as PropType<RevueFlowProps['zoomOnPinch']>,
+      required: false,
+      default: true
+    },
+    panOnScroll: {
+      type: Boolean as PropType<RevueFlowProps['panOnScroll']>,
+      required: false,
+      default: false
+    },
+    panOnScrollSpeed: {
+      type: Number as PropType<RevueFlowProps['panOnScrollSpeed']>,
+      required: false,
+      default: 0.5
+    },
+    panOnScrollMode: {
+      type: String as PropType<RevueFlowProps['panOnScrollMode']>,
+      required: false,
+      default: PanOnScrollMode.Free
+    },
+    zoomOnDoubleClick: {
+      type: Boolean as PropType<RevueFlowProps['zoomOnDoubleClick']>,
+      required: false,
+      default: true
+    },
+    paneMoveable: {
+      type: Boolean as PropType<RevueFlowProps['paneMoveable']>,
+      required: false,
+      default: true
+    },
+    onPaneClick: {
+      type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
+      required: false,
+      default: undefined
+    },
+    onPaneScroll: {
+      type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
+      required: false,
+      default: undefined
+    },
+    onPaneContextMenu: {
+      type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdate: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseEnter: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeContextMenu: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseMove: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeMouseLeave: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdateEnd: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
+      required: false,
+      default: undefined
+    },
+    onEdgeUpdateStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDrag: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStop: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionChange: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
+      required: false,
+      default: undefined
+    },
+    edgeUpdaterRadius: {
+      type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
+      required: false,
+      default: 10
+    }
+  },
+  emits: ['', 'load'],
+  setup(props, { emit }) {
+    const store = configureStore(initialState)();
+    provide<RevueFlowStore>('store', store);
+    provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
+    const elements = useVModel(props, 'modelValue', emit);
+
+    store.setElements(elements.value);
+    watch(elements.value, () => {
+      store.setElements(elements.value);
+    });
+
+    onUpdated(() => {
+      console.log('updated');
+      store.setElements(elements.value);
+    });
+
+    onBeforeUnmount(() => {
+      store.$reset();
+      store.setElements([]);
+    });
+
+    const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
+    const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
+
+    return {
+      nodeTypesParsed: nodeTypesParsed.value,
+      edgeTypesParsed: edgeTypesParsed.value
+    };
+  }
+});
+export default RevueFlow;
+</script>
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index d9fff78e..03cdc7f9 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/src/container/ZoomPane/index.tsx
@@ -198,7 +198,7 @@ const ZoomPane = defineComponent({
           store.d3Zoom.on('zoom', null);
         } else {
           store.d3Zoom.on('zoom', (event: any) => {
-            store.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
+            store.transform = [event.transform.x, event.transform.y, event.transform.k];
 
             if (props.onMove) {
               const flowTransform = eventToFlowTransform(event.transform);
diff --git a/src/hooks/RevueFlowHooks.ts b/src/hooks/RevueFlowHooks.ts
new file mode 100644
index 00000000..65cc9062
--- /dev/null
+++ b/src/hooks/RevueFlowHooks.ts
@@ -0,0 +1,96 @@
+// global hooks
+import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types';
+import { createEventHook, EventHook } from '@vueuse/core';
+import { SetupContext } from 'vue';
+
+export interface RevueFlowHooks {
+  elementClick: EventHook<{ event: MouseEvent; element: Node | Edge }>;
+  elementsRemove: EventHook<Elements>;
+  nodeDoubleClick: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeContextMenu: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeDrag: EventHook<{ event: MouseEvent; node: Node }>;
+  nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>;
+  connect: EventHook<Edge | Connection>;
+  connectStart: EventHook<{
+    event: MouseEvent;
+    params: OnConnectStartParams;
+  }>;
+  connectStop: EventHook<MouseEvent>;
+  connectEnd: EventHook<MouseEvent>;
+  load: EventHook<OnLoadParams>;
+  move: EventHook<FlowTransform | undefined>;
+  moveStart: EventHook<FlowTransform | undefined>;
+  moveEnd: EventHook<FlowTransform | undefined>;
+  selectionChange: EventHook<Elements | null>;
+  selectionDragStart: EventHook<{ event: MouseEvent; nodes: Node[] }>;
+  selectionDrag: EventHook<{ event: MouseEvent; nodes: Node[] }>;
+  selectionDragStop: EventHook<{ event: MouseEvent; nodes: Node[] }>;
+  selectionContextMenu: EventHook<{ event: MouseEvent; nodes: Node[] }>;
+  paneScroll: EventHook<WheelEvent | undefined>;
+  paneClick: EventHook<MouseEvent>;
+  paneContextMenu: EventHook<MouseEvent>;
+  edgeUpdate: EventHook<{ oldEdge: Edge; newConnection: Connection }>;
+  edgeContextMenu: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeMouseEnter: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeMouseMove: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeMouseLeave: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeDoubleClick: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>;
+  edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>;
+}
+
+export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
+  const eventHooks: RevueFlowHooks = {
+    elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
+    elementsRemove: createEventHook<Elements>(),
+    nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeContextMenu: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
+    nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
+    connect: createEventHook<Edge | Connection>(),
+    connectStart: createEventHook<{
+      event: MouseEvent;
+      params: OnConnectStartParams;
+    }>(),
+    connectStop: createEventHook<MouseEvent>(),
+    connectEnd: createEventHook<MouseEvent>(),
+    load: createEventHook<OnLoadParams>(),
+    move: createEventHook<FlowTransform | undefined>(),
+    moveStart: createEventHook<FlowTransform | undefined>(),
+    moveEnd: createEventHook<FlowTransform | undefined>(),
+    selectionChange: createEventHook<Elements | null>(),
+    selectionDragStart: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
+    selectionDrag: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
+    selectionDragStop: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
+    selectionContextMenu: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
+    paneScroll: createEventHook<WheelEvent | undefined>(),
+    paneClick: createEventHook<MouseEvent>(),
+    paneContextMenu: createEventHook<MouseEvent>(),
+    edgeUpdate: createEventHook<{ oldEdge: Edge; newConnection: Connection }>(),
+    edgeContextMenu: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeMouseEnter: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeMouseMove: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeMouseLeave: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeDoubleClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
+    edgeUpdateEnd: createEventHook<{ event: MouseEvent; edge: Edge }>()
+  };
+
+  for (const [key, value] of Object.entries(eventHooks)) {
+    value.on((data: any) => {
+      emit(key, data);
+    });
+  }
+
+  return {
+    ...eventHooks
+  };
+};
diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts
index 86d904ed..f0248a9c 100644
--- a/src/hooks/useGlobalKeyHandler.ts
+++ b/src/hooks/useGlobalKeyHandler.ts
@@ -1,21 +1,20 @@
 import useKeyPress from './useKeyPress';
 import { isNode, getConnectedEdges } from '../utils/graph';
 import { Elements, KeyCode, ElementId, FlowElement, RevueFlowStore, Edge } from '../types';
-import { computed, inject, watch } from 'vue';
+import { computed, watch } from 'vue';
 
 interface HookParams {
+  store: RevueFlowStore;
   deleteKeyCode: KeyCode;
   multiSelectionKeyCode: KeyCode;
   onElementsRemove?: (elements: Elements) => void;
 }
 
-export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
-  const store = inject<RevueFlowStore>('store');
-
+export default ({ store, deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
-  const selectedElements = computed(() => store?.selectedElements || []);
-  const edges = computed(() => store?.edges);
+  const selectedElements = computed(() => store.selectedElements || []);
+  const edges = computed(() => store.edges);
 
   watch(selectedElements, () => {
     if (onElementsRemove && deleteKeyPressed.value && selectedElements.value.length > 0) {
@@ -27,12 +26,12 @@ export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: Hook
       );
 
       onElementsRemove(Array.from(elementsToRemove.values()));
-      store?.unsetNodesSelection();
-      store?.resetSelectedElements();
+      store.unsetNodesSelection();
+      store.resetSelectedElements();
     }
   });
 
   watch(multiSelectionKeyPressed, () => {
-    store?.setMultiSelectionActive(multiSelectionKeyPressed.value);
+    store.multiSelectionActive = multiSelectionKeyPressed.value;
   });
 };
diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts
index 86f2ea33..95bec9fa 100644
--- a/src/hooks/useZoomPanHelper.ts
+++ b/src/hooks/useZoomPanHelper.ts
@@ -1,68 +1,85 @@
 import { zoomIdentity } from 'd3-zoom';
+import { computed } from 'vue';
+import { createEventHook, until } from '@vueuse/core';
+import { Selection, ZoomBehavior } from 'd3';
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
 import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, RevueFlowStore } from '../types';
-import { inject } from 'vue';
 
 const DEFAULT_PADDING = 0.1;
 
-const useZoomPanHelper = (): ZoomPanHelperFunctions => {
-  const store = inject<RevueFlowStore>('store')!;
-  const zoomPanHelperFunctions = () => {
-    return {
-      zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2),
-      zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2),
-      zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel),
-      transform: (transform: FlowTransform) => {
-        const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
+const useZoomPanHelper = (store: RevueFlowStore) => {
+  const zoomPanHelperEvent = createEventHook<ZoomPanHelperFunctions>();
+  const d3Zoom = computed(() => store.d3Zoom);
+  const d3Selection = computed(() => store.d3Selection);
 
-        store.d3Zoom?.transform(store.d3Selection as any, nextTransform);
-      },
-      fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
-        const { nodes, width, height, minZoom, maxZoom } = store;
+  const createZoomPanHelper = (
+    d3Zoom: ZoomBehavior<Element, unknown>,
+    d3Selection: Selection<Element, any, any, any>
+  ): ZoomPanHelperFunctions => ({
+    zoomIn: () => d3Zoom?.scaleBy(d3Selection, 1.2),
+    zoomOut: () => d3Zoom?.scaleBy(d3Selection, 1 / 1.2),
+    zoomTo: (zoomLevel: number) => d3Zoom.scaleTo(d3Selection, zoomLevel),
+    transform: (transform: FlowTransform) => {
+      const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
 
-        if (!nodes.length) {
-          return;
-        }
+      d3Zoom.transform(d3Selection, nextTransform);
+    },
+    fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
+      const { nodes, width, height, minZoom, maxZoom } = store;
 
-        const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
-        const [x, y, zoom] = getTransformForBounds(
-          bounds,
-          width,
-          height,
-          options.minZoom || minZoom,
-          options.maxZoom || maxZoom,
-          options.padding || DEFAULT_PADDING
-        );
-        const transform = zoomIdentity.translate(x, y).scale(zoom);
+      if (!nodes.length) {
+        return;
+      }
 
-        store.d3Zoom?.transform(store.d3Selection as any, transform);
-      },
-      setCenter: (x: number, y: number, zoom?: number) => {
-        const { width, height, maxZoom } = store;
+      const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
+      const [x, y, zoom] = getTransformForBounds(
+        bounds,
+        width,
+        height,
+        options.minZoom || minZoom,
+        options.maxZoom || maxZoom,
+        options.padding || DEFAULT_PADDING
+      );
+      const transform = zoomIdentity.translate(x, y).scale(zoom);
 
-        const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
-        const centerX = width / 2 - x * nextZoom;
-        const centerY = height / 2 - y * nextZoom;
-        const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
+      d3Zoom?.transform(d3Selection, transform);
+    },
+    setCenter: (x: number, y: number, zoom?: number) => {
+      const { width, height, maxZoom } = store;
 
-        store.d3Zoom?.transform(store.d3Selection as any, transform);
-      },
-      fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
-        const { width, height, minZoom, maxZoom } = store;
-        const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
-        const transform = zoomIdentity.translate(x, y).scale(zoom);
+      const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
+      const centerX = width / 2 - x * nextZoom;
+      const centerY = height / 2 - y * nextZoom;
+      const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
 
-        store.d3Zoom?.transform(store.d3Selection as any, transform);
-      },
-      project: (position: XYPosition) => {
-        const { transform, snapToGrid, snapGrid } = store;
-        return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
-      },
-      initialized: true
-    };
+      d3Zoom.transform(d3Selection, transform);
+    },
+    fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
+      const { width, height, minZoom, maxZoom } = store;
+      const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
+      const transform = zoomIdentity.translate(x, y).scale(zoom);
+
+      d3Zoom.transform(d3Selection, transform);
+    },
+    project: (position: XYPosition) => {
+      const { transform, snapToGrid, snapGrid } = store;
+      return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
+    },
+    initialized: true
+  });
+
+  until(d3Zoom)
+    .toBeTruthy()
+    .then(() => {
+      if (d3Zoom.value && d3Selection.value) {
+        zoomPanHelperEvent.trigger(createZoomPanHelper(d3Zoom.value, d3Selection.value));
+      } else {
+        throw Error('D3 could not be initialized.');
+      }
+    });
+  return {
+    onReady: zoomPanHelperEvent.on
   };
-
-  return zoomPanHelperFunctions();
 };
 
 export default useZoomPanHelper;
diff --git a/src/index.ts b/src/index.ts
index e45a2492..d832a4fb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { default as default } from './container/RevueFlow';
+export { default as default } from './container/RevueFlow/RevueFlow.vue';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
 export { getBezierPath } from './components/Edges/BezierEdge';
diff --git a/src/store/configure-store.ts b/src/store/configure-store.ts
index 5d61f5ad..514094ad 100644
--- a/src/store/configure-store.ts
+++ b/src/store/configure-store.ts
@@ -21,18 +21,6 @@ export default function configureStore(
     state: () => preloadedState,
     getters: {},
     actions: {
-      setOnConnect(onConnect) {
-        this.onConnect = onConnect;
-      },
-      setOnConnectStart(onConnectStart) {
-        this.onConnectStart = onConnectStart;
-      },
-      setOnConnectEnd(onConnectEnd) {
-        this.onConnectEnd = onConnectEnd;
-      },
-      setOnConnectStop(onConnectStop) {
-        this.onConnectStop = onConnectStop;
-      },
       setElements(elements) {
         const propElements = elements;
         const nextElements: NextElements = {
@@ -252,46 +240,19 @@ export default function configureStore(
       unsetNodesSelection() {
         this.nodesSelectionActive = false;
       },
-      updateTransform(transform) {
-        this.transform = transform;
-      },
       updateSize(size) {
         this.height = size.height;
         this.width = size.width;
       },
-      setConnectionPosition(connectionPosition) {
-        this.connectionPosition = connectionPosition;
-      },
       setConnectionNodeId(payload) {
         this.connectionNodeId = payload.connectionNodeId;
         this.connectionHandleId = payload.connectionHandleId;
         this.connectionHandleType = payload.connectionHandleType;
       },
-      setSnapToGrid(snapToGrid) {
-        this.snapToGrid = snapToGrid;
-      },
-      setSnapGrid(snapGrid) {
-        this.snapGrid = snapGrid;
-      },
       setInteractive(isInteractive) {
         this.nodesDraggable = isInteractive;
         this.nodesConnectable = isInteractive;
         this.elementsSelectable = isInteractive;
-      },
-      setNodesDraggable(nodesDraggable) {
-        this.nodesDraggable = nodesDraggable;
-      },
-      setNodesConnectable(nodesConnectable) {
-        this.nodesConnectable = nodesConnectable;
-      },
-      setElementsSelectable(elementsSelectable) {
-        this.elementsSelectable = elementsSelectable;
-      },
-      setMultiSelectionActive(multiSelectionActive) {
-        this.multiSelectionActive = multiSelectionActive;
-      },
-      setConnectionMode(connectionMode) {
-        this.connectionMode = connectionMode;
       }
     }
   });
diff --git a/src/types/index.ts b/src/types/index.ts
index dc8f5521..f7cd42a7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -870,10 +870,6 @@ export interface RevueFlowState {
 }
 
 export type RevueFlowActions = {
-  setOnConnect: (onConnect: OnConnectFunc) => void;
-  setOnConnectStart: (onConnectStart: OnConnectStartFunc) => void;
-  setOnConnectStop: (onConnectStop: OnConnectStopFunc) => void;
-  setOnConnectEnd: (onConnectEnd: OnConnectEndFunc) => void;
   setElements: (elements: Elements) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
   updateNodePos: (payload: NodePosUpdate) => void;
@@ -889,18 +885,9 @@ export type RevueFlowActions = {
   setNodeExtent: (nodeExtent: NodeExtent) => void;
   resetSelectedElements: () => void;
   unsetNodesSelection: () => void;
-  updateTransform: (transform: Transform) => void;
   updateSize: (size: Dimensions) => void;
-  setConnectionPosition: (connectionPosition: XYPosition) => void;
   setConnectionNodeId: (payload: SetConnectionId) => void;
-  setSnapToGrid: (snapToGrid: boolean) => void;
-  setSnapGrid: (snapGrid: SnapGrid) => void;
   setInteractive: (isInteractive: boolean) => void;
-  setNodesDraggable: (nodesDraggable: boolean) => void;
-  setNodesConnectable: (nodesConnectable: boolean) => void;
-  setElementsSelectable: (elementsSelectable: boolean) => void;
-  setMultiSelectionActive: (multiSelectionActive: boolean) => void;
-  setConnectionMode: (connectionMode: ConnectionMode) => void;
 };
 
 export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>;
@@ -935,6 +922,14 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: MouseEvent) => void;
   onPaneContextMenu?: (event: MouseEvent) => void;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
   nodeTypes?: NodeTypesType;
   edgeTypes?: EdgeTypesType;
   connectionMode?: ConnectionMode;
@@ -967,14 +962,6 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
   panOnScrollSpeed?: number;
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
   nodeTypesId?: string;
   edgeTypesId?: string;