diff --git a/netlify.toml b/netlify.toml
index f95b9a6833..880427a1e8 100755
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,6 +1,6 @@
 [build]
 publish = "docs/.vitepress/dist"
-command = "pnpm run docs:build"
+command = "pnpm run website:build"
 
 [build.environment]
 NODE_VERSION = "20"
@@ -28,6 +28,11 @@ from = "/demo/vue-runner/*"
 to = "/demo/vue-runner/index.html"
 status = 200
 
+[[redirects]]
+from = "/web/*"
+to = "/web/index.html"
+status = 200
+
 [[redirects]]
 from = "https://slidev.antfu.me/*"
 to = "https://sli.dev/:splat"
diff --git a/package.json b/package.json
index 099592d073..a39a9dc3e5 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,10 @@
     "lint:fix": "nr lint --fix",
     "typecheck": "vue-tsc --noEmit",
     "docs": "pnpm -C docs run dev",
-    "docs:build": "pnpm run --filter {./docs}... build && pnpm demo:build",
+    "docs:build": "pnpm run --filter {./docs}... build",
+    "web": "pnpm -C packages/web run dev",
+    "web:build": "zx ./scripts/web.mjs",
+    "website:build": "pnpm docs:build && pnpm demo:build && pnpm web:build",
     "release": "bumpp package.json packages/*/package.json docs/package.json --all -x \"zx scripts/update-versions.mjs\"",
     "test": "vitest test",
     "prepare": "simple-git-hooks"
diff --git a/packages/client/logic/utils.ts b/packages/client/logic/utils.ts
index c5228b1e5d..0d01830245 100644
--- a/packages/client/logic/utils.ts
+++ b/packages/client/logic/utils.ts
@@ -1,4 +1,4 @@
-import { parseRangeString } from '@slidev/parser/core'
+import { parseRangeString } from '@slidev/parser/utils'
 import { useTimestamp } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
diff --git a/packages/parser/package.json b/packages/parser/package.json
index f8df8fc47a..936289d10c 100644
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -23,6 +23,10 @@
     "./fs": {
       "types": "./dist/fs.d.mts",
       "import": "./dist/fs.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.mts",
+      "import": "./dist/utils.mjs"
     }
   },
   "main": "dist/index.mjs",
@@ -36,7 +40,7 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build": "rimraf dist && tsup src/index.ts src/core.ts src/fs.ts",
+    "build": "rimraf dist && tsup src/index.ts src/core.ts src/fs.ts src/utils.ts",
     "dev": "nr build --watch",
     "prepublishOnly": "npm run build"
   },
diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
index a76e19635e..43d7330aad 100644
--- a/packages/slidev/node/options.ts
+++ b/packages/slidev/node/options.ts
@@ -9,6 +9,7 @@ import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { resolveAddons } from './integrations/addons'
 import { getRoots, resolveEntry } from './resolver'
 import setupShiki from './setups/shiki'
+import { getDefine } from './vite/extendConfig'
 
 const debug = Debug('slidev:options')
 
@@ -61,13 +62,13 @@ export async function resolveOptions(
     themeRoots,
     addonRoots,
     roots,
-    utils: await createDataUtils(data, rootsInfo.clientRoot, roots),
+    utils: await createDataUtils(data, rootsInfo.clientRoot, roots, mode),
   }
 
   return resolved
 }
 
-export async function createDataUtils(data: SlidevData, clientRoot: string, roots: string[]): Promise<ResolvedSlidevUtils> {
+export async function createDataUtils(data: SlidevData, clientRoot: string, roots: string[], mode: string): Promise<ResolvedSlidevUtils> {
   const monacoTypesIgnorePackagesMatches = (data.config.monacoTypesIgnorePackages || [])
     .map(i => mm.matcher(i))
 
@@ -76,6 +77,7 @@ export async function createDataUtils(data: SlidevData, clientRoot: string, root
 
   return {
     ...await setupShiki(roots),
+    defines: getDefine({ data, clientRoot, mode } as any),
     isMonacoTypesIgnored: pkg => monacoTypesIgnorePackagesMatches.some(i => i(pkg)),
     getLayouts: () => {
       const now = Date.now()
diff --git a/packages/slidev/node/vite/compilerFlagsVue.ts b/packages/slidev/node/vite/compilerFlagsVue.ts
index 7d70a38afe..cdf122036d 100644
--- a/packages/slidev/node/vite/compilerFlagsVue.ts
+++ b/packages/slidev/node/vite/compilerFlagsVue.ts
@@ -1,7 +1,6 @@
 import type { Plugin } from 'vite'
 import { objectEntries } from '@antfu/utils'
 import type { ResolvedSlidevOptions } from '@slidev/types'
-import { getDefine } from './extendConfig'
 
 /**
  * Replace compiler flags like `__DEV__` in Vue SFC
@@ -9,7 +8,7 @@ import { getDefine } from './extendConfig'
 export function createVueCompilerFlagsPlugin(
   options: ResolvedSlidevOptions,
 ): Plugin[] {
-  const define = objectEntries(getDefine(options))
+  const define = objectEntries(options.utils.defines)
   return [
     {
       name: 'slidev:flags',
diff --git a/packages/slidev/node/vite/extendConfig.ts b/packages/slidev/node/vite/extendConfig.ts
index 8a02be1c09..1f3eb3ae4c 100644
--- a/packages/slidev/node/vite/extendConfig.ts
+++ b/packages/slidev/node/vite/extendConfig.ts
@@ -70,7 +70,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
     name: 'slidev:config',
     async config(config) {
       const injection: InlineConfig = {
-        define: getDefine(options),
+        define: options.utils.defines,
         resolve: {
           alias: [
             {
diff --git a/packages/slidev/node/vite/layoutWrapper.ts b/packages/slidev/node/vite/layoutWrapper.ts
index 0a92d41258..812850554f 100644
--- a/packages/slidev/node/vite/layoutWrapper.ts
+++ b/packages/slidev/node/vite/layoutWrapper.ts
@@ -1,15 +1,19 @@
 import type { ResolvedSlidevOptions } from '@slidev/types'
 import type { Plugin } from 'vite'
 import { bold, gray, red, yellow } from 'kolorist'
-import { toAtFS } from '../resolver'
+import { ensurePrefix, slash } from '@antfu/utils'
 import { regexSlideSourceId, templateImportContextUtils, templateInitContext, templateInjectionMarker } from './common'
 
+export function toAtFS(path: string) {
+  return `/@fs${ensurePrefix('/', slash(path))}`
+}
+
 export function createLayoutWrapperPlugin(
   { data, utils }: ResolvedSlidevOptions,
 ): Plugin {
   return {
     name: 'slidev:layout-wrapper',
-    async transform(code, id) {
+    transform(code, id) {
       const match = id.match(regexSlideSourceId)
       if (!match)
         return
@@ -17,7 +21,7 @@ export function createLayoutWrapperPlugin(
       if (type !== 'md')
         return
       const index = +no - 1
-      const layouts = await utils.getLayouts()
+      const layouts = utils.getLayouts()
       const rawLayoutName = data.slides[index]?.frontmatter?.layout ?? data.slides[0]?.frontmatter?.default?.layout
       let layoutName = rawLayoutName || (index === 0 ? 'cover' : 'default')
       if (!layouts[layoutName]) {
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index 0d26241e12..551918c3b8 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -200,7 +200,7 @@ export function createSlidesLoader(
       }
 
       Object.assign(data, newData)
-      Object.assign(utils, createDataUtils(newData, clientRoot, roots))
+      Object.assign(utils, createDataUtils(newData, clientRoot, roots, mode))
 
       if (hmrSlidesIndexes.size > 0)
         moduleIds.add(templateTitleRendererMd.id)
diff --git a/packages/types/src/options.ts b/packages/types/src/options.ts
index 15f26266e9..c0523b0df4 100644
--- a/packages/types/src/options.ts
+++ b/packages/types/src/options.ts
@@ -48,6 +48,7 @@ export interface ResolvedSlidevOptions extends RootsInfo, SlidevEntryOptions {
 export interface ResolvedSlidevUtils {
   shiki: HighlighterGeneric<any, any>
   shikiOptions: MarkdownItShikiOptions
+  defines: Record<string, string>
   isMonacoTypesIgnored: (pkg: string) => boolean
   getLayouts: () => Record<string, string>
 }
diff --git a/packages/web/index.html b/packages/web/index.html
new file mode 100644
index 0000000000..631365bd17
--- /dev/null
+++ b/packages/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png">
+  <title>Slidev Online</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/main.ts"></script>
+  <div id="mermaid-rendering-container"></div>
+  <!-- body -->
+</body>
+</html>
diff --git a/packages/web/package.json b/packages/web/package.json
new file mode 100644
index 0000000000..f870578eef
--- /dev/null
+++ b/packages/web/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@slidev/web",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@antfu/utils": "^0.7.10",
+    "@babel/standalone": "^7.25.3",
+    "@slidev/client": "workspace:*",
+    "@slidev/parser": "workspace:*",
+    "@slidev/theme-seriph": "^0.25.0",
+    "@types/babel__standalone": "^7.1.7",
+    "@vue/babel-plugin-jsx": "^1.2.2",
+    "magic-string": "^0.30.10",
+    "ohash": "^1.1.3",
+    "pathe": "^1.1.2",
+    "sucrase": "^3.35.0",
+    "typescript": "^5.5.4",
+    "unocss": "^0.61.5",
+    "unplugin-vue-markdown": "^0.26.2",
+    "vite": "^5.3.4",
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0"
+  }
+}
diff --git a/packages/web/polyfills/node-assert.ts b/packages/web/polyfills/node-assert.ts
new file mode 100644
index 0000000000..63e04681dc
--- /dev/null
+++ b/packages/web/polyfills/node-assert.ts
@@ -0,0 +1,2 @@
+export default function () {
+}
diff --git a/packages/web/polyfills/node-module.ts b/packages/web/polyfills/node-module.ts
new file mode 100644
index 0000000000..745adcfc06
--- /dev/null
+++ b/packages/web/polyfills/node-module.ts
@@ -0,0 +1 @@
+export const createRequire = () => null
diff --git a/packages/web/polyfills/rollup-pluginutils.ts b/packages/web/polyfills/rollup-pluginutils.ts
new file mode 100644
index 0000000000..c6f304aebb
--- /dev/null
+++ b/packages/web/polyfills/rollup-pluginutils.ts
@@ -0,0 +1 @@
+export const createFilter = () => () => true
diff --git a/packages/web/polyfills/unplugin.ts b/packages/web/polyfills/unplugin.ts
new file mode 100644
index 0000000000..511c274925
--- /dev/null
+++ b/packages/web/polyfills/unplugin.ts
@@ -0,0 +1 @@
+export const createUnplugin = () => null
diff --git a/packages/web/src/compiler/file.ts b/packages/web/src/compiler/file.ts
new file mode 100644
index 0000000000..16bfdcbc48
--- /dev/null
+++ b/packages/web/src/compiler/file.ts
@@ -0,0 +1,65 @@
+// Ported from https://github.com/vuejs/repl/blob/main/src/transform.ts
+
+import { compileMd } from './md'
+import { transformTS } from './ts'
+import { isJsLikeFile, isJsxFile, isTsFile } from './utils'
+import { compileVue } from './vue'
+
+export interface CompileResult {
+  js?: string
+  css?: string
+  errors?: (string | Error)[]
+}
+
+export async function compileFile(filepath: string, code: string): Promise<CompileResult> {
+  if (!code.trim()) {
+    return {}
+  }
+
+  if (filepath.endsWith('.css')) {
+    return {
+      css: code,
+    }
+  }
+
+  if (isJsLikeFile(filepath)) {
+    const isJSX = isJsxFile(filepath)
+    if (isTsFile(filepath)) {
+      code = await transformTS(code, isJSX)
+    }
+    if (isJSX) {
+      code = await import('./jsx').then(m => m.transformJSX(code))
+    }
+    return {
+      js: code,
+    }
+  }
+
+  if (filepath.endsWith('.json')) {
+    let parsed
+    try {
+      parsed = JSON.parse(code)
+    }
+    catch (err: any) {
+      console.error(`Error parsing ${filepath}`, err.message)
+      return {
+        errors: [err.message],
+      }
+    }
+    return {
+      js: `export default ${JSON.stringify(parsed)}`,
+    }
+  }
+
+  if (filepath.endsWith('.vue')) {
+    return compileVue(filepath, code)
+  }
+
+  if (filepath.endsWith('.md')) {
+    return compileMd(filepath, code)
+  }
+
+  return {
+    errors: [`Unknown file extension for ${filepath}`],
+  }
+}
diff --git a/packages/web/src/compiler/jsx.ts b/packages/web/src/compiler/jsx.ts
new file mode 100644
index 0000000000..f2f1c5ef75
--- /dev/null
+++ b/packages/web/src/compiler/jsx.ts
@@ -0,0 +1,10 @@
+// Ported from https://github.com/vuejs/repl/blob/main/src/jsx.ts
+
+import { transform } from '@babel/standalone'
+import jsx from '@vue/babel-plugin-jsx'
+
+export async function transformJSX(src: string) {
+  return transform(src, {
+    plugins: [jsx],
+  }).code!
+}
diff --git a/packages/web/src/compiler/md.ts b/packages/web/src/compiler/md.ts
new file mode 100644
index 0000000000..140dbd16aa
--- /dev/null
+++ b/packages/web/src/compiler/md.ts
@@ -0,0 +1,124 @@
+import { unpluginFactory } from 'unplugin-vue-markdown'
+import type { UnpluginOptions } from 'unplugin'
+import { computed } from 'vue'
+import { taskLists as MarkdownItTaskList } from '@hedgedoc/markdown-it-plugins'
+import MarkdownItMdc from 'markdown-it-mdc'
+// @ts-expect-error missing types
+import MarkdownItFootnote from 'markdown-it-footnote'
+import MarkdownItKatex from '@slidev/cli/node/syntax/markdown-it/markdown-it-katex'
+// import MarkdownItVDrag from '@slidev/cli/node/syntax/markdown-it/markdown-it-v-drag'
+// import MarkdownItShiki from '@slidev/cli/node/syntax/markdown-it/markdown-it-shiki'
+import MarkdownItLink from '@slidev/cli/node/syntax/markdown-it/markdown-it-link'
+import MarkdownItEscapeInlineCode from '@slidev/cli/node/syntax/markdown-it/markdown-it-escape-code'
+import type { MarkdownTransformContext } from '@slidev/types'
+import MagicString from 'magic-string-stack'
+import { regexSlideSourceId } from '@slidev/cli/node/vite/common'
+import { transformMonaco } from '@slidev/cli/node/syntax/transform/monaco'
+import { transformCodeWrapper } from '@slidev/cli/node/syntax/transform/code-wrapper'
+import { transformPageCSS } from '@slidev/cli/node/syntax/transform/in-page-css'
+import { transformKaTexWrapper } from '@slidev/cli/node/syntax/transform/katex-wrapper'
+// import { transformMagicMove } from '@slidev/cli/node/syntax/transform/magic-move'
+import { transformMermaid } from '@slidev/cli/node/syntax/transform/mermaid'
+// import { transformPlantUml } from '@slidev/cli/node/syntax/transform/plant-uml'
+import { transformSlotSugar } from '@slidev/cli/node/syntax/transform/slot-sugar'
+// import { transformSnippet } from '@slidev/cli/node/syntax/transform/snippet'
+import { slidesInfo } from '../slides'
+import { mdOptions } from '../configs/plugins'
+import { layoutWrapperPlugin } from '../layouts'
+import type { CompileResult } from './file'
+import { compileVue } from './vue'
+
+const transformers = computed(() => [
+  // transformSnippet,
+  // transformMagicMove,
+
+  transformMermaid,
+  // transformPlantUml,
+  transformMonaco,
+
+  transformCodeWrapper,
+  transformKaTexWrapper,
+  transformPageCSS,
+  transformSlotSugar,
+])
+
+const plugin = computed(() => {
+  const markdownTransformMap = new Map<string, MagicString>()
+  return unpluginFactory({
+    include: [/\.md$/],
+    wrapperClasses: '',
+    headEnabled: false,
+    frontmatter: false,
+    escapeCodeTagInterpolation: false,
+    markdownItOptions: {
+      quotes: '""\'\'',
+      html: true,
+      xhtmlOut: true,
+      linkify: true,
+      ...mdOptions?.markdownItOptions,
+    },
+    ...mdOptions,
+    async markdownItSetup(md) {
+      // md.use(await MarkdownItShiki(options))
+
+      md.use(MarkdownItLink)
+      md.use(MarkdownItEscapeInlineCode)
+      md.use(MarkdownItFootnote)
+      md.use(MarkdownItTaskList, { enabled: true, lineNumber: true, label: true })
+
+      md.use(MarkdownItKatex, [])
+      // md.use(MarkdownItVDrag, markdownTransformMap)
+
+      md.use(MarkdownItMdc)
+
+      await mdOptions?.markdownItSetup?.(md)
+    },
+    transforms: {
+      ...mdOptions?.transforms,
+      before(code, id) {
+        code = mdOptions?.transforms?.before?.(code, id) ?? code
+
+        const match = id.match(regexSlideSourceId)
+        if (!match)
+          return code
+
+        const s = new MagicString(code)
+        markdownTransformMap.set(id, s)
+        const ctx: MarkdownTransformContext = {
+          s,
+          slide: slidesInfo.value[+match[1] - 1],
+          options: {
+            data: {
+              config: {
+                monaco: true,
+              },
+            },
+          } as any,
+        }
+
+        for (const transformer of transformers.value) {
+          if (!transformer)
+            continue
+          transformer(ctx)
+          if (!ctx.s.isEmpty())
+            ctx.s.commit()
+        }
+
+        return s.toString()
+      },
+    },
+  }, {
+    framework: 'vite',
+  }) as UnpluginOptions
+})
+
+export async function compileMd(filename: string, code: string): Promise<CompileResult> {
+  let vue = (await (plugin.value.transform?.call({
+    error: console.error,
+  } as any, code, filename)) as any).code
+
+  // @ts-expect-error uwu
+  vue = layoutWrapperPlugin.transform!.call({} as any, vue, filename)
+
+  return await compileVue(filename, vue)
+}
diff --git a/packages/web/src/compiler/note.ts b/packages/web/src/compiler/note.ts
new file mode 100644
index 0000000000..7677e05117
--- /dev/null
+++ b/packages/web/src/compiler/note.ts
@@ -0,0 +1,28 @@
+import markdownItLink from '@slidev/cli/node/syntax/markdown-it/markdown-it-link'
+import type { Token } from 'markdown-it'
+import MarkdownIt from 'markdown-it'
+
+export const sharedMd = MarkdownIt({ html: true })
+sharedMd.use(markdownItLink)
+
+export function stringifyMarkdownTokens(tokens: Token[]) {
+  return tokens.map(token => token.children
+    ?.filter(t => ['text', 'code_inline'].includes(t.type) && !t.content.match(/^\s*$/))
+    .map(t => t.content.trim())
+    .join(' '))
+    .filter(Boolean)
+    .join(' ')
+}
+
+export function renderNote(text: string = '') {
+  let clickCount = 0
+  const html = sharedMd.render(text
+    // replace [click] marker with span
+    .replace(/\[click(?::(\d+))?\]/gi, (_, count = 1) => {
+      clickCount += Number(count)
+      return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`
+    }),
+  )
+
+  return html
+}
diff --git a/packages/web/src/compiler/ts.ts b/packages/web/src/compiler/ts.ts
new file mode 100644
index 0000000000..2a08e51c93
--- /dev/null
+++ b/packages/web/src/compiler/ts.ts
@@ -0,0 +1,8 @@
+import { transform } from 'sucrase'
+
+export async function transformTS(src: string, isJSX?: boolean) {
+  return transform(src, {
+    transforms: ['typescript', ...(isJSX ? (['jsx'] as const) : [])],
+    jsxRuntime: 'preserve',
+  }).code
+}
diff --git a/packages/web/src/compiler/utils.ts b/packages/web/src/compiler/utils.ts
new file mode 100644
index 0000000000..38e7aff1c5
--- /dev/null
+++ b/packages/web/src/compiler/utils.ts
@@ -0,0 +1,11 @@
+// Ported from https://github.com/vuejs/repl/blob/main/src/transform.ts
+
+export function isJsLikeFile(filename: string | undefined | null) {
+  return !!(filename && /\.[jt]sx?$/.test(filename))
+}
+export function isTsFile(filename: string | undefined | null) {
+  return !!(filename && /(?:\.|\b)tsx?$/.test(filename))
+}
+export function isJsxFile(filename: string | undefined | null) {
+  return !!(filename && /(?:\.|\b)[jt]sx$/.test(filename))
+}
diff --git a/packages/web/src/compiler/vue.ts b/packages/web/src/compiler/vue.ts
new file mode 100644
index 0000000000..55778fdace
--- /dev/null
+++ b/packages/web/src/compiler/vue.ts
@@ -0,0 +1,281 @@
+// Ported from https://github.com/vuejs/repl/blob/main/src/transform.ts
+
+import type { BindingMetadata, CompilerOptions, SFCDescriptor } from 'vue/compiler-sfc'
+import * as compiler from 'vue/compiler-sfc'
+import { toArray } from '@antfu/utils'
+import { hash } from 'ohash'
+import { sfcOptions } from '../configs/plugins'
+import { transformTS } from './ts'
+import type { CompileResult } from './file'
+import { isJsxFile, isTsFile } from './utils'
+
+export const COMP_IDENTIFIER = `__sfc__`
+
+async function doCompileScript(
+  descriptor: SFCDescriptor,
+  id: string,
+  ssr: boolean,
+  isTS: boolean,
+  isJSX: boolean,
+): Promise<[code: string, bindings: BindingMetadata | undefined]> {
+  if (descriptor.script || descriptor.scriptSetup) {
+    const expressionPlugins: CompilerOptions['expressionPlugins'] = []
+    if (isTS) {
+      expressionPlugins.push('typescript')
+    }
+    if (isJSX) {
+      expressionPlugins.push('jsx')
+    }
+
+    const compiledScript = compiler.compileScript(descriptor, {
+      inlineTemplate: true,
+      ...sfcOptions?.script,
+      id,
+      genDefaultAs: COMP_IDENTIFIER,
+      templateOptions: {
+        ...sfcOptions?.template,
+        ssr,
+        ssrCssVars: descriptor.cssVars,
+        compilerOptions: {
+          ...sfcOptions?.template?.compilerOptions,
+          expressionPlugins,
+        },
+      },
+    })
+    let code = compiledScript.content
+    if (isTS) {
+      code = await transformTS(code, isJSX)
+    }
+    if (isJSX) {
+      code = await import('./jsx').then(m => m.transformJSX(code))
+    }
+
+    return [code, compiledScript.bindings]
+  }
+  else {
+    return [`\nconst ${COMP_IDENTIFIER} = {}`, undefined]
+  }
+}
+
+async function doCompileTemplate(
+  descriptor: SFCDescriptor,
+  id: string,
+  bindingMetadata: BindingMetadata | undefined,
+  ssr: boolean,
+  isTS: boolean,
+  isJSX: boolean,
+) {
+  const expressionPlugins: CompilerOptions['expressionPlugins'] = []
+  if (isTS) {
+    expressionPlugins.push('typescript')
+  }
+  if (isJSX) {
+    expressionPlugins.push('jsx')
+  }
+
+  let { code, errors } = compiler.compileTemplate({
+    isProd: false,
+    ...sfcOptions?.template,
+    ast: descriptor.template!.ast,
+    source: descriptor.template!.content,
+    filename: descriptor.filename,
+    id,
+    scoped: descriptor.styles.some(s => s.scoped),
+    slotted: descriptor.slotted,
+    ssr,
+    ssrCssVars: descriptor.cssVars,
+    compilerOptions: {
+      ...sfcOptions?.template?.compilerOptions,
+      bindingMetadata,
+      expressionPlugins,
+    },
+  })
+  if (errors.length) {
+    return errors
+  }
+
+  const fnName = ssr ? `ssrRender` : `render`
+
+  code
+    = `\n${code.replace(
+      /\nexport (function|const) (render|ssrRender)/,
+      `$1 ${fnName}`,
+    )}` + `\n${COMP_IDENTIFIER}.${fnName} = ${fnName}`
+
+  if (isTS) {
+    code = await transformTS(code, isJSX)
+  }
+  if (isJSX) {
+    code = await import('./jsx').then(m => m.transformJSX(code))
+  }
+
+  return code
+}
+
+function isCustomElement(filename: string) {
+  const filter = sfcOptions.customElement || /\.ce\.vue$/
+  if (filter === true) {
+    return true
+  }
+  return toArray(filter).some((f) => {
+    if (typeof f === 'string') {
+      return filename.includes(f)
+    }
+    return f.test(filename)
+  })
+}
+
+export async function compileVue(filename: string, code: string): Promise<CompileResult> {
+  const id = hash(filename)
+  const { errors, descriptor } = compiler.parse(code, {
+    filename,
+    sourceMap: true,
+    templateParseOptions: sfcOptions?.template?.compilerOptions,
+  })
+  if (errors.length) {
+    return {
+      errors,
+    }
+  }
+
+  const styleLangs = descriptor.styles.map(s => s.lang).filter(Boolean)
+  const templateLang = descriptor.template?.lang
+  if (styleLangs.length && templateLang) {
+    return {
+      errors: [
+      `lang="${styleLangs.join(
+        ',',
+      )}" pre-processors for <style> and lang="${templateLang}" `
+      + `for <template> are currently not supported.`,
+      ],
+    }
+  }
+  else if (styleLangs.length) {
+    return {
+      errors: [
+      `lang="${styleLangs.join(
+        ',',
+      )}" pre-processors for <style> are currently not supported.`,
+      ],
+    }
+  }
+  else if (templateLang) {
+    return {
+      errors: [
+      `lang="${templateLang}" pre-processors for `
+      + `<template> are currently not supported.`,
+      ],
+    }
+  }
+
+  const scriptLang = descriptor.script?.lang || descriptor.scriptSetup?.lang
+  const isTS = isTsFile(scriptLang)
+  const isJSX = isJsxFile(scriptLang)
+
+  if (scriptLang && scriptLang !== 'js' && !isTS && !isJSX) {
+    return {
+      errors: [`Unsupported lang "${scriptLang}" in <script> blocks.`],
+    }
+  }
+
+  const hasScoped = descriptor.styles.some(s => s.scoped)
+  let clientCode = ''
+
+  let clientScript: string
+  let bindings: compiler.BindingMetadata | undefined
+  try {
+    ;[clientScript, bindings] = await doCompileScript(
+      descriptor,
+      id,
+      false,
+      isTS,
+      isJSX,
+    )
+  }
+  catch (e: any) {
+    return {
+      errors: [e.stack.split('\n').slice(0, 12).join('\n')],
+    }
+  }
+
+  clientCode += clientScript
+
+  // template
+  // only need dedicated compilation if not using <script setup>
+  if (
+    descriptor.template
+    && (!descriptor.scriptSetup)
+  ) {
+    const clientTemplateResult = await doCompileTemplate(
+      descriptor,
+      id,
+      bindings,
+      false,
+      isTS,
+      isJSX,
+    )
+    if (Array.isArray(clientTemplateResult)) {
+      return {
+        errors: clientTemplateResult,
+      }
+    }
+    clientCode += `;${clientTemplateResult}`
+  }
+
+  if (hasScoped) {
+    clientCode += `\n${COMP_IDENTIFIER}.__scopeId = ${JSON.stringify(`data-v-${id}`)}`
+  }
+
+  // styles
+  const isCE = isCustomElement(filename)
+
+  let css = ''
+  const styles: string[] = []
+  for (const style of descriptor.styles) {
+    if (style.module) {
+      return {
+        errors: [`<style module> is not supported in the playground.`],
+      }
+    }
+
+    const styleResult = await compiler.compileStyleAsync({
+      ...sfcOptions?.style,
+      source: style.content,
+      filename,
+      id,
+      scoped: style.scoped,
+      modules: !!style.module,
+    })
+    if (styleResult.errors.length) {
+      // postcss uses pathToFileURL which isn't polyfilled in the browser
+      // ignore these errors for now
+      if (!styleResult.errors[0].message.includes('pathToFileURL')) {
+        // store.errors = styleResult.errors
+      }
+      // proceed even if css compile errors
+    }
+    else {
+      if (isCE) {
+        styles.push(styleResult.code)
+      }
+      else {
+        css += `${styleResult.code}\n`
+      }
+    }
+  }
+
+  if (clientCode) {
+    const ceStyles = isCE
+      ? `\n${COMP_IDENTIFIER}.styles = ${JSON.stringify(styles)}`
+      : ''
+
+    clientCode += `\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}${
+        ceStyles
+        }\nexport default ${COMP_IDENTIFIER}`
+  }
+
+  return {
+    css: css.trim(),
+    js: clientCode.trimStart(),
+  }
+}
diff --git a/packages/web/src/composables/useSlideInfo.ts b/packages/web/src/composables/useSlideInfo.ts
new file mode 100644
index 0000000000..dc0f4a8f9d
--- /dev/null
+++ b/packages/web/src/composables/useSlideInfo.ts
@@ -0,0 +1,56 @@
+import type { UseSlideInfo } from '@slidev/client/composables/useSlideInfo'
+import type { SlidePatch } from '@slidev/types'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, ref, unref } from 'vue'
+import { slidesInfo, slidesSource } from '../slides'
+
+export function useSlideInfo(no: number): UseSlideInfo {
+  const info = ref({ ...slidesInfo.value[no - 1], source: {} as any })
+
+  const update = async (data: SlidePatch) => {
+    const slide = slidesSource[no - 1]
+    if (data.content)
+      slide.content = data.content
+    if (data.note)
+      slide.note = data.note
+    if (data.frontmatter) {
+      for (const [k, v] of Object.entries(data.frontmatter)) {
+        if (v == null)
+          delete slide.frontmatter[k]
+        else
+          slide.frontmatter[k] = v
+      }
+    }
+  }
+
+  return {
+    info,
+    update,
+  }
+}
+
+const map: Record<number, UseSlideInfo> = {}
+
+export function useDynamicSlideInfo(no: MaybeRef<number>) {
+  function get(no: number) {
+    return map[no] ??= useSlideInfo(no)
+  }
+
+  return {
+    info: computed({
+      get() {
+        return get(unref(no)).info.value
+      },
+      set(newInfo) {
+        get(unref(no)).info.value = newInfo
+      },
+    }),
+    update: async (data: SlidePatch, newId?: number) => {
+      const info = get(newId ?? unref(no))
+      const newData = await info.update(data)
+      if (newData)
+        info.info.value = newData
+      return newData
+    },
+  }
+}
diff --git a/packages/web/src/configs/plugins.ts b/packages/web/src/configs/plugins.ts
new file mode 100644
index 0000000000..59913591bd
--- /dev/null
+++ b/packages/web/src/configs/plugins.ts
@@ -0,0 +1,12 @@
+import type { SlidevPluginOptions } from '@slidev/types'
+import { reactive } from 'vue'
+
+// export interface SFCOptions {
+//   script?: Partial<SFCScriptCompileOptions>
+//   style?: Partial<SFCAsyncStyleCompileOptions>
+//   template?: Partial<SFCTemplateCompileOptions>
+// }
+
+export const sfcOptions = reactive<NonNullable<SlidevPluginOptions['vue']>>({})
+
+export const mdOptions = reactive<NonNullable<SlidevPluginOptions['markdown']>>({})
diff --git a/packages/web/src/configs/slidev.ts b/packages/web/src/configs/slidev.ts
new file mode 100644
index 0000000000..489b3cf369
--- /dev/null
+++ b/packages/web/src/configs/slidev.ts
@@ -0,0 +1,7 @@
+import { getDefaultConfig } from '@slidev/parser'
+import { shallowReactive } from 'vue'
+
+export default shallowReactive<typeof import('#slidev/configs').default>({
+  ...getDefaultConfig(),
+  slidesTitle: 'TODO',
+})
diff --git a/packages/web/src/fs.ts b/packages/web/src/fs.ts
new file mode 100644
index 0000000000..4378c86165
--- /dev/null
+++ b/packages/web/src/fs.ts
@@ -0,0 +1,26 @@
+import type { Ref } from 'vue'
+
+export interface File {
+  type: 'text' | 'binary'
+  content: Ref<string> | Ref<ArrayBuffer>
+}
+
+export interface Directory {
+  name: string
+  directories: Directory[]
+  files: Record<string, Ref<string>>
+}
+
+// const root = reactive({
+//   name: '~',
+//   directories: [],
+//   files: {},
+// })
+
+// export function mkdir(path: string) {
+//   return reactive({
+//     name,
+//     directories,
+//     files,
+//   })
+// }
diff --git a/packages/web/src/layouts.ts b/packages/web/src/layouts.ts
new file mode 100644
index 0000000000..e8ee24afab
--- /dev/null
+++ b/packages/web/src/layouts.ts
@@ -0,0 +1,42 @@
+import { createLayoutWrapperPlugin } from '@slidev/cli/node/vite/layoutWrapper'
+import { slidesInfo } from './slides'
+import { moduleLoaders } from './runtime/module'
+
+import '@slidev/theme-seriph/styles/index'
+
+const layoutsRaw = [
+  import.meta.glob('../../client/layouts/*.vue', { eager: true }),
+  import.meta.glob('../node_modules/@slidev/theme-default/layouts/*.vue', { eager: true }),
+]
+
+const layouts: Record<string, any> = {}
+
+for (const raw of layoutsRaw) {
+  for (const path in raw) {
+    const name = path.match(/([^/]+)\.vue$/)![1]
+    layouts[name] = raw[path]
+  }
+}
+
+function registerLoaders() {
+  for (const name in layouts) {
+    moduleLoaders[`/@fs/slidev-layouts:${name}`] = async () => layouts[name]
+  }
+}
+
+registerLoaders()
+
+export const layoutWrapperPlugin = createLayoutWrapperPlugin({
+  data: {
+    get slides() {
+      return slidesInfo.value
+    },
+  },
+  utils: {
+    getLayouts() {
+      return Object.fromEntries(
+        Object.keys(layouts).map(i => [i, `slidev-layouts:${i}`]),
+      )
+    },
+  },
+} as any)
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
new file mode 100644
index 0000000000..7daa0f55ab
--- /dev/null
+++ b/packages/web/src/main.ts
@@ -0,0 +1,9 @@
+/// <reference types="@slidev/types/client" />
+
+import { createApp } from 'vue'
+import setupMain from '../../client/setup/main'
+import App from '../../client/App.vue'
+
+const app = createApp(App)
+setupMain(app)
+app.mount('#app')
diff --git a/packages/web/src/runtime/css.ts b/packages/web/src/runtime/css.ts
new file mode 100644
index 0000000000..a49e724623
--- /dev/null
+++ b/packages/web/src/runtime/css.ts
@@ -0,0 +1,5 @@
+// const cssRegistries = new Map<string, string>();
+
+// let index = 0;
+
+// useStyleTag()
diff --git a/packages/web/src/runtime/module.ts b/packages/web/src/runtime/module.ts
new file mode 100644
index 0000000000..6a5c8b4ea4
--- /dev/null
+++ b/packages/web/src/runtime/module.ts
@@ -0,0 +1,265 @@
+// Ported from https://github.com/vuejs/repl/blob/main/src/output/moduleCompiler.ts
+
+import MagicString from 'magic-string'
+import { babelParse, extractIdentifiers, isInDestructureAssignment, isStaticProperty, walk, walkIdentifiers } from 'vue/compiler-sfc'
+import type { ExportSpecifier, Identifier, Node } from '@babel/types'
+import { basename, dirname, resolve } from 'pathe'
+import * as vueModule from 'vue'
+
+const importKey = `__import__`
+const exportKey = `__export__`
+const moduleKey = `__module__`
+
+export const moduleLoaders: Record<string, () => Promise<any>> = Object.create(null)
+moduleLoaders.vue = async () => vueModule
+moduleLoaders['@slidev/client/context.ts'] = async () => import('@slidev/client/context')
+
+// Similar to `Function`, but async
+const AsyncFunction: any = async function () {}.constructor
+
+export function evalJs(src: string, filepath: string): () => Promise<any> {
+  delete moduleLoaders[filepath]
+
+  const filedir = dirname(filepath)
+  const filename = basename(filepath)
+  const { code } = processModule(src, filename)
+  const fn = new AsyncFunction(importKey, exportKey, code)
+  let loaded: any
+  return moduleLoaders[filepath] = () => loaded ??= fn(
+    async (specifier: string) => {
+      // TODO: assets
+
+      // File
+      if ('./'.includes(specifier[0])) {
+        const path = resolve(filedir, specifier)
+        const possibleFiles = [
+          path,
+          `${path}.ts`,
+          `${path}.js`,
+          path.replace(/.ts$/, '.js'),
+          path.replace(/.js$/, '.ts'),
+        ]
+        for (const path of possibleFiles) {
+          if (moduleLoaders[path]) {
+            return moduleLoaders[path]()
+          }
+        }
+      }
+
+      // Special module
+      if (moduleLoaders[specifier]) {
+        return moduleLoaders[specifier]()
+      }
+
+      throw new Error(`Failed to resolve module: ${specifier}`)
+    },
+    (mod: any, key: string, get: () => any) => {
+      Object.defineProperty(mod, key, {
+        enumerable: true,
+        configurable: true,
+        get,
+      })
+    },
+  )
+}
+
+function processModule(src: string, filename: string) {
+  const s = new MagicString(src)
+
+  const ast = babelParse(src, {
+    sourceFilename: filename,
+    sourceType: 'module',
+  }).program.body
+
+  const idToImportMap = new Map<string, string>()
+  const declaredConst = new Set<string>()
+  const importedFiles = new Set<string>()
+  const importToIdMap = new Map<string, string>()
+
+  function defineImport(node: Node, source: string) {
+    if (importedFiles.has(source)) {
+      return importToIdMap.get(source)!
+    }
+    importedFiles.add(source)
+    const id = `__import_${importedFiles.size}__`
+    importToIdMap.set(source, id)
+    s.appendLeft(
+      node.start!,
+      `const ${id} = await ${importKey}(${JSON.stringify(source)})\n`,
+    )
+    return id
+  }
+
+  function defineExport(name: string, local = name) {
+    s.append(`\n${exportKey}(${moduleKey}, "${name}", () => ${local})`)
+  }
+
+  // 0. instantiate module
+  s.prepend(
+    `const ${moduleKey} = { [Symbol.toStringTag]: "Module" }\n\n`,
+  )
+
+  // 1. check all import statements and record id -> importName map
+  for (const node of ast) {
+    // import foo from 'foo' --> foo -> __import_foo__.default
+    // import { baz } from 'foo' --> baz -> __import_foo__.baz
+    // import * as ok from 'foo' --> ok -> __import_foo__
+    if (node.type === 'ImportDeclaration') {
+      const importId = defineImport(node, node.source.value)
+      for (const spec of node.specifiers) {
+        if (spec.type === 'ImportSpecifier') {
+          idToImportMap.set(
+            spec.local.name,
+              `${importId}.${(spec.imported as Identifier).name}`,
+          )
+        }
+        else if (spec.type === 'ImportDefaultSpecifier') {
+          idToImportMap.set(spec.local.name, `${importId}.default`)
+        }
+        else {
+          // namespace specifier
+          idToImportMap.set(spec.local.name, importId)
+        }
+      }
+      s.remove(node.start!, node.end!)
+    }
+  }
+
+  // 2. check all export statements and define exports
+  for (const node of ast) {
+    // named exports
+    if (node.type === 'ExportNamedDeclaration') {
+      if (node.declaration) {
+        if (
+          node.declaration.type === 'FunctionDeclaration'
+          || node.declaration.type === 'ClassDeclaration'
+        ) {
+          // export function foo() {}
+          defineExport(node.declaration.id!.name)
+        }
+        else if (node.declaration.type === 'VariableDeclaration') {
+          // export const foo = 1, bar = 2
+          for (const decl of node.declaration.declarations) {
+            for (const id of extractIdentifiers(decl.id)) {
+              defineExport(id.name)
+            }
+          }
+        }
+        s.remove(node.start!, node.declaration.start!)
+      }
+      else if (node.source) {
+        // export { foo, bar } from './foo'
+        const importId = defineImport(node, node.source.value)
+        for (const spec of node.specifiers) {
+          defineExport(
+            (spec.exported as Identifier).name,
+            `${importId}.${(spec as ExportSpecifier).local.name}`,
+          )
+        }
+        s.remove(node.start!, node.end!)
+      }
+      else {
+        // export { foo, bar }
+        for (const spec of node.specifiers) {
+          const local = (spec as ExportSpecifier).local.name
+          const binding = idToImportMap.get(local)
+          defineExport((spec.exported as Identifier).name, binding || local)
+        }
+        s.remove(node.start!, node.end!)
+      }
+    }
+
+    // default export
+    if (node.type === 'ExportDefaultDeclaration') {
+      if ('id' in node.declaration && node.declaration.id) {
+        // named hoistable/class exports
+        // export default function foo() {}
+        // export default class A {}
+        const { name } = node.declaration.id
+        s.remove(node.start!, node.start! + 15)
+        s.append(`\n${exportKey}(${moduleKey}, "default", () => ${name})`)
+      }
+      else {
+        // anonymous default exports
+        s.overwrite(node.start!, node.start! + 14, `${moduleKey}.default =`)
+      }
+    }
+
+    // export * from './foo'
+    if (node.type === 'ExportAllDeclaration') {
+      const importId = defineImport(node, node.source.value)
+      s.remove(node.start!, node.end!)
+      s.append(`\nfor (const key in ${importId}) {
+        if (key !== 'default') {
+          ${exportKey}(${moduleKey}, key, () => ${importId}[key])
+        }
+      }`)
+    }
+  }
+
+  // 3. convert references to import bindings
+  for (const node of ast) {
+    if (node.type === 'ImportDeclaration')
+      continue
+    walkIdentifiers(node, (id, parent, parentStack) => {
+      const binding = idToImportMap.get(id.name)
+      if (!binding) {
+        return
+      }
+      if (parent && isStaticProperty(parent) && parent.shorthand) {
+        // let binding used in a property shorthand
+        // { foo } -> { foo: __import_x__.foo }
+        // skip for destructure patterns
+        if (
+          !(parent as any).inPattern
+          || isInDestructureAssignment(parent, parentStack)
+        ) {
+          s.appendLeft(id.end!, `: ${binding}`)
+        }
+      }
+      else if (
+        parent
+        && parent.type === 'ClassDeclaration'
+        && id === parent.superClass
+      ) {
+        if (!declaredConst.has(id.name)) {
+          declaredConst.add(id.name)
+          // locate the top-most node containing the class declaration
+          const topNode = parentStack[1]
+          s.prependRight(topNode.start!, `const ${id.name} = ${binding};\n`)
+        }
+      }
+      else {
+        s.overwrite(id.start!, id.end!, binding)
+      }
+    })
+  }
+
+  // 4. convert dynamic imports
+  let hasDynamicImport = false
+  walk(ast, {
+    enter(node: Node, parent: Node) {
+      if (node.type === 'Import' && parent.type === 'CallExpression') {
+        const arg = parent.arguments[0]
+        if (arg.type === 'StringLiteral' && arg.value.startsWith('./')) {
+          hasDynamicImport = true
+          s.overwrite(node.start!, node.start! + 6, importKey)
+          s.overwrite(
+            arg.start!,
+            arg.end!,
+            JSON.stringify(arg.value.replace(/^\.\/+/, 'src/')),
+          )
+        }
+      }
+    },
+  })
+
+  // 5. return the module
+  s.append(`\n\nreturn ${moduleKey}`)
+
+  return {
+    code: s.toString(),
+    importedFiles,
+    hasDynamicImport,
+  }
+}
diff --git a/packages/web/src/slides.ts b/packages/web/src/slides.ts
new file mode 100644
index 0000000000..de953cca5d
--- /dev/null
+++ b/packages/web/src/slides.ts
@@ -0,0 +1,38 @@
+import type { SlideInfo, SourceSlideInfo } from '@slidev/types'
+import { computed, reactive } from 'vue'
+
+export interface SlideSource {
+  frontmatter: Record<string, string>
+  content: string
+  note: string
+}
+
+export const slidesSource = reactive<SlideSource[]>([
+  {
+    frontmatter: {},
+    content: `# Hello\n\nThis is a slide\n\nCompiled in the **browser**`,
+    note: '',
+  },
+])
+
+export const slidesSourcesInfo = computed<SourceSlideInfo[]>(() => slidesSource.map(
+  (s, i) => ({
+    frontmatter: s.frontmatter,
+    content: s.content,
+    filepath: `/slides.md__slidev_${i}.md`,
+    index: i,
+    start: 0,
+    contentStart: 0,
+    end: 0,
+    raw: '',
+  } satisfies SourceSlideInfo),
+))
+
+export const slidesInfo = computed<SlideInfo[]>(() => slidesSourcesInfo.value.map(
+  (s, i) => ({
+    frontmatter: s.frontmatter,
+    content: s.content,
+    index: i,
+    source: s,
+  } satisfies SlideInfo),
+))
diff --git a/packages/web/src/virtual/configs.ts b/packages/web/src/virtual/configs.ts
new file mode 100644
index 0000000000..e9fb2288c0
--- /dev/null
+++ b/packages/web/src/virtual/configs.ts
@@ -0,0 +1 @@
+export { default } from '../configs/slidev'
diff --git a/packages/web/src/virtual/global-layers.ts b/packages/web/src/virtual/global-layers.ts
new file mode 100644
index 0000000000..0c1462df79
--- /dev/null
+++ b/packages/web/src/virtual/global-layers.ts
@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue'
+
+const EmptyComponent = defineComponent(() => () => [])
+
+export const GlobalTop = EmptyComponent
+export const GlobalBottom = EmptyComponent
+
+export const SlideTop = EmptyComponent
+export const SlideBottom = EmptyComponent
diff --git a/packages/web/src/virtual/nav-controls.vue b/packages/web/src/virtual/nav-controls.vue
new file mode 100644
index 0000000000..9e7a5d71de
--- /dev/null
+++ b/packages/web/src/virtual/nav-controls.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useNav } from '@slidev/client'
+import IconButton from '@slidev/client/internals/IconButton.vue'
+import { slidesSource } from '../slides'
+
+const nav = useNav()
+
+function add() {
+  slidesSource.push({
+    frontmatter: {},
+    content: `# ${slidesSource.length + 1}`,
+    note: '',
+  })
+  nav.goLast()
+}
+
+function remove() {
+  if (nav.currentSlideNo.value === nav.total.value) {
+    nav.prevSlide()
+  }
+  slidesSource.splice(nav.currentSlideNo.value - 1, 1)
+}
+</script>
+
+<template>
+  <IconButton class="slidev-icon" title="Add Slide" @click="add">
+    <carbon:add-large />
+  </IconButton>
+  <IconButton class="slidev-icon" title="Remove Slide" :disabled="nav.total.value === 1" @click="remove">
+    <carbon:trash-can />
+  </IconButton>
+</template>
diff --git a/packages/web/src/virtual/shiki.ts b/packages/web/src/virtual/shiki.ts
new file mode 100644
index 0000000000..e690e94be6
--- /dev/null
+++ b/packages/web/src/virtual/shiki.ts
@@ -0,0 +1,39 @@
+import { createHighlighterCore } from 'shiki/core'
+
+export { shikiToMonaco } from '@shikijs/monaco'
+export const languages = ['markdown', 'vue', 'javascript', 'typescript', 'html', 'css']
+export const themes = [
+  'vitesse-dark',
+  'vitesse-light',
+]
+export const shiki = createHighlighterCore({
+  themes: [
+    import('shiki/themes/vitesse-dark.mjs'),
+    import('shiki/themes/vitesse-light.mjs'),
+  ],
+  langs: [
+    import('shiki/langs/markdown.mjs'),
+    import('shiki/langs/vue.mjs'),
+    import('shiki/langs/javascript.mjs'),
+    import('shiki/langs/typescript.mjs'),
+    import('shiki/langs/html.mjs'),
+    import('shiki/langs/css.mjs'),
+  ],
+  loadWasm: import('shiki/wasm'),
+})
+let highlight: any
+export async function getHighlighter() {
+  if (highlight)
+    return highlight
+  const highlighter = await shiki
+  highlight = (code: string, lang: string, options: any) => highlighter.codeToHtml(code, {
+    lang,
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+    defaultColor: false,
+    ...options,
+  })
+  return highlight
+}
diff --git a/packages/web/src/virtual/slides.ts b/packages/web/src/virtual/slides.ts
new file mode 100644
index 0000000000..da9be67670
--- /dev/null
+++ b/packages/web/src/virtual/slides.ts
@@ -0,0 +1,51 @@
+import { computed, defineAsyncComponent } from 'vue'
+import type { SlideRoute } from '@slidev/types'
+import SlideError from '@slidev/client/layouts/error.vue'
+import SlideLoading from '@slidev/client/internals/SlideLoading.vue'
+import { slidesInfo } from '../slides'
+import { renderNote } from '../compiler/note'
+import { evalJs } from '../runtime/module'
+import { compileMd } from '../compiler/md'
+
+function getAsyncComponent(idx: number, loader: () => Promise<any>) {
+  return defineAsyncComponent({
+    loader,
+    delay: 300,
+    loadingComponent: SlideLoading,
+    errorComponent: SlideError,
+    onError: e => console.error(`Failed to load slide ${idx + 1}`, e),
+  })
+}
+
+export const slides = computed<SlideRoute[]>(() => slidesInfo.value.map((s, i) => {
+  const no = i + 1
+  let loaded: any
+  const loader = async () => {
+    if (loaded)
+      return loaded
+    const { js, errors } = await compileMd(s.source.filepath, s.source.content)
+    if (!js || errors?.length) {
+      console.error(`Failed to compile slide ${no}`, errors)
+      return SlideError
+    }
+    return loaded = await evalJs(js!, s.source.filepath)()
+  }
+
+  return {
+    no,
+    meta: {
+      slide: {
+        ...s,
+        noteHTML: renderNote(s?.note),
+        frontmatter: s.frontmatter,
+        filepath: s.source.filepath,
+        start: Number.NaN,
+        id: i,
+        no,
+      },
+      __clicksContext: null,
+    },
+    load: async () => ({ default: await loader() }),
+    component: getAsyncComponent(i, loader),
+  } satisfies SlideRoute
+}))
diff --git a/packages/web/src/virtual/styles.ts b/packages/web/src/virtual/styles.ts
new file mode 100644
index 0000000000..0268a911fb
--- /dev/null
+++ b/packages/web/src/virtual/styles.ts
@@ -0,0 +1,16 @@
+import '@unocss/reset/tailwind.css'
+import 'uno:preflights.css'
+import 'uno:typography.css'
+import 'uno:shortcuts.css'
+
+import '@slidev/client/styles/vars.css'
+import '@slidev/client/styles/index.css'
+import '@slidev/client/styles/code.css'
+import '@slidev/client/styles/katex.css'
+import '@slidev/client/styles/transitions.css'
+import 'katex/dist/katex.min.css'
+import '@shikijs/vitepress-twoslash/style.css'
+import '@slidev/client/styles/shiki-twoslash.css'
+import 'shiki-magic-move/style.css'
+
+import 'uno.css'
diff --git a/packages/web/src/virtual/title-renderer.vue b/packages/web/src/virtual/title-renderer.vue
new file mode 100644
index 0000000000..020a01b8fa
--- /dev/null
+++ b/packages/web/src/virtual/title-renderer.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSlideContext } from '@slidev/client/context'
+
+const props = defineProps<{ no?: number | string }>()
+const { $page } = useSlideContext()
+const no = computed(() => +(props.no ?? $page.value))
+</script>
+
+<template>
+  Title {{ no }}
+</template>
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
new file mode 100644
index 0000000000..5c6423f62d
--- /dev/null
+++ b/packages/web/vite.config.ts
@@ -0,0 +1,107 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, normalizePath } from 'vite'
+import UnoCSS from 'unocss/vite'
+import type { ResolvedSlidevOptions, SlidevPluginOptions } from '@slidev/types'
+import { createVueCompilerFlagsPlugin } from '../slidev/node/vite/compilerFlagsVue'
+import { createInspectPlugin } from '../slidev/node/vite/inspect'
+import { createIconsPlugin } from '../slidev/node/vite/icons'
+import { createComponentsPlugin } from '../slidev/node/vite/components'
+import { toAtFS } from '../slidev/node/resolver'
+import { createVuePlugin } from '../slidev/node/vite/vue'
+
+const absolute = (path: string) => normalizePath(fileURLToPath(new URL(path, import.meta.url)))
+const clientRoot = absolute('../client')
+const parserRoot = absolute('../parser')
+
+const options = {
+  clientRoot,
+  roots: [],
+  mode: 'build',
+  inspect: true,
+  utils: {
+    defines: {
+      __DEV__: 'true',
+      __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(clientRoot)),
+      __SLIDEV_HASH_ROUTE__: false,
+      __SLIDEV_FEATURE_DRAWINGS__: 'true',
+      __SLIDEV_FEATURE_EDITOR__: 'true',
+      __SLIDEV_FEATURE_DRAWINGS_PERSIST__: 'false',
+      __SLIDEV_FEATURE_RECORD__: 'true',
+      __SLIDEV_FEATURE_PRESENTER__: 'true',
+      __SLIDEV_FEATURE_PRINT__: 'false',
+      __SLIDEV_FEATURE_WAKE_LOCK__: 'true',
+      __SLIDEV_HAS_SERVER__: 'false',
+    },
+  },
+} as unknown as ResolvedSlidevOptions
+
+const pluginOptions = {
+  components: {
+    dts: false,
+  },
+} as SlidevPluginOptions
+
+export default defineConfig({
+  plugins: [
+    createInspectPlugin(options, pluginOptions),
+    createVueCompilerFlagsPlugin(options),
+    UnoCSS({
+      configFile: absolute('../client/uno.config.ts'),
+    }),
+    createVuePlugin(options, pluginOptions),
+    createComponentsPlugin(options, pluginOptions),
+    createIconsPlugin(options, pluginOptions),
+    {
+      name: 'slidev:loader',
+      resolveId: {
+        order: 'pre',
+        handler(id) {
+          if (id.startsWith('/@slidev/') || id.includes('__slidev_') || id.startsWith('server-reactive:'))
+            return id
+          return null
+        },
+      },
+      load(id) {
+        if (id.startsWith('/@slidev/setups'))
+          return 'export default []'
+        if (id.startsWith('server-reactive:'))
+          return `export default {}`
+        if (id.endsWith(absolute('../client/composables/useSlideInfo.ts')))
+          return `export * from '${toAtFS(absolute('./src/composables/useSlideInfo.ts'))}'`
+      },
+    },
+  ],
+  resolve: {
+    alias: [
+      ...Object.entries({
+        '@rollup/pluginutils': absolute('./polyfills/rollup-pluginutils.ts'),
+        'unplugin': absolute('./polyfills/unplugin.ts'),
+        'module': absolute('./polyfills/node-module.ts'),
+        'assert': absolute('./polyfills/node-assert.ts'),
+
+        '#slidev/configs': absolute('./src/virtual/configs.ts'),
+        '#slidev/global-layers': absolute('./src/virtual/global-layers.ts'),
+        '#slidev/custom-nav-controls': absolute('./src/virtual/nav-controls.vue'),
+        '#slidev/styles': absolute('./src/virtual/styles.ts'),
+        '#slidev/title-renderer': absolute('./src/virtual/title-renderer.vue'),
+        '#slidev/shiki': absolute('./src/virtual/shiki.ts'),
+        '#slidev/slides': absolute('./src/virtual/slides.ts'),
+
+        '@slidev/parser/utils': absolute('../parser/src/utils.ts'),
+      }).map(([find, replacement]) => ({ find, replacement })),
+      {
+        find: /^@slidev\/client$/,
+        replacement: `${toAtFS(clientRoot)}/index.ts`,
+      },
+      {
+        find: /^@slidev\/parser\/(.*)/,
+        replacement: `${toAtFS(parserRoot)}/$1`,
+      },
+      {
+        find: /^#slidev\/(.*)/,
+        replacement: '/@slidev/$1',
+      },
+    ],
+  },
+  define: options.utils.defines,
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99a357a072..6fb16877ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -518,7 +518,7 @@ importers:
         version: 3.7.0
       debug:
         specifier: ^4.3.5
-        version: 4.3.5(supports-color@8.1.1)
+        version: 4.3.5(supports-color@5.5.0)
       fast-deep-equal:
         specifier: ^3.1.3
         version: 3.1.3
@@ -785,6 +785,60 @@ importers:
         specifier: ^0.0.59
         version: 0.0.59
 
+  packages/web:
+    devDependencies:
+      '@antfu/utils':
+        specifier: ^0.7.10
+        version: 0.7.10
+      '@babel/standalone':
+        specifier: ^7.25.3
+        version: 7.25.3
+      '@slidev/client':
+        specifier: workspace:*
+        version: link:../client
+      '@slidev/parser':
+        specifier: workspace:*
+        version: link:../parser
+      '@slidev/theme-seriph':
+        specifier: ^0.25.0
+        version: 0.25.0
+      '@types/babel__standalone':
+        specifier: ^7.1.7
+        version: 7.1.7
+      '@vue/babel-plugin-jsx':
+        specifier: ^1.2.2
+        version: 1.2.2(@babel/core@7.24.9)
+      magic-string:
+        specifier: ^0.30.10
+        version: 0.30.10
+      ohash:
+        specifier: ^1.1.3
+        version: 1.1.3
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
+      sucrase:
+        specifier: ^3.35.0
+        version: 3.35.0
+      typescript:
+        specifier: ^5.5.4
+        version: 5.5.4
+      unocss:
+        specifier: ^0.61.5
+        version: 0.61.5(postcss@8.4.39)(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.11))
+      unplugin-vue-markdown:
+        specifier: ^0.26.2
+        version: 0.26.2(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.11))
+      vite:
+        specifier: ^5.3.4
+        version: 5.3.4(@types/node@20.14.11)
+      vue:
+        specifier: ^3.4.33
+        version: 3.4.33(typescript@5.5.4)
+      vue-router:
+        specifier: ^4.4.0
+        version: 4.4.0(vue@3.4.33(typescript@5.5.4))
+
 packages:
 
   '@aashutoshrathi/word-wrap@1.2.6':
@@ -1112,6 +1166,10 @@ packages:
     resolution: {integrity: sha512-xqWviI/pt1Zb/d+6ilWa5IDL2mkDzsBnlHbreqnfyP3/QB/ofQ1bNVcHj8YQX154Rf/xZKR6y0s1ydVF3nAS8g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/standalone@7.25.3':
+    resolution: {integrity: sha512-uR+EoBqIIIvKGCG7fOj7HKupu3zVObiMfdEwoPZfVCPpcWJaZ1PkshaP5/6cl6BKAm1Zcv25O1rf+uoQ7V8nqA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.24.7':
     resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
     engines: {node: '>=6.9.0'}
@@ -1997,6 +2055,21 @@ packages:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.6.8':
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+
+  '@types/babel__standalone@7.1.7':
+    resolution: {integrity: sha512-4RUJX9nWrP/emaZDzxo/+RYW8zzLJTXWJyp2k78HufG459HCz754hhmSymt3VFOU6/Wy+IZqfPvToHfLuGOr7w==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.20.6':
+    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+
   '@types/braces@3.0.4':
     resolution: {integrity: sha512-0WR3b8eaISjEW7RpZnclONaLFDf7buaowRHdqLp4vLj54AsSAYWfh3DRbfiYJY9XDxMgx1B4sE1Afw2PGpuHOA==}
 
@@ -7052,7 +7125,7 @@ snapshots:
       '@babel/traverse': 7.24.8
       '@babel/types': 7.24.9
       convert-source-map: 2.0.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -7233,6 +7306,8 @@ snapshots:
   '@babel/standalone@7.23.10':
     optional: true
 
+  '@babel/standalone@7.25.3': {}
+
   '@babel/template@7.24.7':
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -7249,7 +7324,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.24.8
       '@babel/types': 7.24.9
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -7573,7 +7648,7 @@ snapshots:
   '@eslint/config-array@0.17.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -7581,7 +7656,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       espree: 10.1.0
       globals: 14.0.0
       ignore: 5.3.1
@@ -7652,7 +7727,7 @@ snapshots:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.5.2
       '@iconify/types': 1.1.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       kolorist: 1.8.0
       local-pkg: 0.4.3
     transitivePeerDependencies:
@@ -7663,7 +7738,7 @@ snapshots:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.10
       '@iconify/types': 2.0.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       kolorist: 1.8.0
       local-pkg: 0.5.0
       mlly: 1.7.1
@@ -8059,6 +8134,31 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.24.8
+      '@babel/types': 7.24.9
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.6
+
+  '@types/babel__generator@7.6.8':
+    dependencies:
+      '@babel/types': 7.24.9
+
+  '@types/babel__standalone@7.1.7':
+    dependencies:
+      '@types/babel__core': 7.20.5
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.24.8
+      '@babel/types': 7.24.9
+
+  '@types/babel__traverse@7.20.6':
+    dependencies:
+      '@babel/types': 7.24.9
+
   '@types/braces@3.0.4': {}
 
   '@types/cli-progress@3.11.6':
@@ -8210,7 +8310,7 @@ snapshots:
       '@typescript-eslint/types': 8.0.0-alpha.40
       '@typescript-eslint/typescript-estree': 8.0.0-alpha.40(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       eslint: 9.7.0
     optionalDependencies:
       typescript: 5.5.4
@@ -8231,7 +8331,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.0.0-alpha.40(typescript@5.5.4)
       '@typescript-eslint/utils': 8.0.0-alpha.40(eslint@9.7.0)(typescript@5.5.4)
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -8247,7 +8347,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.14.1
       '@typescript-eslint/visitor-keys': 7.14.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -8262,7 +8362,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.0.0-alpha.40
       '@typescript-eslint/visitor-keys': 8.0.0-alpha.40
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -8311,7 +8411,7 @@ snapshots:
 
   '@typescript/vfs@1.5.0':
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -8914,7 +9014,7 @@ snapshots:
 
   '@windicss/config@1.9.3':
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       jiti: 1.21.6
       windicss: 3.5.6
     transitivePeerDependencies:
@@ -8924,7 +9024,7 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.10
       '@windicss/config': 1.9.3
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       fast-glob: 3.3.2
       magic-string: 0.30.10
       micromatch: 4.0.7
@@ -8952,7 +9052,7 @@ snapshots:
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10050,7 +10150,7 @@ snapshots:
     dependencies:
       '@rtsao/scc': 1.1.0
       '@typescript-eslint/utils': 7.14.1(eslint@9.7.0)(typescript@5.5.4)
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       doctrine: 3.0.0
       eslint: 9.7.0
       eslint-import-resolver-node: 0.3.9
@@ -10069,7 +10169,7 @@ snapshots:
       '@es-joy/jsdoccomment': 0.46.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       escape-string-regexp: 4.0.0
       eslint: 9.7.0
       esquery: 1.6.0
@@ -10137,7 +10237,7 @@ snapshots:
 
   eslint-plugin-toml@0.11.1(eslint@9.7.0):
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       eslint: 9.7.0
       eslint-compat-utils: 0.5.0(eslint@9.7.0)
       lodash: 4.17.21
@@ -10201,7 +10301,7 @@ snapshots:
 
   eslint-plugin-yml@1.14.0(eslint@9.7.0):
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       eslint: 9.7.0
       eslint-compat-utils: 0.5.0(eslint@9.7.0)
       lodash: 4.17.21
@@ -10244,7 +10344,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.0.2
       eslint-visitor-keys: 4.0.0
@@ -10477,7 +10577,7 @@ snapshots:
 
   follow-redirects@1.15.6(debug@4.3.5):
     optionalDependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
 
   foreground-child@3.1.1:
     dependencies:
@@ -10760,7 +10860,7 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10778,7 +10878,7 @@ snapshots:
   https-proxy-agent@7.0.4:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10816,7 +10916,7 @@ snapshots:
   importx@0.3.10:
     dependencies:
       bundle-require: 5.0.0(esbuild@0.20.2)
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       esbuild: 0.20.2
       jiti: 1.21.6
       pathe: 1.1.2
@@ -11150,7 +11250,7 @@ snapshots:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       execa: 8.0.1
       lilconfig: 3.1.1
       listr2: 8.2.1
@@ -11747,7 +11847,7 @@ snapshots:
 
   micromark@2.11.4:
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       parse-entities: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -11755,7 +11855,7 @@ snapshots:
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -11777,7 +11877,7 @@ snapshots:
   micromark@4.0.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.0
@@ -12687,7 +12787,7 @@ snapshots:
   socks-proxy-agent@8.0.4:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -12993,7 +13093,7 @@ snapshots:
       cac: 6.7.14
       chokidar: 3.6.0
       consola: 3.2.3
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       esbuild: 0.23.0
       execa: 5.1.1
       globby: 11.1.0
@@ -13243,7 +13343,7 @@ snapshots:
       '@antfu/install-pkg': 0.3.3
       '@antfu/utils': 0.7.10
       '@iconify/utils': 2.1.25
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       kolorist: 1.8.0
       local-pkg: 0.5.0
       unplugin: 1.11.0
@@ -13258,7 +13358,7 @@ snapshots:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.19.0)
       chokidar: 3.6.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       fast-glob: 3.3.2
       local-pkg: 0.5.0
       magic-string: 0.30.10
@@ -13375,7 +13475,7 @@ snapshots:
   vite-node@2.0.4(@types/node@20.14.11):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       pathe: 1.1.2
       tinyrainbow: 1.2.0
       vite: 5.3.4(@types/node@20.14.11)
@@ -13393,7 +13493,7 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.19.0)
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       error-stack-parser-es: 0.1.4
       fs-extra: 11.2.0
       open: 10.1.0
@@ -13412,7 +13512,7 @@ snapshots:
       '@antfu/utils': 0.7.10
       axios: 1.7.2(debug@4.3.5)
       blueimp-md5: 2.19.0
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       fs-extra: 11.2.0
       magic-string: 0.30.10
       vite: 5.3.4(@types/node@20.14.11)
@@ -13430,7 +13530,7 @@ snapshots:
   vite-plugin-vue-server-ref@0.4.2(vite@5.3.4(@types/node@20.14.11))(vue@3.4.33(typescript@5.5.4)):
     dependencies:
       '@antfu/utils': 0.7.10
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       klona: 2.0.6
       mlly: 1.7.1
       ufo: 1.5.3
@@ -13442,7 +13542,7 @@ snapshots:
   vite-plugin-windicss@1.9.3(vite@5.3.4(@types/node@20.14.11)):
     dependencies:
       '@windicss/plugin-utils': 1.9.3
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       kolorist: 1.8.0
       vite: 5.3.4(@types/node@20.14.11)
       windicss: 3.5.6
@@ -13519,7 +13619,7 @@ snapshots:
       '@vitest/spy': 2.0.4
       '@vitest/utils': 2.0.4
       chai: 5.1.1
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       execa: 8.0.1
       magic-string: 0.30.10
       pathe: 1.1.2
@@ -13604,7 +13704,7 @@ snapshots:
 
   vue-eslint-parser@9.4.3(eslint@9.7.0):
     dependencies:
-      debug: 4.3.5(supports-color@8.1.1)
+      debug: 4.3.5(supports-color@5.5.0)
       eslint: 9.7.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
diff --git a/scripts/web.mjs b/scripts/web.mjs
new file mode 100644
index 0000000000..a10050d4c8
--- /dev/null
+++ b/scripts/web.mjs
@@ -0,0 +1,9 @@
+import { fileURLToPath } from 'node:url'
+import { $, cd, path } from 'zx'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const dist = path.resolve(__dirname, '../docs/.vitepress/dist/web')
+
+cd(path.resolve(__dirname, '../packages/web'))
+await $`pnpm build --base /web/ --outDir ${dist}`