diff --git a/packages/docs/lib/.vitepress/config.ts b/packages/docs/lib/.vitepress/config.ts
index eac1f0d..c3499e5 100644
--- a/packages/docs/lib/.vitepress/config.ts
+++ b/packages/docs/lib/.vitepress/config.ts
@@ -15,7 +15,12 @@ export default defineConfig({
         text: 'API',
         activeMatch: `^/api/`,
         items: [
+          { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
           { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
+          { text: '@schlechtenburg/layout', link: '/api/@schlechtenburg/layout' },
+          { text: '@schlechtenburg/heading', link: '/api/@schlechtenburg/heading' },
+          { text: '@schlechtenburg/paragraph', link: '/api/@schlechtenburg/paragraph' },
+          { text: '@schlechtenburg/image', link: '/api/@schlechtenburg/image' },
         ],
       },
     ],
@@ -34,7 +39,12 @@ export default defineConfig({
         {
           text: 'API',
           children: [
-            { text: 'Core', link: '/api/core' },
+            { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
+            { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
+            { text: '@schlechtenburg/layout', link: '/api/@schlechtenburg/layout' },
+            { text: '@schlechtenburg/heading', link: '/api/@schlechtenburg/heading' },
+            { text: '@schlechtenburg/paragraph', link: '/api/@schlechtenburg/paragraph' },
+            { text: '@schlechtenburg/image', link: '/api/@schlechtenburg/image' },
           ],
         }
       ],
diff --git a/packages/docs/lib/api/@schlechtenburg/core.md b/packages/docs/lib/api/@schlechtenburg/core.md
new file mode 100644
index 0000000..2476be5
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/core.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/core" />
+
diff --git a/packages/docs/lib/api/@schlechtenburg/heading.md b/packages/docs/lib/api/@schlechtenburg/heading.md
new file mode 100644
index 0000000..404c921
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/heading.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/heading" />
+
diff --git a/packages/docs/lib/api/@schlechtenburg/image.md b/packages/docs/lib/api/@schlechtenburg/image.md
new file mode 100644
index 0000000..65f1db6
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/image.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/image" />
+
diff --git a/packages/docs/lib/api/@schlechtenburg/layout.md b/packages/docs/lib/api/@schlechtenburg/layout.md
new file mode 100644
index 0000000..ff7e1be
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/layout.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/layout" />
+
diff --git a/packages/docs/lib/api/@schlechtenburg/paragraph.md b/packages/docs/lib/api/@schlechtenburg/paragraph.md
new file mode 100644
index 0000000..a5d7c0d
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/paragraph.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/paragraph" />
+
diff --git a/packages/docs/lib/api/@schlechtenburg/standalone.md b/packages/docs/lib/api/@schlechtenburg/standalone.md
new file mode 100644
index 0000000..b001299
--- /dev/null
+++ b/packages/docs/lib/api/@schlechtenburg/standalone.md
@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/standalone" />
+
diff --git a/packages/docs/lib/ComponentDocs.scss b/packages/docs/lib/api/ComponentDocs.scss
similarity index 100%
rename from packages/docs/lib/ComponentDocs.scss
rename to packages/docs/lib/api/ComponentDocs.scss
diff --git a/packages/docs/lib/ComponentDocs.tsx b/packages/docs/lib/api/ComponentDocs.tsx
similarity index 100%
rename from packages/docs/lib/ComponentDocs.tsx
rename to packages/docs/lib/api/ComponentDocs.tsx
diff --git a/packages/docs/lib/pages/Package.scss b/packages/docs/lib/api/Package.scss
similarity index 100%
rename from packages/docs/lib/pages/Package.scss
rename to packages/docs/lib/api/Package.scss
diff --git a/packages/docs/lib/pages/Package.tsx b/packages/docs/lib/api/Package.tsx
similarity index 66%
rename from packages/docs/lib/pages/Package.tsx
rename to packages/docs/lib/api/Package.tsx
index c342666..76c168e 100644
--- a/packages/docs/lib/pages/Package.tsx
+++ b/packages/docs/lib/api/Package.tsx
@@ -1,21 +1,28 @@
 import { defineComponent } from 'vue';
-import { useRoute } from 'vue-router';
+
 import { ComponentDoc } from 'vue-docgen-api';
 import { DeclarationReflection } from 'typedoc';
 
 import { getByName } from '../docs';
-import ComponentDocs from '../ComponentDocs';
-import TsDocs from '../TsDocs';
+import { getShortPackageName } from './package';
+import ComponentDocs from './ComponentDocs';
+import TSDocs from './TSDocs';
 
 import './Package.scss';
 
 export default defineComponent({
   name: 'Package',
 
-  setup() {
-    const route = useRoute();
-    const packageName = route.params.package;
-    const docs = getByName(Array.isArray(packageName) ? packageName[0] : packageName);
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const packageName = props.name;
+    const docs = getByName(getShortPackageName(Array.isArray(packageName) ? packageName[0] : packageName));
     if (!docs) {
       return () => <div>Unknown package name {packageName}</div>;
     }
@@ -31,7 +38,7 @@ export default defineComponent({
           return <ComponentDocs docs={componentDocs}></ComponentDocs>
         }
 
-        return <TsDocs docs={child}></TsDocs>
+        return <TSDocs docs={child}></TSDocs>
       })}
     </main>;
   },
diff --git a/packages/docs/lib/TsDocs.scss b/packages/docs/lib/api/TSDocs.scss
similarity index 100%
rename from packages/docs/lib/TsDocs.scss
rename to packages/docs/lib/api/TSDocs.scss
diff --git a/packages/docs/lib/TsDocs.tsx b/packages/docs/lib/api/TSDocs.tsx
similarity index 96%
rename from packages/docs/lib/TsDocs.tsx
rename to packages/docs/lib/api/TSDocs.tsx
index 10bfd86..f46ba6c 100644
--- a/packages/docs/lib/TsDocs.tsx
+++ b/packages/docs/lib/api/TSDocs.tsx
@@ -7,12 +7,12 @@ import {
   TypeParameterReflection,
 } from 'typedoc';
 
-import './TsDocs.scss';
+import './TSDocs.scss';
 
 const getTypeParamString = (params: TypeParameterReflection[]) => `<${params.map(p => p.name).join(', ')}>`;
 
 export default defineComponent({
-  name: 'TsDocs',
+  name: 'TSDocs',
 
   props: {
     docs: {
diff --git a/packages/docs/lib/package.ts b/packages/docs/lib/api/package.ts
similarity index 100%
rename from packages/docs/lib/package.ts
rename to packages/docs/lib/api/package.ts
diff --git a/packages/docs/lib/guide/examples.md b/packages/docs/lib/guide/examples.md
index ce6ebe1..e8d4d8b 100644
--- a/packages/docs/lib/guide/examples.md
+++ b/packages/docs/lib/guide/examples.md
@@ -5,14 +5,14 @@ import ExampleStandaloneEditor from '../ExampleStandaloneEditor'
 
 # Examples
 
-## Vue Component without wrapper
+## As a View Component
 
 This documentation website already uses Vue under the hood, so Schlechtenburg can just imported as
 any other component:
 
 <ExampleEditor></ExampleEditor>
 
-## Wrapped with Vue
+## Standalone
 
 `@schlechtenburg/standalone` gives you a wrapped version of the editor in case you don't have Vue
 already installed in your application
diff --git a/packages/docs/lib/pages/Introduction.scss b/packages/docs/lib/pages/Introduction.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/docs/lib/pages/Introduction.tsx b/packages/docs/lib/pages/Introduction.tsx
deleted file mode 100644
index 1c98dd0..0000000
--- a/packages/docs/lib/pages/Introduction.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineComponent } from 'vue';
-
-import './Introduction.scss';
-
-export default defineComponent({
-  name: 'Introduction',
-
-  setup() {
-    return () => <div class="introduction">Introduction</div>;
-  },
-});
diff --git a/packages/docs/lib/routes.ts b/packages/docs/lib/routes.ts
deleted file mode 100644
index 27af133..0000000
--- a/packages/docs/lib/routes.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default [
-  {
-    name: 'home',
-    path: '/',
-    component: () => import('./pages/Introduction'),
-  },
-  {
-    name: 'package',
-    path: '/@schlechtenburg/:package',
-    component: () => import('./pages/Package'),
-  },
-]
diff --git a/packages/standalone/lib/get-wrapper.tsx b/packages/standalone/lib/get-wrapper.tsx
index 8b0c8cf..9bd9028 100644
--- a/packages/standalone/lib/get-wrapper.tsx
+++ b/packages/standalone/lib/get-wrapper.tsx
@@ -1,6 +1,7 @@
 import {
   defineComponent,
   ref,
+  Ref,
   PropType,
 } from 'vue'
 import {
@@ -9,17 +10,17 @@ import {
   SbMain,
   SbMode,
   OnUpdateBlockCb,
+  ISbMainProps,
 } from '@schlechtenburg/core';
 
 /**
  *
  */
-export default function getWrapper({
-  block,
-  mode,
-  availableBlocks,
-}) {
-  return defineComponent({
+export default function getWrapper() {
+  const refBlock: Ref<IBlockData<any>|null> = ref(null);
+  const refMode = ref(SbMode.View);
+
+  const SchlechtenburgWrapper = defineComponent({
     name: 'SchlechtenburgWrapper',
 
     props: {
@@ -47,15 +48,39 @@ export default function getWrapper({
       },
     },
 
-    setup(props) {
-      const refBlock = ref({ ...block });
-      const refMode = ref({ ...block });
+    setup(props: ISbMainProps) {
+      refBlock.value = { ...(props.block) };
+      refMode.value = props.mode;
+
+      if (!refBlock.value) {
+        return () => <div class="sb-message sb-message_error">An Error occurred</div>;
+      }
 
       return () => <SbMain
-        block={refBlock}
+        block={refBlock.value as IBlockData<any>}
         availableBlocks={props.availableBlocks}
-        mode={mode}
+        mode={refMode.value}
+        onUpdate={(newBlock: IBlockData<any>) => {
+          refBlock.value = { ...newBlock };
+
+        }}
       />
     }
   });
+
+  return {
+    SchlechtenburgWrapper,
+    getBlock() {
+      return refBlock.value;
+    },
+    setBlock(block: IBlockData<any>) {
+      refBlock.value = { ...block };
+    },
+    getMode() {
+      return refMode.value;
+    },
+    setMode(mode: SbMode) {
+      refMode.value = mode;
+    },
+  };
 }
diff --git a/packages/standalone/lib/main.ts b/packages/standalone/lib/main.ts
index f87d53a..480b432 100644
--- a/packages/standalone/lib/main.ts
+++ b/packages/standalone/lib/main.ts
@@ -1,11 +1,6 @@
-import {
-  createApp,
-} from 'vue'
-import {
-  ISbMainProps,
-  IBlockData,
-  SbMain,
-} from '@schlechtenburg/core';
+import { createApp } from 'vue'
+import { ISbMainProps } from '@schlechtenburg/core';
+import getWrapper from './get-wrapper';
 
 /**
  *
@@ -21,19 +16,25 @@ export const startSchlechtenburg = async (
    */
   props:ISbMainProps,
 ) => {
-  let block = { ...props.block };
-  const app = createApp(SbMain, {
-    ...props,
-    onUpdate: (update: IBlockData<any>) => {
-      block = update;
-      props.onUpdate(update);
-    },
-  }as unknown as Record<string, unknown>);
+  const {
+    SchlechtenburgWrapper,
+    getBlock,
+    setBlock,
+    getMode,
+    setMode,
+  } = getWrapper();
+
+  const app = createApp(
+    SchlechtenburgWrapper,
+    { ...props, } as unknown as Record<string, unknown>,
+  );
   app.mount(el);
 
   return {
-    getBlock() {
-      return block;
-    },
+    app,
+    getBlock,
+    setBlock,
+    getMode,
+    setMode,
   };
 }