From 33403776dc14cd0498dda398f2d9dea38d558d29 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 13 Nov 2022 18:53:17 +0100
Subject: [PATCH] chore(docs): wrap Repl in client only

---
 docs/components/DocsRepl.vue               | 122 +++++++++++++++++++++
 docs/components/Repl.vue                   | 122 ++-------------------
 docs/src/.vitepress/config.ts              |   4 +-
 docs/src/assets/index.css                  |  12 +-
 docs/src/components.d.ts                   |   1 +
 docs/src/examples/dnd.md                   |  11 +-
 docs/src/examples/edges/connection-line.md |  11 +-
 docs/src/examples/edges/index.md           |  11 +-
 docs/src/examples/edges/updatable-edge.md  |   5 -
 docs/src/examples/edges/validation.md      |  13 +--
 docs/src/examples/empty.md                 |  11 +-
 docs/src/examples/floating-edges.md        |  25 -----
 docs/src/examples/hidden.md                |  11 +-
 docs/src/examples/horizontal.md            |  11 +-
 docs/src/examples/index.md                 |  11 +-
 docs/src/examples/interaction.md           |  10 +-
 docs/src/examples/intersection.md          |  10 +-
 docs/src/examples/multi.md                 |  11 +-
 docs/src/examples/nodes/index.md           |  11 +-
 docs/src/examples/nodes/nesting.md         |  11 +-
 docs/src/examples/nodes/update-node.md     |  11 +-
 docs/src/examples/pinia.md                 |   5 -
 docs/src/examples/save.md                  |  11 +-
 docs/src/examples/stress.md                |   4 -
 docs/src/examples/teleport.md              |   4 -
 docs/src/examples/transition.md            |  11 +-
 26 files changed, 163 insertions(+), 317 deletions(-)
 create mode 100644 docs/components/DocsRepl.vue
 delete mode 100644 docs/src/examples/floating-edges.md

diff --git a/docs/components/DocsRepl.vue b/docs/components/DocsRepl.vue
new file mode 100644
index 00000000..abfd5078
--- /dev/null
+++ b/docs/components/DocsRepl.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { SFCOptions } from '@vue/repl'
+import { ReplStore, Repl as VueRepl } from '@vue/repl'
+import { useVueFlow } from '@vue-flow/core'
+import '@vue/repl/style.css'
+import { isClient } from '@vueuse/core'
+import { exampleImports } from './examples'
+
+const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
+
+const { vueFlowVersion } = useVueFlow()
+
+let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+
+html,
+body,
+#app {
+  margin: 0;
+  height: 100%;
+}
+
+#app {
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+\n`
+
+const store = new ReplStore({
+  showOutput: true,
+  outputMode: 'preview',
+})
+
+const vh = useCssVar('--vh')
+
+watchEffect(() => {
+  vh.value = `${window.innerHeight}px`
+})
+
+const files: any = {}
+const imports = exampleImports[props.example]
+const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
+
+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]
+  }
+}
+
+onMounted(async () => {
+  await store.setVueVersion('3.2.37')
+
+  await store.setFiles(
+    {
+      ...files,
+      'main.css': css,
+    },
+    props.mainFile ?? 'App.vue',
+  )
+
+  // pre-set import map
+  await store.setImportMap({
+    imports: {
+      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
+      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
+      ...additionalImports,
+    },
+  })
+
+  if (isClient) {
+    document.body.className += 'examples'
+  }
+})
+
+const sfcOptions = {
+  script: {
+    reactivityTransform: true,
+  },
+} as SFCOptions
+</script>
+
+<template>
+  <VueRepl
+    :clear-console="true"
+    :auto-resize="true"
+    :store="store"
+    :show-compile-output="false"
+    :show-import-map="false"
+    :sfc-options="sfcOptions"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
+  />
+</template>
+
+<style>
+.file-selector {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
+}
+
+.vue-repl {
+  --vh: 100vh;
+
+  @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
+
+  height: calc(var(--vh) - 72px);
+}
+
+.msg.err {
+  @apply hidden;
+}
+</style>
diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index 24ad2963..02015e0f 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -1,117 +1,15 @@
-<script lang="ts" setup>
-import { ReplStore, Repl as VueRepl } from '@vue/repl'
-import { useVueFlow } from '@vue-flow/core'
-import '@vue/repl/style.css'
-import { exampleImports } from './examples'
+<script>
+import { isClient } from '@vueuse/core'
+import DocsRepl from './DocsRepl.vue'
 
-const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
-const { vueFlowVersion } = useVueFlow()
-let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+export default defineComponent({
+  props: ['example'],
+  setup(props) {
+    return () => {
+      if (!isClient) return null
 
-html,
-body,
-#app {
-  margin: 0;
-  height: 100%;
-}
-
-#app {
-  text-transform: uppercase;
-  font-family: 'JetBrains Mono', monospace;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-.vue-flow__minimap {
-  transform: scale(75%);
-  transform-origin: bottom right;
-}
-\n`
-
-const store = new ReplStore({
-  showOutput: true,
-  outputMode: 'preview',
-})
-
-const vh = useCssVar('--vh')
-
-watchEffect(
-  () => {
-    vh.value = `${window.innerHeight}px`
+      return h(DocsRepl, props)
+    }
   },
-  { flush: 'post' },
-)
-
-const files: any = {}
-const imports = exampleImports[props.example]
-const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
-
-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]
-  }
-}
-
-onMounted(async () => {
-  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-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
-      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
-      ...additionalImports,
-    },
-  })
 })
-
-const sfcOptions = {
-  script: {
-    reactivityTransform: true,
-  },
-}
 </script>
-
-<template>
-  <VueRepl
-    :clear-console="true"
-    :auto-resize="true"
-    :store="store"
-    :show-compile-output="false"
-    :show-import-map="false"
-    :sfc-options="sfcOptions"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-  />
-</template>
-
-<style>
-.file-selector {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
-}
-
-.vue-repl {
-  --vh: 100vh;
-
-  @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
-
-  height: calc(var(--vh) - 72px);
-}
-
-.msg.err {
-  @apply hidden;
-}
-</style>
diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
index ebecf9ea..6231330c 100644
--- a/docs/src/.vitepress/config.ts
+++ b/docs/src/.vitepress/config.ts
@@ -216,8 +216,8 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
           items: [
             { text: 'Edges', link: '/examples/edges/' },
             { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
-            { text: 'Custom Connectionline', link: '/examples/edges/connection-line' },
-            { text: 'Connection validation', link: '/examples/edges/validation' },
+            { text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
+            { text: 'Connection Validation', link: '/examples/edges/validation' },
           ],
         },
       ],
diff --git a/docs/src/assets/index.css b/docs/src/assets/index.css
index 2c845ff0..9e0338a3 100644
--- a/docs/src/assets/index.css
+++ b/docs/src/assets/index.css
@@ -10,8 +10,16 @@
   backdrop-filter: blur(1px);
 }
 
-.VPPage {
-  @apply px-8 py-6 md:px-12 lg:px-24;
+.examples .VPDoc {
+  @apply !px-8 !py-6 md:!px-12 lg:!px-24;
+}
+
+.examples .content-container {
+  @apply max-w-full;
+}
+
+.examples .aside {
+  @apply !hidden;
 }
 
 html, body {
diff --git a/docs/src/components.d.ts b/docs/src/components.d.ts
index fcedc646..28995439 100644
--- a/docs/src/components.d.ts
+++ b/docs/src/components.d.ts
@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     CustomEdgeLabel: typeof import('./../components/examples/edges/CustomEdgeLabel.vue')['default']
     CustomInput: typeof import('./../components/examples/validation/CustomInput.vue')['default']
     CustomNode: typeof import('./../components/examples/custom-node/CustomNode.vue')['default']
+    DocsRepl: typeof import('./../components/DocsRepl.vue')['default']
     Features: typeof import('./../components/home/Features.vue')['default']
     Flow: typeof import('./../components/examples/multi/Flow.vue')['default']
     Home: typeof import('./../components/home/Home.vue')['default']
diff --git a/docs/src/examples/dnd.md b/docs/src/examples/dnd.md
index 91346ea1..03f3deda 100644
--- a/docs/src/examples/dnd.md
+++ b/docs/src/examples/dnd.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Drag & Drop
 
 Adding nodes to an already existing graph can be done multiple ways. To create an interactive editor, you would probably
@@ -16,9 +11,5 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
 is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="dnd"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="dnd"></Repl>
 </div>
diff --git a/docs/src/examples/edges/connection-line.md b/docs/src/examples/edges/connection-line.md
index 004cbf1e..30ecc262 100644
--- a/docs/src/examples/edges/connection-line.md
+++ b/docs/src/examples/edges/connection-line.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Custom Connection Line
 
 If the default connection lines aren't to your liking, or you want to expand on the existing 
@@ -11,9 +6,5 @@ functionality you can use your own custom connection line.
 Simply pass a component in the designated template slot, and you're good to go.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="connectionline"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="connectionline"></Repl>
 </div>
diff --git a/docs/src/examples/edges/index.md b/docs/src/examples/edges/index.md
index d63f34cd..a5672df0 100644
--- a/docs/src/examples/edges/index.md
+++ b/docs/src/examples/edges/index.md
@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Edges
 
 Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
 In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="edges"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="edges"></Repl>
 </div>
diff --git a/docs/src/examples/edges/updatable-edge.md b/docs/src/examples/edges/updatable-edge.md
index c7baa4da..3b9e7680 100644
--- a/docs/src/examples/edges/updatable-edge.md
+++ b/docs/src/examples/edges/updatable-edge.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Updatable Edge
 
 Existing edges can be updated, meaning their source / target position can be changed interactively.
diff --git a/docs/src/examples/edges/validation.md b/docs/src/examples/edges/validation.md
index 0a37b74d..615fcdd7 100644
--- a/docs/src/examples/edges/validation.md
+++ b/docs/src/examples/edges/validation.md
@@ -1,13 +1,9 @@
----
-layout: page
-
----
-
 # Connection Validation
 
 Connections can be validated before edges are created and nodes get connected. 
 
 ## Using a handle in a custom node
+
 ```vue
 <div>
   [ ... ]
@@ -17,6 +13,7 @@ Connections can be validated before edges are created and nodes get connected.
 ```
 
 ## Passing as node option
+
 ```ts
 const nodes = [
   {
@@ -31,9 +28,5 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="validation"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="validation"></Repl>
 </div>
diff --git a/docs/src/examples/empty.md b/docs/src/examples/empty.md
index fb9f7c9d..ab193b79 100644
--- a/docs/src/examples/empty.md
+++ b/docs/src/examples/empty.md
@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Empty
 
 Similar to the drag and drop example, we can also add nodes to an empty graph on a button click, 
 which triggers a push into our elements / nodes array.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="empty"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="empty"></Repl>
 </div>
diff --git a/docs/src/examples/floating-edges.md b/docs/src/examples/floating-edges.md
deleted file mode 100644
index 0f729272..00000000
--- a/docs/src/examples/floating-edges.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: page
-
----
-
-This example demonstrates "floating edges".
-
-The positions of the source and target nodes are calculated dynamically,
-the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
-so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
-
-<div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Floating Edges"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Floating Edges"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-</div>
diff --git a/docs/src/examples/hidden.md b/docs/src/examples/hidden.md
index 942bdf68..17acb79d 100644
--- a/docs/src/examples/hidden.md
+++ b/docs/src/examples/hidden.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Hidden
 
 You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
@@ -16,9 +11,5 @@ This can save you some time on initial renders but consider that moving the pane
 which can cause performance spikes depending on the complexity of the components that have to be mounted.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="hidden"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="hidden"></Repl>
 </div>
diff --git a/docs/src/examples/horizontal.md b/docs/src/examples/horizontal.md
index a2a8d776..c65fa9b7 100644
--- a/docs/src/examples/horizontal.md
+++ b/docs/src/examples/horizontal.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Horizontal Layout
 
 Vue Flow doesn't require you to use vertical layouts.
@@ -11,9 +6,5 @@ You can use horizontal layouts with the default node types as well.
 You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="horizontal"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="horizontal"></Repl>
 </div>
diff --git a/docs/src/examples/index.md b/docs/src/examples/index.md
index d80fd09c..780e6390 100644
--- a/docs/src/examples/index.md
+++ b/docs/src/examples/index.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Basic
 
 This is a basic example to help you familiarize with the basic features of Vue Flow. 
@@ -11,9 +6,5 @@ On the bottom left you see the viewport-controls and on the bottom right the min
 You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="basic"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="basic"></Repl>
 </div>
diff --git a/docs/src/examples/interaction.md b/docs/src/examples/interaction.md
index d27986f9..9f6af424 100644
--- a/docs/src/examples/interaction.md
+++ b/docs/src/examples/interaction.md
@@ -1,7 +1,3 @@
----
-layout: page
-
----
 # Interaction
 
 Vue Flow provides options to interact and limit interaction with the viewport and graph.
@@ -10,9 +6,5 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
 In the sandbox below you can find an example showing you how to toggle interaction options.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="interaction"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="interaction"></Repl>
 </div>
diff --git a/docs/src/examples/intersection.md b/docs/src/examples/intersection.md
index cd30a248..89f907d1 100644
--- a/docs/src/examples/intersection.md
+++ b/docs/src/examples/intersection.md
@@ -1,15 +1,7 @@
----
-layout: page
-
----
 # Intersection
 
 Vue Flow provides utils to find intersections of nodes with other nodes (or a given area).
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="intersection"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="intersection"></Repl>
 </div>
diff --git a/docs/src/examples/multi.md b/docs/src/examples/multi.md
index 6c274700..e11c7785 100644
--- a/docs/src/examples/multi.md
+++ b/docs/src/examples/multi.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Multi Flows
 
 Vue Flow is not limited to a single instance on a page. 
@@ -10,9 +5,5 @@ Vue Flow is not limited to a single instance on a page.
 You can use as many component instances as you like.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="multi"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="multi"></Repl> 
 </div>
diff --git a/docs/src/examples/nodes/index.md b/docs/src/examples/nodes/index.md
index 391eb21b..fa8e7bf0 100644
--- a/docs/src/examples/nodes/index.md
+++ b/docs/src/examples/nodes/index.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Custom Node
 
 One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
@@ -11,9 +6,5 @@ You can display any content and functionality inside a custom node. More documen
 up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="customNode"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="customNode"></Repl>
 </div>
diff --git a/docs/src/examples/nodes/nesting.md b/docs/src/examples/nodes/nesting.md
index 2d569d87..2bb21290 100644
--- a/docs/src/examples/nodes/nesting.md
+++ b/docs/src/examples/nodes/nesting.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Nested Nodes
 
 Another key feature is nested nodes (or even nested flows).
@@ -12,9 +7,5 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
 or even let Vue Flow extend the area of a node to fit all it's children.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="nested"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="nested"></Repl>
 </div>
diff --git a/docs/src/examples/nodes/update-node.md b/docs/src/examples/nodes/update-node.md
index 1955373f..22732d1c 100644
--- a/docs/src/examples/nodes/update-node.md
+++ b/docs/src/examples/nodes/update-node.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Update Node
 
 Updating internal node data is simple.
@@ -14,9 +9,5 @@ That means you can manipulate any property of your original nodes, and it will t
 You can of course also access the nodes directly from the state and change their properties from there.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="updateNode"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="updateNode"></Repl> 
 </div>
diff --git a/docs/src/examples/pinia.md b/docs/src/examples/pinia.md
index 6c5d92c3..a3a5550d 100644
--- a/docs/src/examples/pinia.md
+++ b/docs/src/examples/pinia.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Pinia
 
 Using your existing storage implementation is not an issue. 
diff --git a/docs/src/examples/save.md b/docs/src/examples/save.md
index 36ad0112..e61ff987 100644
--- a/docs/src/examples/save.md
+++ b/docs/src/examples/save.md
@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Save & Restore
 
 There is no built-in persistent storage feature, however you can use your own storage implementation.
@@ -17,9 +12,5 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
 some other business logic you would like to handle.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="saveRestore"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="saveRestore"></Repl>
 </div>
diff --git a/docs/src/examples/stress.md b/docs/src/examples/stress.md
index 939d9077..29f77d5c 100644
--- a/docs/src/examples/stress.md
+++ b/docs/src/examples/stress.md
@@ -1,7 +1,3 @@
----
-layout: page
-
----
 
 # Stress
 
diff --git a/docs/src/examples/teleport.md b/docs/src/examples/teleport.md
index 30eb14e6..7ef6e7bd 100644
--- a/docs/src/examples/teleport.md
+++ b/docs/src/examples/teleport.md
@@ -1,7 +1,3 @@
----
-layout: page
-
----
 
 # Teleport
 
diff --git a/docs/src/examples/transition.md b/docs/src/examples/transition.md
index a33813ae..e1c3dd65 100644
--- a/docs/src/examples/transition.md
+++ b/docs/src/examples/transition.md
@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Transition
 
 Vue Flow allows you to use transitions while zooming and panning around the Viewport.
 This example shows you how to use these transitions to animate actions on your graph.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="transition"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="transition"></Repl>
 </div>