diff --git a/sites/dev/components/navigation/sections-menu.mjs b/sites/dev/components/navigation/sections-menu.mjs
index d81f84c788c..a777339f9a3 100644
--- a/sites/dev/components/navigation/sections-menu.mjs
+++ b/sites/dev/components/navigation/sections-menu.mjs
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { icons, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
 import { useTranslation } from 'next-i18next'
 import orderBy from 'lodash.orderby'
-import { colors } from 'site/components/header/index.mjs'
+import { colors } from 'shared/components/header.mjs'
 import { NavigationContext } from 'shared/context/navigation-context.mjs'
 import { HelpIcon } from 'shared/components/icons.mjs'
 
diff --git a/sites/shared/components/mdx/index.mjs b/sites/shared/components/mdx/index.mjs
index 91f51a0448a..0cd966ab710 100644
--- a/sites/shared/components/mdx/index.mjs
+++ b/sites/shared/components/mdx/index.mjs
@@ -34,7 +34,7 @@ export const components = {
   Tab,
   Tabs,
   ControlTip,
-  // Example,
+  Example,
   PatternDocs: Fixme,
   PatternOptions: Fixme,
 }
diff --git a/sites/shared/components/mdx/tabbed-example.mjs b/sites/shared/components/mdx/tabbed-example.mjs
index 987500d30aa..6b1c2c9af16 100644
--- a/sites/shared/components/mdx/tabbed-example.mjs
+++ b/sites/shared/components/mdx/tabbed-example.mjs
@@ -4,11 +4,10 @@ import { pluginBundle } from '@freesewing/plugin-bundle'
 import { pluginFlip } from '@freesewing/plugin-flip'
 import { pluginGore } from '@freesewing/plugin-gore'
 import { Design } from '@freesewing/core'
-//import { Svg } from '../workbench/draft/svg'
-//import { Defs } from '../workbench/draft/defs'
-//import { Stack } from '../workbench/draft/stack'
-import { useGist } from 'shared/hooks/useGist'
-import { useEffect } from 'react'
+import { Svg } from '../workbench/pattern/svg'
+import { Defs } from '../workbench/pattern/defs'
+import { Stack } from '../workbench/pattern/stack'
+import { useState, useEffect } from 'react'
 import yaml from 'js-yaml'
 
 // Get code from children
@@ -23,13 +22,8 @@ export const asText = (reactEl) => {
 }
 
 // The actual example
-const Example = ({ app, patternProps, xray = false }) => {
-  // State for gist
-  const gist = useMemo(() => {
-    const newGist = defaultGist('example-mdx', app.locale)
-    set(newGist, ['_state', 'xray', 'enabled'], xray)
-    return newGist
-  }, [xray, app.locale])
+const Example = ({ patternProps, tutorial, paperless, settings, showInfo, xray = false }) => {
+  const [ui, setUi] = useState({ renderer: 'react', xray: { enabled: xray } })
 
   if (patternProps.logs.pattern.error.length > 0 || patternProps.logs.sets[0].error.length > 0)
     return (
@@ -40,14 +34,13 @@ const Example = ({ app, patternProps, xray = false }) => {
     )
 
   return (
-    <Svg {...patternProps} embed={true}>
+    <Svg {...patternProps} settings={settings} embed={true}>
       <Defs {...patternProps} />
       <style>{`:root { --pattern-scale: 1} ${patternProps.svg.style}`}</style>
       <g>
         {Object.keys(patternProps.stacks).map((stackName) => (
           <Stack
-            {...{ app, gist, patternProps }}
-            showInfo={app.setPopup}
+            {...{ showInfo, patternProps, settings, ui }}
             key={stackName}
             stackName={stackName}
             stack={patternProps.stacks[stackName]}
@@ -98,7 +91,6 @@ const buildExample = (children, settings = { margin: 5 }, tutorial = false, pape
 
 // Wrapper component dealing with the tabs and code view
 export const TabbedExample = ({
-  app,
   children,
   caption,
   tutorial,
@@ -107,8 +99,6 @@ export const TabbedExample = ({
   paperless,
   settings,
 }) => {
-  // FIXME: Deal with this later
-  return null
   if (settings)
     settings = {
       margin: 5,
@@ -130,10 +120,10 @@ export const TabbedExample = ({
         <Tabs tabs="Code, Preview, X-Ray">
           <Tab key="code">{children}</Tab>
           <Tab key="preview">
-            <Example {...{ patternProps, tutorial, paperless, settings, app }} />
+            <Example {...{ patternProps, tutorial, paperless, settings }} />
           </Tab>
           <Tab key="xray">
-            <Example {...{ patternProps, tutorial, paperless, settings, app }} xray={true} />
+            <Example {...{ patternProps, tutorial, paperless, settings }} xray={true} />
           </Tab>
         </Tabs>
         {caption && (
@@ -148,11 +138,11 @@ export const TabbedExample = ({
     <div className="my-8">
       <Tabs tabs="Preview, Code, X-Ray">
         <Tab key="preview">
-          <Example {...{ patternProps, tutorial, paperless, settings, app }} />
+          <Example {...{ patternProps, tutorial, paperless, settings }} />
         </Tab>
         <Tab key="code">{children}</Tab>
         <Tab key="xray">
-          <Example {...{ patternProps, tutorial, paperless, settings, app }} xray={true} />
+          <Example {...{ patternProps, tutorial, paperless, settings }} xray={true} />
         </Tab>
       </Tabs>
       {caption && (
diff --git a/sites/shared/components/workbench/pattern/path.mjs b/sites/shared/components/workbench/pattern/path.mjs
index e8f545def9f..a91cbdebbc3 100644
--- a/sites/shared/components/workbench/pattern/path.mjs
+++ b/sites/shared/components/workbench/pattern/path.mjs
@@ -1,6 +1,6 @@
 // Dependencies
 import { getProps } from './utils.mjs'
-import { round, formatMm } from 'shared/utils.mjs'
+import { round, formatMm, getId } from 'shared/utils.mjs'
 // Hooks
 import { useTranslation } from 'next-i18next'
 // Components
@@ -596,7 +596,11 @@ export const Path = ({ pathName, path, partName, part, units, showInfo, ui, upda
   output.push(<path id={pathId} key={pathId} d={d} {...getProps(path)} />)
   if (path.attributes.get('data-text'))
     output.push(
-      <TextOnPath key={'text-on-path-' + name} pathId={pathId} {...{ path, ui, showInfo }} />
+      <TextOnPath
+        key={'text-on-path-' + getId(pathId)}
+        pathId={pathId}
+        {...{ path, ui, showInfo }}
+      />
     )
   if (ui.xray?.enabled) output.push(<XrayPath key={'xpath' + pathId} />)
 
diff --git a/sites/shared/config/next.mjs b/sites/shared/config/next.mjs
index 78127da61c0..361d336037b 100644
--- a/sites/shared/config/next.mjs
+++ b/sites/shared/config/next.mjs
@@ -52,7 +52,7 @@ const getMdxConfig = ({ site, jargon }) => ({
       [
         rehypeHighlight,
         {
-          plainText: ['dot', 'http'],
+          plainText: ['dot', 'http', 'mermaid'],
           aliases: {
             javascript: [
               'design/src/index.mjs',
diff --git a/sites/shared/page-templates/docs.dev.mjs.mustache b/sites/shared/page-templates/docs.dev.mjs.mustache
new file mode 100644
index 00000000000..5801f5517b8
--- /dev/null
+++ b/sites/shared/page-templates/docs.dev.mjs.mustache
@@ -0,0 +1,68 @@
+// Hooks
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import Head from 'next/head'
+import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
+//import { TocWrapper } from 'shared/components/wrappers/toc.mjs'
+import { PageWrapper, ns } from 'shared/components/wrappers/page.mjs'
+// MDX content
+import MDX, { frontmatter } from 'markdown/{{{ slug }}}/en.md'
+
+/*
+ * This page is auto-generated by the prebuild script.
+ * Any changes you make will be overwritten on the next (pre)build.
+ *
+ * See the page-templates folder for more info.
+ */
+const DocsPage = ({ page, locale }) => (
+  <PageWrapper {...page} title={frontmatter.title}>
+    <Head>
+      <meta property="og:title" content={frontmatter.title} key="title" />
+      <meta property="og:type" content="article" key="type" />
+      <meta property="og:description" content={ `{{{ introEn }}}` } key="type" />
+      <meta property="og:article:author" content="Joost De Cock" key="author" />
+      <meta
+        property="og:image"
+        content={`https://canary.backend.freesewing.org/og-img/${page.locale}/org/{{{ slug }}}}`}
+        key="image"
+      />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
+      <meta property="og:url" content={`https://${page.locale === 'en'
+        ? ''
+        : page.locale+'/'}freesewing.org/{{{ slug }}}`} key="url" />
+      <meta property="og:locale" content={page.locale} key="locale" />
+      <meta property="og:site_name" content="freesewing.org" key="site" />
+      <title>{frontmatter.title} - FreeSewing.org</title>
+    </Head>
+    <div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
+      {frontmatter.toc && (
+        <div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
+          {/* FIXME: Implement toc plugin to add it to the frontmatter */}
+          {/* <TocWrapper toc={frontmatter.toc} /> */}
+        </div>
+      )}
+      <MdxWrapper {...{ MDX, frontmatter }} />
+    </div>
+  </PageWrapper>
+)
+
+export default DocsPage
+
+/*
+ * getStaticProps() is used to fetch data at build-time.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['docs', ...ns])),
+      locale,
+      page: {
+        locale,
+        path: {{{ slugArray }}},
+      },
+    },
+  }
+}
diff --git a/sites/shared/page-templates/docs.mjs.mustache b/sites/shared/page-templates/docs.org.mjs.mustache
similarity index 100%
rename from sites/shared/page-templates/docs.mjs.mustache
rename to sites/shared/page-templates/docs.org.mjs.mustache
diff --git a/sites/shared/prebuild/docs.mjs b/sites/shared/prebuild/docs.mjs
index a8a1668e569..e4ba1f9c56f 100644
--- a/sites/shared/prebuild/docs.mjs
+++ b/sites/shared/prebuild/docs.mjs
@@ -99,7 +99,7 @@ export const prebuildDocs = async (site) => {
 
   // Load page template
   const template = fs.readFileSync(
-    path.resolve('..', 'shared', 'page-templates', `docs.mjs.mustache`),
+    path.resolve('..', 'shared', 'page-templates', `docs.${site}.mjs.mustache`),
     'utf-8'
   )
 
@@ -147,11 +147,11 @@ export const prebuildDocs = async (site) => {
           mustache.render(template, {
             slug,
             slugArray: JSON.stringify(slug.split('/')),
-            introEN: intros.en,
-            introES: intros.es,
-            introDE: intros.de,
-            introFR: intros.fr,
-            introNL: intros.nl,
+            introEN: intros.en || 'fixme',
+            introES: intros.es || 'fixme',
+            introDE: intros.de || 'fixme',
+            introFR: intros.fr || 'fixme',
+            introNL: intros.nl || 'fixme',
           })
         )
       }
diff --git a/sites/shared/utils.mjs b/sites/shared/utils.mjs
index 8e633c85c24..75ea0b41cad 100644
--- a/sites/shared/utils.mjs
+++ b/sites/shared/utils.mjs
@@ -4,6 +4,10 @@ import set from 'lodash.set'
 import orderBy from 'lodash.orderby'
 import unset from 'lodash.unset'
 
+// Method that returns a unique ID when all you need is an ID
+// but you can't be certain you have one
+export const getId = (id) => (id ? id : Date.now())
+
 // Generic rounding method
 export const round = (val, decimals = 1) =>
   Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals)