diff --git a/.changeset/config.json b/.changeset/config.json
index 2df85f405..312fde6c2 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,7 +6,7 @@
       "repo": "bcakmakoglu/vue-flow"
     }
   ],
-  "fixed": [],
+  "fixed": [["@vue-flow/*"]],
   "updateInternalDependencies": "patch",
   "snapshot": {
     "useCalculatedVersion": true
diff --git a/.changeset/cool-coats-yawn.md b/.changeset/cool-coats-yawn.md
new file mode 100644
index 000000000..ce54313ec
--- /dev/null
+++ b/.changeset/cool-coats-yawn.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-drag-n-drop': major
+---
+
+Add drag and drop plugin pkg to help simplify implementing a dnd UI for vue flow
diff --git a/.changeset/cyan-melons-unite.md b/.changeset/cyan-melons-unite.md
new file mode 100644
index 000000000..b967de82a
--- /dev/null
+++ b/.changeset/cyan-melons-unite.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove experimental features flag
diff --git a/.changeset/fluffy-pans-boil.md b/.changeset/fluffy-pans-boil.md
new file mode 100644
index 000000000..7357194ab
--- /dev/null
+++ b/.changeset/fluffy-pans-boil.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Use `GraphNode` or `GraphEdge` as optional generic types for `findNode` or `findEdge` actions
diff --git a/.changeset/hip-melons-peel.md b/.changeset/hip-melons-peel.md
new file mode 100644
index 000000000..80e55c5b8
--- /dev/null
+++ b/.changeset/hip-melons-peel.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Update handle styles and avoid using fixed pixel positions to offset handle position and instead use transform to align handles
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 000000000..fac142e7f
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,27 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@vue-flow/docs": "1.0.0",
+    "@vue-flow/examples-nuxt3": "0.0.0",
+    "@vue-flow/examples-quasar": "0.0.0",
+    "@vue-flow/examples-vite": "0.0.0",
+    "@vue-flow/background": "1.0.5",
+    "@vue-flow/controls": "1.0.4",
+    "@vue-flow/core": "1.16.5",
+    "@vue-flow/minimap": "1.0.4",
+    "@vue-flow/node-resizer": "1.3.0",
+    "@vue-flow/node-toolbar": "1.0.6",
+    "@vue-flow/pathfinding-edge": "1.0.5",
+    "vueflow": "1.0.0",
+    "@vue-flow/tests": "0.0.0",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0"
+  },
+  "changesets": [
+    "cyan-melons-unite.md",
+    "fluffy-pans-boil.md",
+    "hip-melons-peel.md"
+  ]
+}
diff --git a/.changeset/slimy-seas-check.md b/.changeset/slimy-seas-check.md
new file mode 100644
index 000000000..9f3050230
--- /dev/null
+++ b/.changeset/slimy-seas-check.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-layout': major
+---
+
+Add dagre layout plugin pkg
diff --git a/.changeset/weak-points-whisper.md b/.changeset/weak-points-whisper.md
new file mode 100644
index 000000000..c8cdaf9d1
--- /dev/null
+++ b/.changeset/weak-points-whisper.md
@@ -0,0 +1,71 @@
+---
+'@vue-flow/core': minor
+
+---
+
+Add plugin API to Vue Flow App
+
+## What's changed?
+
+- Allow setting global store config that is applied as default to all stores that are created
+- A simple API to extend the vue flow store (⚠️ *NOT* a Vue Plugin)
+- Provide hooks to hook into store lifecycle (`beforeCreate`, `created`, `beforeDestroy`, `destroyed`)
+- Add some simple plugins to start off
+  - DnD
+  - Layout
+  - Screenshot
+
+## Plugin
+
+```ts
+interface PluginHooks {
+  beforeCreate: EventHookOn<[string, FlowOptions | undefined]>
+  created: EventHookOn<[VueFlowStore, (plugin: Partial<VueFlowStore>) => void]>
+  beforeDestroy: EventHookOn<VueFlowStore>
+  destroyed: EventHookOn<string>
+}
+
+type Plugin = (hooks: PluginHooks) => void
+```
+
+## Example
+
+```ts
+// main.ts or your App entry point
+import { createVueFlow, Plugin } from '@vue-flow/core'
+
+const plugin: Plugin = (hooks) => {
+ hooks.beforeCreate(([id, preloadedState]) => {
+  // do something before a store instance is created
+ })
+    
+ // after a store has been created
+ hooks.created(([storeInstance, extendFn]) => {})
+    
+ // before a store is destroyed
+ hooks.beforeDestroy((storeInstance) => {})
+
+ // after a store is destroyed
+ hooks.destroyed(() => {})
+}
+
+// You can pass a factory function to set default values to each new store instance
+const vueFlowApp = createVueFlow(() => ({ 
+  fitViewOnInit: true,
+}))
+
+vueFlowApp.use(plugin)
+```
+
+## Extending Store Type (TypeScript)
+
+```ts
+// my-shims.d.ts
+declare module '@vue-flow/core' {
+    // the StoreBase interface can be used to extend the VueFlowStore type
+  interface StoreBase {
+    myProperty: boolean
+    myRefProperty: Ref<boolean>
+  }
+}
+```
diff --git a/.changeset/wild-carrots-occur.md b/.changeset/wild-carrots-occur.md
new file mode 100644
index 000000000..c668e355f
--- /dev/null
+++ b/.changeset/wild-carrots-occur.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/plugin-screenshot': major
+---
+
+Add screenshot plugin pkg to create a downloadable image of the graph
diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
index 671c01335..10b205ac9 100644
--- a/docs/src/.vitepress/config.ts
+++ b/docs/src/.vitepress/config.ts
@@ -1,5 +1,4 @@
 import { resolve } from 'node:path'
-import { readdirSync, statSync } from 'node:fs'
 import type { DefaultTheme, HeadConfig } from 'vitepress'
 import { defineConfigWithTheme } from 'vitepress'
 import WindiCSS from 'vite-plugin-windicss'
@@ -9,56 +8,11 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { useVueFlow } from '@vue-flow/core'
 import head from './head'
-import { copyVueFlowPlugin, files } from './plugins'
+import { copyVueFlowPlugin } from './plugins'
+import { changelogSidebarEntries, pluginSidebarEntries, typedocSidebarEntries } from './utils'
 
 const { vueFlowVersion } = useVueFlow()
 
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-function typedocSidebarEntries() {
-  const filePath = resolve(__dirname, '../typedocs')
-
-  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
-
-  return docsModules.map((module) => {
-    let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
-      text: entry.replace('.md', ''),
-      link: `/typedocs/${module}/${entry.replace('.md', '')}`,
-    }))
-
-    if (module === 'variables') {
-      children = children.filter((child) => {
-        return child.link.includes('default')
-      })
-    }
-
-    return { text: capitalize(module), collapsed: false, items: children } as DefaultTheme.SidebarItem
-  })
-}
-
-function changelogSidebarEntries(): DefaultTheme.SidebarItem[] {
-  return [
-    {
-      text: 'CHANGELOG',
-      collapsed: true,
-      items: files.map((file) => {
-        const name = file.pkgName.replace('.md', '')
-        const isCore = name === 'core'
-
-        return {
-          text: name
-            .split('-')
-            .map((s) => capitalize(s))
-            .join(' '),
-          link: `/changelog/${isCore ? '' : name}`,
-        }
-      }),
-    },
-  ]
-}
-
 export default defineConfigWithTheme<DefaultTheme.Config>({
   title: 'Vue Flow',
   description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
@@ -130,6 +84,11 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         link: '/examples/',
         activeMatch: '^/examples/',
       },
+      {
+        text: 'Plugins',
+        link: '/plugins/',
+        activeMatch: '^/plugins/',
+      },
       {
         text: 'Migration',
         link: '/migration/',
@@ -244,6 +203,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
       ],
       '/typedocs/': typedocSidebarEntries(),
       '/changelog/': changelogSidebarEntries(),
+      '/plugins/': pluginSidebarEntries(),
     },
   },
 })
diff --git a/docs/src/.vitepress/plugins/changelog.ts b/docs/src/.vitepress/plugins/changelog.ts
index 325a53542..e9778b095 100644
--- a/docs/src/.vitepress/plugins/changelog.ts
+++ b/docs/src/.vitepress/plugins/changelog.ts
@@ -26,7 +26,7 @@ const getAllFiles = function (dirPath: string, needle?: string, arrayOfFiles: Ch
   return arrayOfFiles
 }
 
-export const files = getAllFiles(resolve(__dirname, '../../../../packages'), 'CHANGELOG')
+export const changelogFiles = getAllFiles(resolve(__dirname, '../../../../packages'), 'CHANGELOG')
 
 const changelogDirPath = resolve(__dirname, `../../changelog/`)
 
@@ -34,7 +34,7 @@ if (!existsSync(changelogDirPath)) {
   mkdirSync(changelogDirPath)
 }
 
-files.forEach(({ path, pkgName }) => {
+changelogFiles.forEach(({ path, pkgName }) => {
   const isCore = pkgName === 'core'
 
   const filePath = resolve(__dirname, `${path}`)
diff --git a/docs/src/.vitepress/plugins/index.ts b/docs/src/.vitepress/plugins/index.ts
index e43dde54a..a65795010 100644
--- a/docs/src/.vitepress/plugins/index.ts
+++ b/docs/src/.vitepress/plugins/index.ts
@@ -1,2 +1,3 @@
 export * from './changelog'
 export * from './copy'
+export * from './plugins'
diff --git a/docs/src/.vitepress/plugins/plugins.ts b/docs/src/.vitepress/plugins/plugins.ts
new file mode 100644
index 000000000..22d51c3eb
--- /dev/null
+++ b/docs/src/.vitepress/plugins/plugins.ts
@@ -0,0 +1,41 @@
+import { copyFile, existsSync, mkdirSync, readdirSync, statSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+interface PluginFile {
+  path: string
+  pkgName: string
+}
+
+const skip = ['node_modules', 'dist', 'turbo']
+
+const getAllFiles = function (dirPath: string, needle?: string, arrayOfFiles: PluginFile[] = [], pkgName?: string) {
+  readdirSync(dirPath).forEach((file) => {
+    if (skip.includes(file)) return
+
+    if (statSync(`${dirPath}/${file}`).isDirectory()) {
+      getAllFiles(`${dirPath}/${file}`, needle, arrayOfFiles, file)
+    } else {
+      if (file.includes('README')) {
+        arrayOfFiles.push({ path: `${dirPath}/${file}`, pkgName })
+      }
+    }
+  })
+
+  return arrayOfFiles
+}
+
+export const pluginFiles = getAllFiles(resolve(__dirname, '../../../../packages/plugins'), 'README')
+
+const pluginDirPath = resolve(__dirname, `../../plugins/`)
+
+if (!existsSync(pluginDirPath)) {
+  mkdirSync(pluginDirPath)
+}
+
+pluginFiles.forEach(({ path, pkgName }) => {
+  const filePath = resolve(__dirname, `${path}`)
+
+  copyFile(filePath, `${pluginDirPath}/${pkgName}.md`, () => {})
+
+  console.log(`Copied ${filePath} to ${pluginDirPath}/${pkgName}.md`)
+})
diff --git a/docs/src/.vitepress/utils.ts b/docs/src/.vitepress/utils.ts
new file mode 100644
index 000000000..91eaa75d1
--- /dev/null
+++ b/docs/src/.vitepress/utils.ts
@@ -0,0 +1,70 @@
+import { resolve } from 'node:path'
+import { readdirSync, statSync } from 'node:fs'
+import type { DefaultTheme } from 'vitepress'
+import { changelogFiles, pluginFiles } from './plugins'
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  const filePath = resolve(__dirname, '../typedocs')
+
+  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
+
+  return docsModules.map((module) => {
+    let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
+      text: entry.replace('.md', ''),
+      link: `/typedocs/${module}/${entry.replace('.md', '')}`,
+    }))
+
+    if (module === 'variables') {
+      children = children.filter((child) => {
+        return child.link.includes('default')
+      })
+    }
+
+    return { text: capitalize(module), collapsible: true, items: children } as DefaultTheme.SidebarGroup
+  })
+}
+
+export const changelogSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  return [
+    {
+      text: 'CHANGELOG',
+      collapsible: true,
+      items: changelogFiles.map((file) => {
+        const name = file.pkgName.replace('.md', '')
+        const isCore = name === 'core'
+
+        return {
+          text: name
+            .split('-')
+            .map((s) => capitalize(s))
+            .join(' '),
+          link: `/changelog/${isCore ? '' : name}`,
+        }
+      }),
+    },
+  ]
+}
+
+export const pluginSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  return [
+    {
+      text: 'Plugins',
+      collapsible: true,
+      items: pluginFiles.map((file) => {
+        const name = file.pkgName.replace('.md', '')
+
+        return {
+          text: name
+            .split('-')
+            .map((s) => capitalize(s))
+            .join(' '),
+          link: `/plugins/${name}`,
+        }
+      }),
+    },
+  ]
+}
diff --git a/docs/src/guide/index.md b/docs/src/guide/index.md
index 7e3305164..e0700bb8e 100644
--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
@@ -19,18 +19,18 @@ Check out the [examples](/examples/) if you want to dive directly into the code.
 
 - 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
 
-- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
+- 🎨 __Customizable__: Use your own custom nodes, edges, connection-lines and a multitude of plugins to extend the functionality of Vue Flow
 
 - 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
 
-- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
+- 🧲 __Utils & Composition__: Built for Composition API and comes with a set of useful utilities to make your life easier
 
 - 📦 __Additional Components__:
 
-  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
+  - 🖼 Background: With two built-in patterns (grid & dots) and the ability to add your own custom background shapes
 
-  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
+  - 🧭 Interactive Minimap: Shows current nodes in a small map shape and allows dragging or zooming the viewport using the mini map
 
-  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
+  - 🕹 Controls: A panel with buttons to zoom in, zoom out, fit the view or lock interaction. You can also add your own custom controls to the panel.
 
-- 🦾 __Reliable__: Fully written in TypeScript
+- 🦾 __Reliable__: Fully written in TypeScript and tested with Cypress 10
diff --git a/docs/src/plugins/index.md b/docs/src/plugins/index.md
new file mode 100644
index 000000000..17648797c
--- /dev/null
+++ b/docs/src/plugins/index.md
@@ -0,0 +1,125 @@
+---
+title: Plugin API
+---
+
+# Introduction
+
+## What is a Plugin?
+
+A plugin is a function that takes Vue Flow app lifecycle hooks as an argument and returns void. 
+It allows you to extend on the core functionalities of Vue Flow by using the existing store and hooks.
+
+```ts
+type Plugin = (hooks: PluginHooks) => void
+
+interface PluginHooks {
+  beforeCreate: EventHookOn<[string, FlowOptions | undefined]>
+  created: EventHookOn<VueFlowStore>
+  beforeDestroy: EventHookOn<VueFlowStore>
+  destroyed: EventHookOn<string>
+}
+```
+
+## How to use a Plugin?
+
+To use a plugin, you first need to create a new Vue Flow app and then pass the plugin to the `use` method.
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import { createVueFlow } from '@vue-flow/core'
+
+import { MyPlugin } from './my-plugin'
+
+const app = createApp(App)
+
+const vueFlow = createVueFlow()
+
+vueFlow.use(MyPlugin)
+
+app.mount('#app')
+```
+
+## How to create a Plugin?
+
+To create a plugin, you need to create a function that takes the `PluginHooks` as an argument and returns void.
+
+```ts
+// my-plugin.ts
+import { PluginHooks } from '@vue-flow/core'
+
+export const MyPlugin: Plugin = (hooks) => {
+  hooks.created(([store, extend]) => {
+    console.log('Vue Flow App instance created')
+    
+    // use the extend fn to extend the store instance
+    extend({
+      myTestPlugin: () => console.log('Hello from my plugin!')
+    })
+    
+  })
+}
+```
+
+## Plugin Hooks
+
+### beforeCreate
+
+The `beforeCreate` hook is called before the store is created. It takes the `id` and `options` as arguments.
+
+```ts
+hooks.beforeCreate(([id, options]) => {
+  console.log('store is about to be created')
+})
+```
+
+### created
+
+The `created` hook is called after the store is created. It takes the `store` as the first and an `extend` function as the second argument.
+You can use the `extend` function to extend the store instance with your custom properties.
+
+```ts
+hooks.created(([store, extend]) => {
+  console.log('store created')
+  
+  // Extend the store
+  extend({ myProp: () => {} })
+  
+  // myProp is now accessable from store.myProp
+})
+```
+
+### beforeDestroy
+
+The `beforeDestroy` hook is called before the store is destroyed. It takes the `store` as an argument.
+
+```ts
+hooks.beforeDestroy((store) => {
+  console.log('store is about to be destroyed')
+})
+```
+
+### destroyed
+
+The `destroyed` hook is called after the store is destroyed. It takes the `id` as an argument.
+
+```ts
+hooks.destroyed((id) => {
+  console.log('store destroyed')
+})
+```
+
+## TypeScript
+
+You can create a type for your plugin so users have proper IDE support for your custom properties on their store instance.
+
+```ts
+import type { UseTestPlugin } from './types'
+
+declare module '@vue-flow/core' {
+  // extend the StoreBase interface to add your custom properties  
+  interface StoreBase {
+    myTestPlugin: UseTestPlugin
+  }
+}
+```
diff --git a/docs/tsconfig.docs.json b/docs/tsconfig.docs.json
index 0a66de340..e515e1523 100644
--- a/docs/tsconfig.docs.json
+++ b/docs/tsconfig.docs.json
@@ -21,9 +21,11 @@
     }
   },
   "include": [
-    "../packages/**/*"
+    "../packages/**/*",
+    "../packages/plugins/**/*"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "../packages/plugins/**/dist"
   ]
 }
diff --git a/docs/typedoc.json b/docs/typedoc.json
index 5f71be864..451296d22 100644
--- a/docs/typedoc.json
+++ b/docs/typedoc.json
@@ -10,7 +10,10 @@
     "../packages/controls/src/index.ts",
     "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts",
-    "../packages/node-resizer/src/index.ts"
+    "../packages/node-resizer/src/index.ts",
+    "../packages/plugins/dagre/src/index.ts",
+    "../packages/plugins/drag-n-drop/src/index.ts",
+    "../packages/plugins/screenshot/src/index.ts"
   ],
   "categorizeByGroup": true,
   "darkHighlightTheme": "vitesse-dark",
diff --git a/docs/typedoc.md.json b/docs/typedoc.md.json
index 29884c383..54df7ffa5 100644
--- a/docs/typedoc.md.json
+++ b/docs/typedoc.md.json
@@ -11,7 +11,10 @@
     "../packages/controls/src/index.ts",
     "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts",
-    "../packages/node-resizer/src/index.ts"
+    "../packages/node-resizer/src/index.ts",
+    "../packages/plugins/dagre/src/index.ts",
+    "../packages/plugins/drag-n-drop/src/index.ts",
+    "../packages/plugins/screenshot/src/index.ts"
   ],
   "allReflectionsHaveOwnDocument": true,
   "categorizeByGroup": true,
diff --git a/examples/vite/main.ts b/examples/vite/main.ts
index 6d8604e29..1e67f21ab 100644
--- a/examples/vite/main.ts
+++ b/examples/vite/main.ts
@@ -1,10 +1,16 @@
 import { createApp } from 'vue'
+import { createVueFlow } from '@vue-flow/core'
+import { PluginDragNDrop } from '@vue-flow/plugin-drag-n-drop'
+import { PluginScreenshot } from '@vue-flow/plugin-screenshot'
 import './index.css'
-import { createPinia } from 'pinia'
 import App from './App.vue'
 import { router } from './router'
 
 const app = createApp(App)
+const vueFlowApp = createVueFlow()
+
+vueFlowApp.use(PluginDragNDrop)
+vueFlowApp.use(PluginScreenshot({ defaultFileName: 'vue-flow-screenshot' }))
 
 app.config.performance = true
 app.use(router)
diff --git a/examples/vite/package.json b/examples/vite/package.json
index bee1a6e69..479889381 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -13,6 +13,9 @@
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
+    "@vue-flow/plugin-layout": "workspace:*",
+    "@vue-flow/plugin-drag-n-drop": "workspace:*",
+    "@vue-flow/plugin-screenshot": "workspace:*",
     "pinia": "^2.0.35",
     "vueflow": "workspace:*"
   },
diff --git a/examples/vite/router.ts b/examples/vite/router.ts
index 308fc59f2..6f68066c1 100644
--- a/examples/vite/router.ts
+++ b/examples/vite/router.ts
@@ -114,6 +114,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/nesting',
     component: () => import('./src/Nesting/Nesting.vue'),
   },
+  {
+    path: '/screenshot',
+    component: () => import('./src/Screenshot/ScreenshotExample.vue'),
+  },
   {
     path: '/rgb',
     component: () => import('./src/RGBFlow/RGBFlow.vue'),
diff --git a/examples/vite/src/DragNDrop/DnD.vue b/examples/vite/src/DragNDrop/DnD.vue
index 5489c7b6c..875640bd2 100644
--- a/examples/vite/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { useDragNDrop } from '@vue-flow/plugin-drag-n-drop'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
-function getId() {
-  return `dndnode_${id++}`
-}
+const getId = () => `dndnode_${id++}`
 
-const { onConnect, addEdges, addNodes, project } = useVueFlow({
+const { onConnect, addEdges, addNodes, findNode } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -17,39 +16,44 @@ const { onConnect, addEdges, addNodes, project } = useVueFlow({
     },
   ],
 })
-function onDragOver(event: DragEvent) {
-  event.preventDefault()
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
-  }
-}
 
-const wrapper = ref()
+const { onDrop } = useDragNDrop()
 
-onConnect(addEdges)
+onConnect((params) => addEdges([params]))
 
-function onDrop(event: DragEvent) {
-  const type = event.dataTransfer?.getData('application/vueflow')
+onDrop(({ type, position }) => {
+  const id = getId()
 
-  const flowbounds = wrapper.value.$el.getBoundingClientRect()
-
-  const position = project({
-    x: event.clientX - flowbounds.left,
-    y: event.clientY - flowbounds.top,
-  })
-
-  addNodes({
-    id: getId(),
-    type,
-    position,
-    label: `${type} node`,
+  addNodes([
+    {
+      id,
+      type,
+      position,
+      label: `${type} node`,
+    },
+  ])
+
+  nextTick(() => {
+    const node = findNode(id)!
+
+    const stop = watch(
+      () => node.dimensions,
+      (dimensions) => {
+        if (dimensions.width > 0 && dimensions.height > 0) {
+          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+          stop()
+        }
+      },
+      { deep: true, flush: 'post' },
+    )
   })
-}
+})
 </script>
 
 <template>
-  <div class="dndflow" @drop="onDrop">
-    <VueFlow ref="wrapper" @dragover="onDragOver" />
+  <div class="dndflow">
+    <VueFlow />
+
     <Sidebar />
   </div>
 </template>
diff --git a/examples/vite/src/DragNDrop/Sidebar.vue b/examples/vite/src/DragNDrop/Sidebar.vue
index 8636ae05c..ba1dfdeab 100644
--- a/examples/vite/src/DragNDrop/Sidebar.vue
+++ b/examples/vite/src/DragNDrop/Sidebar.vue
@@ -1,23 +1,14 @@
 <script lang="ts" setup>
-function onDragStart(event: DragEvent, nodeType: string) {
-  if (event.dataTransfer) {
-    event.dataTransfer.setData('application/vueflow', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
+import { useDragNDrop } from '@vue-flow/plugin-drag-n-drop'
+
+const { handleDragStart } = useDragNDrop()
 </script>
 
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>
-    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
-      Input Node
-    </div>
-    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
-      Default Node
-    </div>
-    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
-      Output Node
-    </div>
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="handleDragStart($event, 'input')">Input Node</div>
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="handleDragStart($event, 'default')">Default Node</div>
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="handleDragStart($event, 'output')">Output Node</div>
   </aside>
 </template>
diff --git a/examples/vite/src/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
index d7421925d..578efdd31 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,56 +1,23 @@
 <script lang="ts" setup>
-import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Panel, PanelPosition, Position, VueFlow, isNode } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-
-import '@vue-flow/controls/dist/style.css'
-
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import type { Direction } from '@vue-flow/plugin-layout'
+import { layout } from '@vue-flow/plugin-layout'
 import initialElements from './initial-elements'
 
-const dagreGraph = new dagre.graphlib.Graph()
-
-dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-const nodeExtent: CoordinateExtent = [
-  [0, -100],
-  [1000, 500],
-]
+const elements = ref(initialElements)
 
-const elements = ref<Elements>(initialElements)
+const { nodes, edges, fitView } = useVueFlow()
 
-function onLayout(direction: string) {
-  const isHorizontal = direction === 'LR'
-  dagreGraph.setGraph({ rankdir: direction })
-
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      dagreGraph.setNode(el.id, { width: 150, height: 50 })
-    } else {
-      dagreGraph.setEdge(el.source, el.target)
-    }
-  })
-
-  dagre.layout(dagreGraph)
-
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      const nodeWithPosition = dagreGraph.node(el.id)
-      el.targetPosition = isHorizontal ? Position.Left : Position.Top
-      el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
-      el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
-    }
-  })
+const onLayout = (direction: Direction) => {
+  layout(nodes.value, edges.value, { direction, onUpdated: fitView })
 }
 </script>
 
 <template>
-  <div class="layoutflow">
-    <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
-      <Controls />
-
-      <Panel style="display: flex; gap: 10px" :position="PanelPosition.TopRight">
-        <button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
+  <div style="flex: 1; position: relative">
+    <VueFlow v-model="elements" @nodes-initialized="onLayout('TB')">
+      <Panel style="display: flex; gap: 1rem" :position="PanelPosition.TopRight">
+        <button @click="onLayout('TB')">vertical layout</button>
         <button @click="onLayout('LR')">horizontal layout</button>
       </Panel>
     </VueFlow>
diff --git a/examples/vite/src/Screenshot/ScreenshotExample.vue b/examples/vite/src/Screenshot/ScreenshotExample.vue
new file mode 100644
index 000000000..68ada24ca
--- /dev/null
+++ b/examples/vite/src/Screenshot/ScreenshotExample.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
+
+const elements = ref<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' },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+
+const {
+  screenshot: { capture },
+} = useVueFlow()
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init style="background-color: white" class="vue-flow-basic-example">
+    <Panel :position="PanelPosition.TopCenter">
+      <button @click="capture(null, { shouldDownload: true })">Click to save Screenshot</button>
+    </Panel>
+  </VueFlow>
+</template>
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index 954ecdf14..46e3c821c 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
     vueTypes(),
     svgLoader(),
     AutoImport({
-      imports: ['vue', '@vueuse/core', 'vue/macros'],
+      imports: ['vue', '@vueuse/core'],
       dts: resolve('src/auto-imports.d.ts'),
     }),
   ],
diff --git a/packages/controls/README.md b/packages/controls/README.md
index 6d367dd36..4cac4d97d 100644
--- a/packages/controls/README.md
+++ b/packages/controls/README.md
@@ -1,4 +1,4 @@
-# Vue Flow: Toolbar Component
+# Vue Flow: Controls Component
 
 This is a control component for Vue Flow.
 It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.
diff --git a/packages/core/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts
index d699ec7c6..17662035a 100644
--- a/packages/core/src/composables/useEdge.ts
+++ b/packages/core/src/composables/useEdge.ts
@@ -1,6 +1,6 @@
 import { inject } from 'vue'
 import { useVueFlow } from './useVueFlow'
-import type { CustomEvent, ElementData } from '~/types'
+import type { GraphEdge } from '~/types'
 import { ErrorCode, VueFlowError } from '~/utils'
 import { EdgeId, EdgeRef } from '~/context'
 
@@ -11,13 +11,13 @@ import { EdgeId, EdgeRef } from '~/context'
  *
  * Meaning if you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw
  */
-export function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export function useEdge<T extends GraphEdge = GraphEdge>(id?: string) {
   const edgeId = id ?? inject(EdgeId, '')
   const edgeEl = inject(EdgeRef, null)
 
   const { findEdge, emits } = useVueFlow()
 
-  const edge = findEdge<Data, CustomEvents>(edgeId)
+  const edge = findEdge<T>(edgeId)
 
   if (!edge) {
     emits.error(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edgeId))
diff --git a/packages/core/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts
index ede884949..2e1c71e85 100644
--- a/packages/core/src/composables/useNode.ts
+++ b/packages/core/src/composables/useNode.ts
@@ -1,6 +1,6 @@
 import { computed, inject } from 'vue'
 import { useVueFlow } from './useVueFlow'
-import type { CustomEvent, ElementData } from '~/types'
+import type { GraphNode } from '~/types'
 import { NodeId, NodeRef } from '~/context'
 import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
 
@@ -11,13 +11,13 @@ import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
  *
  * Meaning if you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw
  */
-export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export function useNode<T extends GraphNode = GraphNode>(id?: string) {
   const nodeId = id ?? inject(NodeId, '')
   const nodeEl = inject(NodeRef, null)
 
   const { findNode, edges, emits } = useVueFlow()
 
-  const node = findNode<Data, CustomEvents>(nodeId)!
+  const node = findNode<T>(nodeId)!
 
   if (!node) {
     emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))
diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index 74145fc7b..b78b809a5 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -1,93 +1,16 @@
-import { toRefs, tryOnScopeDispose } from '@vueuse/core'
+import { tryOnScopeDispose } from '@vueuse/core'
 import type { EffectScope } from 'vue'
-import { computed, getCurrentScope, inject, provide, reactive } from 'vue'
-import { useActions, useGetters, useState } from '~/store'
-import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import { getCurrentScope, inject, provide } from 'vue'
+import type { FlowProps, VueFlowStore } from '~/types'
+import { createVueFlow, warn } from '~/utils'
 import { VueFlow } from '~/context'
-import { warn } from '~/utils'
-
-/**
- * Stores all currently created store instances
- */
-export class Storage {
-  public currentId = 0
-  public flows = new Map<string, VueFlowStore>()
-  static instance: Storage
-
-  public static getInstance(): Storage {
-    if (!Storage.instance) {
-      Storage.instance = new Storage()
-    }
-
-    return Storage.instance
-  }
-
-  public set(id: string, flow: VueFlowStore) {
-    return this.flows.set(id, flow)
-  }
-
-  public get(id: string) {
-    return this.flows.get(id)
-  }
-
-  public remove(id: string) {
-    return this.flows.delete(id)
-  }
-
-  public create(id: string, preloadedState?: FlowOptions): VueFlowStore {
-    const state: State = useState(preloadedState)
-
-    const reactiveState = reactive(state)
-
-    const nodeIds = computed(() => reactiveState.nodes.map((n) => n.id))
-    const edgeIds = computed(() => reactiveState.edges.map((e) => e.id))
-
-    const getters = useGetters(reactiveState, nodeIds, edgeIds)
-
-    const actions = useActions(reactiveState, getters, nodeIds, edgeIds)
-
-    const hooksOn = <any>{}
-    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
-      const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
-      hooksOn[name] = h.on
-    })
-
-    const emits = <any>{}
-    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
-      emits[n] = h.trigger
-    })
-
-    actions.setState(reactiveState)
-
-    const flow: VueFlowStore = {
-      ...hooksOn,
-      ...getters,
-      ...actions,
-      ...toRefs(reactiveState),
-      emits,
-      id,
-      vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : 'UNKNOWN',
-      $destroy: () => {
-        this.remove(id)
-      },
-    }
-
-    this.set(id, flow)
-
-    return flow
-  }
-
-  public getId() {
-    return `vue-flow-${this.currentId++}`
-  }
-}
 
 type Injection = VueFlowStore | null | undefined
 type Scope = (EffectScope & { vueFlowId: string }) | undefined
 
 // todo: maybe replace the storage with a context based solution; This would break calling useVueFlow outside a setup function though, which should be fine
-export function useVueFlow(options?: FlowProps): VueFlowStore {
-  const storage = Storage.getInstance()
+export function useVueFlow(options?: FlowProps) {
+  const storage = createVueFlow()
 
   const scope = getCurrentScope() as Scope
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index d05a199ef..0136f1b41 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
 /**
- * Vue Flow
- * @module vue-flow
+ * Vue Flow Core pkg
+ * @module @vue-flow/core
  */
 
 export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
@@ -58,19 +58,13 @@ export {
  */
 export { applyChanges, applyEdgeChanges, applyNodeChanges } from './utils/changes'
 
+export { VueFlowApp, createVueFlow } from './utils/vueFlowApp'
+
 export { defaultEdgeTypes, defaultNodeTypes } from './store/state'
 
 export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
 
-export {
-  useZoomPanHelper,
-  useVueFlow,
-  Storage as GlobalVueFlowStorage,
-  useHandle,
-  useNode,
-  useEdge,
-  useGetPointerPosition,
-} from './composables'
+export { useZoomPanHelper, useVueFlow, useHandle, useNode, useEdge, useGetPointerPosition } from './composables'
 
 export { VueFlowError, ErrorCode } from './utils/errors'
 
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 1540afabf..4a56059d5 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -63,28 +63,34 @@ export function useActions(
     state.hooks.updateNodeInternals.trigger(updateIds)
   }
 
-  const findNode: Actions['findNode'] = (id) => {
+  const findNode: Actions['findNode'] = <T extends GraphNode = GraphNode>(id: string | undefined | null) => {
     if (!id) {
       return
     }
 
+    let node
     if (state.nodes && !nodeIds.value.length) {
-      return state.nodes.find((node) => node.id === id)
+      node = state.nodes.find((node) => node.id === id)
+    } else {
+      node = state.nodes[nodeIds.value.indexOf(id)]
     }
 
-    return state.nodes[nodeIds.value.indexOf(id)]
+    return node as T | undefined
   }
 
-  const findEdge: Actions['findEdge'] = (id) => {
+  const findEdge: Actions['findEdge'] = <T extends GraphEdge = GraphEdge>(id: string | undefined | null) => {
     if (!id) {
       return
     }
 
+    let edge
     if (state.edges && !edgeIds.value.length) {
-      return state.edges.find((edge) => edge.id === id)
+      edge = state.edges.find((edge) => edge.id === id)
+    } else {
+      edge = state.edges[edgeIds.value.indexOf(id)]
     }
 
-    return state.edges[edgeIds.value.indexOf(id)]
+    return edge as T | undefined
   }
 
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
@@ -130,36 +136,11 @@ export function useActions(
       return
     }
 
-    // todo: remove this feature again, it's not working properly
-    let zoom: number
-    if (state.__experimentalFeatures?.nestedFlow) {
-      let viewportNodes: HTMLElement[] = [viewportNode]
-      let parentNode = viewportNode
-      let isNested
-
-      while (!isNested && parentNode) {
-        parentNode = parentNode.parentElement!
-        isNested = parentNode?.classList.contains('vue-flow__transformationpane')
+    const style = window.getComputedStyle(viewportNode)
 
-        if (isNested) {
-          viewportNodes = [parentNode, ...viewportNodes]
-        }
-      }
+    const { m22 } = new window.DOMMatrixReadOnly(style.transform)
 
-      viewportNodes.forEach((vp) => {
-        const style = window.getComputedStyle(vp)
-        const { m22 } = new window.DOMMatrixReadOnly(style.transform)
-        if (!zoom) {
-          zoom = m22
-        } else {
-          zoom *= m22
-        }
-      })
-    } else {
-      const style = window.getComputedStyle(viewportNode)
-      const { m22 } = new window.DOMMatrixReadOnly(style.transform)
-      zoom = m22
-    }
+    const zoom = m22
 
     const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
       const node = findNode(update.id)
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 7a34cc044..b8e89568e 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -130,10 +130,6 @@ function defaultState(): State {
 
     disableKeyboardA11y: false,
     ariaLiveMessage: '',
-
-    __experimentalFeatures: {
-      nestedFlow: false,
-    },
   }
 }
 
diff --git a/packages/core/src/style.css b/packages/core/src/style.css
index 2c6011d45..e9fa6b363 100644
--- a/packages/core/src/style.css
+++ b/packages/core/src/style.css
@@ -187,28 +187,27 @@
    }
 
   &-bottom {
-     top: auto;
      left: 50%;
-     bottom: -4px;
-     transform: translate(-50%, 0);
+     bottom: 0;
+     transform: translate(-50%, 50%);
    }
 
   &-top {
      left: 50%;
-     top: -4px;
-     transform: translate(-50%, 0);
+     top: 0;
+     transform: translate(-50%, -50%);
    }
 
   &-left {
      top: 50%;
-     left: -4px;
-     transform: translate(0, -50%);
+     left: 0;
+     transform: translate(-50%, -50%);
    }
 
   &-right {
-     right: -4px;
      top: 50%;
-     transform: translate(0, -50%);
+     right: 0;
+     transform: translate(50%, -50%);
    }
 }
 
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index ab9d46ce6..5c627ebd1 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -180,10 +180,6 @@ export interface FlowProps {
 
   autoPanOnConnect?: boolean
   autoPanOnNodeDrag?: boolean
-
-  __experimentalFeatures?: {
-    nestedFlow?: boolean
-  }
 }
 
 // Todo: Remove in next major version
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
index e87239809..e45b64759 100644
--- a/packages/core/src/types/index.ts
+++ b/packages/core/src/types/index.ts
@@ -9,3 +9,4 @@ export * from './hooks'
 export * from './changes'
 export * from './handle'
 export * from './panel'
+export * from './plugins'
diff --git a/packages/core/src/types/plugins.ts b/packages/core/src/types/plugins.ts
new file mode 100644
index 000000000..e6e71652f
--- /dev/null
+++ b/packages/core/src/types/plugins.ts
@@ -0,0 +1,12 @@
+import type { EventHook } from '@vueuse/core'
+import type { FlowOptions } from './flow'
+import type { VueFlowStore } from './store'
+
+export interface PluginHooks {
+  beforeCreate: EventHook<[string, FlowOptions | undefined]>
+  created: EventHook<[VueFlowStore, (plugin: Partial<VueFlowStore>) => void]>
+  beforeDestroy: EventHook<VueFlowStore>
+  destroyed: EventHook<string>
+}
+
+export type Plugin = (hooks: { [key in keyof PluginHooks]: PluginHooks[key]['on'] }) => void
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index 81f251843..7eba792ab 100644
--- a/packages/core/src/types/store.ts
+++ b/packages/core/src/types/store.ts
@@ -2,7 +2,6 @@ import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
 import type {
   Dimensions,
-  ElementData,
   Elements,
   FlowElements,
   FlowExportObject,
@@ -25,7 +24,7 @@ import type {
 import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportFunctions, ViewportTransform } from './zoom'
-import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
+import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
 import type { ConnectingHandle, ValidConnectionFunc } from './handle'
 
@@ -182,13 +181,9 @@ export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => vo
 
 export type UpdateNodeInternals = (nodeIds?: string[]) => void
 
-export type FindNode = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string | undefined | null,
-) => GraphNode<Data, CustomEvents> | undefined
+export type FindNode = <T extends GraphNode = GraphNode>(id: string | undefined | null) => T | undefined
 
-export type FindEdge = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string | undefined | null,
-) => GraphEdge<Data, CustomEvents> | undefined
+export type FindEdge = <T extends GraphEdge = GraphEdge>(id: string | undefined | null) => T | undefined
 
 export type GetIntersectingNodes = (
   node: (Partial<Node> & { id: Node['id'] }) | Rect,
@@ -313,12 +308,13 @@ export type ComputedGetters = {
   [key in keyof Getters]: ComputedRef<Getters[key]>
 }
 
-export type VueFlowStore = {
+export interface StoreBase {
   readonly id: string
   readonly emits: FlowHooksEmit
   /** current vue flow version you're using */
   readonly vueFlowVersion: string
-} & FlowHooksOn &
-  ToRefs<State> &
-  Readonly<ComputedGetters> &
-  Readonly<Actions>
+}
+
+export type ConfigFactory = () => Partial<Omit<FlowOptions, 'id'>>
+
+export type VueFlowStore = StoreBase & FlowHooksOn & ToRefs<State> & Readonly<ComputedGetters> & Readonly<Actions>
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index d1ac0a0b8..b6ab9ab90 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -11,3 +11,4 @@ export * from './handle'
 export * from './log'
 export * from './node'
 export * from './store'
+export * from './vueFlowApp'
diff --git a/packages/core/src/utils/vueFlowApp.ts b/packages/core/src/utils/vueFlowApp.ts
new file mode 100644
index 000000000..743fe6d76
--- /dev/null
+++ b/packages/core/src/utils/vueFlowApp.ts
@@ -0,0 +1,148 @@
+import { createEventHook, toRefs } from '@vueuse/core'
+import { computed, reactive } from 'vue'
+import type { ConfigFactory, FlowOptions, Plugin, PluginHooks, State, VueFlowStore } from '~/types'
+import { useActions, useGetters, useState } from '~/store'
+
+/**
+ * Global Vue Flow App
+ *
+ * Stores all store instances and provides access to them
+ *
+ * Holds global config that is passed to all store instances
+ *
+ * Provides hooks for plugins to access the store
+ */
+export class VueFlowApp {
+  static instance: VueFlowApp
+
+  public currentId = 0
+
+  public flows = new Map<string, VueFlowStore>()
+
+  private hooks: PluginHooks = {
+    beforeCreate: createEventHook(),
+    created: createEventHook(),
+    beforeDestroy: createEventHook(),
+    destroyed: createEventHook(),
+  }
+
+  /** Used by each store instance that is created as default values for store */
+  public config: ConfigFactory = () => ({})
+
+  public static getInstance(): VueFlowApp {
+    if (!VueFlowApp.instance) {
+      VueFlowApp.instance = new VueFlowApp()
+    }
+
+    return VueFlowApp.instance
+  }
+
+  public set(id: string, flow: VueFlowStore) {
+    return this.flows.set(id, flow)
+  }
+
+  public get(id: string) {
+    return this.flows.get(id)
+  }
+
+  public remove(id: string) {
+    return this.flows.delete(id)
+  }
+
+  public create(id: string, initialOptions?: FlowOptions): VueFlowStore {
+    const initialState = { ...this.config, ...initialOptions }
+
+    // todo: can we await this so we can possibly extend the initialState?
+    this.hooks.beforeCreate.trigger([id, initialState])
+
+    const state: State = useState(initialState)
+
+    const reactiveState = reactive(state)
+
+    const nodeIds = computed(() => reactiveState.nodes.map((n) => n.id))
+    const edgeIds = computed(() => reactiveState.edges.map((e) => e.id))
+
+    const getters = useGetters(reactiveState, nodeIds, edgeIds)
+
+    const actions = useActions(reactiveState, getters, nodeIds, edgeIds)
+
+    const hooksOn = <any>{}
+    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
+      const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
+      hooksOn[name] = h.on
+    })
+
+    const emits = <any>{}
+    Object.entries(reactiveState.hooks).forEach(([n, h]) => {
+      emits[n] = h.trigger
+    })
+
+    actions.setState(reactiveState)
+
+    const flow: VueFlowStore = {
+      ...hooksOn,
+      ...getters,
+      ...actions,
+      ...toRefs(reactiveState),
+      emits,
+      id,
+      $destroy: () => {
+        // todo: can we await this so we can possibly cancel the destroy?
+        this.hooks.beforeDestroy.trigger(flow)
+        this.remove(id)
+        this.hooks.destroyed.trigger(id)
+      },
+      vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : 'UNKNOWN',
+    }
+
+    this.set(id, flow)
+
+    this.hooks.created.trigger([
+      flow,
+      // this helper function lets you extend the store with additional properties
+      (plugin) => {
+        this.set(id, { ...this.get(id)!, ...plugin })
+      },
+    ])
+
+    return this.get(id)!
+  }
+
+  public getId() {
+    return `vue-flow-${this.currentId++}`
+  }
+
+  /**
+   * Helper to install plugin
+   */
+  public use(plugin: Plugin) {
+    plugin({
+      beforeCreate: this.hooks.beforeCreate.on,
+      created: this.hooks.created.on,
+      beforeDestroy: this.hooks.beforeDestroy.on,
+      destroyed: this.hooks.destroyed.on,
+    })
+
+    return this
+  }
+
+  /**
+   * Set global config factory function
+   * @param options
+   */
+  public setConfig(options: ConfigFactory) {
+    this.config = options
+
+    return this
+  }
+}
+
+export function createVueFlow(options?: ConfigFactory) {
+  const app = VueFlowApp.getInstance()
+
+  if (options) {
+    app.setConfig(options)
+  }
+
+  return app
+}
diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue
index a44af4093..9154318b0 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/minimap/src/MiniMap.vue
@@ -35,10 +35,12 @@ const attrs: Record<string, any> = useAttrs()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { id, edges, viewport, translateExtent, dimensions, emits, nodes, d3Selection, d3Zoom } = useVueFlow()
+const { id, edges, viewport, translateExtent, dimensions, emits, getNodes, d3Selection, d3Zoom } = useVueFlow()
 
 const el = ref<SVGElement>()
 
+const isDragging = ref(false)
+
 provide(MiniMapSlots, useSlots())
 
 const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
@@ -57,7 +59,7 @@ const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
   nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc),
 )
 
-const bb = computed(() => getRectOfNodes(nodes.value))
+const bb = computed(() => getRectOfNodes(getNodes.value))
 
 const viewBB = computed(() => ({
   x: -viewport.value.x / viewport.value.zoom,
@@ -66,7 +68,9 @@ const viewBB = computed(() => ({
   height: dimensions.value.height / viewport.value.zoom,
 }))
 
-const boundingRect = computed(() => (nodes.value && nodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
+const boundingRect = computed(() =>
+  getNodes.value && getNodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value,
+)
 
 const viewScale = computed(() => {
   const scaledWidth = boundingRect.value.width / elementWidth.value
@@ -150,6 +154,22 @@ watchEffect(
       const zoomAndPanHandler = zoom()
         .on('zoom', pannable ? panHandler : () => {})
         .on('zoom.wheel', zoomable ? zoomHandler : () => {})
+        .on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+          if (!event.sourceEvent) {
+            return null
+          }
+
+          if (pannable && event.sourceEvent?.type === 'mousedown') {
+            isDragging.value = true
+          }
+        })
+        .on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+          if (!event.sourceEvent) {
+            return null
+          }
+
+          isDragging.value = false
+        })
 
       selection.call(zoomAndPanHandler)
 
@@ -205,7 +225,7 @@ export default {
 </script>
 
 <template>
-  <Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
+  <Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable, dragging: isDragging }">
     <svg
       ref="el"
       :width="elementWidth"
@@ -218,7 +238,7 @@ export default {
       <title v-if="ariaLabel" :id="`vue-flow__minimap-${id}`">{{ ariaLabel }}</title>
 
       <MiniMapNode
-        v-for="node of nodes"
+        v-for="node of getNodes"
         :id="node.id"
         :key="node.id"
         :position="node.computedPosition"
diff --git a/packages/plugins/drag-n-drop/.eslintrc.js b/packages/plugins/drag-n-drop/.eslintrc.js
new file mode 100644
index 000000000..e4b0b38cc
--- /dev/null
+++ b/packages/plugins/drag-n-drop/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@tooling/eslint-config'],
+}
diff --git a/packages/plugins/drag-n-drop/README.md b/packages/plugins/drag-n-drop/README.md
new file mode 100644
index 000000000..de2ff9ef4
--- /dev/null
+++ b/packages/plugins/drag-n-drop/README.md
@@ -0,0 +1,116 @@
+# Vue Flow: Plugin Drag And Drop
+
+This package contains a simple Drag and Drop plugin that can be used with Vue Flow.
+Simply install the plugin onto your Vue Flow App and you can start using the composable to
+attach drag and drop handlers to your graph.
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/plugin-drag-n-drop
+
+# or
+$ npm i --save @vue-flow/plugin-drag-n-drop
+```
+
+## 🎮 Quickstart
+
+- Install the plugin
+
+```ts
+// main.ts or your app entry point
+import { createVueFlow } from '@vue-flow/core'
+import { PluginDragNDrop } from '@vue-flow/plugin-drag-n-drop'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const vueFlowApp = createVueFlow()
+
+vueFlowApp.use(PluginDragNDrop)
+
+app.mount('#root')
+```
+
+- Attach the handlers
+
+```vue
+<script setup>
+// App.vue
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { useDragNDrop } from '@vue-flow/plugin-drag-n-drop'
+import initialElements from './initial-elements'
+
+import Sidebar from './Sidebar.vue'
+
+const { addNodes } = useVueFlow()
+
+// some nodes and edges
+const elements = ref(initialElements)
+
+// your drag and drop handler is bound to the current vue flow instance
+// it will never apply to other store instances at the same time
+const { handleDragOver, handleDrop, onDrop } = useDragNDrop()
+
+onDrop(({ type, position }) => {
+  const id = getId()
+  
+  // add a new node on drop
+  addNodes([
+    {
+      id,
+      type,
+      position,
+      label: `${type} node`,
+    },
+  ])
+
+  // align node position after drop, so it's centered to the mouse
+  nextTick(() => {
+    const node = findNode(id)
+
+    const stop = watch(
+      () => node.dimensions,
+      (dimensions) => {
+        if (dimensions.width > 0 && dimensions.height > 0) {
+          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+          stop()
+        }
+      },
+      { deep: true, flush: 'post' },
+    )
+  })
+})
+</script>
+<template>
+  <div style="height: 100vh" @dragover="handleDragOver">
+    <VueFlow v-model="elements" @drop="handleDrop" />
+    
+    <Sidebar />
+  </div>
+</template>
+```
+
+```vue
+<script lang="ts" setup>
+// Sidebar.vue
+import { useDragNDrop } from '@vue-flow/plugin-drag-n-drop'
+
+const { handleDragStart } = useDragNDrop()
+</script>
+
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="handleDragStart($event, 'input')">Input Node</div>
+    
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="handleDragStart($event, 'default')">Default Node</div>
+    
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="handleDragStart($event, 'output')">Output Node</div>
+  </aside>
+</template>
+```
diff --git a/packages/plugins/drag-n-drop/package.json b/packages/plugins/drag-n-drop/package.json
new file mode 100644
index 000000000..f5280e656
--- /dev/null
+++ b/packages/plugins/drag-n-drop/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vue-flow/plugin-drag-n-drop",
+  "version": "0.0.1",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/drag-n-drop"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-plugin-drag-n-drop.js",
+  "module": "./dist/vue-flow-plugin-drag-n-drop.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-plugin-drag-n-drop.iife.js",
+  "jsdelivr": "./dist/vue-flow-plugin-drag-n-drop.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "tsc && shx rm -rf tmp",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "@vue-flow/core": "^1.0.0"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.13.0"
+  },
+  "devDependencies": {
+    "@tooling/eslint-config": "workspace:*",
+    "@tooling/tsconfig": "workspace:*",
+    "@tooling/vite-config": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "vite": "^4.1.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/plugins/drag-n-drop/src/dnd.ts b/packages/plugins/drag-n-drop/src/dnd.ts
new file mode 100644
index 000000000..2de450d38
--- /dev/null
+++ b/packages/plugins/drag-n-drop/src/dnd.ts
@@ -0,0 +1,91 @@
+import { ref, watch } from 'vue'
+import { createEventHook } from '@vueuse/core'
+import type { Plugin, VueFlowStore } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+import type { DragNodeType, OnDragStartEventData, OnDropData, UseDragAndDrop } from './types'
+
+function createDragNDrop(store: VueFlowStore): UseDragAndDrop {
+  const onDragStart = createEventHook<OnDragStartEventData>()
+  const onDragOver = createEventHook<DragEvent>()
+  const onDrop = createEventHook<OnDropData>()
+
+  const nodeType = ref<DragNodeType>()
+
+  function handleDragStart(event: DragEvent, type: DragNodeType) {
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+
+    nodeType.value = type
+    onDragStart.trigger({ event, type })
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move'
+    }
+
+    onDragOver.trigger(event)
+  }
+
+  function handleDrop(event: DragEvent) {
+    const type = nodeType.value as DragNodeType
+
+    if (!type || !store.vueFlowRef.value) return
+
+    const { left, top } = store.vueFlowRef.value.getBoundingClientRect()
+
+    const position = store.project({
+      x: event.clientX - left,
+      y: event.clientY - top,
+    })
+
+    onDrop.trigger({ event, type, position })
+  }
+
+  watch(store.viewportRef, (containerEl, _, onCleanup) => {
+    if (containerEl) {
+      containerEl.addEventListener('dragover', handleDragOver)
+    }
+
+    onCleanup(() => {
+      if (containerEl) {
+        containerEl.removeEventListener('dragover', handleDragOver)
+      }
+    })
+  })
+
+  watch(store.vueFlowRef, (containerEl, _, onCleanup) => {
+    if (containerEl) {
+      containerEl.addEventListener('drop', handleDrop)
+    }
+
+    onCleanup(() => {
+      if (containerEl) {
+        containerEl.removeEventListener('drop', handleDrop)
+      }
+    })
+  })
+
+  return {
+    nodeType,
+    handleDragStart,
+    onDragStart: onDragStart.on,
+    onDragOver: onDragOver.on,
+    onDrop: onDrop.on,
+  }
+}
+
+export const PluginDragNDrop: Plugin = (hooks) => {
+  hooks.created(([store, extend]) =>
+    extend({
+      dragNDrop: createDragNDrop(store),
+    }),
+  )
+}
+
+export function useDragNDrop<CustomType extends string = string>() {
+  return useVueFlow().dragNDrop as UseDragAndDrop<CustomType>
+}
diff --git a/packages/plugins/drag-n-drop/src/index.ts b/packages/plugins/drag-n-drop/src/index.ts
new file mode 100644
index 000000000..294857d90
--- /dev/null
+++ b/packages/plugins/drag-n-drop/src/index.ts
@@ -0,0 +1,3 @@
+import './store'
+export * from './types'
+export * from './dnd'
diff --git a/packages/plugins/drag-n-drop/src/store.ts b/packages/plugins/drag-n-drop/src/store.ts
new file mode 100644
index 000000000..a68fcd24f
--- /dev/null
+++ b/packages/plugins/drag-n-drop/src/store.ts
@@ -0,0 +1,7 @@
+import type { UseDragAndDrop } from './types'
+
+declare module '@vue-flow/core' {
+  interface StoreBase {
+    dragNDrop: UseDragAndDrop
+  }
+}
diff --git a/packages/plugins/drag-n-drop/src/types.ts b/packages/plugins/drag-n-drop/src/types.ts
new file mode 100644
index 000000000..5995e34d4
--- /dev/null
+++ b/packages/plugins/drag-n-drop/src/types.ts
@@ -0,0 +1,23 @@
+import type { DefaultNodeTypes, XYPosition } from '@vue-flow/core'
+import type { Ref } from 'vue'
+
+export type DragNodeType<CustomType extends string = any> = keyof DefaultNodeTypes | CustomType
+
+export interface OnDragStartEventData<CustomType extends string = any> {
+  event: DragEvent
+  type: DragNodeType<CustomType>
+}
+
+export interface OnDropData<CustomType extends string = any> {
+  event: DragEvent
+  type: DragNodeType<CustomType>
+  position: XYPosition
+}
+
+export interface UseDragAndDrop<CustomType extends string = any> {
+  nodeType: Ref<DragNodeType<CustomType> | undefined>
+  handleDragStart: (event: DragEvent, type: DragNodeType<CustomType>) => void
+  onDragStart: (callback: (data: OnDragStartEventData<CustomType>) => void) => void
+  onDragOver: (callback: (event: DragEvent) => void) => void
+  onDrop: (callback: (data: OnDropData<CustomType>) => void) => void
+}
diff --git a/packages/plugins/drag-n-drop/tsconfig.json b/packages/plugins/drag-n-drop/tsconfig.json
new file mode 100644
index 000000000..f02b0a03e
--- /dev/null
+++ b/packages/plugins/drag-n-drop/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@tooling/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declarationDir": "./dist",
+    "types": [
+      "vite/client",
+      "vue/macros"
+    ]
+  },
+  "include": [
+    "./src"
+  ]
+}
diff --git a/packages/plugins/drag-n-drop/vite.config.ts b/packages/plugins/drag-n-drop/vite.config.ts
new file mode 100644
index 000000000..382e9b4ad
--- /dev/null
+++ b/packages/plugins/drag-n-drop/vite.config.ts
@@ -0,0 +1,13 @@
+import { resolve } from 'node:path'
+import { withConfig } from '@tooling/vite-config'
+
+export default withConfig({
+  build: {
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'vue-flow-plugin-drag-n-drop',
+      name: 'vueFlowPluginDragNDrop',
+    },
+  },
+})
diff --git a/packages/plugins/layout/.eslintrc.js b/packages/plugins/layout/.eslintrc.js
new file mode 100644
index 000000000..e4b0b38cc
--- /dev/null
+++ b/packages/plugins/layout/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@tooling/eslint-config'],
+}
diff --git a/packages/plugins/layout/README.md b/packages/plugins/layout/README.md
new file mode 100644
index 000000000..6f5ded7bd
--- /dev/null
+++ b/packages/plugins/layout/README.md
@@ -0,0 +1,34 @@
+# Vue Flow: Plugin Layout
+
+This package contains a simple layout plugin using [dagre.js](https://github.com/dagrejs/dagre).
+
+## 🛠 Setup
+
+```bash
+# install plugin & dagre (plugin does not include dagre)
+$ yarn add @vue-flow/plugin-layout dagre
+
+# or
+$ npm i --save @vue-flow/plugin-layout dagre
+```
+
+## 🎮 Quickstart
+
+- Use the layout action to lay out your graph
+
+```vue
+
+<script setup>
+// App.vue
+import { VueFlow } from '@vue-flow/core'
+import { layout } from '@vue-flow/plugin-layout'
+import initialElements from './initial-elements'
+
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 100vh">
+    <VueFlow v-model="elements" @nodes-initialized="layout(elements, { direction: 'TB' })"/>
+  </div>
+</template>
+```
diff --git a/packages/plugins/layout/package.json b/packages/plugins/layout/package.json
new file mode 100644
index 000000000..7f00aa5a4
--- /dev/null
+++ b/packages/plugins/layout/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vue-flow/plugin-layout",
+  "version": "0.0.1",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/layout"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-plugin-layout.js",
+  "module": "./dist/vue-flow-plugin-layout.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-plugin-layout.iife.js",
+  "jsdelivr": "./dist/vue-flow-plugin-layout.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "tsc && shx rm -rf tmp",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "@vue-flow/core": "^1.0.0",
+    "dagre": "^0.8.5"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tooling/eslint-config": "workspace:*",
+    "@tooling/tsconfig": "workspace:*",
+    "@types/dagre": "^0.7.48",
+    "@vue-flow/core": "workspace:*",
+    "dagre": "^0.8.5",
+    "vite": "^4.1.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/plugins/layout/src/index.ts b/packages/plugins/layout/src/index.ts
new file mode 100644
index 000000000..c0cabbcee
--- /dev/null
+++ b/packages/plugins/layout/src/index.ts
@@ -0,0 +1,2 @@
+export * from './layout'
+export * from './types'
diff --git a/packages/plugins/layout/src/layout.ts b/packages/plugins/layout/src/layout.ts
new file mode 100644
index 000000000..4dcd512e2
--- /dev/null
+++ b/packages/plugins/layout/src/layout.ts
@@ -0,0 +1,68 @@
+import type { Elements, GraphEdge, GraphNode } from '@vue-flow/core'
+import { Position, isGraphEdge, isGraphNode } from '@vue-flow/core'
+import type { GraphLabel } from 'dagre'
+import dagre from 'dagre'
+import type { LayoutOptions, UpdateParams } from './types'
+
+export function layout(elements: Elements, options?: LayoutOptions, dagreOptions?: GraphLabel): void
+export function layout(nodes: GraphNode[], edges: GraphEdge[], options?: LayoutOptions, dagreOptions?: GraphLabel): void
+export function layout(...args: any[]) {
+  let options: LayoutOptions
+  let dagreOptions: GraphLabel
+  let nodes: GraphNode[]
+  let edges: GraphEdge[]
+  let elements: Elements
+
+  // if we got 4 args, we assume that we got nodes and edges separately
+  if (Array.isArray(args[1])) {
+    ;[nodes, edges, options, dagreOptions] = args
+  } else {
+    ;[elements, options, dagreOptions] = args
+    nodes = elements.filter(isGraphNode)
+    edges = elements.filter(isGraphEdge)
+  }
+
+  const { direction = 'LR', offset, onUpdated, onBeforeUpdate } = options
+
+  const dagreGraph = new dagre.graphlib.Graph()
+  dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+  const isHorizontal = direction === 'LR' || direction === 'RL'
+  dagreGraph.setGraph({
+    rankdir: direction,
+    ...dagreOptions,
+  })
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: node.dimensions.width, height: node.dimensions.height })
+  })
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target)
+  })
+
+  dagre.layout(dagreGraph)
+
+  let updates: UpdateParams[] | false = []
+
+  nodes.forEach((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id)
+    node.targetPosition = isHorizontal ? Position.Left : Position.Top
+    node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
+    ;(updates as UpdateParams[]).push({
+      node,
+      nextPos: {
+        x: nodeWithPosition.x - node.dimensions.width / 2 - (offset?.x ?? 0),
+        y: nodeWithPosition.y - node.dimensions.height / 2 - (offset?.y ?? 0),
+      },
+    })
+  })
+
+  updates = onBeforeUpdate ? onBeforeUpdate(updates) : updates
+
+  if (updates && updates.length) {
+    updates.forEach(({ node, nextPos }) => (node.position = nextPos))
+
+    onUpdated?.()
+  }
+}
diff --git a/packages/plugins/layout/src/types.ts b/packages/plugins/layout/src/types.ts
new file mode 100644
index 000000000..1e427516c
--- /dev/null
+++ b/packages/plugins/layout/src/types.ts
@@ -0,0 +1,15 @@
+import type { GraphNode, XYPosition } from '@vue-flow/core'
+
+export type Direction = 'TB' | 'BT' | 'LR' | 'RL'
+
+export interface UpdateParams {
+  node: GraphNode
+  nextPos: XYPosition
+}
+
+export interface LayoutOptions {
+  offset?: Partial<XYPosition>
+  direction?: Direction
+  onBeforeUpdate?: (params: UpdateParams[]) => UpdateParams[] | false
+  onUpdated?: () => void
+}
diff --git a/packages/plugins/layout/tsconfig.json b/packages/plugins/layout/tsconfig.json
new file mode 100644
index 000000000..f02b0a03e
--- /dev/null
+++ b/packages/plugins/layout/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@tooling/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declarationDir": "./dist",
+    "types": [
+      "vite/client",
+      "vue/macros"
+    ]
+  },
+  "include": [
+    "./src"
+  ]
+}
diff --git a/packages/plugins/layout/vite.config.ts b/packages/plugins/layout/vite.config.ts
new file mode 100644
index 000000000..16c4470a2
--- /dev/null
+++ b/packages/plugins/layout/vite.config.ts
@@ -0,0 +1,33 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    extensions: ['.ts'],
+  },
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'vue-flow-plugin-layout',
+      name: 'vueFlowPluginLayout',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', '@vue-flow/core', 'dagre'],
+      output: {
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          'vue': 'Vue',
+          '@vue-flow/core': 'VueFlow',
+          'dagre': 'Dagre',
+        },
+      },
+    },
+  },
+})
diff --git a/packages/plugins/screenshot/.eslintrc.js b/packages/plugins/screenshot/.eslintrc.js
new file mode 100644
index 000000000..e4b0b38cc
--- /dev/null
+++ b/packages/plugins/screenshot/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@tooling/eslint-config'],
+}
diff --git a/packages/plugins/screenshot/README.md b/packages/plugins/screenshot/README.md
new file mode 100644
index 000000000..371b2daae
--- /dev/null
+++ b/packages/plugins/screenshot/README.md
@@ -0,0 +1,59 @@
+# Vue Flow: Plugin Screenshot
+
+This package contains a simple Screenshot plugin that can be used with Vue Flow.
+Simply install the plugin onto your Vue Flow App and you can start using the composable to
+screenshot your graph.
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/plugin-screenshot
+
+# or
+$ npm i --save @vue-flow/plugin-screenshot
+```
+
+## 🎮 Quickstart
+
+- Install the plugin
+
+```ts
+// main.ts or your app entry point
+import { createVueFlow } from '@vue-flow/core'
+import { PluginScreenshot } from '@vue-flow/plugin-screenshot'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const vueFlowApp = createVueFlow()
+
+vueFlowApp.use(PluginScreenshot)
+
+app.mount('#root')
+```
+
+- Attach the handlers
+
+```vue
+<script setup>
+// App.vue
+import { VueFlow } from '@vue-flow/core'
+import { useScreenshot } from '@vue-flow/plugin-screenshot'
+import initialElements from './initial-elements'
+
+const elements = ref(initialElements)
+
+const { screenshot } = useScreenshot()
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init>
+    <Panel :position="PanelPosition.TopCenter">
+      <button @click="screenshot">Click to save Screenshot</button>
+    </Panel>
+  </VueFlow>
+</template>
+```
diff --git a/packages/plugins/screenshot/package.json b/packages/plugins/screenshot/package.json
new file mode 100644
index 000000000..7a7753c51
--- /dev/null
+++ b/packages/plugins/screenshot/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vue-flow/plugin-screenshot",
+  "version": "0.0.1",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/screenshot"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-plugin-screenshot.js",
+  "module": "./dist/vue-flow-plugin-screenshot.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-plugin-screenshot.iife.js",
+  "jsdelivr": "./dist/vue-flow-plugin-screenshot.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "tsc && shx rm -rf tmp",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "@vue-flow/core": "^1.0.0"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.11"
+  },
+  "devDependencies": {
+    "@tooling/eslint-config": "workspace:*",
+    "@tooling/tsconfig": "workspace:*",
+    "@tooling/vite-config": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "vite": "^4.1.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/plugins/screenshot/src/index.ts b/packages/plugins/screenshot/src/index.ts
new file mode 100644
index 000000000..005f4b607
--- /dev/null
+++ b/packages/plugins/screenshot/src/index.ts
@@ -0,0 +1,3 @@
+import './store'
+export * from './screenshot'
+export * from './types'
diff --git a/packages/plugins/screenshot/src/screenshot.ts b/packages/plugins/screenshot/src/screenshot.ts
new file mode 100644
index 000000000..41875949e
--- /dev/null
+++ b/packages/plugins/screenshot/src/screenshot.ts
@@ -0,0 +1,96 @@
+import type { Plugin, VueFlowStore } from '@vue-flow/core'
+import { toJpeg as ElToJpg, toPng as ElToPng } from 'html-to-image'
+import { ref } from 'vue'
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import { useVueFlow } from '@vue-flow/core'
+import type { CaptureScreenshot, UseScreenshot, UseScreenshotPluginOptions } from './types'
+import { ImageType } from './types'
+
+const createScreenshotState = (store: VueFlowStore, pluginOptions: UseScreenshotPluginOptions = {}): UseScreenshot => {
+  const dataUrl = ref<string>('')
+  const imgType = ref<ImageType>(ImageType.PNG)
+  const error = ref()
+
+  const capture: CaptureScreenshot = async (el = null, options = {}) => {
+    let data
+
+    const fileName = options.fileName ?? pluginOptions.defaultFileName ?? 'vue-flow-screenshot'
+
+    switch (options.type ?? pluginOptions.defaultImageType) {
+      case ImageType.JPEG:
+        data = await toJpeg(el, options)
+        break
+      case ImageType.PNG:
+        data = await toPng(el, options)
+        break
+      default:
+        data = await toPng(el, options)
+        break
+    }
+
+    // immediately download the image if shouldDownload is true
+    if (options.shouldDownload && fileName !== '') {
+      download(fileName)
+    }
+
+    return data
+  }
+
+  return {
+    capture,
+    download,
+    dataUrl,
+    error,
+  }
+
+  function toJpeg(el?: HTMLElement | null, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToJpg(el ?? <HTMLElement>store.vueFlowRef.value, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = ImageType.JPEG
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function toPng(el?: HTMLElement | null, options: HTMLToImageOptions = { quality: 0.95 }) {
+    error.value = null
+
+    return ElToPng(el ?? <HTMLElement>store.vueFlowRef.value, options)
+      .then((data) => {
+        dataUrl.value = data
+        imgType.value = ImageType.PNG
+        return data
+      })
+      .catch((error) => {
+        error.value = error
+        throw new Error(error)
+      })
+  }
+
+  function download(fileName: string) {
+    const link = document.createElement('a')
+    link.download = `${fileName}.${imgType.value}`
+    link.href = dataUrl.value
+    link.click()
+  }
+}
+
+export const PluginScreenshot =
+  (options?: UseScreenshotPluginOptions): Plugin =>
+  (hooks) => {
+    hooks.created(([store, extend]) =>
+      extend({
+        screenshot: createScreenshotState(store, options),
+      }),
+    )
+  }
+
+export function useScreenshot() {
+  return useVueFlow().screenshot
+}
diff --git a/packages/plugins/screenshot/src/store.ts b/packages/plugins/screenshot/src/store.ts
new file mode 100644
index 000000000..2e1e707b5
--- /dev/null
+++ b/packages/plugins/screenshot/src/store.ts
@@ -0,0 +1,7 @@
+import type { UseScreenshot } from './types'
+
+declare module '@vue-flow/core' {
+  interface StoreBase {
+    screenshot: UseScreenshot
+  }
+}
diff --git a/packages/plugins/screenshot/src/types.ts b/packages/plugins/screenshot/src/types.ts
new file mode 100644
index 000000000..2c13acef3
--- /dev/null
+++ b/packages/plugins/screenshot/src/types.ts
@@ -0,0 +1,32 @@
+import type { Options as HTMLToImageOptions } from 'html-to-image/es/types'
+import type { Ref } from 'vue'
+
+export enum ImageType {
+  JPEG = 'jpeg',
+  PNG = 'png',
+}
+
+export interface UseScreenshotPluginOptions {
+  defaultFileName?: string
+  defaultImageType?: ImageType
+  defaultOptions?: HTMLToImageOptions
+}
+
+export interface UseScreenshotOptions extends HTMLToImageOptions {
+  type?: ImageType
+  fileName?: string
+  shouldDownload?: boolean
+  fetchRequestInit?: RequestInit
+}
+
+export type CaptureScreenshot = (el?: HTMLElement | null, options?: UseScreenshotOptions) => Promise<string>
+
+export type Download = (fileName: string) => void
+
+export interface UseScreenshot {
+  // returns the data url of the screenshot
+  capture: CaptureScreenshot
+  download: Download
+  dataUrl: Ref<string>
+  error: Ref
+}
diff --git a/packages/plugins/screenshot/tsconfig.json b/packages/plugins/screenshot/tsconfig.json
new file mode 100644
index 000000000..f02b0a03e
--- /dev/null
+++ b/packages/plugins/screenshot/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@tooling/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declarationDir": "./dist",
+    "types": [
+      "vite/client",
+      "vue/macros"
+    ]
+  },
+  "include": [
+    "./src"
+  ]
+}
diff --git a/packages/plugins/screenshot/vite.config.ts b/packages/plugins/screenshot/vite.config.ts
new file mode 100644
index 000000000..49923a96e
--- /dev/null
+++ b/packages/plugins/screenshot/vite.config.ts
@@ -0,0 +1,13 @@
+import { resolve } from 'node:path'
+import { withConfig } from '@tooling/vite-config'
+
+export default withConfig({
+  build: {
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'vue-flow-plugin-screenshot',
+      name: 'vueFlowPluginScreenshot',
+    },
+  },
+})
diff --git a/packages/vue-flow/src/index.ts b/packages/vue-flow/src/index.ts
index 5b0d106b1..06af3674d 100644
--- a/packages/vue-flow/src/index.ts
+++ b/packages/vue-flow/src/index.ts
@@ -1,3 +1,8 @@
+/**
+ * Vue Flow
+ * @module vue-flow
+ */
+
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import '@vue-flow/controls/dist/style.css'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3cf3c7ad..275353ac1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,6 +199,15 @@ importers:
       '@vue-flow/node-toolbar':
         specifier: workspace:*
         version: link:../../packages/node-toolbar
+      '@vue-flow/plugin-drag-n-drop':
+        specifier: workspace:*
+        version: link:../../packages/plugins/drag-n-drop
+      '@vue-flow/plugin-layout':
+        specifier: workspace:*
+        version: link:../../packages/plugins/layout
+      '@vue-flow/plugin-screenshot':
+        specifier: workspace:*
+        version: link:../../packages/plugins/screenshot
       pinia:
         specifier: ^2.0.35
         version: 2.0.35(typescript@4.9.5)(vue@3.2.47)
@@ -338,7 +347,7 @@ importers:
         version: 2.1.7(@vueuse/core@10.1.2)(vite@4.3.7)(vue@3.2.47)
       vite:
         specifier: ^4.3.7
-        version: 4.3.7(@types/node@18.15.12)
+        version: 4.3.7
       vue:
         specifier: ^3.2.25
         version: 3.2.47
@@ -469,6 +478,71 @@ importers:
         specifier: ^1.6.5
         version: 1.6.5(typescript@4.9.5)
 
+  packages/plugins/drag-n-drop:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^9.13.0
+        version: 9.13.0(vue@3.2.47)
+    devDependencies:
+      '@tooling/eslint-config':
+        specifier: workspace:*
+        version: link:../../../tooling/eslint-config
+      '@tooling/tsconfig':
+        specifier: workspace:*
+        version: link:../../../tooling/tsconfig
+      '@tooling/vite-config':
+        specifier: workspace:*
+        version: link:../../../tooling/vite-config
+      '@vue-flow/core':
+        specifier: workspace:*
+        version: link:../../core
+      vite:
+        specifier: ^4.1.4
+        version: 4.3.7
+
+  packages/plugins/layout:
+    devDependencies:
+      '@tooling/eslint-config':
+        specifier: workspace:*
+        version: link:../../../tooling/eslint-config
+      '@tooling/tsconfig':
+        specifier: workspace:*
+        version: link:../../../tooling/tsconfig
+      '@types/dagre':
+        specifier: ^0.7.48
+        version: 0.7.48
+      '@vue-flow/core':
+        specifier: workspace:*
+        version: link:../../core
+      dagre:
+        specifier: ^0.8.5
+        version: 0.8.5
+      vite:
+        specifier: ^4.1.4
+        version: 4.3.7
+
+  packages/plugins/screenshot:
+    dependencies:
+      html-to-image:
+        specifier: ^1.11.11
+        version: 1.11.11
+    devDependencies:
+      '@tooling/eslint-config':
+        specifier: workspace:*
+        version: link:../../../tooling/eslint-config
+      '@tooling/tsconfig':
+        specifier: workspace:*
+        version: link:../../../tooling/tsconfig
+      '@tooling/vite-config':
+        specifier: workspace:*
+        version: link:../../../tooling/vite-config
+      '@vue-flow/core':
+        specifier: workspace:*
+        version: link:../../core
+      vite:
+        specifier: ^4.1.4
+        version: 4.3.7
+
   packages/vue-flow:
     dependencies:
       '@vue-flow/background':
@@ -544,7 +618,7 @@ importers:
         version: 4.9.5
       vite:
         specifier: ^4.3.7
-        version: 4.3.7(@types/node@18.15.12)
+        version: 4.3.7
       vue:
         specifier: ^3.2.25
         version: 3.2.47
@@ -598,7 +672,7 @@ importers:
         version: 1.8.2(vite@4.3.7)(vue@3.2.47)
       vite:
         specifier: ^4.3.7
-        version: 4.3.7(@types/node@18.15.12)
+        version: 4.3.7
 
 packages:
 
@@ -2146,8 +2220,8 @@ packages:
     dependencies:
       '@nuxt/kit': 3.4.2
       '@rollup/plugin-replace': 5.0.2(rollup@3.20.6)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.3.7)(vue@3.2.47)
-      '@vitejs/plugin-vue-jsx': 3.0.1(vite@4.3.7)(vue@3.2.47)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.2.47)
+      '@vitejs/plugin-vue-jsx': 3.0.1(vite@4.3.9)(vue@3.2.47)
       autoprefixer: 10.4.14(postcss@8.4.23)
       clear: 0.1.0
       cssnano: 6.0.0(postcss@8.4.23)
@@ -2174,9 +2248,9 @@ packages:
       strip-literal: 1.0.1
       ufo: 1.1.1
       unplugin: 1.3.1
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.9(@types/node@18.15.12)
       vite-node: 0.30.1(@types/node@18.15.12)
-      vite-plugin-checker: 0.5.6(vite@4.3.7)
+      vite-plugin-checker: 0.5.6(vite@4.3.9)
       vue: 3.2.47
       vue-bundle-renderer: 1.0.3
     transitivePeerDependencies:
@@ -2810,6 +2884,10 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
+  /@types/web-bluetooth@0.0.16:
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
+
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
 
@@ -3015,7 +3093,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.7)(vue@3.2.47):
+  /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.9)(vue@3.2.47):
     resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -3025,7 +3103,7 @@ packages:
       '@babel/core': 7.21.4
       '@babel/plugin-transform-typescript': 7.21.0(@babel/core@7.21.4)
       '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.4)
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.9(@types/node@18.15.12)
       vue: 3.2.47
     transitivePeerDependencies:
       - supports-color
@@ -3071,7 +3149,18 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.7
+      vue: 3.2.47
+    dev: true
+
+  /@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@3.2.47):
+    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.3.9(@types/node@18.15.12)
       vue: 3.2.47
     dev: true
 
@@ -3414,7 +3503,7 @@ packages:
         optional: true
     dependencies:
       sirv: 2.0.2
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.7
       vue: 3.2.47
     dev: true
 
@@ -3891,6 +3980,18 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/core@9.13.0(vue@3.2.47):
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.2.47)
+      vue-demi: 0.14.0(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4):
     resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==}
     peerDependencies:
@@ -3944,6 +4045,10 @@ packages:
   /@vueuse/metadata@10.1.2:
     resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
 
+  /@vueuse/metadata@9.13.0:
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+    dev: false
+
   /@vueuse/shared@10.1.2(vue@3.2.47):
     resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==}
     dependencies:
@@ -3961,6 +4066,15 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/shared@9.13.0(vue@3.2.47):
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    dependencies:
+      vue-demi: 0.14.0(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@windicss/config@1.9.0:
     resolution: {integrity: sha512-QO4+udbmDIgZwAi89tqUt5nGwBq3IgyELjLn83twZXiIqzOw+77ecCuM0oPSbzWmIbCqXq3wRQHd6Z1u5E/5zQ==}
     dependencies:
@@ -7421,6 +7535,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /html-to-image@1.11.11:
+    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
+    dev: false
+
   /htmlparser2@8.0.1:
     resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
     dependencies:
@@ -11408,7 +11526,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.2
       unplugin: 1.3.1
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.7
     dev: true
 
   /unplugin-icons@0.16.2:
@@ -11720,7 +11838,7 @@ packages:
       mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.9(@types/node@18.15.12)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -11731,7 +11849,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker@0.5.6(vite@4.3.7):
+  /vite-plugin-checker@0.5.6(vite@4.3.9):
     resolution: {integrity: sha512-ftRyON0gORUHDxcDt2BErmsikKSkfvl1i2DoP6Jt2zDO9InfvM6tqO1RkXhSjkaXEhKPea6YOnhFaZxW3BzudQ==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -11774,7 +11892,7 @@ packages:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
-      vite: 4.3.7(@types/node@18.15.12)
+      vite: 4.3.9(@types/node@18.15.12)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
@@ -11918,7 +12036,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.3.7(@types/node@18.15.12):
+  /vite@4.3.7:
     resolution: {integrity: sha512-MTIFpbIm9v7Hh5b0wSBgkcWzSBz7SAa6K/cBTwS4kUiQJfQLFlZZRJRQgqunCVzhTPCk674tW+0Qaqh3Q00dBg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -11943,7 +12061,6 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.15.12
       esbuild: 0.17.17
       postcss: 8.4.23
       rollup: 3.22.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9dff65600..188f11e03 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
+  - examples/*
   - packages/*
+  - packages/plugins/*
   - tooling/*
-  - examples/*
   - tests
   - docs
diff --git a/tests/cypress/component/4-plugins/install.cy.ts b/tests/cypress/component/4-plugins/install.cy.ts
new file mode 100644
index 000000000..63319f33a
--- /dev/null
+++ b/tests/cypress/component/4-plugins/install.cy.ts
@@ -0,0 +1,42 @@
+import type { Plugin } from '@vue-flow/core'
+import { createVueFlow, useVueFlow } from '@vue-flow/core'
+
+import { getElements } from '../../utils'
+
+const { nodes, edges } = getElements()
+
+const testId = Math.random().toString(36).substr(2, 9)
+const testNumber = Math.random()
+
+function add(num: number) {
+  return num + 1
+}
+
+const testPlugin: Plugin = (hooks) => {
+  hooks.created(([_, extend]) => {
+    extend({
+      testId,
+      testAction: add,
+    })
+  })
+}
+
+createVueFlow().use(testPlugin)
+
+describe('Install test plugin', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      modelValue: [...nodes, ...edges],
+    })
+  })
+
+  it('has test prop', () => {
+    expect(store.testId).to.equal(testId)
+  })
+
+  it('has test action', () => {
+    expect(store.testAction(testNumber)).to.equal(add(testNumber))
+  })
+})
diff --git a/tests/cypress/component/4-plugins/shims.d.ts b/tests/cypress/component/4-plugins/shims.d.ts
new file mode 100644
index 000000000..647521839
--- /dev/null
+++ b/tests/cypress/component/4-plugins/shims.d.ts
@@ -0,0 +1,8 @@
+import * as VF from '@vue-flow/core'
+
+declare module '@vue-flow/core' {
+  interface StoreBase {
+    testId: string
+    testAction: (num: number) => number
+  }
+}