diff --git a/docs/.vuepress/code-examples/source/basic.vue b/docs/.vuepress/code-examples/source/basic.vue
new file mode 100644
index 0000000..96fe517
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/basic.vue
@@ -0,0 +1,15 @@
+<template>
+  <vue-editor v-model="content" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/custom-image-handler.vue b/docs/.vuepress/code-examples/source/custom-image-handler.vue
new file mode 100644
index 0000000..96fe517
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/custom-image-handler.vue
@@ -0,0 +1,15 @@
+<template>
+  <vue-editor v-model="content" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/custom-modules.vue b/docs/.vuepress/code-examples/source/custom-modules.vue
new file mode 100644
index 0000000..96fe517
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/custom-modules.vue
@@ -0,0 +1,15 @@
+<template>
+  <vue-editor v-model="content" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/custom-toolbar.vue b/docs/.vuepress/code-examples/source/custom-toolbar.vue
new file mode 100644
index 0000000..e59ae4c
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/custom-toolbar.vue
@@ -0,0 +1,20 @@
+<template>
+  <vue-editor v-model="content" :editor-toolbar="customToolbar" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Html For Editor</h1>",
+    customToolbar: [
+      ["bold", "italic", "underline"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["image", "code-block"]
+    ]
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/event-listening.vue b/docs/.vuepress/code-examples/source/event-listening.vue
new file mode 100644
index 0000000..96fe517
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/event-listening.vue
@@ -0,0 +1,15 @@
+<template>
+  <vue-editor v-model="content" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/live-preview.vue b/docs/.vuepress/code-examples/source/live-preview.vue
new file mode 100644
index 0000000..14daacd
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/live-preview.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <vue-editor v-model="content" />
+    <div>{{ content }}</div>
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/multiple-editors.vue b/docs/.vuepress/code-examples/source/multiple-editors.vue
new file mode 100644
index 0000000..96fe517
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/multiple-editors.vue
@@ -0,0 +1,15 @@
+<template>
+  <vue-editor v-model="content" />
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  })
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/save-content.vue b/docs/.vuepress/code-examples/source/save-content.vue
new file mode 100644
index 0000000..23741e0
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/save-content.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <button @click="saveContent">Save</button>
+    <vue-editor v-model="content" />
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  }),
+
+  methods: {
+    handleSavingContent() {
+      // You have the content to save
+      console.log(this.content);
+    }
+  }
+};
+</script>
+
+<template>
+  <div id="app">
+    <button @click="saveContent"></button>
+    <vue-editor v-model="content"></vue-editor>
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: {
+    VueEditor
+  },
+
+  data() {
+    return {
+      content: "<h3>Initial Content</h3>"
+    };
+  },
+
+  methods: {
+    handleSavingContent() {
+      // You have the content to save
+      console.log(this.content);
+    }
+  }
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/set-contents.vue b/docs/.vuepress/code-examples/source/set-contents.vue
new file mode 100644
index 0000000..c4d9e29
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/set-contents.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <button @click="setEditorContent">Set Editor Content</button>
+    <vue-editor v-model="content" />
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: null
+  }),
+
+  methods: {
+    setEditorContent() {
+      this.content = "<h1>Html For Editor</h1>";
+    }
+  }
+};
+</script>
diff --git a/docs/.vuepress/code-examples/source/set-focus.vue b/docs/.vuepress/code-examples/source/set-focus.vue
new file mode 100644
index 0000000..6882d7b
--- /dev/null
+++ b/docs/.vuepress/code-examples/source/set-focus.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <button @click.prevent="focusEditor">Focus Editor</button>
+    <vue-editor ref="editor" v-model="content" />
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+
+export default {
+  components: { VueEditor },
+
+  data: () => ({
+    content: "<h1>Some initial content</h1>"
+  }),
+
+  methods: {
+    focusEditor() {
+      this.$refs.editor.quill.focus();
+    }
+  }
+};
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 726ee6a..02cf705 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,14 +1,14 @@
-const path = require("path");
+// const path = require("path");
 const { version } = require("../../package.json");
 
 module.exports = {
   head: [
-    [
-      "script",
-      {
-        src: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"
-      }
-    ],
+    // [
+    //   "script",
+    //   {
+    //     src: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"
+    //   }
+    // ],
     [
       "script",
       {
@@ -30,9 +30,8 @@ module.exports = {
   ],
   plugins: [
     require("./plugin.js"),
-    "live",
-    "demo-block",
-
+    // "live",
+    // "demo-block",
     [
       "@vuepress/google-analytics",
       {
@@ -62,24 +61,8 @@ module.exports = {
             link: "https://github.com/davidroyer/vue2-editor/releases"
           }
         ],
-        // sidebar: ["/installation.md", "/started.md", "/usage.md"]
         sidebar: ["/guide/", "/examples/"]
-        // sidebar: 'auto'
-      }
-    }
-  },
-
-  /**
-   * Allows the use of using aliases in files for easier importing
-   */
-  configureWebpack: {
-    resolve: {
-      alias: {
-        "@root": path.resolve(__dirname, "../../"),
-        "@src": path.resolve(__dirname, "../../src"),
-        "@mixins": path.resolve(__dirname, "../../src/mixins"),
-        "@utils": path.resolve(__dirname, "../../utils"),
-        "@images": "./../images"
+        // sidebar: ["/guide/", "/examples/", "/playground.md"]
       }
     }
   }
diff --git a/docs/.vuepress/snippets/demo.js b/docs/.vuepress/snippets/demo.js
deleted file mode 100644
index c0e8abe..0000000
--- a/docs/.vuepress/snippets/demo.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  a: "value for 1",
-
-  b: "value for b"
-};
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
index 7d2fe05..87a2900 100755
--- a/docs/.vuepress/styles/palette.styl
+++ b/docs/.vuepress/styles/palette.styl
@@ -29,4 +29,4 @@ img {
 }
 
 .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__code
-  overflow: scroll
\ No newline at end of file
+  overflow: scroll
diff --git a/docs/examples/README.md b/docs/examples/README.md
index 144e565..d704f83 100755
--- a/docs/examples/README.md
+++ b/docs/examples/README.md
@@ -4,28 +4,10 @@
 
 # Examples
 
-
 ## Basic Setup
 
-``` vue
-<template>
-  <div id="app">
-    <vue-editor v-model="content"></vue-editor>
-  </div>
-</template>
-
-<script>
-  export default {
-    components: {},
-
-    data() {
-      return {
-        content: "<h1>Some initial content</h1>"
-      };
-    }
-  };
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/basic.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## Custom Image Handler
 
@@ -87,41 +69,17 @@ export default {
 </script>
 ```
 
-## Set Contents After Page Load
-
-```vue
-<template>
-  <div id="app">
-    <button @click="setEditorContent">Set Editor Contents</button>
-    <vue-editor v-model="htmlForEditor"></vue-editor>
-  </div>
-</template>
-
-<script>
-import { VueEditor } from "vue2-editor";
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
-export default {
-  components: {
-    VueEditor
-  },
-
-  data() {
-    return {
-      htmlForEditor: null
-    };
-  },
+## Set Contents After Page Load
 
-  methods: {
-    setEditorContent: function() {
-      this.htmlForEditor = "<h1>Html For Editor</h1>";
-    }
-  }
-};
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/set-contents.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## Using Multiple Editors
 
+<!-- <<< @/docs/.vuepress/code-examples/source/multiple-editors.vue -->
+
 ```vue
 <template>
   <div id="app">
@@ -157,95 +115,18 @@ export default {
 
 ## Custom Toolbar
 
-``` vue
-<template>
-  <div id="app">
-    <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
-  </div>
-</template>
-
-<script>
-import { VueEditor } from "vue2-editor";
-
-export default {
-  components: {
-    VueEditor
-  },
-
-  data() {
-    return {
-      content: "<h1>Html For Editor</h1>",
-      customToolbar: [
-        ["bold", "italic", "underline"],
-        [{ list: "ordered" }, { list: "bullet" }],
-        ["image", "code-block"]
-      ]
-    };
-  }
-};
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/custom-toolbar.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## Saving The Content
 
-```vue
-<template>
-  <div id="app">
-    <button @click="saveContent"></button>
-    <vue-editor v-model="content"></vue-editor>
-  </div>
-</template>
-
-<script>
-import { VueEditor } from "vue2-editor";
-
-export default {
-  components: {
-    VueEditor
-  },
-
-  data() {
-    return {
-      content: "<h3>Initial Content</h3>"
-    };
-  },
-
-  methods: {
-    handleSavingContent: function() {
-      // You have the content to save
-      console.log(this.content);
-    }
-  }
-};
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/custom-toolbar.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## Use a Live Preview
 
-```vue
-<template>
-  <div id="app">
-    <vue-editor v-model="content"></vue-editor>
-    <div v-html="content"></div>
-  </div>
-</template>
-
-<script>
-import { VueEditor } from 'vue2-editor'
-
-components: {
-  VueEditor
-},
-
-export default {
-  data() {
-    return {
-      content: '<h1>Initial Content</h1>'
-    }
-  }
-}
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/live-preview.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## How To Use Custom Quill Modules
 
@@ -308,6 +189,9 @@ export default {
 </script>
 ```
 
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
+
+
 ### Version 2 - **_You Import | Vue2Editor Registers_**
 
 1.  Import your custom modules
@@ -349,29 +233,19 @@ export default {
 </script>
 ```
 
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
+
 ## Setting Focus on Editor Programmatically
 
 Give the editor instance a `ref` property
 
-```vue
-<template>
-  <button @click.prevent="focusEditor">Focus Editor</button>
-  <vue-editor ref="editor" v-model="editor2Content"> </vue-editor>
-</template>
-
-<script type="text/javascript">
-export default {
-  methods: {
-    focusEditor() {
-      this.$refs.editor.quill.focus();
-    }
-  }
-};
-</script>
-```
+<<< @/docs/.vuepress/code-examples/source/set-focus.vue
+<hr class="spacer" style="margin: 1em 0 1.75em !important; opacity: 0;"/>
 
 ## Listening For Events
 
+<!-- <<< @/docs/.vuepress/code-examples/source/event-listening.vue -->
+
 ```vue
 <template>
   <vue-editor
diff --git a/docs/playground.md b/docs/playground.md
new file mode 100644
index 0000000..b43423f
--- /dev/null
+++ b/docs/playground.md
@@ -0,0 +1,18 @@
+# Playground For Testing
+
+
+**Input**
+
+``` md
+<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}
+```
+
+**Output**
+
+<<< @/docs/.vuepress/code-examples/source/basic.vue
+
+<<< @/docs/snippets/snippet-1.vue
+
+Demo
+
+<!-- <Demo example="custom-toolbar" /> -->
diff --git a/docs/snippets/snippet-1.vue b/docs/snippets/snippet-1.vue
deleted file mode 100644
index c5256ae..0000000
--- a/docs/snippets/snippet-1.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div>
-    <h1>I am snippet 1</h1>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss" scoped></style>