diff --git a/doc/components/DiagramDemo.vue b/doc/components/DiagramDemo.vue
deleted file mode 100644
index 169e653..0000000
--- a/doc/components/DiagramDemo.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div style="display: flex;">
-    <iframe
-      src="stories/__sandbox.html?storyId=stories-websitedemo-story-vue&variantId=_default"
-      width="390"
-      height="525"
-      frameborder="0"
-      scrolling="no"
-      style="background: white;"
-    />
-    <codemirror
-      v-model="code"
-      placeholder="Code goes here..."
-      :style="{ width: '560px', height: '525px' }"
-      :autofocus="true"
-      :indent-with-tab="true"
-      :tab-size="2"
-      :extensions="extensions"
-      @ready="handleReady"
-      @change="log('change', $event)"
-      @focus="log('focus', $event)"
-      @blur="log('blur', $event)"
-    />
-  </div>
-</template>
-
-<script>
-  import { defineComponent } from 'vue'
-  import { Codemirror } from 'vue-codemirror'
-  import { javascript } from '@codemirror/lang-javascript'
-  import { oneDark } from '@codemirror/theme-one-dark'
-
-  export default defineComponent({
-    components: {
-      Codemirror
-    },
-    setup() {
-      const code = '<template>\r\n  <diagram :model=\"model\" gridSnap=\"16\" \/>\r\n<\/template>\r\n<script>\r\nimport { Diagram } from \"vue-diagrams\";\r\nexport default {\r\n  components: { Diagram },\r\n  data() {\r\n    const diagramModel = new Diagram.Model();\r\n\r\n    const node1 = diagramModel.addNode(\"test2\", 300, 200);\r\n    const inPort = node1.addInPort(\"test\");\r\n    \r\n    const node2 = diagramModel.addNode(\"test\", 10, 300, 144, 80);\r\n    const node2OutPort = node2.addOutPort(\"testOut\");\r\n    node2.addOutPort(\"testOut2\");\r\n    \r\n    const node3 = diagramModel.addNode(\"test3\", 10, 100, 72, 100);\r\n    const node3OutPort = node3.addOutPort(\"testOut3\");\r\n    node3.color = \"#cc6600\";\r\n\r\n    diagramModel.addLink(node2OutPort, inPort);\r\n    diagramModel.addLink(node3OutPort, inPort);\r\n\r\n    return { model: diagramModel };\r\n  },\r\n};\r\n<\/script>';
-      const extensions = [javascript(), oneDark]
-
-      // Codemirror EditorView instance ref
-      const view = shallowRef()
-      const handleReady = (payload) => {
-        view.value = payload.view
-      }
-
-      // Status is available at all times via Codemirror EditorView
-      const getCodemirrorStates = () => {
-        const state = view.value.state
-        const ranges = state.selection.ranges
-        const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
-        const cursor = ranges[0].anchor
-        const length = state.doc.length
-        const lines = state.doc.lines
-        // more state info ...
-        // return ...
-      }
-
-      return {
-        code,
-        extensions,
-        handleReady,
-        log: console.log
-      }
-    }
-  })
-</script>
diff --git a/doc/components/Header.vue b/doc/components/Header.vue
deleted file mode 100644
index 463939b..0000000
--- a/doc/components/Header.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="header-wrapper">
-    <div class="header">
-      <div class="container">
-        <NuxtLink to="/" class="logo">Vue-diagrams</NuxtLink>
-        <NuxtLink to="/guides">Guides</NuxtLink>
-        <a href="/playground">StoryBook</a>
-        <span style="flex-grow: 1" />
-        <a href="https://github.com/gwenaelp/vue-diagrams" style="display: flex; gap: 14px; align-items: center;">
-          <img src="https://img.shields.io/github/forks/gwenaelp/vue-diagrams" alt="forks" />
-          <img src="https://img.shields.io/github/stars/gwenaelp/vue-diagrams" alt="stars" />
-          <i class="mdi mdi-github mdi-24px" />
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.header-wrapper {
-
-}
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 15px -8px rgb(0 0 0 / 75%);
-  z-index: 10;
-}
-.container {
-  background-color: white;
-  min-height: 70px;
-  position: relative;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-}
-.logo {
-  font-size: 36px;
-  font-weight: lighter;
-  text-decoration: none;
-  color: black;
-}
-a {
-  color: #4a4a4a;
-  display: block;
-  line-height: 1.5;
-  padding: 0.5rem 0.75rem;
-  position: relative;
-  text-decoration: none;
-  height: 100%;
-}
-a:hover {
-  background: whitesmoke;
-}
-</style>
diff --git a/doc/components/Repl.vue b/doc/components/Repl.vue
deleted file mode 100644
index de6779d..0000000
--- a/doc/components/Repl.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-//https://github.com/bcakmakoglu/vue-flow/blob/master/docs/components/DocsRepl.vue
-import { watch } from 'vue';
-import { ReplStore, Repl as VueRepl } from '@vue/repl';
-import '@vue/repl/style.css';
-import { exampleImports } from '../examples';
-import CodeMirror from '@vue/repl/codemirror-editor';
-import Diagram from '../../src/index';
-
-const props = defineProps<{
-  example: keyof typeof exampleImports;
-  mainFile?: string;
-  dependencies?: Record<string, string> }
->()
-
-let css = '';
-
-const store = new ReplStore({
-  showOutput: true,
-  outputMode: 'preview',
-})
-
-
-const files: Record<string, (typeof imports)[keyof typeof imports]> = {}
-const imports = exampleImports[props.example].files
-const additionalImports: Object = ('additionalImports' in imports ? imports.additionalImports : {}) as Object;
-
-for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
-  if (example.includes('css')) {
-    css += `${imports[example as keyof typeof imports]}`
-  } else {
-    files[example] = imports[example as keyof typeof imports]
-  }
-}
-
-await store.setVueVersion('3.2.37')
-await store.setFiles(
-  {
-    ...files,
-    'main.css': css,
-  },
-  props.mainFile ?? 'App.vue',
-)
-
-// pre-set import map
-store.setImportMap({
-  imports: {
-    'vue-diagrams': 'https://unpkg.com/vue-diagrams@latest',
-    ...additionalImports,
-  },
-} as any);
-
-
-watch(() => props.example, async (newExample) => {
-  // Handle the case where the "example" prop changes
-  // You may want to update the REPL environment or take other actions
-
-  // For example, update the files and imports based on the new example
-  let newImports = exampleImports[newExample].files;
-  const newFiles: Record<string, (typeof imports)[keyof typeof imports]> = {};
-  let newCss = `@import url('https://unpkg.com/vue-diagrams@latest/dist/style.css')`;
-
-  for (const example of Object.keys(newImports).filter((i) => i !== 'additionalImports')) {
-    if (example.includes('css')) {
-      newCss += `${newImports[example as keyof typeof newImports]}`
-    } else {
-      newFiles[example] = newImports[example as keyof typeof newImports];
-    }
-  }
-
-  await store.setFiles(
-    {
-      ...newFiles,
-      'main.css': newCss,
-    },
-    props.mainFile ?? 'App.vue',
-  );
-
-  const additionalImports: Object = ('additionalImports' in imports ? imports.additionalImports : {}) as Object;
-  store.setImportMap({
-    imports: {
-      'vue-diagrams': 'https://unpkg.com/vue-diagrams@latest',
-      ...additionalImports,
-    },
-  } as any);
-});
-
-</script>
-
-<template>
-  <VueRepl
-    :clear-console="true"
-    :editor="CodeMirror"
-    :auto-resize="true"
-    :store="store"
-    :show-compile-output="false"
-    :show-import-map="false"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-  />
-</template>
-
-<style>
-.file-selector {
-}
-
-.vue-repl {
-  --vh: 100vh;
-  height: calc(var(--vh) - 72px);
-}
-</style>
diff --git a/doc/examples/index.ts b/doc/examples/index.ts
index 61b583e..fb45a85 100644
--- a/doc/examples/index.ts
+++ b/doc/examples/index.ts
@@ -19,7 +19,6 @@ type ExampleImports = {
   [key: string]: any;
 }
 
-
 export const exampleImports: Record<string, any> = {
   playground,
   shader,
diff --git a/doc/examples/playground/index.ts b/doc/examples/playground/index.ts
index d095683..f039c1d 100644
--- a/doc/examples/playground/index.ts
+++ b/doc/examples/playground/index.ts
@@ -1,4 +1,4 @@
-import PlaygroundApp from './App.vue?raw'
+import PlaygroundApp from './App.vue?raw';
 
 export default {
   section: 'Demo',
diff --git a/doc/examples/serializationDeserialization/App.vue b/doc/examples/serializationDeserialization/App.vue
index 7deff63..58f5f3b 100644
--- a/doc/examples/serializationDeserialization/App.vue
+++ b/doc/examples/serializationDeserialization/App.vue
@@ -1,7 +1,7 @@
 <template>
-  <diagram :model="model" height="700"/>
   <button @click="console.log(model.serialize())">serialize</button>
   <button @click="model.deserialize(serializedModel)">deserialize</button>
+  <diagram :model="model" height="700"/>
 </template>
 <script>
 import { Diagram } from "vue-diagrams";
diff --git a/doc/layouts/default.vue b/doc/layouts/default.vue
index 145aa29..ceb02c0 100644
--- a/doc/layouts/default.vue
+++ b/doc/layouts/default.vue
@@ -1,40 +1,8 @@
 <template>
-  <div>
-    <Header/>
+  <DefaultLayout>
     <slot/>
-  </div>
+  </DefaultLayout>
 </template>
-<script>
-import '@mdi/font/css/materialdesignicons.css';
-
-export default {};
+<script setup>
+import DefaultLayout from 'nuxt-quickdoc/layouts/default.vue';
 </script>
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Roboto', sans-serif;
-  --background-color: #7957d5;
-  --text-color: #363636;
-  --dark-text-color: #fff;
-  --dark-background-color: rgb(55,170,232);
-  --dark-background-color-2: rgb(161,10,187);
-  --dark-error-background-color: rgb(232,120,55);
-  --dark-error-background-color-2: rgb(91,7,7);
-  --primary-color-lighter: #a18dd8;
-  --primary-color-darker: #714dd2;
-}
-
-.container {
-  max-width: 960px;
-  margin: auto;
-}
-
-.background-dark {
-  background: var(--dark-background-color);
-  background: linear-gradient(48deg, var(--dark-background-color) 0%, var(--dark-background-color-2) 100%);
-  color: white;
-}
-</style>
diff --git a/doc/nuxt.config.js b/doc/nuxt.config.js
index 87e191b..2e6e300 100644
--- a/doc/nuxt.config.js
+++ b/doc/nuxt.config.js
@@ -1,4 +1,8 @@
+
 export default {
+  modules: [
+    'nuxt-quickdoc',
+  ],
   target: 'static',
   ssr: false,
 };
diff --git a/doc/package.json b/doc/package.json
index 6d40aa3..d0b0ba5 100644
--- a/doc/package.json
+++ b/doc/package.json
@@ -18,6 +18,7 @@
     "@mdi/font": "^7.1.96",
     "@vue/repl": "^3.0.0",
     "codemirror": "^6.0.1",
+    "nuxt-quickdoc": "https://github.com/gwenaelp/nuxt-quickdoc.git",
     "vue-codemirror": "^6.1.1",
     "vue3-carousel": "^0.3.1"
   }
diff --git a/doc/pages/index.vue b/doc/pages/index.vue
index 4fb356e..f05e14e 100644
--- a/doc/pages/index.vue
+++ b/doc/pages/index.vue
@@ -1,95 +1,12 @@
 <template>
-  <div>
-    <section class="hero background-dark">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title"> An easy to use diagram editor component</h1>
-          <p>Diagram component for vue.js, inspired by react-diagrams</p>
-          <p class="vue-versions">For Vue <a href="https://github.com/gwenaelp/vue-diagrams/tree/vue2">2</a> & <a href="https://github.com/gwenaelp/vue-diagrams">3</a>!</p>
-          <Repl class="repl" example="playground" />
-        </div>
-      </div>
-    </section>
-    <section>
-      <div class="container">
-        <h2>Installation</h2>
-        <div style="display: flex; justify-content: space-around;">
-          <pre>npm install vue-diagrams</pre>
-          <pre>yarn add vue-diagrams</pre>
-        </div>
-      </div>
-    </section>
-    <section>
-      <div class="container">
-        <h2>Examples</h2>
-        <img :src="example2" style="max-width: 100%;" />
-        <img :src="example3" style="max-width: 100%;" />
-      </div>
-    </section>
-    <section>
-      <div class="container features-list">
-        <h2>Features</h2>
-        <div class="feature">
-          <h3>Easy to learn</h3>
-        </div>
-        <div class="feature">
-          <h3>Grid snap</h3>
-        </div>
-        <div class="feature">
-          <h3>In place editing</h3>
-          Move nodes, resize them, connect links as curves or segments...
-        </div>
-        <div class="feature">
-          <h3>Serialization/deserialization</h3>
-        </div>
-        <div class="feature">
-          <h3>Various node types</h3>
-        </div>
-      </div>
-    </section>
-  </div>
+  <IndexPageWrapper :manifest="manifest" :examples="examples" />
 </template>
-<script setup>
+<script setup lang="ts">
+import manifest from '../../package.json';
+import IndexPageWrapper from 'nuxt-quickdoc/components/IndexPageWrapper.vue';
 import example2 from '../../images/example2.png';
 import example3 from '../../images/example3.png';
-import Repl from '../components/Repl.vue';
-</script>
-<style scoped>
 
-.hero {
-  display: block;
-  color: white;
-  min-height: calc(100vh - 250px);
-  height: initial;
-  padding-top: 100px;
-}
-h1 {
-  font-size: 50px;
-  font-weight: lighter;
-  margin: 0;
-  padding-bottom: 0;
-}
-.hero p{
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-.feature h3 {
-  padding: 0;
-  margin: 0;
-}
-.feature {
-  border-bottom: 1px solid #ccc;
-  padding: 20px;
-}
-.vue-versions {
-  border-radius: 8px;
-  border: 1px solid white;
-  display: inline-block;
-  padding: 10px;
-  margin: auto;
-}
-.vue-versions a {
-  color: white;
-  font-weight: bold;
-}
-</style>
+const examples = [example2, example3];
+
+</script>
diff --git a/doc/pages/playground.vue b/doc/pages/playground.vue
deleted file mode 100644
index e8cca30..0000000
--- a/doc/pages/playground.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="playground">
-    <div class="menu">
-      <section v-for="(section, name) in sections">
-        <h3>{{ name }}</h3>
-        <ul>
-          <li v-for="example in section">
-            <a :class="displayedExample === example ? 'selected': ''" @click="displayedExample = example">
-              {{ example }}
-            </a>
-          </li>
-        </ul>
-      </section>
-    </div>
-    <Repl class="repl" :example="displayedExample" />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, Ref } from 'vue';
-
-import Repl from '../components/Repl.vue';
-
-import { exampleImports } from '../examples/index';
-
-let displayedExample = ref('playground');
-let sections: Ref<Record<string, any>> = ref({});
-
-for (let e of Object.keys(exampleImports)) {
-  const sectionName:string = exampleImports[e].section;
-  if (sections.value[sectionName] === undefined) {
-    sections.value[sectionName] = [];
-  }
-  sections.value[sectionName].push(e);
-}
-</script>
-<style scoped>
-.playground {
-  display: flex;
-  padding-top: 70px;
-  justify-content: stretch;
-  width: 100%;
-}
-.menu {
-  width: 260px;
-}
-
-.repl {
-  flex-grow: 1;
-}
-h3 {
-  padding: 10px;
-  padding-left: 10px;
-  font-size: 18px;
-  background-color: #ddd;
-  margin: 0;
-}
-ul {
-  margin: 0;
-  padding: 0;
-}
-a {
-  padding: 8px 16px;
-  display: block;
-  border-bottom: 1px solid #ddd;
-  cursor: pointer;
-}
-a:hover {
-  background: #eee;
-}
-a.selected {
-  font-weight: bold;
-}
-</style>
diff --git a/doc/yarn.lock b/doc/yarn.lock
index 34d37e2..d955909 100644
--- a/doc/yarn.lock
+++ b/doc/yarn.lock
@@ -4236,6 +4236,13 @@ nuxi@^3.10.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
+"nuxt-quickdoc@https://github.com/gwenaelp/nuxt-quickdoc.git":
+  version "1.0.0"
+  resolved "https://github.com/gwenaelp/nuxt-quickdoc.git#f8c7220fef8541fd5bec50e2bfa36650ea7e693b"
+  dependencies:
+    "@nuxt/kit" "^3.8.2"
+    "@vue/repl" "^3.0.0"
+
 nuxt@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.8.2.tgz#6db515d41e7745c725be7f34f692bdeabc53da07"
diff --git a/package.json b/package.json
index 2441626..0fe2a22 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "vue-diagrams",
+  "title": "An easy to use diagram editor component",
   "description": "Diagram component for vue.js, inspired by react-diagrams",
   "type": "module",
   "version": "1.0.1",
@@ -17,12 +18,20 @@
   "bugs": {
     "url": "https://github.com/gwenaelp/vue-diagrams/issues"
   },
+  "examples": [
+    "images/example2.png",
+    "images/example3.png"
+  ],
   "homepage": "https://github.com/gwenaelp/vue-diagrams#readme",
   "keywords": [
     "vue",
     "vue-component",
     "vue-library"
   ],
+  "vueVersions": {
+    "2": "https://github.com/gwenaelp/vue-diagrams/tree/vue2",
+    "3": "https://github.com/gwenaelp/vue-diagrams"
+  },
   "engines": {
     "node": ">=8.9.0"
   },