diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 8476fca3..b8e0a3a7 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -79,14 +79,14 @@ A basic setup would look like this:
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
 
-@[code vue:no-line-numbers](../../../examples/src/Basic/Basic.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)
 
   </CodeGroupItem>
 
 
   <CodeGroupItem title="Options API">
 
-@[code vue:no-line-numbers](../../../examples/src/Basic/BasicOptionsAPI.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
 
   </CodeGroupItem>
 </CodeGroup>
diff --git a/examples/.eslintrc.js b/examples/vite/.eslintrc.js
similarity index 100%
rename from examples/.eslintrc.js
rename to examples/vite/.eslintrc.js
diff --git a/examples/.gitignore b/examples/vite/.gitignore
similarity index 100%
rename from examples/.gitignore
rename to examples/vite/.gitignore
diff --git a/examples/App.vue b/examples/vite/App.vue
similarity index 100%
rename from examples/App.vue
rename to examples/vite/App.vue
diff --git a/examples/Header.vue b/examples/vite/Header.vue
similarity index 100%
rename from examples/Header.vue
rename to examples/vite/Header.vue
diff --git a/examples/index.css b/examples/vite/index.css
similarity index 91%
rename from examples/index.css
rename to examples/vite/index.css
index 13f8d41a..2ed30717 100644
--- a/examples/index.css
+++ b/examples/vite/index.css
@@ -1,8 +1,8 @@
 /* import the required styles */
-@import '@braks/vue-flow/dist/style.css';
+@import '../node_modules/@braks/vue-flow/dist/style.css';
 
 /* import the default theme (optional) */
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '../node_modules/@braks/vue-flow/dist/theme-default.css';
 
 body {
   color: #111;
diff --git a/examples/index.html b/examples/vite/index.html
similarity index 84%
rename from examples/index.html
rename to examples/vite/index.html
index 81b48427..99f1b58b 100644
--- a/examples/index.html
+++ b/examples/vite/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script type="module" src="./main.ts"></script>
+<script type="module" src="main.ts"></script>
 </body>
 </html>
diff --git a/examples/main.ts b/examples/vite/main.ts
similarity index 100%
rename from examples/main.ts
rename to examples/vite/main.ts
diff --git a/examples/package.json b/examples/vite/package.json
similarity index 67%
rename from examples/package.json
rename to examples/vite/package.json
index b3090c52..4626a41b 100644
--- a/examples/package.json
+++ b/examples/vite/package.json
@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite serve",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
+    "dev": "../node_modules/.bin/vite",
+    "build": "../node_modules/.bin/vite build",
+    "serve": "../node_modules/.bin/vite serve",
+    "lint": "eslint --ext \\\".js,.jsx,.ts,.tsx\\\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
     "@braks/vue-flow": "workspace:*"
diff --git a/examples/router.ts b/examples/vite/router.ts
similarity index 100%
rename from examples/router.ts
rename to examples/vite/router.ts
diff --git a/examples/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
similarity index 95%
rename from examples/src/Basic/Basic.vue
rename to examples/vite/src/Basic/Basic.vue
index c176e60d..e720d1e5 100644
--- a/examples/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
similarity index 95%
rename from examples/src/Basic/BasicOptionsAPI.vue
rename to examples/vite/src/Basic/BasicOptionsAPI.vue
index 4c51d5cf..d98d6465 100644
--- a/examples/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
diff --git a/examples/src/Basic/ResizableNode.vue b/examples/vite/src/Basic/ResizableNode.vue
similarity index 91%
rename from examples/src/Basic/ResizableNode.vue
rename to examples/vite/src/Basic/ResizableNode.vue
index 12cbe130..c9b356ea 100644
--- a/examples/src/Basic/ResizableNode.vue
+++ b/examples/vite/src/Basic/ResizableNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle } from '../../packages/vue-flow'
 
 interface Props {
   id: string
diff --git a/examples/src/CustomConnectionLine/ConnectionLine.vue b/examples/vite/src/CustomConnectionLine/ConnectionLine.vue
similarity index 100%
rename from examples/src/CustomConnectionLine/ConnectionLine.vue
rename to examples/vite/src/CustomConnectionLine/ConnectionLine.vue
diff --git a/examples/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
similarity index 76%
rename from examples/src/CustomConnectionLine/CustomConnectionLine.vue
rename to examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
index acdc369c..ca785677 100644
--- a/examples/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
diff --git a/examples/src/CustomNode/ColorSelectorNode.vue b/examples/vite/src/CustomNode/ColorSelectorNode.vue
similarity index 89%
rename from examples/src/CustomNode/ColorSelectorNode.vue
rename to examples/vite/src/CustomNode/ColorSelectorNode.vue
index f0469d59..ee1048ba 100644
--- a/examples/src/CustomNode/ColorSelectorNode.vue
+++ b/examples/vite/src/CustomNode/ColorSelectorNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {
diff --git a/examples/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
similarity index 94%
rename from examples/src/CustomNode/CustomNode.vue
rename to examples/vite/src/CustomNode/CustomNode.vue
index a05cad1d..f7d8bd45 100644
--- a/examples/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '../../packages/vue-flow'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
diff --git a/examples/src/DragNDrop/DnD.vue b/examples/vite/src/DragNDrop/DnD.vue
similarity index 90%
rename from examples/src/DragNDrop/DnD.vue
rename to examples/vite/src/DragNDrop/DnD.vue
index 1474c28e..bb163540 100644
--- a/examples/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
diff --git a/examples/src/DragNDrop/Sidebar.vue b/examples/vite/src/DragNDrop/Sidebar.vue
similarity index 100%
rename from examples/src/DragNDrop/Sidebar.vue
rename to examples/vite/src/DragNDrop/Sidebar.vue
diff --git a/examples/src/DragNDrop/dnd.css b/examples/vite/src/DragNDrop/dnd.css
similarity index 100%
rename from examples/src/DragNDrop/dnd.css
rename to examples/vite/src/DragNDrop/dnd.css
diff --git a/examples/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
similarity index 73%
rename from examples/src/EdgeTypes/EdgeTypesExample.vue
rename to examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index 2ec935a6..c35c6954 100644
--- a/examples/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowInstance } from '@braks/vue-flow'
-import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
+import type { FlowInstance } from '../../packages/vue-flow'
+import { Controls, MiniMap, VueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'
 
 const onLoad = (flowInstance: FlowInstance) => {
diff --git a/examples/src/EdgeTypes/utils.ts b/examples/vite/src/EdgeTypes/utils.ts
similarity index 96%
rename from examples/src/EdgeTypes/utils.ts
rename to examples/vite/src/EdgeTypes/utils.ts
index 1f65a282..3fcb3d7a 100644
--- a/examples/src/EdgeTypes/utils.ts
+++ b/examples/vite/src/EdgeTypes/utils.ts
@@ -1,5 +1,5 @@
-import type { Elements } from '@braks/vue-flow'
-import { Position } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Position } from '../../packages/vue-flow'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
diff --git a/examples/src/Edges/CustomEdge.vue b/examples/vite/src/Edges/CustomEdge.vue
similarity index 91%
rename from examples/src/Edges/CustomEdge.vue
rename to examples/vite/src/Edges/CustomEdge.vue
index de99d9fc..00ccda6a 100644
--- a/examples/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
diff --git a/examples/src/Edges/CustomEdge2.vue b/examples/vite/src/Edges/CustomEdge2.vue
similarity index 93%
rename from examples/src/Edges/CustomEdge2.vue
rename to examples/vite/src/Edges/CustomEdge2.vue
index 29f5a7cd..1938c376 100644
--- a/examples/src/Edges/CustomEdge2.vue
+++ b/examples/vite/src/Edges/CustomEdge2.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
diff --git a/examples/src/Edges/CustomLabel.vue b/examples/vite/src/Edges/CustomLabel.vue
similarity index 100%
rename from examples/src/Edges/CustomLabel.vue
rename to examples/vite/src/Edges/CustomLabel.vue
diff --git a/examples/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
similarity index 96%
rename from examples/src/Edges/EdgesExample.vue
rename to examples/vite/src/Edges/EdgesExample.vue
index 7f7ef74e..03968390 100644
--- a/examples/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
diff --git a/examples/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
similarity index 90%
rename from examples/src/Empty/EmptyExample.vue
rename to examples/vite/src/Empty/EmptyExample.vue
index 638f7d28..c6fc91a1 100644
--- a/examples/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/examples/src/FloatingEdges/FloatingConnectionLine.vue b/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
similarity index 88%
rename from examples/src/FloatingEdges/FloatingConnectionLine.vue
rename to examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
index 91c4ec29..e125a36c 100644
--- a/examples/src/FloatingEdges/FloatingConnectionLine.vue
+++ b/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { GraphNode, Position } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { GraphNode, Position } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingConnectionLineProps {
diff --git a/examples/src/FloatingEdges/FloatingEdge.vue b/examples/vite/src/FloatingEdges/FloatingEdge.vue
similarity index 89%
rename from examples/src/FloatingEdges/FloatingEdge.vue
rename to examples/vite/src/FloatingEdges/FloatingEdge.vue
index 6606811a..8150fc6c 100644
--- a/examples/src/FloatingEdges/FloatingEdge.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {
diff --git a/examples/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
similarity index 96%
rename from examples/src/FloatingEdges/FloatingEdges.vue
rename to examples/vite/src/FloatingEdges/FloatingEdges.vue
index f6b2de2c..edab4310 100644
--- a/examples/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
diff --git a/examples/src/FloatingEdges/floating-edge-utils.ts b/examples/vite/src/FloatingEdges/floating-edge-utils.ts
similarity index 95%
rename from examples/src/FloatingEdges/floating-edge-utils.ts
rename to examples/vite/src/FloatingEdges/floating-edge-utils.ts
index c2c22987..1949abe3 100644
--- a/examples/src/FloatingEdges/floating-edge-utils.ts
+++ b/examples/vite/src/FloatingEdges/floating-edge-utils.ts
@@ -1,5 +1,5 @@
-import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
-import { MarkerType, Position } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
+import { MarkerType, Position } from '../../packages/vue-flow'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
diff --git a/examples/src/Hidden/HiddenExample.vue b/examples/vite/src/Hidden/HiddenExample.vue
similarity index 92%
rename from examples/src/Hidden/HiddenExample.vue
rename to examples/vite/src/Hidden/HiddenExample.vue
index 0d87dfbb..47150803 100644
--- a/examples/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 
 const isHidden = ref(false)
 
diff --git a/examples/src/Interaction/InteractionExample.vue b/examples/vite/src/Interaction/InteractionExample.vue
similarity index 98%
rename from examples/src/Interaction/InteractionExample.vue
rename to examples/vite/src/Interaction/InteractionExample.vue
index ce989d07..94338147 100644
--- a/examples/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 
 const {
   nodesDraggable,
diff --git a/examples/src/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
similarity index 93%
rename from examples/src/Layouting/LayoutingExample.vue
rename to examples/vite/src/Layouting/LayoutingExample.vue
index 1f83605f..c31b7e7f 100644
--- a/examples/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@braks/vue-flow'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
diff --git a/examples/src/Layouting/initial-elements.ts b/examples/vite/src/Layouting/initial-elements.ts
similarity index 95%
rename from examples/src/Layouting/initial-elements.ts
rename to examples/vite/src/Layouting/initial-elements.ts
index 29d92e14..f01979e0 100644
--- a/examples/src/Layouting/initial-elements.ts
+++ b/examples/vite/src/Layouting/initial-elements.ts
@@ -1,4 +1,4 @@
-import type { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '../../packages/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 
diff --git a/examples/src/Layouting/layouting.css b/examples/vite/src/Layouting/layouting.css
similarity index 100%
rename from examples/src/Layouting/layouting.css
rename to examples/vite/src/Layouting/layouting.css
diff --git a/examples/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
similarity index 84%
rename from examples/src/MultiFlows/Flow.vue
rename to examples/vite/src/MultiFlows/Flow.vue
index 8814e5c6..fa601df9 100644
--- a/examples/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, VueFlow } from '../../packages/vue-flow'
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
diff --git a/examples/src/MultiFlows/MultiFlowsExample.vue b/examples/vite/src/MultiFlows/MultiFlowsExample.vue
similarity index 100%
rename from examples/src/MultiFlows/MultiFlowsExample.vue
rename to examples/vite/src/MultiFlows/MultiFlowsExample.vue
diff --git a/examples/src/MultiFlows/multiflows.css b/examples/vite/src/MultiFlows/multiflows.css
similarity index 100%
rename from examples/src/MultiFlows/multiflows.css
rename to examples/vite/src/MultiFlows/multiflows.css
diff --git a/examples/src/Nesting/GroupNode.vue b/examples/vite/src/Nesting/GroupNode.vue
similarity index 86%
rename from examples/src/Nesting/GroupNode.vue
rename to examples/vite/src/Nesting/GroupNode.vue
index c9499696..779468fe 100644
--- a/examples/src/Nesting/GroupNode.vue
+++ b/examples/vite/src/Nesting/GroupNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
-import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
diff --git a/examples/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue
similarity index 98%
rename from examples/src/Nesting/Nesting.vue
rename to examples/vite/src/Nesting/Nesting.vue
index b944dd3c..49eb7b99 100644
--- a/examples/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
diff --git a/examples/src/NodeTypeChange/NodeTypeChangeExample.vue b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
similarity index 86%
rename from examples/src/NodeTypeChange/NodeTypeChangeExample.vue
rename to examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
index ee9c748d..4d96d6f9 100644
--- a/examples/src/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
-import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'
 
 const initialElements: Elements = [
   {
diff --git a/examples/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
similarity index 98%
rename from examples/src/Overview/Overview.vue
rename to examples/vite/src/Overview/Overview.vue
index e3db8ecf..a115e729 100644
--- a/examples/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
diff --git a/examples/src/Provider/ProviderExample.vue b/examples/vite/src/Provider/ProviderExample.vue
similarity index 85%
rename from examples/src/Provider/ProviderExample.vue
rename to examples/vite/src/Provider/ProviderExample.vue
index fcb20a93..751285cd 100644
--- a/examples/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
diff --git a/examples/src/Provider/Sidebar.vue b/examples/vite/src/Provider/Sidebar.vue
similarity index 94%
rename from examples/src/Provider/Sidebar.vue
rename to examples/vite/src/Provider/Sidebar.vue
index fbff809c..5835c521 100644
--- a/examples/src/Provider/Sidebar.vue
+++ b/examples/vite/src/Provider/Sidebar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '../../packages/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
 
 const selectAll = () => {
diff --git a/examples/src/Provider/provider.css b/examples/vite/src/Provider/provider.css
similarity index 100%
rename from examples/src/Provider/provider.css
rename to examples/vite/src/Provider/provider.css
diff --git a/examples/src/RGBFlow/RGBFlow.vue b/examples/vite/src/RGBFlow/RGBFlow.vue
similarity index 93%
rename from examples/src/RGBFlow/RGBFlow.vue
rename to examples/vite/src/RGBFlow/RGBFlow.vue
index 5e74c5a3..91a585be 100644
--- a/examples/src/RGBFlow/RGBFlow.vue
+++ b/examples/vite/src/RGBFlow/RGBFlow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
 
diff --git a/examples/src/RGBFlow/RGBNode.vue b/examples/vite/src/RGBFlow/RGBNode.vue
similarity index 93%
rename from examples/src/RGBFlow/RGBNode.vue
rename to examples/vite/src/RGBFlow/RGBNode.vue
index c0ea1711..d6623d22 100644
--- a/examples/src/RGBFlow/RGBNode.vue
+++ b/examples/vite/src/RGBFlow/RGBNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
diff --git a/examples/src/RGBFlow/RGBOutputNode.vue b/examples/vite/src/RGBFlow/RGBOutputNode.vue
similarity index 80%
rename from examples/src/RGBFlow/RGBOutputNode.vue
rename to examples/vite/src/RGBFlow/RGBOutputNode.vue
index 793d8a33..8a0f8f7e 100644
--- a/examples/src/RGBFlow/RGBOutputNode.vue
+++ b/examples/vite/src/RGBFlow/RGBOutputNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
diff --git a/examples/src/SaveRestore/Controls.vue b/examples/vite/src/SaveRestore/Controls.vue
similarity index 89%
rename from examples/src/SaveRestore/Controls.vue
rename to examples/vite/src/SaveRestore/Controls.vue
index 7221797a..f53a7c1d 100644
--- a/examples/src/SaveRestore/Controls.vue
+++ b/examples/vite/src/SaveRestore/Controls.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '@braks/vue-flow'
-import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '../../packages/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
diff --git a/examples/src/SaveRestore/SaveRestoreExample.vue b/examples/vite/src/SaveRestore/SaveRestoreExample.vue
similarity index 80%
rename from examples/src/SaveRestore/SaveRestoreExample.vue
rename to examples/vite/src/SaveRestore/SaveRestoreExample.vue
index 2bebff33..dd261397 100644
--- a/examples/src/SaveRestore/SaveRestoreExample.vue
+++ b/examples/vite/src/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import Controls from './Controls.vue'
 
 const initialElements: Elements = [
diff --git a/examples/src/SaveRestore/save.css b/examples/vite/src/SaveRestore/save.css
similarity index 100%
rename from examples/src/SaveRestore/save.css
rename to examples/vite/src/SaveRestore/save.css
diff --git a/examples/src/Stress/StressExample.vue b/examples/vite/src/Stress/StressExample.vue
similarity index 83%
rename from examples/src/Stress/StressExample.vue
rename to examples/vite/src/Stress/StressExample.vue
index e2e01ef3..bab392e1 100644
--- a/examples/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(10, 10)
diff --git a/examples/src/Stress/utils.ts b/examples/vite/src/Stress/utils.ts
similarity index 93%
rename from examples/src/Stress/utils.ts
rename to examples/vite/src/Stress/utils.ts
index 268abe79..5e078f60 100644
--- a/examples/src/Stress/utils.ts
+++ b/examples/vite/src/Stress/utils.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []
diff --git a/examples/src/Switch/SwitchExample.vue b/examples/vite/src/Switch/SwitchExample.vue
similarity index 93%
rename from examples/src/Switch/SwitchExample.vue
rename to examples/vite/src/Switch/SwitchExample.vue
index 41958956..694aab2a 100644
--- a/examples/src/Switch/SwitchExample.vue
+++ b/examples/vite/src/Switch/SwitchExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/src/Unidirectional/CustomNode.vue b/examples/vite/src/Unidirectional/CustomNode.vue
similarity index 91%
rename from examples/src/Unidirectional/CustomNode.vue
rename to examples/vite/src/Unidirectional/CustomNode.vue
index 4316dc7d..745e71c7 100644
--- a/examples/src/Unidirectional/CustomNode.vue
+++ b/examples/vite/src/Unidirectional/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface Props {
   id: string
diff --git a/examples/src/Unidirectional/UnidirectionalExample.vue b/examples/vite/src/Unidirectional/UnidirectionalExample.vue
similarity index 96%
rename from examples/src/Unidirectional/UnidirectionalExample.vue
rename to examples/vite/src/Unidirectional/UnidirectionalExample.vue
index a805b247..6fbe5698 100644
--- a/examples/src/Unidirectional/UnidirectionalExample.vue
+++ b/examples/vite/src/Unidirectional/UnidirectionalExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '@braks/vue-flow'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { Elements, Node } from '../../packages/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
 import CustomNode from './CustomNode.vue'
 
 const initialElements: Elements = [
diff --git a/examples/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
similarity index 95%
rename from examples/src/UpdatableEdge/UpdatableEdgeExample.vue
rename to examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 257295ba..37d42bf6 100644
--- a/examples/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'
 
 const initialElements: Elements = [
   {
diff --git a/examples/src/UpdateNode/UpdateNodeExample.vue b/examples/vite/src/UpdateNode/UpdateNodeExample.vue
similarity index 92%
rename from examples/src/UpdateNode/UpdateNodeExample.vue
rename to examples/vite/src/UpdateNode/UpdateNodeExample.vue
index b76fe98b..5cac1e32 100644
--- a/examples/src/UpdateNode/UpdateNodeExample.vue
+++ b/examples/vite/src/UpdateNode/UpdateNodeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },
diff --git a/examples/src/UpdateNode/updatenode.css b/examples/vite/src/UpdateNode/updatenode.css
similarity index 100%
rename from examples/src/UpdateNode/updatenode.css
rename to examples/vite/src/UpdateNode/updatenode.css
diff --git a/examples/src/Validation/CustomInput.vue b/examples/vite/src/Validation/CustomInput.vue
similarity index 75%
rename from examples/src/Validation/CustomInput.vue
rename to examples/vite/src/Validation/CustomInput.vue
index b0ab2e6a..ba32fd91 100644
--- a/examples/src/Validation/CustomInput.vue
+++ b/examples/vite/src/Validation/CustomInput.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc
diff --git a/examples/src/Validation/CustomNode.vue b/examples/vite/src/Validation/CustomNode.vue
similarity index 74%
rename from examples/src/Validation/CustomNode.vue
rename to examples/vite/src/Validation/CustomNode.vue
index b84134a4..cd1b6228 100644
--- a/examples/src/Validation/CustomNode.vue
+++ b/examples/vite/src/Validation/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string
diff --git a/examples/src/Validation/ValidationExample.vue b/examples/vite/src/Validation/ValidationExample.vue
similarity index 94%
rename from examples/src/Validation/ValidationExample.vue
rename to examples/vite/src/Validation/ValidationExample.vue
index 83e9ebd5..17a90555 100644
--- a/examples/src/Validation/ValidationExample.vue
+++ b/examples/vite/src/Validation/ValidationExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
diff --git a/examples/src/Validation/validation.css b/examples/vite/src/Validation/validation.css
similarity index 100%
rename from examples/src/Validation/validation.css
rename to examples/vite/src/Validation/validation.css
diff --git a/examples/tsconfig.json b/examples/vite/tsconfig.json
similarity index 80%
rename from examples/tsconfig.json
rename to examples/vite/tsconfig.json
index 409d9b82..b536c3e9 100644
--- a/examples/tsconfig.json
+++ b/examples/vite/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "..",
     "module": "ESNext",
     "target": "es2017",
     "lib": ["DOM", "ESNext"],
@@ -20,6 +20,7 @@
       "~/*": ["../package/src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": [
+    "../node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json"}]
 }
diff --git a/examples/tsconfig.node.json b/examples/vite/tsconfig.node.json
similarity index 73%
rename from examples/tsconfig.node.json
rename to examples/vite/tsconfig.node.json
index e993792c..fe874096 100644
--- a/examples/tsconfig.node.json
+++ b/examples/vite/tsconfig.node.json
@@ -4,5 +4,7 @@
     "module": "esnext",
     "moduleResolution": "node"
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }
diff --git a/examples/vite.config.ts b/examples/vite/vite.config.ts
similarity index 100%
rename from examples/vite.config.ts
rename to examples/vite/vite.config.ts
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6d6c9ad4..a6563739 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,5 @@
 packages:
   - packages/*
-  - examples
+  - examples/*
   - e2e
   - docs
