diff --git a/.gitignore b/.gitignore
index 3ff2c369..bb54c5fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .uuid
 .vscode
+package-lock.json
 *.stats.html
 /bin/
 /dist/
@@ -9,3 +10,6 @@
 /test/test-results.xml
 /test/screenshots/test-results.xml
 /.nyc_output/
+/.vitepress
+/docs/.vitepress/cache/
+/docs/public/latexjs/
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 00000000..9c05a8ed
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,65 @@
+import { defineConfig } from 'vitepress'
+import { fileURLToPath } from 'url'
+import path from 'path'
+import string from 'vite-plugin-string'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'LaTeX.js',
+  description: 'A LaTeX parser written in JavaScript.',
+  
+  outDir: '../website', 
+
+  head: [
+    ['link', { 
+      rel: 'icon', 
+      href: 'data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAQAAAAAAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAElJwv9JScL/SUnC/wAAAAAAAAABAAAAAwAAAAEAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAgAAAAUAAAADAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAIAAAAIAAAABAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASUnC/0lJwv8AAAACAAAACgAAAAYAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAgAAAAsAAAAIAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAMAAAAJAAAACAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/SUnC/wAAAAgAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAQAAAAQAAAAHAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAIAAAAEAAAABQAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASUnC/0lJwv8AAAABAAAABAAAAAMAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAMAAAACAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAEAAAACAAAAAAAAAAEAAAAAAAAAAAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAElJwv9JScL/SUnC/wAAAAAAAAABAAAAAAAAAAAAAAAYAAAAFwAAABYAAAATAAAAEQAAAA0AAAALAAAACQAAAAcAAAADAAAAAwAAAAMAAAABAAAAAAAAAAAAAAAA8BMAAP/5AADxiAAA5+AAAOfgAADn4AAA5+AAAOfgAACP8AAA5+AAAOfgAADn4AAA5+QAAOfhAABxiwAAAAcAAA==' 
+    }],
+    ['link', { rel: 'stylesheet', href: '/css/error.css' }],
+    ['link', { rel: 'stylesheet', href: '/css/logos.css' }]
+  ],
+
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/img/latexjs.png',
+
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/usage' },
+      { text: 'Playground', link: '/playground' },
+      { text: 'ChangeLog', link: 'https://github.com/michael-brade/LaTeX.js/releases' },
+      { text: 'GitHub', link: 'https://github.com/michael-brade/LaTeX.js' },
+    ],
+
+    sidebar: [
+      { text: 'Home', link: '/' },
+      { text: 'Usage', link: '/usage' },
+      { text: 'API', link: '/api' },
+      { text: 'Extending', link: '/extending' },
+      { text: 'Limitations', link: '/limitations' }
+    ],
+  },
+
+  // Enable markdown line breaks
+  markdown: {
+    breaks: true
+  },
+  
+  // Vite-specific configuration
+  vite: {
+    plugins: [
+      // Plugin to import .tex files as strings
+      string({
+        include: '**/*.tex',
+      })
+    ],
+    resolve: {
+      alias: {
+        // Alias to find theme components
+        '@theme/components': path.resolve(__dirname, './theme/components')
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..44b6d257
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,37 @@
+<template>
+  <DefaultTheme.Layout>
+    <template #navbar-brand>
+      <a href="/" class="navbar-brand-link">
+        <img
+          vPreload
+          class="logo"
+          src="/img/latexjs.png"
+          alt="LaTeX.js Logo"
+        />
+        <LaTeX />.js
+      </a>
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import LaTeX from './components/LaTeX.vue'
+</script>
+
+<style scoped>
+/* Style to match old home-link */
+.navbar-brand-link {
+  display: flex;
+  align-items: center;
+  font-family: 'Liberation Serif', serif;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+.logo {
+  height: 2rem;
+  padding-bottom: 0.2rem;
+  vertical-align: middle;
+  margin-right: 0.8rem;
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/LaTeX.vue b/docs/.vitepress/theme/components/LaTeX.vue
new file mode 100644
index 00000000..d3e87459
--- /dev/null
+++ b/docs/.vitepress/theme/components/LaTeX.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="latex">L<span>a</span>T<span>e</span>X</span>
+</template>
+
+<style scoped>
+/* LaTeX logo */
+.latex span {
+  text-transform: uppercase;
+}
+
+.latex span:first-child {
+  font-size: 0.8em;
+  vertical-align: 0.2em;
+  margin-left: -0.4em;
+  margin-right: -0.1em;
+}
+
+.latex span:last-child {
+  margin-left: -0.2em;
+  margin-right: -0.1em;
+  position: relative;
+  top: 0.45ex;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/LtxPlayground.vue b/docs/.vitepress/theme/components/LtxPlayground.vue
new file mode 100644
index 00000000..18e83773
--- /dev/null
+++ b/docs/.vitepress/theme/components/LtxPlayground.vue
@@ -0,0 +1,281 @@
+<template>
+  <div id="playground">
+    <!-- Left side: editor -->
+    <Codemirror
+      id="latex-editor"
+      v-model="code"
+      :extensions="extensions"
+      :style="{ height: '100%' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="4"
+      @ready="onCmReady"
+      @change="onCmCodeChange"
+    />
+
+    <!-- Gutter / splitter -->
+    <div id="gutter" ref="gutter"></div>
+
+    <!-- Right side: LaTeX preview -->
+    <iframe
+      id="preview"
+      ref="preview"
+      sandbox="allow-same-origin allow-scripts"
+    ></iframe>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { basicSetup } from 'codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+import { parse, HtmlGenerator, SyntaxError } from '../../../../dist/latex.mjs'
+import en from 'hyphenation.en-us'
+import Split from 'split-grid'
+import showcase from '../../../showcase.tex?raw'
+
+const extensions = [basicSetup, javascript(), oneDark]
+
+// --- generator + helpers -----------------------------------------------------
+function getAssetsBase(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  return window.location.origin + '/latexjs/'
+}
+
+
+let generator: HtmlGenerator | null = null
+
+function getGenerator() {
+  if (typeof document === 'undefined') return null // SSR
+  if (!generator) {
+    generator = new HtmlGenerator({
+      hyphenate: true,
+      languagePatterns: en,
+      styles: ['css/error.css']
+    })
+  }
+  return generator
+}
+
+let scrollY = 0
+
+function links() {
+  const as = document.getElementsByTagName('a')
+  for (let i = 0; i < as.length; i++) {
+    const href = as[i].getAttribute('href')
+    if (!href || !href.startsWith('#')) continue
+
+    as[i].addEventListener('click', ev => {
+      ev.preventDefault()
+      const targetId = href.substring(1)
+      const te = document.getElementById(targetId)
+      if (!te || !document.scrollingElement) return
+      document.scrollingElement.scrollTop = te.getBoundingClientRect().top
+    })
+  }
+}
+
+function definedOrElse<T>(value: T | undefined, fallback: T): T {
+  return typeof value !== 'undefined' ? value : fallback
+}
+
+function excerpt(txt: string, o: number) {
+  const l = txt.length
+  let b = o - 20
+  if (b < 0) b = 0
+  let e = o + 20
+  if (e > l) e = l
+
+  const hex = (ch: string) => ch.charCodeAt(0).toString(16).toUpperCase()
+
+  const extract = (txt: string, pos: number, len: number) =>
+    txt
+      .substr(pos, len)
+      .replace(/\\/g, '\\\\')
+      .replace(/\x08/g, '\\b')
+      .replace(/\t/g, '\\t')
+      .replace(/\n/g, '\\n')
+      .replace(/\f/g, '\\f')
+      .replace(/\r/g, '\\r')
+      .replace(/[\x00-\x07\x0B\x0E\x0F]/g, ch => '\\x0' + hex(ch))
+      .replace(/[\x10-\x1F\x80-\xFF]/g, ch => '\\x' + hex(ch))
+      .replace(/[\u0100-\u0FFF]/g, ch => '\\u0' + hex(ch))
+      .replace(/[\u1000-\uFFFF]/g, ch => '\\u' + hex(ch))
+
+  return {
+    prolog: extract(txt, b, o - b),
+    token: extract(txt, o, 1),
+    epilog: extract(txt, o + 1, e - (o + 1))
+  }
+}
+
+function errorMessage(e: any, noFinalNewline?: boolean) {
+  const l = e.location
+  const prefix1 = 'line ' + e.line + ' (column ' + e.column + '): '
+  let prefix2 = ''
+  for (let i = 0; i < prefix1.length + l.prolog.length; i++) prefix2 += '-'
+  const msg =
+    prefix1 +
+    l.prolog +
+    l.token +
+    l.epilog +
+    '\n' +
+    prefix2 +
+    '^\n' +
+    e.message +
+    (noFinalNewline ? '' : '\n')
+  return msg
+}
+
+// core compile function reused from VuePress version, with SSR guard
+function compile(latex: string, iframe: HTMLIFrameElement) {
+  if (typeof document === 'undefined') return // SSR
+
+  const generator = getGenerator()
+  if (!generator) return
+
+  const doc = iframe.contentDocument
+  if (!doc || doc.readyState !== 'complete') return
+
+  try {
+    generator.reset()
+    const baseURL = getAssetsBase();
+    const newDoc = parse(latex, { generator }).htmlDocument(baseURL)
+
+    const linkScript = newDoc.createElement('script')
+    linkScript.text =
+      'document.addEventListener("DOMContentLoaded", ' + links.toString() + ')'
+    newDoc.head.appendChild(linkScript)
+
+    if (doc.head.innerHTML === newDoc.head.innerHTML) {
+      const newBody = doc.adoptNode(newDoc.body)
+      doc.documentElement.replaceChild(newBody, doc.body)
+      ;(doc.documentElement as HTMLElement).style.cssText =
+        (newDoc.documentElement as HTMLElement).style.cssText
+    } else {
+      iframe.srcdoc = newDoc.documentElement.outerHTML
+    }
+
+    if (scrollY) {
+      iframe.contentWindow?.scrollTo(0, scrollY)
+      scrollY = 0
+    }
+  } catch (e: any) {
+    console.error(e)
+    if (doc && iframe.contentWindow) {
+      if (!scrollY) scrollY = iframe.contentWindow.pageYOffset
+    }
+
+    if (e instanceof SyntaxError) {
+      const err = {
+        line: definedOrElse(e.location?.start?.line, 0),
+        column: definedOrElse(e.location?.start?.column, 0),
+        message: e.message,
+        found: definedOrElse(e.found, ''),
+        expected: definedOrElse(e.expected, ''),
+        location: excerpt(
+          latex,
+          definedOrElse(e.location?.start?.offset, 0)
+        )
+      }
+
+      doc.body.innerHTML =
+        '<pre class="error">ERROR: Parsing failure:\n\n' +
+        errorMessage(err, true) +
+        '</pre>'
+    } else if (doc) {
+      doc.body.innerHTML = '<pre class="error">ERROR: ' + e.message + '</pre>'
+    }
+  }
+}
+
+// --- component ---------------------------------------------------------------
+
+export default defineComponent({
+  name: 'LtxPlayground',
+  components: { Codemirror },
+  setup() {
+    const code = ref(showcase)
+    const preview = ref<HTMLIFrameElement | null>(null)
+    const gutter = ref<HTMLDivElement | null>(null)
+
+    const onCmReady = () => {
+      if (preview.value) compile(code.value, preview.value)
+    }
+
+    const onCmCodeChange = (value: string) => {
+      code.value = value
+      if (preview.value) compile(value, preview.value)
+    }
+
+    onMounted(() => {
+      if (gutter.value) {
+        Split({
+          columnGutters: [
+            {
+              track: 1,
+              element: gutter.value
+            }
+          ]
+        })
+      }
+    })
+
+    return {
+      code,
+      extensions,
+      preview,
+      gutter,
+      onCmReady,
+      onCmCodeChange
+    }
+  }
+})
+</script>
+
+<style scoped>
+#playground {
+  margin: 0;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 100%;
+  grid-template-columns: 1fr 6px 1fr;
+  grid-template-areas: 'latex gutter preview';
+}
+
+#latex-editor {
+  grid-area: latex;
+  height: 100%;
+}
+
+#preview {
+  grid-area: preview;
+  color: #333;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+#gutter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: col-resize;
+}
+
+#gutter::before {
+  display: block;
+  content: '';
+  width: 2px;
+  height: 40px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+
+#gutter:hover::before {
+  border-color: #999;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/TeX.vue b/docs/.vitepress/theme/components/TeX.vue
new file mode 100644
index 00000000..bf92ca82
--- /dev/null
+++ b/docs/.vitepress/theme/components/TeX.vue
@@ -0,0 +1,17 @@
+<template>
+  <span class="tex">T<span>e</span>X</span>
+</template>
+
+<style scoped>
+/* TeX logo */
+span.tex span {
+  text-transform: uppercase;
+}
+
+span.tex span:first-child {
+  margin-left: -0.2em;
+  margin-right: -0.1em;
+  position: relative;
+  top: 0.45ex;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/latex.vue b/docs/.vitepress/theme/components/latex.vue
new file mode 100644
index 00000000..d3e87459
--- /dev/null
+++ b/docs/.vitepress/theme/components/latex.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="latex">L<span>a</span>T<span>e</span>X</span>
+</template>
+
+<style scoped>
+/* LaTeX logo */
+.latex span {
+  text-transform: uppercase;
+}
+
+.latex span:first-child {
+  font-size: 0.8em;
+  vertical-align: 0.2em;
+  margin-left: -0.4em;
+  margin-right: -0.1em;
+}
+
+.latex span:last-child {
+  margin-left: -0.2em;
+  margin-right: -0.1em;
+  position: relative;
+  top: 0.45ex;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 00000000..03452b80
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,13 @@
+import DefaultTheme from 'vitepress/theme'
+import LaTeX from './components/LaTeX.vue'
+import TeX from './components/TeX.vue'
+import LtxPlayground from './components/LtxPlayground.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('LaTeX', LaTeX)
+    app.component('TeX', TeX)
+    app.component('LtxPlayground', LtxPlayground)
+  }
+}
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
new file mode 100644
index 00000000..755bcdc1
--- /dev/null
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,28 @@
+/* Replaces .page */
+.VPDoc.vp-doc {
+  padding-top: 3.6rem;
+  text-align: justify;
+}
+
+/* Replaces .theme-container .navbar */
+.VPNavbar {
+  line-height: 2rem !important;
+}
+
+/* Replaces .navbar a, .links, etc. */
+.VPNavbar,
+.VPNavbar .links,
+.VPNavbar a {
+  background-color: #3eaf7c !important; /* #2e8555 */
+  color: white !important;
+  border: none !important;
+}
+
+/* Ensure navbar text/icons are white */
+.VPNavbar .VPNavBarTitle .text,
+.VPNavbar .VPNavBarMenu .VPNavBarMenuLink,
+.VPNavbar .VPNavBarAppearance,
+.VPNavbar .VPSocialLink {
+  color: white !important;
+  fill: white !important;
+}
diff --git a/docs/.vuepress/.gitignore b/docs/.vuepress/.gitignore
deleted file mode 100644
index f5ef3338..00000000
--- a/docs/.vuepress/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/public/js
-.cache
-.temp
\ No newline at end of file
diff --git a/docs/.vuepress/assets.ts b/docs/.vuepress/assets.ts
deleted file mode 100644
index 3785865e..00000000
--- a/docs/.vuepress/assets.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import path from 'path'
-
-
-export default (options, ctx) => {
-    const styleAssetsPath = 'dist/css'
-    const fontAssetsPath = 'dist/fonts'
-    const jsAssetsPath = 'dist/js'
-
-    return {
-        // For development
-        beforeDevServer(app, server) {
-            const express = require('express')
-            // const serveStatic = require('serve-static')
-            const serveStatic = express.static
-
-            // path.resolve uses cwd if argument is relative
-            app.use('/css', serveStatic(path.resolve(styleAssetsPath)))
-            app.use('/fonts', serveStatic(path.resolve(fontAssetsPath)))
-            app.use('/js', serveStatic(path.resolve(jsAssetsPath)))
-        },
-
-        // For production
-        async generated() {
-            const { fs } = require('@vuepress/shared-utils')
-
-            await fs.copy(path.resolve(styleAssetsPath), path.resolve(ctx.outDir, 'css'))
-            await fs.copy(path.resolve(fontAssetsPath), path.resolve(ctx.outDir, 'fonts'))
-            await fs.copy(path.resolve(jsAssetsPath), path.resolve(ctx.outDir, 'js'))
-        }
-    }
-}
\ No newline at end of file
diff --git a/docs/.vuepress/components/LaTeX.vue b/docs/.vuepress/components/LaTeX.vue
deleted file mode 100644
index 4c58f1ac..00000000
--- a/docs/.vuepress/components/LaTeX.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<style scoped lang="styl">
-
-/* LaTeX logo */
-.latex span {
-    text-transform: uppercase;
-}
-
-.latex span:first-child {
-    font-size: 0.8em;
-    vertical-align: 0.2em;
-    margin-left:  -0.4em;
-    margin-right: -0.1em;
-}
-.latex span:last-child {
-    margin-left: -0.2em;
-    margin-right: -0.1em;
-    position: relative;
-    top: 0.45ex;
-}
-
-</style>
-
-
-<template>
-    <span class="latex">L<span>a</span>T<span>e</span>X</span>
-</template>
diff --git a/docs/.vuepress/components/LtxPlayground.vue b/docs/.vuepress/components/LtxPlayground.vue
deleted file mode 100644
index fbde5f5a..00000000
--- a/docs/.vuepress/components/LtxPlayground.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-    <div id="playground">
-        <!-- <codemirror id="latex-editor" :value="code" :options="cmOptions" @input="onCmCodeChange" @ready="onCmReady" /> -->
-        <div id="latex-editor" />
-
-        <div id="gutter" ref="gutter"></div>
-
-        <iframe id="preview" ref="preview" sandbox="allow-same-origin allow-scripts"></iframe>
-    </div>
-</template>
-
-
-<script lang="ts">
-
-// webpack doesn't handle import.meta.url yet, so don't use latex.mjs
-import { parse, HtmlGenerator, SyntaxError } from '../../../dist/latex.js'
-import en from 'hyphenation.en-us'
-
-import Split from 'split-grid'
-import { showcase } from '../../showcase.tex'
-
-// codemirror base style
-// import 'codemirror/lib/codemirror.css'
-// import 'codemirror/theme/monokai.css'
-
-
-const generator = new HtmlGenerator({
-    hyphenate: true,
-    languagePatterns: en,
-    styles: ['css/error.css']
-})
-
-var scrollY = 0
-
-function links() {
-    var as = document.getElementsByTagName("a")
-    for (var i = 0; i < as.length; i++) {
-        if (as[i].getAttribute("href").startsWith("#")) {
-            as[i].addEventListener("click", function(ev) {
-                ev.preventDefault()
-                var target = ev.target.getAttribute("href").substr(1)
-                var te = document.getElementById(target)
-
-                document.scrollingElement.scrollTop = offsetTop(te)
-            })
-        }
-    }
-}
-
-/* function to compile latex source into the given iframe */
-function compile(latex, iframe) {
-    var doc = iframe.contentDocument
-
-    if (doc.readyState !== "complete")
-        return
-
-    try {
-        generator.reset()
-        var newDoc = parse(latex, { generator: generator }).htmlDocument()
-
-        // we need to disable normal processing of same-page links in the iframe
-        // see also https://stackoverflow.com/questions/50657574/iframe-with-srcdoc-same-page-links-load-the-parent-page-in-the-frame
-        var linkScript = newDoc.createElement('script')
-        linkScript.text = 'document.addEventListener("DOMContentLoaded", ' + links.toString() + ')'
-        newDoc.head.appendChild(linkScript)
-
-        // don't reload all the styles and fonts if not needed!
-        if (doc.head.innerHTML == newDoc.head.innerHTML) {
-            var newBody = doc.adoptNode(newDoc.body)
-            doc.documentElement.replaceChild(newBody, doc.body)
-            doc.documentElement.style.cssText = newDoc.documentElement.style.cssText
-        } else {
-            iframe.srcdoc = newDoc.documentElement.outerHTML
-
-            // var blob = new Blob([newDoc.documentElement.innerHTML], {type : 'text/html'});
-            // iframe.src = URL.createObjectURL(blob);
-        }
-
-        if (scrollY) {
-            iframe.contentWindow.scrollTo(0, scrollY)
-            scrollY = 0
-        }
-    } catch (e) {
-        console.error(e)
-
-        // save scrolling position and restore on next successful compile
-        if (!scrollY)
-            scrollY = iframe.contentWindow.pageYOffset
-
-        if (e instanceof SyntaxError) {
-            var error = {
-                line:     definedOrElse(e.location.start.line, 0),
-                column:   definedOrElse(e.location.start.column, 0),
-                message:  e.message,
-                found:    definedOrElse(e.found, ""),
-                expected: definedOrElse(e.expected, ""),
-                location: excerpt(latex, definedOrElse(e.location.start.offset, 0))
-            };
-
-            doc.body.innerHTML = '<pre class="error">ERROR: Parsing failure:\n\n' + errorMessage(error, true) + '</pre>'
-        } else {
-            doc.body.innerHTML = '<pre class="error">ERROR: ' + e.message + '</pre>'
-        }
-    }
-}
-
-
-function definedOrElse(value, fallback) {
-    return (typeof value !== "undefined" ? value : fallback);
-};
-
-
-/* utility function: create a source excerpt */
-function excerpt(txt, o) {
-    var l = txt.length;
-    var b = o - 20; if (b < 0) b = 0;
-    var e = o + 20; if (e > l) e = l;
-    var hex = function (ch) {
-        return ch.charCodeAt(0).toString(16).toUpperCase();
-    };
-    var extract = function (txt, pos, len) {
-        return txt.substr(pos, len)
-        .replace(/\\/g,   "\\\\")
-        .replace(/\x08/g, "\\b")
-        .replace(/\t/g,   "\\t")
-        .replace(/\n/g,   "\\n")
-        .replace(/\f/g,   "\\f")
-        .replace(/\r/g,   "\\r")
-        .replace(/[\x00-\x07\x0B\x0E\x0F]/g, function(ch) { return "\\x0" + hex(ch); })
-        .replace(/[\x10-\x1F\x80-\xFF]/g,    function(ch) { return "\\x"  + hex(ch); })
-        .replace(/[\u0100-\u0FFF]/g,         function(ch) { return "\\u0" + hex(ch); })
-        .replace(/[\u1000-\uFFFF]/g,         function(ch) { return "\\u"  + hex(ch); });
-    };
-    return {
-        prolog: extract(txt, b, o - b),
-        token:  extract(txt, o, 1),
-        epilog: extract(txt, o + 1, e - (o + 1))
-    };
-}
-
-
-/* render a useful error message */
-function errorMessage(e, noFinalNewline) {
-    var l = e.location;
-    var prefix1 = "line " + e.line + " (column " + e.column + "): ";
-    var prefix2 = "";
-    for (var i = 0; i < prefix1.length + l.prolog.length; i++)
-        prefix2 += "-";
-    var msg = prefix1 + l.prolog + l.token + l.epilog + "\n" +
-        prefix2 + "^" + "\n" +
-        e.message + (noFinalNewline ? "" : "\n");
-
-    return msg;
-};
-
-
-
-// <script lang="ts">
-//   import { defineComponent, reactive, shallowRef, computed, watch, onMounted } from 'vue'
-//   import { EditorView, ViewUpdate } from '@codemirror/view'
-//   import { redo, undo } from '@codemirror/commands'
-//   import { Codemirror } from 'vue-codemirror'
-
-//   export default defineComponent({
-//     name: 'LtxPlayground',
-//     title: 'Web IDE example',
-//     url: import.meta.url,
-
-// LtxPlayground component
-export default {
-    data() {
-        return {
-            code: showcase,
-            cmOptions: {
-                tabSize: 4,
-                mode: 'text/x-latex',
-                theme: 'monokai',
-                styleActiveLine: true,
-                matchBrackets: true,
-                showCursorWhenSelecting: true,
-
-                // TODO
-                autofocus: true,
-                lineWrapping: true,
-                lineNumbers: true,
-                indentUnit: 4
-            }
-        }
-    },
-    components: {
-        codemirror: () => import('vue-codemirror').then(module => module.codemirror)
-    },
-    methods: {
-        onCmReady(cm) {
-            compile(this.code, this.$refs.preview)
-        },
-        onCmCodeChange(newCode) {
-            this.code = newCode
-            compile(newCode, this.$refs.preview)
-        }
-    },
-
-    // beforeMount() {
-    //     // import language
-    //     import('codemirror/mode/stex/stex.js')
-
-    //     // addons
-    //     import('codemirror/addon/selection/active-line.js')
-    //     import('codemirror/addon/edit/matchbrackets.js')
-    // },
-
-    mounted() {
-        Split({
-            columnGutters: [{
-                track: 1,
-                element: this.$refs.gutter
-            }]
-        });
-    }
-}
-</script>
-
-
-
-<style scoped lang="styl">
-#playground {
-    margin: 0;
-    height: 100%;
-
-    display: grid;
-    grid-template-rows: 100%;
-    grid-template-columns: 1fr 6px 1fr;
-    grid-template-areas: "latex gutter preview";
-}
-
-#footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    color: hsla(0, 0%, 100%, .65);
-    background: #2d9961;
-    font-size: 1.5vh;
-}
-
-#footer {
-    grid-area: footer;
-}
-
-#latex-editor {
-    grid-area: latex;
-    height: 100%;
-
-    >>> .CodeMirror {
-        height: 100%;
-    }
-}
-
-
-#preview {
-    grid-area: preview;
-    color: #333;
-    border: none;
-    width: 100%;
-    height: 100%;
-}
-
-/* splitter */
-
-#gutter {
-    /* background-color: #eee; */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: col-resize;
-
-    &:before {
-        display: block;
-        content: "";
-        width: 2px;
-        height: 40px;
-        border-left: 1px solid #ccc;
-        border-right: 1px solid #ccc;
-    }
-
-    &:hover:before {
-        border-color: #999;
-    }
-}
-</style>
diff --git a/docs/.vuepress/components/TeX.vue b/docs/.vuepress/components/TeX.vue
deleted file mode 100644
index ddbad5d1..00000000
--- a/docs/.vuepress/components/TeX.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<style scoped lang="styl">
-
-/* TeX logo */
-span.tex span {
-    text-transform: uppercase;
-}
-
-span.tex span:first-child {
-    margin-left: -0.2em;
-    margin-right: -0.1em;
-    position: relative;
-    top: 0.45ex;
-}
-
-</style>
-
-
-<template>
-    <span class="tex">T<span>e</span>X</span>
-</template>
diff --git a/docs/.vuepress/components/latex.vue b/docs/.vuepress/components/latex.vue
deleted file mode 100644
index 4c58f1ac..00000000
--- a/docs/.vuepress/components/latex.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<style scoped lang="styl">
-
-/* LaTeX logo */
-.latex span {
-    text-transform: uppercase;
-}
-
-.latex span:first-child {
-    font-size: 0.8em;
-    vertical-align: 0.2em;
-    margin-left:  -0.4em;
-    margin-right: -0.1em;
-}
-.latex span:last-child {
-    margin-left: -0.2em;
-    margin-right: -0.1em;
-    position: relative;
-    top: 0.45ex;
-}
-
-</style>
-
-
-<template>
-    <span class="latex">L<span>a</span>T<span>e</span>X</span>
-</template>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
deleted file mode 100644
index f5a5c641..00000000
--- a/docs/.vuepress/config.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { defaultTheme } from '@vuepress/theme-default'
-import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
-import { getDirname, path } from '@vuepress/utils'
-
-// import { defineConfig } from '@vuepress/config'
-import { defineUserConfig } from '@vuepress/cli'
-
-// import { webpackBundler } from '@vuepress/bundler-webpack'
-import { viteBundler } from '@vuepress/bundler-vite'
-
-import { description } from '../../package.json'
-import assets from './assets'
-
-import { string } from 'rollup-plugin-string'
-
-
-
-const __dirname = getDirname(import.meta.url)
-
-
-// export default {
-// export default defineConfig({
-export default defineUserConfig({
-
-    title: 'LaTeX.js',
-    description: description,
-
-    dest: 'website',
-
-    head: [
-        ['link', {
-            rel: 'icon',
-            href: 'data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAQAAAAAAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAElJwv9JScL/SUnC/wAAAAAAAAABAAAAAwAAAAEAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAgAAAAUAAAADAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAIAAAAIAAAABAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASUnC/0lJwv8AAAACAAAACgAAAAYAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAgAAAAsAAAAIAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAMAAAAJAAAACAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/SUnC/wAAAAgAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAQAAAAQAAAAHAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAIAAAAEAAAABQAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASUnC/0lJwv8AAAABAAAABAAAAAMAAAAAAAAAAAAAAABJScL/SUnC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElJwv9JScL/AAAAAAAAAAMAAAACAAAAAAAAAAAAAAAASUnC/0lJwv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJScL/SUnC/wAAAAEAAAACAAAAAAAAAAEAAAAAAAAAAAAAAABJScL/SUnC/0lJwv8AAAAAAAAAAElJwv9JScL/SUnC/wAAAAAAAAABAAAAAAAAAAAAAAAYAAAAFwAAABYAAAATAAAAEQAAAA0AAAALAAAACQAAAAcAAAADAAAAAwAAAAMAAAABAAAAAAAAAAAAAAAA8BMAAP/5AADxiAAA5+AAAOfgAADn4AAA5+AAAOfgAACP8AAA5+AAAOfgAADn4AAA5+QAAOfhAABxiwAAAAcAAA==',
-            type: 'image/x-icon'
-        }]
-    ],
-
-    theme: defaultTheme({
-        logo: '/img/latexjs.png',
-
-        navbar: [
-            { text: 'Home', link: '/' },
-            { text: 'Guide', link: '/usage.html' },
-            { text: 'Playground', link: '/playground.html', target:'_self', rel: '' },
-            { text: 'ChangeLog', link: 'https://github.com/michael-brade/LaTeX.js/releases'},
-            { text: 'GitHub', link: 'https://github.com/michael-brade/LaTeX.js' },
-        ],
-        sidebar: [
-            '',                 // Home
-            'usage',
-            'api',
-            'extending',
-            'limitations'
-        ],
-        sidebarDepth: 1,
-
-        // search: false,
-        // displayAllHeaders: true,
-        // activeHeaderLinks: true
-    }),
-
-    markdown: {
-        // extendMarkdown: md => {
-        //     md.set({ breaks: true })
-        //     //md.use(require('markdown-it-xxx'))
-        // }
-
-        breaks: true
-    },
-
-    plugins: [
-        require('./assets'),
-
-        registerComponentsPlugin({
-            componentsDir: path.resolve(__dirname, './components')
-        }),
-    ],
-
-    bundler: viteBundler({
-        viteOptions: {
-            appType: 'spa',
-            // mode: 'development' / 'production',
-            // plugins: ,
-            build: {
-                rollupOptions: {
-                    plugins: [
-                        string({
-                            // Required to be specified
-                            include: "./docs/showcase.tex",
-
-                            // Undefined by default
-                            // exclude: ["**/index.html"]
-                        })
-                    ]
-                }
-            }
-        },
-        vuePluginOptions: {
-            customElement: true
-        },
-    })
-
-    // bundler: webpackBundler({
-    //     sass: { /* ... */ },
-
-    //     configureWebpack: (config, isServer) => {
-    //         config.externals = {
-    //             'svgdom': 'commonjs svgdom'
-    //         }
-
-    //         config.output.hashFunction = 'xxhash64'
-    //     },
-    // })
-})
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index cf03cffa..00000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,47 +0,0 @@
-.page {
-    padding-top: 3.6rem;
-    text-align: justify;
-}
-
-.theme-container {
-    .navbar {
-        line-height: 2rem;
-
-        &, & .links, & a {
-            background-color: #3eaf7c !important;  // #2e8555
-            color: white;
-            border: none;
-        }
-
-        & .home-link {
-            .logo {
-                height: 2rem
-                padding-bottom: 0.2rem
-                vertical-align: middle
-                margin-right: 0
-            }
-            font-family: 'Liberation Serif', serif
-            font-size: 1.5rem;
-        }
-    }
-}
-
-.fullWidth {
-    .page {
-        padding-top: 3.6rem;
-        padding-left: 0;
-        padding-bottom: 0;
-        height: calc(100vh - 3.6rem);
-    }
-
-    .theme-default-content {
-        padding: 0;
-        margin: 0;
-        max-width: none;
-        height: 100%;
-    }
-
-    footer {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue
deleted file mode 100644
index 7b7a15ac..00000000
--- a/docs/.vuepress/theme/components/Home.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <main class="home" aria-labelledby="main-title">
-    <Content class="theme-default-content custom" />
-
-    <div v-if="data.footer" class="footer">
-      {{ data.footer }}
-    </div>
-  </main>
-</template>
-
-<script>
-export default {
-  name: 'Home',
-
-  computed: {
-    data () {
-      return this.$page.frontmatter
-    },
-  }
-}
-</script>
-
-<style lang="stylus">
-.home {
-  padding: $navbarHeight 2rem 0
-  max-width: $homePageWidth
-  margin: 0px auto
-  display: block
-
-  .hero {
-    text-align: center
-    img {
-      width: 5rem
-      vertical-align: middle
-      padding-bottom: 0.5rem
-    }
-
-    h1 {
-      font-family: 'Liberation Serif', serif
-      font-size: 4rem
-      font-weight: 500
-    }
-
-    h1, .description, .action {
-      margin 1.8rem auto
-    }
-
-    .description {
-      max-width 35rem
-      font-size 1.6rem
-      line-height 1.3
-      color lighten($textColor, 40%)
-    }
-
-    .action-button {
-      display inline-block
-      font-size 1.2rem
-      color #fff
-      background-color $accentColor
-      padding 0.8rem 1.6rem
-      border-radius 4px
-      transition background-color .1s ease
-      box-sizing border-box
-      border-bottom 1px solid darken($accentColor, 10%)
-      &:hover {
-        background-color lighten($accentColor, 10%)
-      }
-    }
-  }
-
-  .features {
-    border-top 1px solid $borderColor
-    padding 1.2rem 0
-    margin-top 2.5rem
-    display flex
-    flex-wrap wrap
-    align-items flex-start
-    align-content stretch
-    justify-content space-between
-  }
-  .feature {
-    flex-grow 1
-    flex-basis 30%
-    max-width 30%
-    h2 {
-      font-size 1.4rem
-      font-weight 500
-      border-bottom none
-      padding-bottom 0
-      color lighten($textColor, 10%)
-    }
-    p {
-      color lighten($textColor, 25%)
-    }
-  }
-
-  .footer {
-    padding 2.5rem
-    border-top 1px solid $borderColor
-    text-align center
-    color lighten($textColor, 25%)
-  }
-}
-
-@media (max-width: $MQMobile)
-  .home
-    .features
-      flex-direction column
-    .feature
-      max-width 100%
-      padding 0 2.5rem
-
-@media (max-width: $MQMobileNarrow)
-  .home
-    padding-left 1.5rem
-    padding-right 1.5rem
-    .hero
-      img
-        max-height 210px
-        margin 2rem auto 1.2rem
-      h1
-        font-size 2rem
-      h1, .description, .action
-        margin 1.2rem auto
-      .description
-        font-size 1.2rem
-      .action-button
-        font-size 1rem
-        padding 0.6rem 1.2rem
-    .feature
-      h2
-        font-size 1.25rem
-</style>
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
deleted file mode 100644
index 3e3b647f..00000000
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <header class="navbar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
-
-    <RouterLink :to="$localePath" class="home-link">
-      <img
-        v-if="$site.themeConfig.logo"
-        class="logo"
-        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      >
-      <LaTeX/>.js
-    </RouterLink>
-
-    <div
-      class="links"
-      :style="linksWrapMaxWidth ? {
-        'max-width': linksWrapMaxWidth + 'px'
-      } : {}"
-    >
-      <AlgoliaSearchBox
-        v-if="isAlgoliaSearch"
-        :options="algolia"
-      />
-      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
-      <NavLinks class="can-hide" />
-    </div>
-  </header>
-</template>
-
-<script>
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
-import SidebarButton from '@theme/components/SidebarButton.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
-
-export default {
-  name: 'Navbar',
-
-  components: {
-    SidebarButton,
-    NavLinks,
-    SearchBox,
-    AlgoliaSearchBox
-  },
-
-  data () {
-    return {
-      linksWrapMaxWidth: null
-    }
-  },
-
-  computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-    },
-
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
-    }
-  },
-
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null
-      } else {
-        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
-          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
-      }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
-  }
-}
-
-function css (el, property) {
-  // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView
-  // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property]
-}
-</script>
-
-<style lang="stylus">
-$navbar-vertical-padding = 0.7rem
-$navbar-horizontal-padding = 1.5rem
-
-.navbar
-  padding $navbar-vertical-padding $navbar-horizontal-padding
-  line-height $navbarHeight - 1.4rem
-  a, span, img
-    display inline-block
-  .logo
-    height $navbarHeight - 1.4rem
-    min-width $navbarHeight - 1.4rem
-    margin-right 0.8rem
-    vertical-align top
-  .links
-    padding-left 1.5rem
-    box-sizing border-box
-    background-color white
-    white-space nowrap
-    font-size 0.9rem
-    position absolute
-    right $navbar-horizontal-padding
-    top $navbar-vertical-padding
-    display flex
-    .search-box
-      flex: 0 0 auto
-      vertical-align top
-
-@media (max-width: $MQMobile)
-  .navbar
-    padding-left 4rem
-    .can-hide
-      display none
-    .links
-      padding-left 1.5rem
-</style>
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
deleted file mode 100644
index 3e8bafc4..00000000
--- a/docs/.vuepress/theme/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-    extend: "@vuepress/theme-default",
-};
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 00000000..26c10142
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,27 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "LaTeX.js"
+  text: "A LaTeX parser in JavaScript."
+  tagline: Renders LaTeX into HTML for web viewing.
+  image:
+    src: /img/latexjs.png
+    alt: LaTeX.js Logo
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /usage
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/michael-brade/LaTeX.js
+
+features:
+  - title: Browser & Server
+    details: Runs in the browser or on the server with Node.js.
+  - title: Extendable
+    details: Provides a simple API for extending the parser with custom macros.
+  - title: Self-Contained
+    details: Requires no external services to render LaTeX.
+---
\ No newline at end of file
diff --git a/docs/playground.md b/docs/playground.md
index 004541e1..02524a4e 100644
--- a/docs/playground.md
+++ b/docs/playground.md
@@ -1,14 +1,19 @@
 ---
-pageClass: fullWidth
-title: LaTeX.js Live Playground
-sidebar: false
-meta:
-  - name: description
-    content: This is the LaTeX.js editor with live preview.
-  - name: keywords
-    content: LaTeX,LaTeX.js,JavaScript,HTML,editor,live,preview
+layout: false     # no default theme: full-page playground
 ---
 
-<ClientOnly>
+<div id="playground-page">
   <LtxPlayground />
-</ClientOnly>
+</div>
+
+<script setup>
+import LtxPlayground from './.vitepress/theme/components/LtxPlayground.vue'
+</script>
+
+<style>
+#playground-page,
+#playground-page > * {
+  height: 100vh;
+  margin: 0;
+}
+</style>
diff --git a/docs/.vuepress/public/CNAME b/docs/public/CNAME
similarity index 100%
rename from docs/.vuepress/public/CNAME
rename to docs/public/CNAME
diff --git a/docs/.vuepress/public/css/error.css b/docs/public/css/error.css
similarity index 100%
rename from docs/.vuepress/public/css/error.css
rename to docs/public/css/error.css
diff --git a/docs/public/css/fade-in.css.map b/docs/public/css/fade-in.css.map
new file mode 100644
index 00000000..33baf051
--- /dev/null
+++ b/docs/public/css/fade-in.css.map
@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": [],
+  "names": [],
+  "mappings": ""
+}
diff --git a/docs/.vuepress/public/css/latexjs.css b/docs/public/css/latexjs.css
similarity index 100%
rename from docs/.vuepress/public/css/latexjs.css
rename to docs/public/css/latexjs.css
diff --git a/docs/.vuepress/public/css/logos.css b/docs/public/css/logos.css
similarity index 100%
rename from docs/.vuepress/public/css/logos.css
rename to docs/public/css/logos.css
diff --git a/docs/.vuepress/public/img/favicon.ico b/docs/public/img/favicon.ico
similarity index 100%
rename from docs/.vuepress/public/img/favicon.ico
rename to docs/public/img/favicon.ico
diff --git a/docs/.vuepress/public/img/latexjs.png b/docs/public/img/latexjs.png
similarity index 100%
rename from docs/.vuepress/public/img/latexjs.png
rename to docs/public/img/latexjs.png
diff --git a/docs/usage.md b/docs/usage.md
index febf534d..71eaa9f1 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -123,11 +123,11 @@ plain text instead of HTML. Currently, only a HTML generator exists.
 
 Import the parser and generator, then parse and translate to HTML:
 
-<<< @/test/api/node.mjs#code
+<<< ../test/api/node.mjs#code
 
 Or using the CommonJS module syntax:
 
-<<< @/test/api/node.js#code
+<<< ../test/api/node.js#code
 
 The `HtmlGenerator` takes several options, see the API section below.
 
@@ -137,7 +137,7 @@ The `HtmlGenerator` takes several options, see the API section below.
 If you want to use the parser and the generator manually, you can either use your own build or use a link directly to
 the jsDelivr CDN:
 
-<<< @/test/api/browser.html
+<<< ../test/api/browser.html
 
 Note that in this case the styles and scripts are not encapsulated, so they can clash with the text and style of the
 containing page.
diff --git a/package.json b/package.json
index 343bfe26..ec9d6541 100644
--- a/package.json
+++ b/package.json
@@ -1,126 +1,132 @@
 {
-  "name": "latex.js",
-  "description": "JavaScript LaTeX to HTML5 translator",
-  "version": "0.12.6",
-  "author": {
-    "name": "Michael Brade",
-    "email": "brade@kde.org"
-  },
-  "keywords": [
-    "pegjs",
-    "latex",
-    "parser",
-    "html5"
-  ],
-  "bin": {
-    "latex.js": "./bin/latex.js"
-  },
-  "module": "./dist/latex.mjs",
-  "main": "./dist/latex.js",
-  "exports": {
-    "import": "./dist/latex.mjs",
-    "require": "./dist/latex.js"
-  },
-  "browser": "./dist/latex.js",
-  "files": [
-    "bin/latex.js",
-    "dist/latex.js",
-    "dist/latex.js.map",
-    "dist/latex.mjs",
-    "dist/latex.mjs.map",
-    "dist/css/",
-    "dist/fonts/",
-    "dist/js/",
-    "dist/packages/",
-    "dist/documentclasses/"
-  ],
-  "scripts": {
-    "clean": "rimraf dist bin test/coverage test/test-results.xml docs/.vuepress/public/js;",
-    "devbuild": "rimraf 'dist/**/*.map';mkdirp dist/css;mkdirp dist/js;mkdirp dist/fonts;mkdirp dist/documentclasses;mkdirp dist/packages;touch dist/documentclasses/.keep;touch dist/packages/.keep;rsync -a src/css/ dist/css/;rsync -a src/fonts/ dist/fonts/;rsync -a node_modules/katex/dist/fonts/*.woff2 dist/fonts/;rsync -a src/js/ dist/js/;mkdirp bin;lsc -bc --no-header -m embedded -p src/cli.ls > bin/latex.js;chmod a+x bin/latex.js;rollup -c;",
-    "build": "NODE_ENV=production npm run devbuild;",
-    "devdocs": "npm run devbuild;vuepress dev docs --no-clear-screen --debug;",
-    "docs": "npm run build;[ ! -d website ] && git worktree add website gh-pages;mv website/.git .website.git;vuepress build docs;mv .website.git website/.git;cd website;git add .;git commit -m 'regenerated website';",
-    "test": "mocha test/*.ls;",
-    "iron": "iron-node node_modules/.bin/_mocha test/*.ls;",
-    "testc": "nyc --include=bin --include=src --include=dist -e ls --reporter=html --reporter=text --reporter=lcovonly --report-dir=test/coverage             npx mocha -i -g screenshot --reporter mocha-junit-reporter --reporter-options mochaFile=./test/test-results.xml test/*.ls&&npx mocha -g screenshot --reporter mocha-junit-reporter --reporter-options mochaFile=./test/screenshots/test-results.xml test/*.ls;",
-    "codecov": "codecov;"
-  },
-  "dependencies": {
-    "commander": "8.x",
-    "fs-extra": "10.x",
-    "js-beautify": "1.14.x",
-    "stdin": "*",
-    "hyphenation.en-us": "*",
-    "hyphenation.de": "*",
-    "svgdom": "^0.1.8"
-  },
-  "devDependencies": {
-    "he": "1.2.x",
-    "katex": "0.13.13",
-    "@svgdotjs/svg.js": "3.x",
-    "hypher": "0.x",
-    "lodash": "4.x",
-    "livescript": "https://github.com/michael-brade/LiveScript",
-    "livescript-transform-esm": "^3.1.0",
-    "livescript-transform-implicit-async": "^1.1.0",
-    "livescript-transform-object-create": "^1.1.0",
-    "pegjs": "0.10.x",
-    "mkdirp": "1.0.x",
-    "rimraf": "3.x",
-    "tmp": "0.x",
-    "glob": "8.0.x",
-    "vuepress": "2.0.0-beta.61",
-    "@vuepress/plugin-register-components": "next",
-    "rollup-plugin-string": "3.0.x",
-    "split-grid": "1.0.x",
-    "@codemirror/autocomplete": "6.x",
-    "@codemirror/commands": "6.x",
-    "@codemirror/language": "6.x",
-    "@codemirror/legacy-modes": "6.x",
-    "@codemirror/lint": "6.x",
-    "@codemirror/search": "6.x",
-    "@codemirror/state": "6.x",
-    "@codemirror/view": "6.x",
-    "vue-codemirror": "6.1.x",
-    "stylus": "0.59.x",
-    "rollup": "3.20.x",
-    "@rollup/plugin-commonjs": "24.1.x",
-    "@rollup/plugin-node-resolve": "15.0.x",
-    "@rollup/plugin-terser": "0.4.x",
-    "rollup-plugin-visualizer": "5.8.x",
-    "mocha": "10.1.x",
-    "mocha-junit-reporter": "2.x",
-    "chai": "4.x",
-    "chai-as-promised": "7.x",
-    "slugify": "1.6.x",
-    "decache": "4.6.x",
-    "puppeteer": "19.1.x",
-    "pixelmatch": "5.3.x",
-    "nyc": "15.x",
-    "codecov": "3.x",
-    "serve-handler": "6.x"
-  },
-  "mocha": {
-    "require": "livescript",
-    "file": "test/lib/setup.ls",
-    "reporter": "spec",
-    "inlineDiffs": true,
-    "timeout": 10000,
-    "ui": "bdd",
-    "checkLeaks": true,
-    "globals": "firefox,chrome",
-    "sort": true
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/michael-brade/LaTeX.js.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/michael-brade/LaTeX.js/issues"
-  },
-  "homepage": "https://latex.js.org",
-  "engines": {
-    "node": ">= 14.0"
-  }
-}
+    "name": "latex.js",
+    "description": "JavaScript LaTeX to HTML5 translator",
+    "version": "0.12.6",
+    "author": {
+        "name": "Michael Brade",
+        "email": "brade@kde.org"
+    },
+    "keywords": [
+        "pegjs",
+        "latex",
+        "parser",
+        "html5"
+    ],
+    "bin": {
+        "latex.js": "./bin/latex.js"
+    },
+    "module": "./dist/latex.mjs",
+    "main": "./dist/latex.js",
+    "exports": {
+        "import": "./dist/latex.mjs",
+        "require": "./dist/latex.js"
+    },
+    "browser": "./dist/latex.js",
+    "files": [
+        "bin/latex.js",
+        "dist/latex.js",
+        "dist/latex.js.map",
+        "dist/latex.mjs",
+        "dist/latex.mjs.map",
+        "dist/css/",
+        "dist/fonts/",
+        "dist/js/",
+        "dist/packages/",
+        "dist/documentclasses/"
+    ],
+    "scripts": {
+        "clean": "rimraf dist bin test/coverage test/test-results.xml website docs/.vitepress/.temp docs/.vitepress/.cache",
+        "devbuild": "rimraf 'dist/**/*.map';mkdirp dist/css;mkdirp dist/js;mkdirp dist/fonts;mkdirp dist/documentclasses;mkdirp dist/packages;touch dist/documentclasses/.keep;touch dist/packages/.keep;rsync -a src/css/ dist/css/;rsync -a src/fonts/ dist/fonts/;rsync -a node_modules/katex/dist/fonts/*.woff2 dist/fonts/;rsync -a src/js/ dist/js/;mkdirp bin;lsc -bc --no-header -m embedded -p src/cli.ls > bin/latex.js;chmod a+x bin/latex.js;rollup -c;",
+        "build": "NODE_ENV=production npm run devbuild;",
+        "prepare-latex-assets": "rimraf docs/public/latexjs; mkdirp docs/public/latexjs/css docs/public/latexjs/fonts docs/public/latexjs/js; rsync -a dist/css/ docs/public/latexjs/css/; rsync -a dist/fonts/ docs/public/latexjs/fonts/; rsync -a dist/js/ docs/public/latexjs/js/;",
+        "devdocs": "npm run devbuild; npm run prepare-latex-assets; vitepress dev docs",
+        "docs": "npm run build; npm run prepare-latex-assets; [ ! -d website ] && git worktree add website gh-pages; mv website/.git .website.git; vitepress build docs; mv .website.git website/.git; cd website; git add .; git commit -m 'regenerated website';",
+        "test": "mocha test/*.ls;",
+        "iron": "iron-node node_modules/.bin/_mocha test/*.ls;",
+        "testc": "nyc --include=bin --include=src --include=dist -e ls --reporter=html --reporter=text --reporter=lcovonly --report-dir=test/coverage             npx mocha -i -g screenshot --reporter mocha-junit-reporter --reporter-options mochaFile=./test/test-results.xml test/*.ls&&npx mocha -g screenshot --reporter mocha-junit-reporter --reporter-options mochaFile=./test/screenshots/test-results.xml test/*.ls;",
+        "codecov": "codecov;"
+    },
+    "dependencies": {
+        "commander": "8.x",
+        "express": "^5.1.0",
+        "fs-extra": "10.x",
+        "hyphenation.de": "*",
+        "hyphenation.en-us": "^0.2.1",
+        "js-beautify": "1.14.x",
+        "stdin": "*",
+        "svgdom": "^0.1.8"
+    },
+    "devDependencies": {
+        "@codemirror/autocomplete": "6.x",
+        "@codemirror/commands": "6.x",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/language": "^6.11.3",
+        "@codemirror/legacy-modes": "^6.5.2",
+        "@codemirror/lint": "6.x",
+        "@codemirror/search": "6.x",
+        "@codemirror/state": "^6.5.2",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.38.7",
+        "@rollup/plugin-commonjs": "24.1.x",
+        "@rollup/plugin-node-resolve": "15.0.x",
+        "@rollup/plugin-terser": "0.4.x",
+        "@svgdotjs/svg.js": "3.x",
+        "chai": "4.x",
+        "chai-as-promised": "7.x",
+        "codecov": "3.x",
+        "decache": "4.6.x",
+        "glob": "8.0.x",
+        "he": "1.2.x",
+        "hypher": "0.x",
+        "katex": "0.13.13",
+        "livescript": "https://github.com/michael-brade/LiveScript",
+        "livescript-transform-esm": "^3.1.0",
+        "livescript-transform-implicit-async": "^1.1.0",
+        "livescript-transform-object-create": "^1.1.0",
+        "lodash": "4.x",
+        "mkdirp": "1.0.x",
+        "mocha": "10.1.x",
+        "mocha-junit-reporter": "2.x",
+        "nyc": "15.x",
+        "pegjs": "0.10.x",
+        "pixelmatch": "5.3.x",
+        "puppeteer": "19.1.x",
+        "rimraf": "3.x",
+        "rollup": "3.20.x",
+        "rollup-plugin-string": "3.0.x",
+        "rollup-plugin-visualizer": "5.8.x",
+        "sass-embedded": "^1.93.3",
+        "serve-handler": "6.x",
+        "slugify": "1.6.x",
+        "split-grid": "1.0.x",
+        "stylus": "^0.59.0",
+        "tmp": "0.x",
+        "vite-plugin-string": "^1.2.3",
+        "vitepress": "^1.6.4",
+        "vue": "^3.5.24",
+        "vue-codemirror": "^6.1.1"
+    },
+    "mocha": {
+        "require": "livescript",
+        "file": "test/lib/setup.ls",
+        "reporter": "spec",
+        "inlineDiffs": true,
+        "timeout": 10000,
+        "ui": "bdd",
+        "checkLeaks": true,
+        "globals": "firefox,chrome",
+        "sort": true
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/michael-brade/LaTeX.js.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/michael-brade/LaTeX.js/issues"
+    },
+    "homepage": "https://latex.js.org",
+    "engines": {
+        "node": ">= 18.0"
+    }
+}
\ No newline at end of file