diff --git a/automd.config.ts b/automd.config.ts
index f0aa80ebce..5d44fe0d0c 100644
--- a/automd.config.ts
+++ b/automd.config.ts
@@ -1,4 +1,190 @@
 import type { Config } from "automd";
+import { readdir, stat, readFile } from "node:fs/promises";
+import { join, extname, relative } from "pathe";
+
+interface FileEntry {
+  path: string;
+  relativePath: string;
+  content: string;
+  language: string;
+}
+
+const DEFAULT_IGNORE = [
+  "node_modules",
+  ".git",
+  ".DS_Store",
+  ".nuxt",
+  ".output",
+  ".nitro",
+  "dist",
+  "coverage",
+  ".cache",
+  ".turbo",
+  "pnpm-lock.yaml",
+  "package-lock.json",
+  "yarn.lock",
+];
+
+const EXTENSION_LANGUAGE_MAP: Record<string, string> = {
+  ".ts": "ts",
+  ".tsx": "tsx",
+  ".js": "js",
+  ".jsx": "jsx",
+  ".mjs": "js",
+  ".cjs": "js",
+  ".vue": "vue",
+  ".json": "json",
+  ".html": "html",
+  ".css": "css",
+  ".scss": "scss",
+  ".md": "md",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+  ".toml": "toml",
+  ".sh": "bash",
+  ".bash": "bash",
+  ".zsh": "bash",
+};
+
+async function parseGitignore(dir: string): Promise<string[]> {
+  try {
+    const gitignorePath = join(dir, ".gitignore");
+    const content = await readFile(gitignorePath, "utf8");
+    return content
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line && !line.startsWith("#"));
+  } catch {
+    return [];
+  }
+}
+
+function shouldIgnore(name: string, ignorePatterns: string[], defaultIgnore: string[]): boolean {
+  const allPatterns = [...defaultIgnore, ...ignorePatterns];
+  for (const pattern of allPatterns) {
+    const cleanPattern = pattern.replace(/^\//, "").replace(/\/$/, "");
+    if (name === cleanPattern) {
+      return true;
+    }
+    if (pattern.startsWith("*") && name.endsWith(pattern.slice(1))) {
+      return true;
+    }
+    if (pattern.endsWith("*") && name.startsWith(pattern.slice(0, -1))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function getLanguage(filePath: string): string {
+  const ext = extname(filePath).toLowerCase();
+  return EXTENSION_LANGUAGE_MAP[ext] || "text";
+}
+
+async function collectFiles(
+  dir: string,
+  baseDir: string,
+  ignorePatterns: string[],
+  maxDepth: number,
+  currentDepth: number = 0
+): Promise<FileEntry[]> {
+  if (maxDepth > 0 && currentDepth >= maxDepth) {
+    return [];
+  }
+
+  const entries = await readdir(dir);
+  const files: FileEntry[] = [];
+
+  for (const entry of entries) {
+    if (shouldIgnore(entry, ignorePatterns, DEFAULT_IGNORE)) {
+      continue;
+    }
+
+    const fullPath = join(dir, entry);
+    const stats = await stat(fullPath);
+
+    if (stats.isDirectory()) {
+      const nestedFiles = await collectFiles(
+        fullPath,
+        baseDir,
+        ignorePatterns,
+        maxDepth,
+        currentDepth + 1
+      );
+      files.push(...nestedFiles);
+    } else {
+      try {
+        const content = await readFile(fullPath, "utf8");
+        const relativePath = relative(baseDir, fullPath);
+        files.push({
+          path: fullPath,
+          relativePath,
+          content: content.trim(),
+          language: getLanguage(fullPath),
+        });
+      } catch {
+        // Skip binary or unreadable files
+      }
+    }
+  }
+
+  return files;
+}
+
+function sortFiles(files: FileEntry[]): FileEntry[] {
+  return files.sort((a, b) => {
+    const aParts = a.relativePath.split("/");
+    const bParts = b.relativePath.split("/");
+
+    // Sort by depth first (shallower files first)
+    if (aParts.length !== bParts.length) {
+      return aParts.length - bParts.length;
+    }
+
+    // Then alphabetically
+    return a.relativePath.localeCompare(b.relativePath);
+  });
+}
+
+function generateCodeTree(
+  files: FileEntry[],
+  options: { defaultValue?: string; expandAll?: boolean } = {}
+): string {
+  const sortedFiles = sortFiles(files);
+  const codeBlocks: string[] = [];
+
+  for (const file of sortedFiles) {
+    const lang = file.language;
+    const filename = file.relativePath;
+
+    // Use 4 backticks for markdown files to avoid conflicts
+    const fence = lang === "md" ? "````" : "```";
+    codeBlocks.push(`${fence}${lang} [${filename}]`);
+    codeBlocks.push(file.content);
+    codeBlocks.push(fence);
+    codeBlocks.push("");
+  }
+
+  const attrs: string[] = [];
+  if (options.defaultValue) {
+    attrs.push(`defaultValue="${options.defaultValue}"`);
+  }
+  if (options.expandAll) {
+    attrs.push(`expandAll`);
+  }
+  const propsStr = attrs.length > 0 ? `{${attrs.join(" ")}}` : "";
+  const contents = `::code-tree${propsStr}\n\n${codeBlocks.join("\n").trim()}\n\n::`;
+
+  return contents;
+}
+
+function resolvePath(srcPath: string, options: { url?: string; dir?: string }): string {
+  if (srcPath.startsWith("/")) {
+    return srcPath;
+  }
+  const base = options.url ? new URL(".", options.url).pathname : options.dir || process.cwd();
+  return join(base, srcPath);
+}
 
 export default {
   input: ["README.md", "docs/**/*.md"],
@@ -22,5 +208,51 @@ export default {
         };
       },
     },
+    "ui-code-tree": {
+      name: "ui-code-tree",
+      async generate({
+        args,
+        config,
+        url,
+      }: {
+        args: Record<string, unknown>;
+        config: { dir?: string };
+        url?: string;
+      }) {
+        const srcPath = (args.src as string) || ".";
+        const fullPath = resolvePath(srcPath, { url, dir: config.dir });
+
+        const stats = await stat(fullPath);
+        if (!stats.isDirectory()) {
+          throw new Error(`Path "${srcPath}" is not a directory`);
+        }
+
+        const userIgnore: string[] = args.ignore
+          ? String(args.ignore)
+              .split(",")
+              .map((s: string) => s.trim())
+          : [];
+
+        const gitignorePatterns = await parseGitignore(fullPath);
+        const ignorePatterns = [...gitignorePatterns, ...userIgnore];
+
+        const maxDepth = args.maxDepth ? Number(args.maxDepth) : 0;
+        const defaultValue = (args.defaultValue || args.default) as string | undefined;
+        const expandAll = args.expandAll !== undefined && args.expandAll !== "false";
+
+        const files = await collectFiles(fullPath, fullPath, ignorePatterns, maxDepth);
+
+        if (files.length === 0) {
+          return {
+            contents: "<!-- No files found -->",
+            issues: ["No files found in the specified directory"],
+          };
+        }
+
+        const contents = generateCodeTree(files, { defaultValue, expandAll });
+
+        return { contents };
+      },
+    },
   },
 } satisfies Config;
diff --git a/docs/.docs/content.config.ts b/docs/.docs/content.config.ts
new file mode 100644
index 0000000000..256c9a662b
--- /dev/null
+++ b/docs/.docs/content.config.ts
@@ -0,0 +1,20 @@
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
+import { resolve } from 'pathe'
+
+export default defineContentConfig({
+  collections: {
+    examples: defineCollection({
+      type: 'page',
+      source: {
+        cwd: resolve(__dirname, '../../examples'),
+        include: '**/README.md',
+        prefix: '/examples',
+        exclude: ['**/.**/**', '**/node_modules/**', '**/dist/**', '**/.docs/**'],
+      },
+      schema: z.object({
+        category: z.string().optional(),
+        icon: z.string().optional(),
+      }),
+    }),
+  },
+})
diff --git a/docs/.docs/layouts/examples.vue b/docs/.docs/layouts/examples.vue
new file mode 100644
index 0000000000..80171008db
--- /dev/null
+++ b/docs/.docs/layouts/examples.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { categoryOrder } from '~/utils/examples'
+
+// Fetch all examples and group by category
+const { data: examples } = await useAsyncData('examples-nav', () =>
+  queryCollection('examples')
+    .select('title', 'description', 'category', 'path')
+    .all(),
+)
+
+// Group examples by category
+const groupedExamples = computed(() => {
+  if (!examples.value) return []
+
+  const groups: Record<string, ContentNavigationItem[]> = {}
+
+  for (const example of examples.value) {
+    const category = example.category || 'Other'
+    if (!groups[category]) {
+      groups[category] = []
+    }
+    groups[category].push({
+      title: example.title,
+      path: example.path.replace(/\/readme$/i, ''),
+    })
+  }
+
+  // Convert to navigation items with children, sorted by categoryOrder
+  const sortedEntries = Object.entries(groups).sort(([a], [b]) => {
+    const aIndex = categoryOrder.indexOf(a.toLowerCase())
+    const bIndex = categoryOrder.indexOf(b.toLowerCase())
+    if (aIndex === -1 && bIndex === -1) return a.localeCompare(b)
+    if (aIndex === -1) return 1
+    if (bIndex === -1) return -1
+    return aIndex - bIndex
+  })
+
+  return sortedEntries.map(([category, items]) => ({
+    title: category.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
+    path: '',
+    children: items,
+  }))
+})
+
+// Flat list for navigation (no groups)
+const flatExamples = computed(() => {
+  if (!examples.value) return []
+  return examples.value.map((example) => ({
+    title: example.title,
+    path: example.path.replace(/\/readme$/i, ''),
+  }))
+})
+</script>
+
+<template>
+  <UContainer>
+    <UPage :ui="{ left: 'lg:col-span-2 pr-2 border-r border-default' }">
+      <template #left>
+        <UPageAside>
+          <UPageAnchors
+            :links="[
+              { label: 'Docs', icon: 'i-lucide-book-open', to: '/docs' },
+              { label: 'Deploy', icon: 'ri:upload-cloud-2-line', to: '/deploy' },
+              { label: 'Config', icon: 'ri:settings-3-line', to: '/config' },
+              { label: 'Examples', icon: 'i-lucide-folder-code', to: '/examples', active: true },
+            ]"
+          />
+          <USeparator type="dashed" class="py-6" />
+          <UContentNavigation
+            v-if="groupedExamples.length"
+            :navigation="groupedExamples"
+            :collapsible="false"
+          />
+          <UContentNavigation
+            v-else-if="flatExamples.length"
+            :navigation="flatExamples"
+            :collapsible="false"
+          />
+        </UPageAside>
+      </template>
+      <slot />
+    </UPage>
+  </UContainer>
+</template>
diff --git a/docs/.docs/pages/examples/[...slug].vue b/docs/.docs/pages/examples/[...slug].vue
new file mode 100644
index 0000000000..888e77fe77
--- /dev/null
+++ b/docs/.docs/pages/examples/[...slug].vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { joinURL } from 'ufo'
+import { kebabCase } from 'scule'
+
+definePageMeta({
+  layout: 'examples',
+})
+
+const appConfig = useAppConfig()
+const route = useRoute()
+
+const { data: page } = await useAsyncData(kebabCase(route.path), () =>
+  queryCollection('examples').path(`${route.path}/readme`).first(),
+)
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Example not found',
+    message: `${route.path} does not exist`,
+    fatal: true,
+  })
+}
+
+const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround`, async () => {
+  const data = await queryCollectionItemSurroundings('examples', `${route.path}/readme`, {
+    fields: ['description'],
+  }).where('category', '=', page.value?.category)
+
+  return data?.map((item) => {
+    if (!item) return null
+    return { ...item, path: item.path?.replace('/readme', '') }
+  })
+})
+
+// Extract example name from route (e.g., "/examples/vite-ssr-html" -> "vite-ssr-html")
+const exampleName = computed(() => {
+  return route.path.replace(/^\/examples\//, '')
+})
+
+const breadcrumb = computed(() => [
+  { label: 'Examples', icon: 'i-lucide-folder-code', to: '/examples' },
+  { label: page.value?.title || exampleName.value },
+])
+
+usePageSEO({
+  title: `${page.value?.title} - ${appConfig.site.name}`,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+})
+
+const path = computed(() => route.path.replace(/\/$/, ''))
+prerenderRoutes([joinURL('/raw', `${path.value}.md`)])
+useHead({
+  link: [
+    {
+      rel: 'alternate',
+      href: joinURL(appConfig.site.url, 'raw', `${path.value}.md`),
+      type: 'text/markdown',
+    },
+  ],
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between',
+      }"
+    >
+      <template #headline>
+        <UBreadcrumb :items="breadcrumb" />
+      </template>
+      <template #links>
+        <UButton
+          icon="i-simple-icons-stackblitz"
+          label="Open in Playground"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          :to="`https://stackblitz.com/fork/github/${appConfig.docs.github}/tree/${appConfig.docs.branch || 'main'}/examples/${exampleName}`"
+          target="_blank"
+        />
+
+        <UButton
+          icon="i-simple-icons-github"
+          label="Source"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          :to="`https://github.com/${appConfig.docs.github}/tree/${appConfig.docs.branch || 'main'}/examples/${exampleName}`"
+          target="_blank"
+        />
+
+        <PageHeaderLinks />
+      </template>
+    </UPageHeader>
+
+    <template v-if="page.body?.toc?.links?.length" #right>
+      <UContentToc title="On this page" :links="page.body?.toc?.links || []" highlight />
+    </template>
+
+    <UPageBody prose class="break-words">
+      <ContentRenderer v-if="page.body" :value="page" />
+
+      <div class="space-y-6">
+        <USeparator type="dashed" />
+        <div class="mb-4">
+          <UPageLinks
+            class="inline-block"
+            :links="[
+              {
+                icon: 'i-lucide-pencil',
+                label: 'Edit this page',
+                to: `https://github.com/${appConfig.docs.github}/edit/${appConfig.docs.branch || 'main'}/examples/${exampleName}/README.md`,
+                target: '_blank',
+              },
+            ]"
+          />
+        </div>
+        <UContentSurround v-if="surround?.length" class="mb-4" :surround="surround" />
+      </div>
+    </UPageBody>
+  </UPage>
+</template>
diff --git a/docs/.docs/pages/examples/index.vue b/docs/.docs/pages/examples/index.vue
new file mode 100644
index 0000000000..a4ccd216d6
--- /dev/null
+++ b/docs/.docs/pages/examples/index.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { categoryOrder, categoryIcons } from '~/utils/examples'
+
+definePageMeta({
+  layout: 'examples',
+})
+
+const appConfig = useAppConfig()
+
+// Fetch all examples
+const { data: examples } = await useAsyncData('examples-list', () =>
+  queryCollection('examples')
+    .select('title', 'description', 'category', 'path', 'icon')
+    .all(),
+)
+
+// Group examples by category
+const groupedExamples = computed(() => {
+  if (!examples.value) return {}
+
+  const groups: Record<string, typeof examples.value> = {}
+
+  for (const example of examples.value) {
+    const category = example.category || 'Other'
+    if (!groups[category]) {
+      groups[category] = []
+    }
+    groups[category].push(example)
+  }
+
+  // Sort groups by categoryOrder
+  const sortedEntries = Object.entries(groups).sort(([a], [b]) => {
+    const aIndex = categoryOrder.indexOf(a.toLowerCase())
+    const bIndex = categoryOrder.indexOf(b.toLowerCase())
+    if (aIndex === -1 && bIndex === -1) return a.localeCompare(b)
+    if (aIndex === -1) return 1
+    if (bIndex === -1) return -1
+    return aIndex - bIndex
+  })
+
+  return Object.fromEntries(sortedEntries)
+})
+
+usePageSEO({
+  title: `Examples - ${appConfig.site.name}`,
+  ogTitle: 'Examples',
+  description: 'Explore Nitro examples to learn how to build full-stack applications',
+})
+</script>
+
+<template>
+  <UPage>
+    <UPageHeader
+      title="Examples"
+      description="Explore Nitro examples to learn how to build full-stack applications with different frameworks and features."
+    >
+      <template #headline>
+        <UBreadcrumb :items="[{ label: 'Examples', icon: 'i-lucide-code' }]" />
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <UAlert
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        title="Work in Progress"
+        description="Nitro v3 Alpha docs and examples are a work in progress — expect updates, rough edges, and occasional inaccuracies."
+        class="mb-8"
+      />
+
+      <div v-for="(categoryExamples, category) in groupedExamples" :key="category" class="mb-12">
+        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+          <UIcon :name="categoryIcons[String(category).toLowerCase()] || categoryIcons.other" class="size-5" />
+          {{ String(category).charAt(0).toUpperCase() + String(category).slice(1) }}
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <UPageCard
+            v-for="example in categoryExamples"
+            :key="example.path"
+            :to="example.path.replace(/\/readme$/i, '')"
+            :title="example.title"
+            :description="example.description"
+            :icon="example.icon"
+          />
+        </div>
+      </div>
+
+      <div v-if="!examples?.length" class="text-center py-12">
+        <UIcon name="i-lucide-book-dashed" class="size-12 text-muted mx-auto mb-4" />
+        <p class="text-muted">No examples</p>
+      </div>
+    </UPageBody>
+  </UPage>
+</template>
diff --git a/docs/.docs/server/routes/raw/examples/[...slug].md.get.ts b/docs/.docs/server/routes/raw/examples/[...slug].md.get.ts
new file mode 100644
index 0000000000..f18ca5f487
--- /dev/null
+++ b/docs/.docs/server/routes/raw/examples/[...slug].md.get.ts
@@ -0,0 +1,28 @@
+import { queryCollection } from '@nuxt/content/server'
+import { stringify } from 'minimark/stringify'
+import { withLeadingSlash } from 'ufo'
+
+export default eventHandler(async (event) => {
+  const slug = getRouterParams(event)['slug.md']
+  if (!slug?.endsWith('.md')) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  // Convert /raw/examples/hello-world.md -> /examples/hello-world/readme
+  const exampleName = slug.replace('.md', '')
+  const path = withLeadingSlash(`examples/${exampleName}/readme`)
+
+  const page = await queryCollection(event, 'examples').path(path).first()
+  if (!page) {
+    throw createError({ statusCode: 404, statusMessage: 'Example not found', fatal: true })
+  }
+
+  // Add title and description to the top of the page if missing
+  if (page.body.value[0]?.[0] !== 'h1') {
+    page.body.value.unshift(['blockquote', {}, page.description])
+    page.body.value.unshift(['h1', {}, page.title])
+  }
+
+  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+  return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' })
+})
diff --git a/docs/.docs/utils/examples.ts b/docs/.docs/utils/examples.ts
new file mode 100644
index 0000000000..eac7925c28
--- /dev/null
+++ b/docs/.docs/utils/examples.ts
@@ -0,0 +1,19 @@
+// Category order for examples - used in sidebar and examples page
+export const categoryOrder = [
+  'features',
+  'config',
+  'server side rendering',
+  'backend frameworks',
+  'integrations',
+  'vite',
+]
+
+export const categoryIcons: Record<string, string> = {
+  vite: 'i-logos-vitejs',
+  'backend frameworks': 'i-lucide-puzzle',
+  features: 'i-lucide-sparkles',
+  config: 'i-lucide-settings',
+  integrations: 'i-lucide-plug',
+  'server side rendering': 'i-lucide-server',
+  other: 'i-lucide-folder',
+}
diff --git a/docs/4.examples/0.index.md b/docs/4.examples/0.index.md
new file mode 100644
index 0000000000..3c1b20e9c3
--- /dev/null
+++ b/docs/4.examples/0.index.md
@@ -0,0 +1,7 @@
+---
+icon: i-lucide-folder-code
+---
+
+# Examples
+
+> Explore Nitro examples to learn how to build full-stack applications
diff --git a/docs/package.json b/docs/package.json
index 44dca6a593..da8c3cf9ce 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,6 +4,10 @@
     "dev": "undocs dev",
     "build": "undocs build"
   },
+  "dependencies": {
+    "automd": "^0.4.3",
+    "zod": "^4.3.6"
+  },
   "devDependencies": {
     "shaders": "^2.2.48",
     "undocs": "^0.4.16"
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index a69c871bf9..ea6d85a6b7 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -7,13 +7,20 @@ settings:
 importers:
 
   .:
+    dependencies:
+      automd:
+        specifier: ^0.4.3
+        version: 0.4.3(magicast@0.5.1)
+      zod:
+        specifier: ^4.3.6
+        version: 4.3.6
     devDependencies:
       shaders:
         specifier: ^2.2.48
         version: 2.2.48
       undocs:
         specifier: ^0.4.16
-        version: 0.4.16(@parcel/watcher@2.5.6)(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@vue/compiler-sfc@3.5.27)(@vueuse/core@14.2.0(vue@3.5.27(typescript@5.9.3)))(cac@6.7.14)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(lightningcss@1.31.1)(magicast@0.5.1)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(yaml@2.8.2)(yjs@13.6.29)(zod@3.25.76)
+        version: 0.4.16(@parcel/watcher@2.5.6)(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@vue/compiler-sfc@3.5.27)(@vueuse/core@14.2.0(vue@3.5.27(typescript@5.9.3)))(cac@6.7.14)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(lightningcss@1.31.1)(magicast@0.5.1)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(yaml@2.8.2)(yjs@13.6.29)(zod@4.3.6)
 
 packages:
 
@@ -5627,6 +5634,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -6595,7 +6605,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(magicast@0.5.1))(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@3.25.76)':
+  '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(magicast@0.5.1))(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)':
     dependencies:
       '@floating-ui/dom': 1.7.5
       '@iconify/vue': 5.0.0(vue@3.5.27(typescript@5.9.3))
@@ -6666,7 +6676,7 @@ snapshots:
     optionalDependencies:
       '@nuxt/content': 3.11.0(magicast@0.5.1)
       vue-router: 4.6.4(vue@3.5.27(typescript@5.9.3))
-      zod: 3.25.76
+      zod: 4.3.6
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -11647,12 +11657,12 @@ snapshots:
       magic-string: 0.30.21
       unplugin: 2.3.11
 
-  undocs@0.4.16(@parcel/watcher@2.5.6)(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@vue/compiler-sfc@3.5.27)(@vueuse/core@14.2.0(vue@3.5.27(typescript@5.9.3)))(cac@6.7.14)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(lightningcss@1.31.1)(magicast@0.5.1)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(yaml@2.8.2)(yjs@13.6.29)(zod@3.25.76):
+  undocs@0.4.16(@parcel/watcher@2.5.6)(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@vue/compiler-sfc@3.5.27)(@vueuse/core@14.2.0(vue@3.5.27(typescript@5.9.3)))(cac@6.7.14)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(lightningcss@1.31.1)(magicast@0.5.1)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(yaml@2.8.2)(yjs@13.6.29)(zod@4.3.6):
     dependencies:
       '@headlessui/vue': 1.7.23(vue@3.5.27(typescript@5.9.3))
       '@nuxt/content': 3.11.0(magicast@0.5.1)
       '@nuxt/fonts': 0.13.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
-      '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(magicast@0.5.1))(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@3.25.76)
+      '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(magicast@0.5.1))(@tiptap/extensions@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)
       '@nuxtjs/plausible': 2.0.1(magicast@0.5.1)
       '@resvg/resvg-wasm': 2.6.2
       automd: 0.4.3(magicast@0.5.1)
@@ -12244,4 +12254,6 @@ snapshots:
 
   zod@3.25.76: {}
 
+  zod@4.3.6: {}
+
   zwitch@2.0.4: {}
diff --git a/docs/pnpm-workspace.yaml b/docs/pnpm-workspace.yaml
index 04b1292e5d..b8691c8845 100644
--- a/docs/pnpm-workspace.yaml
+++ b/docs/pnpm-workspace.yaml
@@ -1,8 +1,10 @@
 packages: []
+
 ignoredBuiltDependencies:
-  - "@parcel/watcher"
-  - "@tailwindcss/oxide"
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
   - esbuild
   - vue-demi
+
 onlyBuiltDependencies:
   - better-sqlite3
diff --git a/examples/api-routes/GUIDE.md b/examples/api-routes/GUIDE.md
new file mode 100644
index 0000000000..6d686ed93a
--- /dev/null
+++ b/examples/api-routes/GUIDE.md
@@ -0,0 +1,51 @@
+Nitro supports file-based routing in the `api/` or `routes/` directory. Each file becomes an API endpoint based on its path.
+
+## Basic Route
+
+Create a file in the `api/` directory to define a route. The file path becomes the URL path:
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+This creates a `GET /api/hello` endpoint.
+
+## Dynamic Routes
+
+Use square brackets `[param]` for dynamic URL segments. Access params via `event.context.params`:
+
+```ts [api/hello/[name].ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => `Hello (param: ${event.context.params!.name})!`);
+```
+
+This creates a `GET /api/hello/:name` endpoint (e.g., `/api/hello/world`).
+
+## HTTP Methods
+
+Suffix your file with the HTTP method (`.get.ts`, `.post.ts`, `.put.ts`, `.delete.ts`, etc.):
+
+### GET Handler
+
+```ts [api/test.get.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Test get handler");
+```
+
+### POST Handler
+
+```ts [api/test.post.ts]
+import { defineHandler } from "h3";
+
+export default defineHandler(async (event) => {
+  const body = await event.req.json();
+  return {
+    message: "Test post handler",
+    body,
+  };
+});
+```
diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md
new file mode 100644
index 0000000000..48c4cdfc58
--- /dev/null
+++ b/examples/api-routes/README.md
@@ -0,0 +1,159 @@
+---
+category: features
+icon: i-lucide-route
+---
+
+# API Routes
+
+> File-based API routing with HTTP method support and dynamic parameters.
+
+<!-- automd:ui-code-tree src="." default="api/hello.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="api/hello.ts" expandAll}
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>API Routes</title>
+  </head>
+  <body>
+    <h2>API Routes:</h2>
+    <ul>
+      <li><a href="/api/hello">/api/hello</a></li>
+      <li><a href="/api/hello/world">/api/hello/world</a></li>
+      <li><a href="/api/test">/api/test</a></li>
+    </ul>
+  </body>
+</html>
+```
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+```ts [api/test.get.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Test get handler");
+```
+
+```ts [api/test.post.ts]
+import { defineHandler } from "h3";
+
+export default defineHandler(async (event) => {
+  const body = await event.req.json();
+  return {
+    message: "Test post handler",
+    body,
+  };
+});
+```
+
+```ts [api/hello/[name].ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => `Hello (param: ${event.context.params!.name})!`);
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Nitro supports file-based routing in the `api/` or `routes/` directory. Each file becomes an API endpoint based on its path.
+
+## Basic Route
+
+Create a file in the `api/` directory to define a route. The file path becomes the URL path:
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+This creates a `GET /api/hello` endpoint.
+
+## Dynamic Routes
+
+Use square brackets `[param]` for dynamic URL segments. Access params via `event.context.params`:
+
+```ts [api/hello/[name].ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => `Hello (param: ${event.context.params!.name})!`);
+```
+
+This creates a `GET /api/hello/:name` endpoint (e.g., `/api/hello/world`).
+
+## HTTP Methods
+
+Suffix your file with the HTTP method (`.get.ts`, `.post.ts`, `.put.ts`, `.delete.ts`, etc.):
+
+### GET Handler
+
+```ts [api/test.get.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Test get handler");
+```
+
+### POST Handler
+
+```ts [api/test.post.ts]
+import { defineHandler } from "h3";
+
+export default defineHandler(async (event) => {
+  const body = await event.req.json();
+  return {
+    message: "Test post handler",
+    body,
+  };
+});
+```
+
+<!-- /automd -->
+
+## Learn More
+
+- [Routing](/docs/routing)
diff --git a/examples/auto-imports/GUIDE.md b/examples/auto-imports/GUIDE.md
new file mode 100644
index 0000000000..40763797b6
--- /dev/null
+++ b/examples/auto-imports/GUIDE.md
@@ -0,0 +1,35 @@
+Functions exported from `server/utils/` are automatically available without explicit imports when auto-imports are enabled. Define a utility once and use it anywhere in your server code.
+
+## Configuration
+
+Enable auto-imports by setting `imports` in your config:
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+  imports: {},
+});
+```
+
+## Using Auto Imports
+
+1. Create a utility file in `server/utils/`:
+
+```ts [server/utils/hello.ts]
+export function makeGreeting(name: string) {
+  return `Hello, ${name}!`;
+}
+```
+
+2. The function is available without importing it:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { makeGreeting } from "./server/utils/hello.ts";
+
+export default defineHandler(() => `<h1>${makeGreeting("Nitro")}</h1>`);
+```
+
+With this setup, any function exported from `server/utils/` becomes globally available. Nitro scans the directory and generates the necessary imports automatically.
diff --git a/examples/auto-imports/README.md b/examples/auto-imports/README.md
new file mode 100644
index 0000000000..ae5ac71951
--- /dev/null
+++ b/examples/auto-imports/README.md
@@ -0,0 +1,108 @@
+---
+category: config
+icon: i-lucide-import
+---
+
+# Auto Imports
+
+> Automatic imports for utilities and composables.
+
+<!-- automd:ui-code-tree src="." default="nitro.config.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="nitro.config.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+  imports: {},
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { makeGreeting } from "./server/utils/hello.ts";
+
+export default defineHandler(() => `<h1>${makeGreeting("Nitro")}</h1>`);
+```
+
+```json [tsconfig.json]
+{
+  "include": [".nitro/types/nitro-imports.d.ts", "src"]
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [server/utils/hello.ts]
+export function makeGreeting(name: string) {
+  return `Hello, ${name}!`;
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Functions exported from `server/utils/` are automatically available without explicit imports when auto-imports are enabled. Define a utility once and use it anywhere in your server code.
+
+## Configuration
+
+Enable auto-imports by setting `imports` in your config:
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+  imports: {},
+});
+```
+
+## Using Auto Imports
+
+1. Create a utility file in `server/utils/`:
+
+```ts [server/utils/hello.ts]
+export function makeGreeting(name: string) {
+  return `Hello, ${name}!`;
+}
+```
+
+2. The function is available without importing it:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { makeGreeting } from "./server/utils/hello.ts";
+
+export default defineHandler(() => `<h1>${makeGreeting("Nitro")}</h1>`);
+```
+
+With this setup, any function exported from `server/utils/` becomes globally available. Nitro scans the directory and generates the necessary imports automatically.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Configuration](/docs/configuration)
diff --git a/examples/cached-handler/GUIDE.md b/examples/cached-handler/GUIDE.md
new file mode 100644
index 0000000000..aca4e49916
--- /dev/null
+++ b/examples/cached-handler/GUIDE.md
@@ -0,0 +1,21 @@
+This example shows how to cache an expensive operation (a 500 ms delay) and conditionally bypass the cache using a query parameter. On first request, the handler executes and caches the result. Subsequent requests return the cached response instantly until the cache expires or is bypassed.
+
+## How It Works
+
+```ts [server.ts]
+import { html } from "nitro/h3";
+import { defineCachedHandler } from "nitro/cache";
+
+export default defineCachedHandler(
+  async () => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    return html`
+      Response generated at ${new Date().toISOString()} (took 500ms)
+      <br />(<a href="?skipCache=true">skip cache</a>)
+    `;
+  },
+  { shouldBypassCache: ({ req }) => req.url.includes("skipCache=true") }
+);
+```
+
+The handler simulates a slow operation with a 500ms delay. As `defineCachedHandler` wraps it, the response is cached after the first execution. The `shouldBypassCache` option checks for `?skipCache=true` in the URL and when present the cache is skipped and the handler runs fresh.
diff --git a/examples/cached-handler/README.md b/examples/cached-handler/README.md
new file mode 100644
index 0000000000..4afda0049d
--- /dev/null
+++ b/examples/cached-handler/README.md
@@ -0,0 +1,95 @@
+---
+category: features
+icon: i-lucide-clock
+---
+
+# Cached Handler
+
+> Cache route responses with configurable bypass logic.
+
+<!-- automd:ui-code-tree src="." default="server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { html } from "nitro/h3";
+import { defineCachedHandler } from "nitro/cache";
+
+export default defineCachedHandler(
+  async () => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    return html`
+      Response generated at ${new Date().toISOString()} (took 500ms)
+      <br />(<a href="?skipCache=true">skip cache</a>)
+    `;
+  },
+  { shouldBypassCache: ({ req }) => req.url.includes("skipCache=true") }
+);
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+This example shows how to cache an expensive operation (a 500 ms delay) and conditionally bypass the cache using a query parameter. On first request, the handler executes and caches the result. Subsequent requests return the cached response instantly until the cache expires or is bypassed.
+
+## How It Works
+
+```ts [server.ts]
+import { html } from "nitro/h3";
+import { defineCachedHandler } from "nitro/cache";
+
+export default defineCachedHandler(
+  async () => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    return html`
+      Response generated at ${new Date().toISOString()} (took 500ms)
+      <br />(<a href="?skipCache=true">skip cache</a>)
+    `;
+  },
+  { shouldBypassCache: ({ req }) => req.url.includes("skipCache=true") }
+);
+```
+
+The handler simulates a slow operation with a 500ms delay. As `defineCachedHandler` wraps it, the response is cached after the first execution. The `shouldBypassCache` option checks for `?skipCache=true` in the URL and when present the cache is skipped and the handler runs fresh.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Cache](/docs/cache)
+- [Storage](/docs/storage)
diff --git a/examples/custom-error-handler/GUIDE.md b/examples/custom-error-handler/GUIDE.md
new file mode 100644
index 0000000000..48d898a833
--- /dev/null
+++ b/examples/custom-error-handler/GUIDE.md
@@ -0,0 +1,32 @@
+This example shows how to intercept all errors and return a custom response format. When any route throws an error, Nitro calls your error handler instead of returning the default error page.
+
+## Error Handler
+
+Create an `error.ts` file in your project root to define the global error handler:
+
+```ts [error.ts]
+import { defineErrorHandler } from "nitro";
+
+export default defineErrorHandler((error, _event) => {
+  return new Response(`Custom Error Handler: ${error.message}`, {
+    status: 500,
+    headers: { "Content-Type": "text/plain" },
+  });
+});
+```
+
+The handler receives the thrown error and the H3 event object. You can use the event to access request details like headers, cookies, or the URL path to customize responses per route.
+
+## Triggering an Error
+
+The main handler throws an error to demonstrate the custom error handler:
+
+```ts [server.ts]
+import { defineHandler, HTTPError } from "nitro/h3";
+
+export default defineHandler(() => {
+  throw new HTTPError("Example Error!", { status: 500 });
+});
+```
+
+When you visit the page, instead of seeing a generic error page, you'll see "Custom Error Handler: Example Error!" because the error handler intercepts the thrown error.
diff --git a/examples/custom-error-handler/README.md b/examples/custom-error-handler/README.md
new file mode 100644
index 0000000000..fef0ceefb7
--- /dev/null
+++ b/examples/custom-error-handler/README.md
@@ -0,0 +1,112 @@
+---
+category: features
+icon: i-lucide-alert-circle
+---
+
+# Custom Error Handler
+
+> Customize error responses with a global error handler.
+
+<!-- automd:ui-code-tree src="." default="error.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="error.ts" expandAll}
+
+```ts [error.ts]
+import { defineErrorHandler } from "nitro";
+
+export default defineErrorHandler((error, _event) => {
+  return new Response(`Custom Error Handler: ${error.message}`, {
+    status: 500,
+    headers: { "Content-Type": "text/plain" },
+  });
+});
+```
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+// import errorHandler from "./error";
+
+export default defineConfig({
+  errorHandler: "./error.ts",
+  // devErrorHandler: errorHandler,
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { defineHandler, HTTPError } from "nitro/h3";
+
+export default defineHandler(() => {
+  throw new HTTPError("Example Error!", { status: 500 });
+});
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+This example shows how to intercept all errors and return a custom response format. When any route throws an error, Nitro calls your error handler instead of returning the default error page.
+
+## Error Handler
+
+Create an `error.ts` file in your project root to define the global error handler:
+
+```ts [error.ts]
+import { defineErrorHandler } from "nitro";
+
+export default defineErrorHandler((error, _event) => {
+  return new Response(`Custom Error Handler: ${error.message}`, {
+    status: 500,
+    headers: { "Content-Type": "text/plain" },
+  });
+});
+```
+
+The handler receives the thrown error and the H3 event object. You can use the event to access request details like headers, cookies, or the URL path to customize responses per route.
+
+## Triggering an Error
+
+The main handler throws an error to demonstrate the custom error handler:
+
+```ts [server.ts]
+import { defineHandler, HTTPError } from "nitro/h3";
+
+export default defineHandler(() => {
+  throw new HTTPError("Example Error!", { status: 500 });
+});
+```
+
+When you visit the page, instead of seeing a generic error page, you'll see "Custom Error Handler: Example Error!" because the error handler intercepts the thrown error.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
diff --git a/examples/database/GUIDE.md b/examples/database/GUIDE.md
new file mode 100644
index 0000000000..8fd7dccc88
--- /dev/null
+++ b/examples/database/GUIDE.md
@@ -0,0 +1,57 @@
+Nitro provides a built-in database layer that uses SQL template literals for safe, parameterized queries. This example creates a users table, inserts a record, and queries it back.
+
+## Querying the Database
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { useDatabase } from "nitro/database";
+
+export default defineHandler(async () => {
+  const db = useDatabase();
+
+  // Create users table
+  await db.sql`DROP TABLE IF EXISTS users`;
+  await db.sql`CREATE TABLE IF NOT EXISTS users ("id" TEXT PRIMARY KEY, "firstName" TEXT, "lastName" TEXT, "email" TEXT)`;
+
+  // Add a new user
+  const userId = String(Math.round(Math.random() * 10_000));
+  await db.sql`INSERT INTO users VALUES (${userId}, 'John', 'Doe', '')`;
+
+  // Query for users
+  const { rows } = await db.sql`SELECT * FROM users WHERE id = ${userId}`;
+
+  return {
+    rows,
+  };
+});
+```
+
+Retrieve the database instance using `useDatabase()`. The database can be queried using `db.sql`, and variables like `${userId}` are automatically escaped to prevent SQL injection.
+
+## Running Migrations with Tasks
+
+Nitro tasks let you run operations outside of request handlers. For database migrations, create a task file in `tasks/` and run it via the CLI. This keeps schema changes separate from your application code.
+
+```ts [tasks/db/migrate.ts]
+import { defineTask } from "nitro/task";
+import { useDatabase } from "nitro/database";
+
+export default defineTask({
+  meta: {
+    description: "Run database migrations",
+  },
+  async run() {
+    const db = useDatabase();
+
+    console.log("Running database migrations...");
+
+    // Create users table
+    await db.sql`DROP TABLE IF EXISTS users`;
+    await db.sql`CREATE TABLE IF NOT EXISTS users ("id" TEXT PRIMARY KEY, "firstName" TEXT, "lastName" TEXT, "email" TEXT)`;
+
+    return {
+      result: "Database migrations complete!",
+    };
+  },
+});
+```
diff --git a/examples/database/README.md b/examples/database/README.md
new file mode 100644
index 0000000000..379451eafb
Binary files /dev/null and b/examples/database/README.md differ
diff --git a/examples/elysia/GUIDE.md b/examples/elysia/GUIDE.md
new file mode 100644
index 0000000000..ca543c5a64
--- /dev/null
+++ b/examples/elysia/GUIDE.md
@@ -0,0 +1,15 @@
+## Server Entry
+
+```ts [server.ts]
+import { Elysia } from "elysia";
+
+const app = new Elysia();
+
+app.get("/", () => "Hello, Elysia with Nitro!");
+
+export default app.compile();
+```
+
+Nitro auto-detects `server.ts` in your project root and uses it as the server entry. The Elysia app handles all incoming requests, giving you full control over routing and middleware.
+
+Call `app.compile()` before exporting to optimize the router for production.
diff --git a/examples/elysia/README.md b/examples/elysia/README.md
new file mode 100644
index 0000000000..bedb304ffb
--- /dev/null
+++ b/examples/elysia/README.md
@@ -0,0 +1,84 @@
+---
+category: backend frameworks
+icon: i-skill-icons-elysia-dark
+---
+
+# Elysia
+
+> Integrate Elysia with Nitro using the server entry.
+
+<!-- automd:ui-code-tree src="." default="server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev"
+  },
+  "devDependencies": {
+    "elysia": "^1.4.22",
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { Elysia } from "elysia";
+
+const app = new Elysia();
+
+app.get("/", () => "Hello, Elysia with Nitro!");
+
+export default app.compile();
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```ts [server.ts]
+import { Elysia } from "elysia";
+
+const app = new Elysia();
+
+app.get("/", () => "Hello, Elysia with Nitro!");
+
+export default app.compile();
+```
+
+Nitro auto-detects `server.ts` in your project root and uses it as the server entry. The Elysia app handles all incoming requests, giving you full control over routing and middleware.
+
+Call `app.compile()` before exporting to optimize the router for production.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
+- [Elysia Documentation](https://elysiajs.com/)
diff --git a/examples/express/GUIDE.md b/examples/express/GUIDE.md
new file mode 100644
index 0000000000..322fb68aaa
--- /dev/null
+++ b/examples/express/GUIDE.md
@@ -0,0 +1,19 @@
+## Server Entry
+
+```ts [server.node.ts]
+import Express from "express";
+
+const app = Express();
+
+app.use("/", (_req, res) => {
+  res.send("Hello from Express with Nitro!");
+});
+
+export default app;
+```
+
+Nitro auto-detects `server.node.ts` in your project root and uses it as the server entry. The Express app handles all incoming requests, giving you full control over routing and middleware.
+
+::note
+The `.node.ts` suffix indicates this entry is Node.js specific and won't work in other runtimes like Cloudflare Workers or Deno.
+::
diff --git a/examples/express/README.md b/examples/express/README.md
new file mode 100644
index 0000000000..3e008afea4
--- /dev/null
+++ b/examples/express/README.md
@@ -0,0 +1,91 @@
+---
+category: backend frameworks
+icon: i-simple-icons-express
+---
+
+# Express
+
+> Integrate Express with Nitro using the server entry.
+
+<!-- automd:ui-code-tree src="." default="server.node.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.node.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.6",
+    "express": "^5.2.1",
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.node.ts]
+import Express from "express";
+
+const app = Express();
+
+app.use("/", (_req, res) => {
+  res.send("Hello from Express with Nitro!");
+});
+
+export default app;
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```ts [server.node.ts]
+import Express from "express";
+
+const app = Express();
+
+app.use("/", (_req, res) => {
+  res.send("Hello from Express with Nitro!");
+});
+
+export default app;
+```
+
+Nitro auto-detects `server.node.ts` in your project root and uses it as the server entry. The Express app handles all incoming requests, giving you full control over routing and middleware.
+
+::note
+The `.node.ts` suffix indicates this entry is Node.js specific and won't work in other runtimes like Cloudflare Workers or Deno.
+::
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
+- [Express Documentation](https://expressjs.com/)
diff --git a/examples/fastify/GUIDE.md b/examples/fastify/GUIDE.md
new file mode 100644
index 0000000000..14ad1102dd
--- /dev/null
+++ b/examples/fastify/GUIDE.md
@@ -0,0 +1,21 @@
+## Server Entry
+
+```ts [server.node.ts]
+import Fastify from "fastify";
+
+const app = Fastify();
+
+app.get("/", () => "Hello, Fastify with Nitro!");
+
+await app.ready();
+
+export default app.routing;
+```
+
+Nitro auto-detects `server.node.ts` in your project root and uses it as the server entry.
+
+Call `await app.ready()` to initialize all registered plugins before exporting. Export `app.routing` (not `app`) to provide Nitro with the request handler function.
+
+::note
+The `.node.ts` suffix indicates this entry is Node.js specific and won't work in other runtimes like Cloudflare Workers or Deno.
+::
diff --git a/examples/fastify/README.md b/examples/fastify/README.md
new file mode 100644
index 0000000000..b522a54323
--- /dev/null
+++ b/examples/fastify/README.md
@@ -0,0 +1,92 @@
+---
+category: backend frameworks
+icon: i-simple-icons-fastify
+---
+
+# Fastify
+
+> Integrate Fastify with Nitro using the server entry.
+
+<!-- automd:ui-code-tree src="." default="server.node.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.node.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev"
+  },
+  "devDependencies": {
+    "fastify": "^5.7.2",
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.node.ts]
+import Fastify from "fastify";
+
+const app = Fastify();
+
+app.get("/", () => "Hello, Fastify with Nitro!");
+
+await app.ready();
+
+export default app.routing;
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```ts [server.node.ts]
+import Fastify from "fastify";
+
+const app = Fastify();
+
+app.get("/", () => "Hello, Fastify with Nitro!");
+
+await app.ready();
+
+export default app.routing;
+```
+
+Nitro auto-detects `server.node.ts` in your project root and uses it as the server entry.
+
+Call `await app.ready()` to initialize all registered plugins before exporting. Export `app.routing` (not `app`) to provide Nitro with the request handler function.
+
+::note
+The `.node.ts` suffix indicates this entry is Node.js specific and won't work in other runtimes like Cloudflare Workers or Deno.
+::
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
+- [Fastify Documentation](https://fastify.dev/)
diff --git a/examples/hello-world/GUIDE.md b/examples/hello-world/GUIDE.md
new file mode 100644
index 0000000000..60861b543f
--- /dev/null
+++ b/examples/hello-world/GUIDE.md
@@ -0,0 +1,16 @@
+The simplest Nitro server. Export an object with a `fetch` method that receives a standard `Request` and returns a `Response`. No frameworks, no abstractions, just the web platform.
+
+
+## Server Entry
+
+```ts [server.ts]
+export default {
+  fetch(req: Request) {
+    return new Response("Nitro Works!");
+  },
+};
+```
+
+The `fetch` method follows the same signature as Service Workers and Cloudflare Workers. This pattern works across all deployment targets because it uses web standards.
+
+Add the Nitro plugin to Vite and it handles the rest: dev server, hot reloading, and production builds.
diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
new file mode 100644
index 0000000000..500747545f
--- /dev/null
+++ b/examples/hello-world/README.md
@@ -0,0 +1,83 @@
+---
+category: features
+icon: i-lucide-sparkles
+---
+
+# Hello World
+
+> Minimal Nitro server using the web standard fetch handler.
+
+<!-- automd:ui-code-tree src="." default="server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev",
+    "preview": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+export default {
+  fetch(req: Request) {
+    return new Response("Nitro Works!");
+  },
+};
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+The simplest Nitro server. Export an object with a `fetch` method that receives a standard `Request` and returns a `Response`. No frameworks, no abstractions, just the web platform.
+
+
+## Server Entry
+
+```ts [server.ts]
+export default {
+  fetch(req: Request) {
+    return new Response("Nitro Works!");
+  },
+};
+```
+
+The `fetch` method follows the same signature as Service Workers and Cloudflare Workers. This pattern works across all deployment targets because it uses web standards.
+
+Add the Nitro plugin to Vite and it handles the rest: dev server, hot reloading, and production builds.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
+- [Configuration](/docs/configuration)
diff --git a/examples/hono/GUIDE.md b/examples/hono/GUIDE.md
new file mode 100644
index 0000000000..6079b7840b
--- /dev/null
+++ b/examples/hono/GUIDE.md
@@ -0,0 +1,17 @@
+## Server Entry
+
+```ts [server.ts]
+import { Hono } from "hono";
+
+const app = new Hono();
+
+app.get("/", (c) => {
+  return c.text("Hello, Hono with Nitro!");
+});
+
+export default app;
+```
+
+Nitro auto-detects `server.ts` in your project root and uses it as the server entry. The Hono app handles all incoming requests, giving you full control over routing and middleware.
+
+Hono is cross-runtime compatible, so this server entry works across all Nitro deployment targets including Node.js, Deno, Bun, and Cloudflare Workers.
diff --git a/examples/hono/README.md b/examples/hono/README.md
new file mode 100644
index 0000000000..220fee1c6d
--- /dev/null
+++ b/examples/hono/README.md
@@ -0,0 +1,88 @@
+---
+category: backend frameworks
+icon: i-logos-hono
+---
+
+# Hono
+
+> Integrate Hono with Nitro using the server entry.
+
+<!-- automd:ui-code-tree src="." default="server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev"
+  },
+  "devDependencies": {
+    "hono": "^4.11.7",
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { Hono } from "hono";
+
+const app = new Hono();
+
+app.get("/", (c) => {
+  return c.text("Hello, Hono with Nitro!");
+});
+
+export default app;
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```ts [server.ts]
+import { Hono } from "hono";
+
+const app = new Hono();
+
+app.get("/", (c) => {
+  return c.text("Hello, Hono with Nitro!");
+});
+
+export default app;
+```
+
+Nitro auto-detects `server.ts` in your project root and uses it as the server entry. The Hono app handles all incoming requests, giving you full control over routing and middleware.
+
+Hono is cross-runtime compatible, so this server entry works across all Nitro deployment targets including Node.js, Deno, Bun, and Cloudflare Workers.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Server Entry](/docs/server-entry)
+- [Hono Documentation](https://hono.dev/)
diff --git a/examples/import-alias/GUIDE.md b/examples/import-alias/GUIDE.md
new file mode 100644
index 0000000000..22274bc8c6
--- /dev/null
+++ b/examples/import-alias/GUIDE.md
@@ -0,0 +1,21 @@
+Import aliases like `~` and `#` let you reference modules with shorter paths instead of relative imports.
+
+## Importing Using Aliases
+
+```ts [server/routes/index.ts]
+import { sum } from "~server/utils/math.ts";
+
+import { rand } from "#server/utils/math.ts";
+
+export default () => {
+  const [a, b] = [rand(1, 10), rand(1, 10)];
+  const result = sum(a, b);
+  return `The sum of ${a} + ${b} = ${result}`;
+};
+```
+
+The route imports the `sum` function using `~server/` and `rand` using `#server/`. Both resolve to the same `server/utils/math.ts` file. The handler generates two random numbers and returns their sum.
+
+## Configuration
+
+Aliases can be configured in `package.json` imports field or `nitro.config.ts`.
diff --git a/examples/import-alias/README.md b/examples/import-alias/README.md
new file mode 100644
index 0000000000..892e556c09
--- /dev/null
+++ b/examples/import-alias/README.md
@@ -0,0 +1,114 @@
+---
+category: config
+icon: i-lucide-at-sign
+---
+
+# Import Alias
+
+> Custom import aliases for cleaner module paths.
+
+<!-- automd:ui-code-tree src="." default="server/routes/index.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server/routes/index.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+  experimental: {
+    tsconfigPaths: true,
+  },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "imports": {
+    "#server/*": "./server/*"
+  },
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev",
+    "preview": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "~server/*": ["./server/*"]
+    }
+  }
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [server/routes/index.ts]
+import { sum } from "~server/utils/math.ts";
+
+import { rand } from "#server/utils/math.ts";
+
+export default () => {
+  const [a, b] = [rand(1, 10), rand(1, 10)];
+  const result = sum(a, b);
+  return `The sum of ${a} + ${b} = ${result}`;
+};
+```
+
+```ts [server/utils/math.ts]
+export function rand(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function sum(a: number, b: number): number {
+  return a + b;
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Import aliases like `~` and `#` let you reference modules with shorter paths instead of relative imports.
+
+## Importing Using Aliases
+
+```ts [server/routes/index.ts]
+import { sum } from "~server/utils/math.ts";
+
+import { rand } from "#server/utils/math.ts";
+
+export default () => {
+  const [a, b] = [rand(1, 10), rand(1, 10)];
+  const result = sum(a, b);
+  return `The sum of ${a} + ${b} = ${result}`;
+};
+```
+
+The route imports the `sum` function using `~server/` and `rand` using `#server/`. Both resolve to the same `server/utils/math.ts` file. The handler generates two random numbers and returns their sum.
+
+## Configuration
+
+Aliases can be configured in `package.json` imports field or `nitro.config.ts`.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Configuration](/docs/configuration)
diff --git a/examples/middleware/GUIDE.md b/examples/middleware/GUIDE.md
new file mode 100644
index 0000000000..1490ab5133
--- /dev/null
+++ b/examples/middleware/GUIDE.md
@@ -0,0 +1,30 @@
+Middleware functions run before route handlers on every request. They can modify the request, add context, or return early responses.
+
+## Defining Middleware
+
+Create files in `server/middleware/`. They run in alphabetical order:
+
+```ts [server/middleware/auth.ts]
+import { defineMiddleware } from "nitro/h3";
+
+export default defineMiddleware((event) => {
+  event.context.auth = { name: "User " + Math.round(Math.random() * 100) };
+});
+```
+
+Middleware can:
+- Add data to `event.context` for use in handlers
+- Return a response early to short-circuit the request
+- Modify request headers or other properties
+
+## Accessing Context in Handlers
+
+Data added to `event.context` in middleware is available in all subsequent handlers:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => ({
+  auth: event.context.auth,
+}));
+```
diff --git a/examples/middleware/README.md b/examples/middleware/README.md
new file mode 100644
index 0000000000..610ebe19a8
--- /dev/null
+++ b/examples/middleware/README.md
@@ -0,0 +1,105 @@
+---
+category: features
+icon: i-lucide-layers
+---
+
+# Middleware
+
+> Request middleware for authentication, logging, and request modification.
+
+<!-- automd:ui-code-tree src="." default="server/middleware/auth.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server/middleware/auth.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => ({
+  auth: event.context.auth,
+}));
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [server/middleware/auth.ts]
+import { defineMiddleware } from "nitro/h3";
+
+export default defineMiddleware((event) => {
+  event.context.auth = { name: "User " + Math.round(Math.random() * 100) };
+});
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Middleware functions run before route handlers on every request. They can modify the request, add context, or return early responses.
+
+## Defining Middleware
+
+Create files in `server/middleware/`. They run in alphabetical order:
+
+```ts [server/middleware/auth.ts]
+import { defineMiddleware } from "nitro/h3";
+
+export default defineMiddleware((event) => {
+  event.context.auth = { name: "User " + Math.round(Math.random() * 100) };
+});
+```
+
+Middleware can:
+- Add data to `event.context` for use in handlers
+- Return a response early to short-circuit the request
+- Modify request headers or other properties
+
+## Accessing Context in Handlers
+
+Data added to `event.context` in middleware is available in all subsequent handlers:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler((event) => ({
+  auth: event.context.auth,
+}));
+```
+
+<!-- /automd -->
+
+## Learn More
+
+- [Routing](/docs/routing)
diff --git a/examples/mono-jsx/GUIDE.md b/examples/mono-jsx/GUIDE.md
new file mode 100644
index 0000000000..e5c9ec899b
--- /dev/null
+++ b/examples/mono-jsx/GUIDE.md
@@ -0,0 +1,11 @@
+## Server Entry
+
+```tsx [server.tsx]
+export default () => (
+  <html>
+    <h1>Nitro + mongo-jsx works!</h1>
+  </html>
+);
+```
+
+Nitro auto-detects `server.tsx` and uses mono-jsx to transform JSX into HTML. Export a function that returns JSX, and Nitro sends the rendered HTML as the response.
diff --git a/examples/mono-jsx/README.md b/examples/mono-jsx/README.md
new file mode 100644
index 0000000000..30239e9d72
--- /dev/null
+++ b/examples/mono-jsx/README.md
@@ -0,0 +1,82 @@
+---
+category: server side rendering
+icon: i-lucide-brackets
+---
+
+# Mono JSX
+
+> Server-side JSX rendering in Nitro with mono-jsx.
+
+<!-- automd:ui-code-tree src="." default="server.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.tsx" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "mono-jsx": "latest",
+    "nitro": "latest"
+  }
+}
+```
+
+```tsx [server.tsx]
+export default () => (
+  <html>
+    <h1>Nitro + mongo-jsx works!</h1>
+  </html>
+);
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "mono-jsx"
+  }
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```tsx [server.tsx]
+export default () => (
+  <html>
+    <h1>Nitro + mongo-jsx works!</h1>
+  </html>
+);
+```
+
+Nitro auto-detects `server.tsx` and uses mono-jsx to transform JSX into HTML. Export a function that returns JSX, and Nitro sends the rendered HTML as the response.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
+- [mono-jsx](https://github.com/aspect-dev/mono-jsx)
diff --git a/examples/nano-jsx/GUIDE.md b/examples/nano-jsx/GUIDE.md
new file mode 100644
index 0000000000..916cd86afa
--- /dev/null
+++ b/examples/nano-jsx/GUIDE.md
@@ -0,0 +1,12 @@
+## Server Entry
+
+```tsx [server.tsx]
+import { defineHandler, html } from "h3";
+import { renderSSR } from "nano-jsx";
+
+export default defineHandler(() => {
+  return html(renderSSR(() => <h1>Nitro + nano-jsx works!</h1>));
+});
+```
+
+Nitro auto-detects `server.tsx` and uses it as the server entry. Use `renderSSR` from nano-jsx to convert JSX into an HTML string. The `html` helper from H3 sets the correct content type header.
diff --git a/examples/nano-jsx/README.md b/examples/nano-jsx/README.md
new file mode 100644
index 0000000000..321b61fc0c
--- /dev/null
+++ b/examples/nano-jsx/README.md
@@ -0,0 +1,84 @@
+---
+category: server side rendering
+icon: i-lucide-brackets
+---
+
+# Nano JSX
+
+> Server-side JSX rendering in Nitro with nano-jsx.
+
+<!-- automd:ui-code-tree src="." default="server.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.tsx" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nano-jsx": "^0.2.1",
+    "nitro": "latest"
+  }
+}
+```
+
+```tsx [server.tsx]
+import { defineHandler, html } from "h3";
+import { renderSSR } from "nano-jsx";
+
+export default defineHandler(() => {
+  return html(renderSSR(() => <h1>Nitro + nano-jsx works!</h1>));
+});
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "nano-jsx/esm"
+  }
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+## Server Entry
+
+```tsx [server.tsx]
+import { defineHandler, html } from "h3";
+import { renderSSR } from "nano-jsx";
+
+export default defineHandler(() => {
+  return html(renderSSR(() => <h1>Nitro + nano-jsx works!</h1>));
+});
+```
+
+Nitro auto-detects `server.tsx` and uses it as the server entry. Use `renderSSR` from nano-jsx to convert JSX into an HTML string. The `html` helper from H3 sets the correct content type header.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
+- [nano-jsx](https://nanojsx.io/)
diff --git a/examples/plugins/GUIDE.md b/examples/plugins/GUIDE.md
new file mode 100644
index 0000000000..51420d853c
--- /dev/null
+++ b/examples/plugins/GUIDE.md
@@ -0,0 +1,27 @@
+Plugins let you hook into Nitro's runtime lifecycle. This example shows a plugin that modifies the `Content-Type` header on every response. Create files in `server/plugins/` and they're automatically loaded at startup.
+
+## Defining a Plugin
+
+```ts [server/plugins/test.ts]
+import { definePlugin } from "nitro";
+import { useNitroHooks } from "nitro/app";
+
+export default definePlugin((nitroApp) => {
+  const hooks = useNitroHooks();
+  hooks.hook("response", (event) => {
+    event.headers.set("content-type", "html; charset=utf-8");
+  });
+});
+```
+
+The plugin uses `useNitroHooks()` to access the hooks system, then registers a `response` hook that runs after every request. Here it sets the content type to HTML, but you could log requests, add security headers, or modify responses in any way.
+
+## Main Handler
+
+```ts [server.ts]
+import { eventHandler } from "h3";
+
+export default eventHandler(() => "<h1>Hello Nitro!</h1>");
+```
+
+The handler returns HTML without setting a content type. The plugin automatically adds the correct `Content-Type: html; charset=utf-8` header to the response.
diff --git a/examples/plugins/README.md b/examples/plugins/README.md
new file mode 100644
index 0000000000..7fa3479a56
--- /dev/null
+++ b/examples/plugins/README.md
@@ -0,0 +1,105 @@
+---
+category: features
+icon: i-lucide-plug
+---
+
+# Plugins
+
+> Extend Nitro with custom plugins for hooks and lifecycle events.
+
+<!-- automd:ui-code-tree src="." default="server/plugins/test.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server/plugins/test.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: true,
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { eventHandler } from "h3";
+
+export default eventHandler(() => "<h1>Hello Nitro!</h1>");
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [server/plugins/test.ts]
+import { definePlugin } from "nitro";
+import { useNitroHooks } from "nitro/app";
+
+export default definePlugin((nitroApp) => {
+  const hooks = useNitroHooks();
+  hooks.hook("response", (event) => {
+    event.headers.set("content-type", "html; charset=utf-8");
+  });
+});
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Plugins let you hook into Nitro's runtime lifecycle. This example shows a plugin that modifies the `Content-Type` header on every response. Create files in `server/plugins/` and they're automatically loaded at startup.
+
+## Defining a Plugin
+
+```ts [server/plugins/test.ts]
+import { definePlugin } from "nitro";
+import { useNitroHooks } from "nitro/app";
+
+export default definePlugin((nitroApp) => {
+  const hooks = useNitroHooks();
+  hooks.hook("response", (event) => {
+    event.headers.set("content-type", "html; charset=utf-8");
+  });
+});
+```
+
+The plugin uses `useNitroHooks()` to access the hooks system, then registers a `response` hook that runs after every request. Here it sets the content type to HTML, but you could log requests, add security headers, or modify responses in any way.
+
+## Main Handler
+
+```ts [server.ts]
+import { eventHandler } from "h3";
+
+export default eventHandler(() => "<h1>Hello Nitro!</h1>");
+```
+
+The handler returns HTML without setting a content type. The plugin automatically adds the correct `Content-Type: html; charset=utf-8` header to the response.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Plugins](/docs/plugins)
+- [Lifecycle](/docs/lifecycle)
diff --git a/examples/renderer/GUIDE.md b/examples/renderer/GUIDE.md
new file mode 100644
index 0000000000..57728650b4
--- /dev/null
+++ b/examples/renderer/GUIDE.md
@@ -0,0 +1,39 @@
+Create a custom renderer that generates HTML responses with data from API routes. Use Nitro's internal `fetch` to call routes without network overhead.
+
+## Renderer
+
+```ts [renderer.ts]
+import { fetch } from "nitro";
+
+export default async function renderer({ url }: { req: Request; url: URL }) {
+  const apiRes = await fetch("/api/hello").then((res) => res.text());
+  return new Response(
+    /* html */ `<!DOCTYPE html>
+    <html>
+    <head>
+      <title>Custom Renderer</title>
+    </head>
+    <body>
+      <h1>Hello from custom renderer!</h1>
+      <p>Current path: ${url.pathname}</p>
+      <p>API says: ${apiRes}</p>
+    </body>
+    </html>`,
+    { headers: { "content-type": "text/html; charset=utf-8" } }
+  );
+}
+```
+
+Nitro auto-detects `renderer.ts` in your project root and uses it for all non-API routes. The renderer function receives the request URL and returns a `Response`.
+
+Use `fetch` from `nitro` to call API routes without network overhead—these requests stay in-process.
+
+## API Route
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+Define API routes in the `api/` directory. When the renderer calls `fetch("/api/hello")`, this handler runs and returns its response.
diff --git a/examples/renderer/README.md b/examples/renderer/README.md
new file mode 100644
index 0000000000..6d44051328
--- /dev/null
+++ b/examples/renderer/README.md
@@ -0,0 +1,127 @@
+---
+category: server side rendering
+icon: i-lucide-code
+---
+
+# Custom Renderer
+
+> Build a custom HTML renderer in Nitro with server-side data fetching.
+
+<!-- automd:ui-code-tree src="." default="renderer.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="renderer.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  renderer: { handler: "./renderer" },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [renderer.ts]
+import { fetch } from "nitro";
+
+export default async function renderer({ url }: { req: Request; url: URL }) {
+  const apiRes = await fetch("/api/hello").then((res) => res.text());
+  return new Response(
+    /* html */ `<!DOCTYPE html>
+    <html>
+    <head>
+      <title>Custom Renderer</title>
+    </head>
+    <body>
+      <h1>Hello from custom renderer!</h1>
+      <p>Current path: ${url.pathname}</p>
+      <p>API says: ${apiRes}</p>
+    </body>
+    </html>`,
+    { headers: { "content-type": "text/html; charset=utf-8" } }
+  );
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Create a custom renderer that generates HTML responses with data from API routes. Use Nitro's internal `fetch` to call routes without network overhead.
+
+## Renderer
+
+```ts [renderer.ts]
+import { fetch } from "nitro";
+
+export default async function renderer({ url }: { req: Request; url: URL }) {
+  const apiRes = await fetch("/api/hello").then((res) => res.text());
+  return new Response(
+    /* html */ `<!DOCTYPE html>
+    <html>
+    <head>
+      <title>Custom Renderer</title>
+    </head>
+    <body>
+      <h1>Hello from custom renderer!</h1>
+      <p>Current path: ${url.pathname}</p>
+      <p>API says: ${apiRes}</p>
+    </body>
+    </html>`,
+    { headers: { "content-type": "text/html; charset=utf-8" } }
+  );
+}
+```
+
+Nitro auto-detects `renderer.ts` in your project root and uses it for all non-API routes. The renderer function receives the request URL and returns a `Response`.
+
+Use `fetch` from `nitro` to call API routes without network overhead—these requests stay in-process.
+
+## API Route
+
+```ts [api/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Nitro is amazing!");
+```
+
+Define API routes in the `api/` directory. When the renderer calls `fetch("/api/hello")`, this handler runs and returns its response.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
diff --git a/examples/runtime-config/GUIDE.md b/examples/runtime-config/GUIDE.md
new file mode 100644
index 0000000000..dafd4dc726
--- /dev/null
+++ b/examples/runtime-config/GUIDE.md
@@ -0,0 +1,39 @@
+Runtime config lets you define configuration values that can be overridden by environment variables at runtime.
+
+## Define Config Schema
+
+Declare your runtime config with default values in `nitro.config.ts`:
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  runtimeConfig: {
+    apiKey: "",
+  },
+});
+```
+
+## Access at Runtime
+
+Use `useRuntimeConfig` to access configuration values in your handlers:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { useRuntimeConfig } from "nitro/runtime-config";
+
+export default defineHandler((event) => {
+  const runtimeConfig = useRuntimeConfig();
+  return { runtimeConfig };
+});
+```
+
+## Environment Variables
+
+Override config values via environment variables prefixed with `NITRO_`:
+
+```sh [.env]
+# NEVER COMMIT SENSITIVE DATA. THIS IS ONLY FOR DEMO PURPOSES.
+NITRO_API_KEY=secret-api-key
+```
diff --git a/examples/runtime-config/README.md b/examples/runtime-config/README.md
new file mode 100644
index 0000000000..19ae051839
--- /dev/null
+++ b/examples/runtime-config/README.md
@@ -0,0 +1,121 @@
+---
+category: config
+icon: i-lucide-settings
+---
+
+# Runtime Config
+
+> Environment-aware configuration with runtime access.
+
+<!-- automd:ui-code-tree src="." default="nitro.config.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="nitro.config.ts" expandAll}
+
+```text [.env]
+# NEVER COMMIT SENSITIVE DATA. THIS IS ONLY FOR DEMO PURPOSES.
+NITRO_API_KEY=secret-api-key
+```
+
+```text [.gitignore]
+# THIS IS ONLY FOR DEMO. DO NOT COMMIT SENSITIVE DATA IN REAL PROJECTS
+!.env
+```
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  runtimeConfig: {
+    apiKey: "",
+  },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { useRuntimeConfig } from "nitro/runtime-config";
+
+export default defineHandler((event) => {
+  const runtimeConfig = useRuntimeConfig();
+  return { runtimeConfig };
+});
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Runtime config lets you define configuration values that can be overridden by environment variables at runtime.
+
+## Define Config Schema
+
+Declare your runtime config with default values in `nitro.config.ts`:
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  runtimeConfig: {
+    apiKey: "",
+  },
+});
+```
+
+## Access at Runtime
+
+Use `useRuntimeConfig` to access configuration values in your handlers:
+
+```ts [server.ts]
+import { defineHandler } from "nitro/h3";
+import { useRuntimeConfig } from "nitro/runtime-config";
+
+export default defineHandler((event) => {
+  const runtimeConfig = useRuntimeConfig();
+  return { runtimeConfig };
+});
+```
+
+## Environment Variables
+
+Override config values via environment variables prefixed with `NITRO_`:
+
+```sh [.env]
+# NEVER COMMIT SENSITIVE DATA. THIS IS ONLY FOR DEMO PURPOSES.
+NITRO_API_KEY=secret-api-key
+```
+
+<!-- /automd -->
+
+## Learn More
+
+- [Configuration](/docs/configuration)
diff --git a/examples/server-fetch/GUIDE.md b/examples/server-fetch/GUIDE.md
new file mode 100644
index 0000000000..08a45c494d
--- /dev/null
+++ b/examples/server-fetch/GUIDE.md
@@ -0,0 +1,22 @@
+When you need one route to call another, use Nitro's `fetch` function instead of the global fetch. It makes internal requests that stay in-process, avoiding network round-trips. The request never leaves the server.
+
+## Main Route
+
+```ts [routes/index.ts]
+import { defineHandler } from "nitro/h3";
+import { fetch } from "nitro";
+
+export default defineHandler(() => fetch("/hello"));
+```
+
+The index route imports `fetch` from `nitro` (not the global fetch) and calls the `/hello` route. This request is handled internally without going through the network stack.
+
+## Internal API Route
+
+```ts [routes/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Hello!");
+```
+
+A simple route that returns "Hello!". When the index route calls `fetch("/hello")`, this handler runs and its response is returned directly.
diff --git a/examples/server-fetch/README.md b/examples/server-fetch/README.md
new file mode 100644
index 0000000000..984d9eea82
--- /dev/null
+++ b/examples/server-fetch/README.md
@@ -0,0 +1,101 @@
+---
+category: features
+icon: i-lucide-arrow-right-left
+---
+
+# Server Fetch
+
+> Internal server-to-server requests without network overhead.
+
+<!-- automd:ui-code-tree src="." default="routes/index.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="routes/index.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig, serverFetch } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  hooks: {
+    "dev:start": async () => {
+      const res = await serverFetch("/hello");
+      const text = await res.text();
+      console.log("Fetched /hello in nitro module:", res.status, text);
+    },
+  },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [routes/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Hello!");
+```
+
+```ts [routes/index.ts]
+import { defineHandler } from "nitro/h3";
+import { fetch } from "nitro";
+
+export default defineHandler(() => fetch("/hello"));
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+When you need one route to call another, use Nitro's `fetch` function instead of the global fetch. It makes internal requests that stay in-process, avoiding network round-trips. The request never leaves the server.
+
+## Main Route
+
+```ts [routes/index.ts]
+import { defineHandler } from "nitro/h3";
+import { fetch } from "nitro";
+
+export default defineHandler(() => fetch("/hello"));
+```
+
+The index route imports `fetch` from `nitro` (not the global fetch) and calls the `/hello` route. This request is handled internally without going through the network stack.
+
+## Internal API Route
+
+```ts [routes/hello.ts]
+import { defineHandler } from "nitro/h3";
+
+export default defineHandler(() => "Hello!");
+```
+
+A simple route that returns "Hello!". When the index route calls `fetch("/hello")`, this handler runs and its response is returned directly.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Routing](/docs/routing)
diff --git a/examples/shiki/GUIDE.md b/examples/shiki/GUIDE.md
new file mode 100644
index 0000000000..a47d8f1561
--- /dev/null
+++ b/examples/shiki/GUIDE.md
@@ -0,0 +1,56 @@
+Use Shiki for syntax highlighting with TextMate grammars. This example highlights code on the server using Nitro's server scripts feature, which runs JavaScript inside HTML files before sending the response.
+
+## API Route
+
+```ts [api/highlight.ts]
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+
+const highlighter = await createHighlighterCore({
+  engine: createOnigurumaEngine(import("shiki/wasm")),
+  themes: [await import("shiki/themes/vitesse-dark.mjs")],
+  langs: [await import("shiki/langs/ts.mjs")],
+});
+
+export default async ({ req }: { req: Request }) => {
+  const code = await req.text();
+  const html = await highlighter.codeToHtml(code, {
+    lang: "ts",
+    theme: "vitesse-dark",
+  });
+  return new Response(html, {
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+};
+```
+
+Create a Shiki highlighter with the Vitesse Dark theme and TypeScript language support. When the API receives a POST request, it reads the code from the request body and returns highlighted HTML.
+
+## Server-Side Rendering
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Hello World Snippet</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="card" role="region" aria-label="Code snippet">
+      <div class="label">JavaScript</div>
+      <script server>
+        const hl = (code) =>
+          serverFetch("/api/highlight", {
+            method: "POST",
+            body: code,
+          });
+      </script>
+      <pre><code>{{{ hl(`console.log("💚 Simple is beautiful!");`) }}}</code></pre>
+    </div>
+  </body>
+</html>
+```
+
+The `<script server>` tag runs on the server before the HTML is sent. It defines a helper function that calls the highlight API using `serverFetch`. The triple-brace syntax `{{{ }}}` outputs the result without escaping, so the highlighted HTML renders correctly.
diff --git a/examples/shiki/README.md b/examples/shiki/README.md
new file mode 100644
index 0000000000..3f1316464a
--- /dev/null
+++ b/examples/shiki/README.md
@@ -0,0 +1,212 @@
+---
+category: integrations
+icon: i-lucide-highlighter
+---
+
+# Shiki
+
+> Server-side syntax highlighting in Nitro with Shiki.
+
+<!-- automd:ui-code-tree src="." default="api/highlight.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="api/highlight.ts" expandAll}
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Hello World Snippet</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="card" role="region" aria-label="Code snippet">
+      <div class="label">JavaScript</div>
+      <script server>
+        const hl = (code) =>
+          serverFetch("/api/highlight", {
+            method: "POST",
+            body: code,
+          });
+      </script>
+      <pre><code>{{{ hl(`console.log("💚 Simple is beautiful!");`) }}}</code></pre>
+    </div>
+  </body>
+</html>
+```
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "nitro": "latest",
+    "shiki": "^3.21.0"
+  }
+}
+```
+
+```css [styles.css]
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f8fa;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    "Liberation Sans",
+    sans-serif;
+}
+.card {
+  text-align: left;
+  background: #0b1220;
+  color: #e6edf3;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.2);
+  max-width: 90%;
+  width: 520px;
+}
+.label {
+  font-size: 12px;
+  color: #9aa7b2;
+  margin-bottom: 8px;
+}
+pre {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
+  font-size: 14px;
+  background: transparent;
+  white-space: pre;
+  overflow: auto;
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [nitro()],
+});
+```
+
+```ts [api/highlight.ts]
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+
+const highlighter = await createHighlighterCore({
+  engine: createOnigurumaEngine(import("shiki/wasm")),
+  themes: [await import("shiki/themes/vitesse-dark.mjs")],
+  langs: [await import("shiki/langs/ts.mjs")],
+});
+
+export default async ({ req }: { req: Request }) => {
+  const code = await req.text();
+  const html = await highlighter.codeToHtml(code, {
+    lang: "ts",
+    theme: "vitesse-dark",
+  });
+  return new Response(html, {
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+};
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Use Shiki for syntax highlighting with TextMate grammars. This example highlights code on the server using Nitro's server scripts feature, which runs JavaScript inside HTML files before sending the response.
+
+## API Route
+
+```ts [api/highlight.ts]
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+
+const highlighter = await createHighlighterCore({
+  engine: createOnigurumaEngine(import("shiki/wasm")),
+  themes: [await import("shiki/themes/vitesse-dark.mjs")],
+  langs: [await import("shiki/langs/ts.mjs")],
+});
+
+export default async ({ req }: { req: Request }) => {
+  const code = await req.text();
+  const html = await highlighter.codeToHtml(code, {
+    lang: "ts",
+    theme: "vitesse-dark",
+  });
+  return new Response(html, {
+    headers: { "Content-Type": "text/html; charset=utf-8" },
+  });
+};
+```
+
+Create a Shiki highlighter with the Vitesse Dark theme and TypeScript language support. When the API receives a POST request, it reads the code from the request body and returns highlighted HTML.
+
+## Server-Side Rendering
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Hello World Snippet</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="card" role="region" aria-label="Code snippet">
+      <div class="label">JavaScript</div>
+      <script server>
+        const hl = (code) =>
+          serverFetch("/api/highlight", {
+            method: "POST",
+            body: code,
+          });
+      </script>
+      <pre><code>{{{ hl(`console.log("💚 Simple is beautiful!");`) }}}</code></pre>
+    </div>
+  </body>
+</html>
+```
+
+The `<script server>` tag runs on the server before the HTML is sent. It defines a helper function that calls the highlight API using `serverFetch`. The triple-brace syntax `{{{ }}}` outputs the result without escaping, so the highlighted HTML renders correctly.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Shiki](https://shiki.style/)
diff --git a/examples/virtual-routes/GUIDE.md b/examples/virtual-routes/GUIDE.md
new file mode 100644
index 0000000000..f2a190e7eb
--- /dev/null
+++ b/examples/virtual-routes/GUIDE.md
@@ -0,0 +1,21 @@
+Virtual routes let you define handlers as strings in your config instead of creating separate files. This is useful when generating routes dynamically, building plugins, or keeping simple routes inline.
+
+## Configuration
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  routes: {
+    "/": "#virtual-route",
+  },
+  virtual: {
+    "#virtual-route": () =>
+      /* js */ `export default () => new Response("Hello from virtual entry!")`,
+  },
+});
+```
+
+The `routes` option maps URL paths to virtual module identifiers (prefixed with `#`). The `virtual` option defines the module content as a string or function returning a string. At build time, Nitro resolves these virtual modules to actual handlers.
+
+There are no route files in this project. The entire handler is defined inline in the config, and Nitro generates the route at build time.
diff --git a/examples/virtual-routes/README.md b/examples/virtual-routes/README.md
new file mode 100644
index 0000000000..8f4daeae77
--- /dev/null
+++ b/examples/virtual-routes/README.md
@@ -0,0 +1,88 @@
+---
+category: features
+icon: i-lucide-box
+---
+
+# Virtual Routes
+
+> Define routes programmatically using Nitro's virtual module system.
+
+<!-- automd:ui-code-tree src="." default="nitro.config.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="nitro.config.ts" expandAll}
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  routes: {
+    "/": "#virtual-route",
+  },
+  virtual: {
+    "#virtual-route": () =>
+      /* js */ `export default () => new Response("Hello from virtual entry!")`,
+  },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "nitro build",
+    "dev": "nitro dev",
+    "preview": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Virtual routes let you define handlers as strings in your config instead of creating separate files. This is useful when generating routes dynamically, building plugins, or keeping simple routes inline.
+
+## Configuration
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  routes: {
+    "/": "#virtual-route",
+  },
+  virtual: {
+    "#virtual-route": () =>
+      /* js */ `export default () => new Response("Hello from virtual entry!")`,
+  },
+});
+```
+
+The `routes` option maps URL paths to virtual module identifiers (prefixed with `#`). The `virtual` option defines the module content as a string or function returning a string. At build time, Nitro resolves these virtual modules to actual handlers.
+
+There are no route files in this project. The entire handler is defined inline in the config, and Nitro generates the route at build time.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Routing](/docs/routing)
+- [Configuration](/docs/configuration)
diff --git a/examples/vite-nitro-plugin/GUIDE.md b/examples/vite-nitro-plugin/GUIDE.md
new file mode 100644
index 0000000000..cefd7d29e8
--- /dev/null
+++ b/examples/vite-nitro-plugin/GUIDE.md
@@ -0,0 +1,26 @@
+Instead of using a separate `nitro.config.ts`, you can configure Nitro directly in your Vite config. This gives you access to Nitro's setup hook where you can register routes and virtual modules programmatically.
+
+## Vite Configuration
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro(),
+    {
+      name: "my-nitro-plugin",
+      nitro: {
+        setup: (nitro) => {
+          nitro.options.routes["/"] = "#virtual-by-plugin";
+          nitro.options.virtual["#virtual-by-plugin"] =
+            `export default () => new Response("Hello from virtual entry!")`;
+        },
+      },
+    },
+  ],
+});
+```
+
+The config adds two plugins: the `nitro()` plugin and a custom plugin that uses the `nitro.setup` hook. Inside the setup function, you have access to Nitro's options object. This example registers a virtual route at `/` that maps to a virtual module `#virtual-by-plugin`, then defines that module inline.
diff --git a/examples/vite-nitro-plugin/README.md b/examples/vite-nitro-plugin/README.md
new file mode 100644
index 0000000000..cb71ac3da7
--- /dev/null
+++ b/examples/vite-nitro-plugin/README.md
@@ -0,0 +1,93 @@
+---
+category: vite
+icon: i-logos-vitejs
+---
+
+# Vite Nitro Plugin
+
+> Use Nitro as a Vite plugin for programmatic configuration.
+
+<!-- automd:ui-code-tree src="." default="vite.config.mjs" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="vite.config.mjs" expandAll}
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "dev": "vite dev"
+  },
+  "devDependencies": {
+    "nitro": "latest",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro(),
+    {
+      name: "my-nitro-plugin",
+      nitro: {
+        setup: (nitro) => {
+          nitro.options.routes["/"] = "#virtual-by-plugin";
+          nitro.options.virtual["#virtual-by-plugin"] =
+            `export default () => new Response("Hello from virtual entry!")`;
+        },
+      },
+    },
+  ],
+});
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Instead of using a separate `nitro.config.ts`, you can configure Nitro directly in your Vite config. This gives you access to Nitro's setup hook where you can register routes and virtual modules programmatically.
+
+## Vite Configuration
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro(),
+    {
+      name: "my-nitro-plugin",
+      nitro: {
+        setup: (nitro) => {
+          nitro.options.routes["/"] = "#virtual-by-plugin";
+          nitro.options.virtual["#virtual-by-plugin"] =
+            `export default () => new Response("Hello from virtual entry!")`;
+        },
+      },
+    },
+  ],
+});
+```
+
+The config adds two plugins: the `nitro()` plugin and a custom plugin that uses the `nitro.setup` hook. Inside the setup function, you have access to Nitro's options object. This example registers a virtual route at `/` that maps to a virtual module `#virtual-by-plugin`, then defines that module inline.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Configuration](/docs/configuration)
diff --git a/examples/vite-rsc/GUIDE.md b/examples/vite-rsc/GUIDE.md
new file mode 100644
index 0000000000..9299d67342
--- /dev/null
+++ b/examples/vite-rsc/GUIDE.md
@@ -0,0 +1,193 @@
+This example demonstrates React Server Components (RSC) using Vite's experimental RSC plugin with Nitro. It includes server components, client components, server actions, and streaming SSR.
+
+## Overview
+
+1. **SSR Entry** handles incoming requests and renders React components to HTML
+2. **Root Component** defines the page structure as a server component
+3. **Client Components** use the `"use client"` directive for interactive parts
+
+## 1. SSR Entry
+
+```tsx [app/framework/entry.ssr.tsx]
+import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
+import React from "react";
+import type { ReactFormState } from "react-dom/client";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { injectRSCPayload } from "rsc-html-stream/server";
+import type { RscPayload } from "./entry.rsc";
+
+export default {
+  fetch: async (request: Request) => {
+    const rscEntryModule = await import.meta.viteRsc.loadModule<typeof import("./entry.rsc")>(
+      "rsc",
+      "index"
+    );
+    return rscEntryModule.default(request);
+  },
+};
+
+export async function renderHTML(
+  rscStream: ReadableStream<Uint8Array>,
+  options: {
+    formState?: ReactFormState;
+    nonce?: string;
+    debugNoJS?: boolean;
+  }
+): Promise<{ stream: ReadableStream<Uint8Array>; status?: number }> {
+  // Duplicate one RSC stream into two.
+  // - one for SSR (ReactClient.createFromReadableStream below)
+  // - another for browser hydration payload by injecting <script>...FLIGHT_DATA...</script>.
+  const [rscStream1, rscStream2] = rscStream.tee();
+
+  // Deserialize RSC stream back to React VDOM
+  let payload: Promise<RscPayload> | undefined;
+  function SsrRoot() {
+    // Deserialization needs to be kicked off inside ReactDOMServer context
+    // for ReactDOMServer preinit/preloading to work
+    payload ??= createFromReadableStream<RscPayload>(rscStream1);
+    return React.use(payload).root;
+  }
+
+  // Render HTML (traditional SSR)
+  const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index");
+
+  let htmlStream: ReadableStream<Uint8Array>;
+  let status: number | undefined;
+
+  try {
+    htmlStream = await renderToReadableStream(<SsrRoot />, {
+      bootstrapScriptContent: options?.debugNoJS ? undefined : bootstrapScriptContent,
+      nonce: options?.nonce,
+      formState: options?.formState,
+    });
+  } catch {
+    // fallback to render an empty shell and run pure CSR on browser,
+    // which can replay server component error and trigger error boundary.
+    status = 500;
+    htmlStream = await renderToReadableStream(
+      <html>
+        <body>
+          <noscript>Internal Server Error: SSR failed</noscript>
+        </body>
+      </html>,
+      {
+        bootstrapScriptContent:
+          `self.__NO_HYDRATE=1;` + (options?.debugNoJS ? "" : bootstrapScriptContent),
+        nonce: options?.nonce,
+      }
+    );
+  }
+
+  let responseStream: ReadableStream<Uint8Array> = htmlStream;
+  if (!options?.debugNoJS) {
+    // Initial RSC stream is injected in HTML stream as <script>...FLIGHT_DATA...</script>
+    // using utility made by devongovett https://github.com/devongovett/rsc-html-stream
+    responseStream = responseStream.pipeThrough(
+      injectRSCPayload(rscStream2, {
+        nonce: options?.nonce,
+      })
+    );
+  }
+
+  return { stream: responseStream, status };
+}
+```
+
+The SSR entry handles the rendering pipeline. It loads the RSC entry module, duplicates the RSC stream (one for SSR, one for hydration), deserializes the stream back to React VDOM, and renders it to HTML. The RSC payload is injected into the HTML for client hydration.
+
+## 2. Root Server Component
+
+```tsx [app/root.tsx]
+import "./index.css"; // css import is automatically injected in exported server components
+import viteLogo from "./assets/vite.svg";
+import { getServerCounter, updateServerCounter } from "./action.tsx";
+import reactLogo from "./assets/react.svg";
+import nitroLogo from "./assets/nitro.svg";
+import { ClientCounter } from "./client.tsx";
+
+export function Root(props: { url: URL }) {
+  return (
+    <html lang="en">
+      <head>
+        {/* eslint-disable-next-line unicorn/text-encoding-identifier-case */}
+        <meta charSet="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Nitro + Vite + RSC</title>
+      </head>
+      <body>
+        <App {...props} />
+      </body>
+    </html>
+  );
+}
+
+function App(props: { url: URL }) {
+  return (
+    <div id="root">
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev/reference/rsc/server-components" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+
+        <a href="https://v3.nitro.build" target="_blank">
+          <img src={nitroLogo} className="logo" alt="Nitro logo" />
+        </a>
+      </div>
+      <h1>Vite + RSC + Nitro</h1>
+      <div className="card">
+        <ClientCounter />
+      </div>
+      <div className="card">
+        <form action={updateServerCounter.bind(null, 1)}>
+          <button>Server Counter: {getServerCounter()}</button>
+        </form>
+      </div>
+      <div className="card">Request URL: {props.url?.href}</div>
+      <ul className="read-the-docs">
+        <li>
+          Edit <code>src/client.tsx</code> to test client HMR.
+        </li>
+        <li>
+          Edit <code>src/root.tsx</code> to test server HMR.
+        </li>
+        <li>
+          Visit{" "}
+          <a href="./_.rsc" target="_blank">
+            <code>_.rsc</code>
+          </a>{" "}
+          to view RSC stream payload.
+        </li>
+        <li>
+          Visit{" "}
+          <a href="?__nojs" target="_blank">
+            <code>?__nojs</code>
+          </a>{" "}
+          to test server action without js enabled.
+        </li>
+      </ul>
+    </div>
+  );
+}
+```
+
+Server components run only on the server. They can import CSS directly, use server-side data, and call server actions. The `ClientCounter` component is imported but runs on the client because it has the `"use client"` directive.
+
+## 3. Client Component
+
+```tsx [app/client.tsx]
+"use client";
+
+import React from "react";
+
+export function ClientCounter() {
+  const [count, setCount] = React.useState(0);
+
+  return <button onClick={() => setCount((count) => count + 1)}>Client Counter: {count}</button>;
+}
+```
+
+The `"use client"` directive marks this as a client component. It hydrates on the browser and handles interactive state. Server components can import and render client components, but client components cannot import server components.
diff --git a/examples/vite-rsc/README.md b/examples/vite-rsc/README.md
index 66ba6d8b00..6ed5bd41fc 100644
--- a/examples/vite-rsc/README.md
+++ b/examples/vite-rsc/README.md
@@ -1,5 +1,867 @@
-# Vite + RSC + Nitro Example
+---
+category: vite
+icon: i-logos-react
+---
 
-Copied from https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/starter
+# Vite RSC
 
-The difference from the original template is to export `default.fetch` handler from `entry.ssr.tsx` instead of `entry.rsc.tsx`.
+> React Server Components with Vite and Nitro.
+
+<!-- automd:ui-code-tree src="." default="app/root.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="app/root.tsx" expandAll}
+
+```text [.gitignore]
+node_modules
+dist
+```
+
+```json [package.json]
+{
+  "name": "@vitejs/plugin-rsc-examples-starter",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-rsc": "^0.5.17",
+    "nitro": "latest",
+    "rsc-html-stream": "^0.0.7",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@vitejs/plugin-rsc/types"],
+    "jsx": "react-jsx"
+  }
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+import rsc from "@vitejs/plugin-rsc";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [
+    nitro(),
+    rsc({
+      serverHandler: false,
+      entries: {
+        ssr: "./app/framework/entry.ssr.tsx",
+        rsc: "./app/framework/entry.rsc.tsx",
+      },
+    }),
+    react(),
+  ],
+
+  environments: {
+    client: {
+      build: {
+        rollupOptions: {
+          input: { index: "./app/framework/entry.browser.tsx" },
+        },
+      },
+    },
+  },
+});
+```
+
+```tsx [app/action.tsx]
+"use server";
+
+let serverCounter = 0;
+
+export async function getServerCounter() {
+  return serverCounter;
+}
+
+export async function updateServerCounter(change: number) {
+  serverCounter += change;
+}
+```
+
+```tsx [app/client.tsx]
+"use client";
+
+import React from "react";
+
+export function ClientCounter() {
+  const [count, setCount] = React.useState(0);
+
+  return <button onClick={() => setCount((count) => count + 1)}>Client Counter: {count}</button>;
+}
+```
+
+```css [app/index.css]
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 1rem;
+}
+
+.read-the-docs {
+  color: #888;
+  text-align: left;
+}
+```
+
+```tsx [app/root.tsx]
+import "./index.css"; // css import is automatically injected in exported server components
+import viteLogo from "./assets/vite.svg";
+import { getServerCounter, updateServerCounter } from "./action.tsx";
+import reactLogo from "./assets/react.svg";
+import nitroLogo from "./assets/nitro.svg";
+import { ClientCounter } from "./client.tsx";
+
+export function Root(props: { url: URL }) {
+  return (
+    <html lang="en">
+      <head>
+        {/* eslint-disable-next-line unicorn/text-encoding-identifier-case */}
+        <meta charSet="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Nitro + Vite + RSC</title>
+      </head>
+      <body>
+        <App {...props} />
+      </body>
+    </html>
+  );
+}
+
+function App(props: { url: URL }) {
+  return (
+    <div id="root">
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev/reference/rsc/server-components" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+
+        <a href="https://v3.nitro.build" target="_blank">
+          <img src={nitroLogo} className="logo" alt="Nitro logo" />
+        </a>
+      </div>
+      <h1>Vite + RSC + Nitro</h1>
+      <div className="card">
+        <ClientCounter />
+      </div>
+      <div className="card">
+        <form action={updateServerCounter.bind(null, 1)}>
+          <button>Server Counter: {getServerCounter()}</button>
+        </form>
+      </div>
+      <div className="card">Request URL: {props.url?.href}</div>
+      <ul className="read-the-docs">
+        <li>
+          Edit <code>src/client.tsx</code> to test client HMR.
+        </li>
+        <li>
+          Edit <code>src/root.tsx</code> to test server HMR.
+        </li>
+        <li>
+          Visit{" "}
+          <a href="./_.rsc" target="_blank">
+            <code>_.rsc</code>
+          </a>{" "}
+          to view RSC stream payload.
+        </li>
+        <li>
+          Visit{" "}
+          <a href="?__nojs" target="_blank">
+            <code>?__nojs</code>
+          </a>{" "}
+          to test server action without js enabled.
+        </li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```text [app/assets/nitro.svg]
+<!-- nitro logo -->
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_115_108)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M35.2166 7.02016C28.0478 -1.38317 15.4241 -2.38397 7.02077 4.78481C-1.38256 11.9536 -2.38336 24.5773 4.78542 32.9806C11.9542 41.3839 24.5779 42.3847 32.9812 35.216C41.3846 28.0472 42.3854 15.4235 35.2166 7.02016ZM25.2525 17.5175C26.0233 17.5175 26.5155 18.3527 26.1287 19.0194L26.0175 19.2111L18.4696 31.6294C18.3293 31.8602 18.0788 32.001 17.8088 32.001H17.0883C16.5946 32.001 16.2336 31.5349 16.3573 31.0569L18.4054 23.1384C18.5691 22.5053 18.0912 21.888 17.4373 21.888H14.2914C13.6375 21.888 13.1596 21.2708 13.3232 20.6377L16.4137 8.68289C16.5261 8.28056 16.8904 7.99734 17.3081 8.00208C17.3587 8.00266 17.4046 8.0035 17.4427 8.0047L20.6109 8.00465C21.217 8.00436 21.684 8.53896 21.6023 9.13949L21.5828 9.28246L20.3746 16.349C20.2702 16.9598 20.7406 17.5175 21.3603 17.5175H25.2525Z"
+      fill="url(#paint0_diamond_115_108)" />
+    <mask id="mask0_115_108" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+      width="40" height="41">
+      <circle cx="20" cy="20.001" r="20" fill="url(#paint1_diamond_115_108)" />
+    </mask>
+    <g mask="url(#mask0_115_108)">
+      <g filter="url(#filter0_f_115_108)">
+        <path
+          d="M1.11145 13.4267C0.0703174 16.4179 -0.245523 19.6136 0.189923 22.7507C0.62537 25.8879 1.79965 28.8768 3.61611 31.4713C5.43256 34.0659 7.83925 36.192 10.6381 37.6746C13.4369 39.1572 16.5478 39.9538 19.7147 39.999C22.8816 40.0442 26.0139 39.3366 28.8539 37.9345C31.6939 36.5324 34.1602 34.4758 36.05 31.9341C37.9397 29.3924 39.1988 26.4383 39.7236 23.3148C40.2483 20.1914 40.0238 16.9879 39.0684 13.9682L33.2532 15.808C33.9172 17.9068 34.0732 20.1333 33.7085 22.3042C33.3438 24.4751 32.4687 26.5283 31.1552 28.2949C29.8418 30.0615 28.1276 31.4908 26.1537 32.4653C24.1799 33.4399 22.0028 33.9316 19.8017 33.9002C17.6006 33.8688 15.4384 33.3151 13.4932 32.2847C11.5479 31.2543 9.87518 29.7766 8.61269 27.9733C7.35019 26.1699 6.53403 24.0926 6.23138 21.9122C5.92873 19.7317 6.14825 17.5106 6.87187 15.4316L1.11145 13.4267Z"
+          fill="white" />
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_f_115_108" x="-10" y="3.42667" width="60" height="46.5744"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_115_108" />
+    </filter>
+    <radialGradient id="paint0_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.00069 20.0004) scale(39.0007 397.71)">
+      <stop stop-color="#31B2F3" />
+      <stop offset="0.473958" stop-color="#F27CEC" />
+      <stop offset="1" stop-color="#FD6641" />
+    </radialGradient>
+    <radialGradient id="paint1_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4 20.0011) scale(39 397.703)">
+      <stop stop-color="#F27CEC" />
+      <stop offset="0.484375" stop-color="#31B2F3" />
+      <stop offset="1" stop-color="#7D7573" />
+    </radialGradient>
+    <clipPath id="clip0_115_108">
+      <rect width="146" height="40.001" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
+```
+
+```text [app/assets/react.svg]
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
+```
+
+```text [app/assets/vite.svg]
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+```
+
+```tsx [app/framework/entry.browser.tsx]
+import {
+  createFromReadableStream,
+  createFromFetch,
+  setServerCallback,
+  createTemporaryReferenceSet,
+  encodeReply,
+} from "@vitejs/plugin-rsc/browser";
+import React from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { rscStream } from "rsc-html-stream/client";
+import { GlobalErrorBoundary } from "./error-boundary";
+import type { RscPayload } from "./entry.rsc";
+import { createRscRenderRequest } from "./request";
+
+async function main() {
+  // Stash `setPayload` function to trigger re-rendering
+  // from outside of `BrowserRoot` component (e.g. server function call, navigation, hmr)
+  let setPayload: (v: RscPayload) => void;
+
+  // Deserialize RSC stream back to React VDOM for CSR
+  const initialPayload = await createFromReadableStream<RscPayload>(
+    // Initial RSC stream is injected in SSR stream as <script>...FLIGHT_DATA...</script>
+    rscStream
+  );
+
+  // Browser root component to (re-)render RSC payload as state
+  function BrowserRoot() {
+    const [payload, setPayload_] = React.useState(initialPayload);
+
+    React.useEffect(() => {
+      setPayload = (v) => React.startTransition(() => setPayload_(v));
+    }, [setPayload_]);
+
+    // Re-fetch/render on client side navigation
+    React.useEffect(() => {
+      return listenNavigation(() => fetchRscPayload());
+    }, []);
+
+    return payload.root;
+  }
+
+  // Re-fetch RSC and trigger re-rendering
+  async function fetchRscPayload() {
+    const renderRequest = createRscRenderRequest(globalThis.location.href);
+    const payload = await createFromFetch<RscPayload>(fetch(renderRequest));
+    setPayload(payload);
+  }
+
+  // Register a handler which will be internally called by React
+  // on server function request after hydration.
+  setServerCallback(async (id, args) => {
+    const temporaryReferences = createTemporaryReferenceSet();
+    const renderRequest = createRscRenderRequest(globalThis.location.href, {
+      id,
+      body: await encodeReply(args, { temporaryReferences }),
+    });
+    const payload = await createFromFetch<RscPayload>(fetch(renderRequest), {
+      temporaryReferences,
+    });
+    setPayload(payload);
+    const { ok, data } = payload.returnValue!;
+    if (!ok) throw data;
+    return data;
+  });
+
+  // Hydration
+  const browserRoot = (
+    <React.StrictMode>
+      <GlobalErrorBoundary>
+        <BrowserRoot />
+      </GlobalErrorBoundary>
+    </React.StrictMode>
+  );
+  if ("__NO_HYDRATE" in globalThis) {
+    createRoot(document).render(browserRoot);
+  } else {
+    hydrateRoot(document, browserRoot, {
+      formState: initialPayload.formState,
+    });
+  }
+
+  // Implement server HMR by triggering re-fetch/render of RSC upon server code change
+  if (import.meta.hot) {
+    import.meta.hot.on("rsc:update", () => {
+      fetchRscPayload();
+    });
+  }
+}
+
+// A little helper to setup events interception for client side navigation
+function listenNavigation(onNavigation: () => void) {
+  globalThis.addEventListener("popstate", onNavigation);
+
+  const oldPushState = globalThis.history.pushState;
+  globalThis.history.pushState = function (...args) {
+    const res = oldPushState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  const oldReplaceState = globalThis.history.replaceState;
+  globalThis.history.replaceState = function (...args) {
+    const res = oldReplaceState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  function onClick(e: MouseEvent) {
+    const link = (e.target as Element).closest("a");
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === "_self") &&
+      link.origin === location.origin &&
+      !link.hasAttribute("download") &&
+      e.button === 0 && // left clicks only
+      !e.metaKey && // open in new tab (mac)
+      !e.ctrlKey && // open in new tab (windows)
+      !e.altKey && // download
+      !e.shiftKey &&
+      !e.defaultPrevented
+    ) {
+      e.preventDefault();
+      history.pushState(null, "", link.href);
+    }
+  }
+  document.addEventListener("click", onClick);
+
+  return () => {
+    document.removeEventListener("click", onClick);
+    globalThis.removeEventListener("popstate", onNavigation);
+    globalThis.history.pushState = oldPushState;
+    globalThis.history.replaceState = oldReplaceState;
+  };
+}
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+main();
+```
+
+```tsx [app/framework/entry.rsc.tsx]
+import {
+  renderToReadableStream,
+  createTemporaryReferenceSet,
+  decodeReply,
+  loadServerAction,
+  decodeAction,
+  decodeFormState,
+} from "@vitejs/plugin-rsc/rsc";
+import type { ReactFormState } from "react-dom/client";
+import { Root } from "../root.tsx";
+import { parseRenderRequest } from "./request.tsx";
+
+// The schema of payload which is serialized into RSC stream on rsc environment
+// and deserialized on ssr/client environments.
+export type RscPayload = {
+  // this demo renders/serializes/deserializes entire root html element
+  // but this mechanism can be changed to render/fetch different parts of components
+  // based on your own route conventions.
+  root: React.ReactNode;
+
+  // Server action return value of non-progressive enhancement case
+  returnValue?: { ok: boolean; data: unknown };
+
+  // Server action form state (e.g. useActionState) of progressive enhancement case
+  formState?: ReactFormState;
+};
+
+// The plugin by default assumes `rsc` entry having default export of request handler.
+// however, how server entries are executed can be customized by registering own server handler.
+export default async function handler(request: Request): Promise<Response> {
+  // Differentiate RSC, SSR, action, etc.
+  const renderRequest = parseRenderRequest(request);
+  request = renderRequest.request;
+
+  // Handle server function request
+  let returnValue: RscPayload["returnValue"] | undefined;
+  let formState: ReactFormState | undefined;
+  let temporaryReferences: unknown | undefined;
+  let actionStatus: number | undefined;
+
+  if (renderRequest.isAction === true) {
+    if (renderRequest.actionId) {
+      // Action is called via `ReactClient.setServerCallback`.
+      const contentType = request.headers.get("content-type");
+      const body = contentType?.startsWith("multipart/form-data")
+        ? await request.formData()
+        : await request.text();
+      temporaryReferences = createTemporaryReferenceSet();
+      const args = await decodeReply(body, { temporaryReferences });
+      const action = await loadServerAction(renderRequest.actionId);
+      try {
+        // eslint-disable-next-line prefer-spread
+        const data = await action.apply(null, args);
+        returnValue = { ok: true, data };
+      } catch (error_) {
+        returnValue = { ok: false, data: error_ };
+        actionStatus = 500;
+      }
+    } else {
+      // Otherwise server function is called via `<form action={...}>`
+      // before hydration (e.g. when JavaScript is disabled).
+      // aka progressive enhancement.
+      const formData = await request.formData();
+      const decodedAction = await decodeAction(formData);
+      try {
+        const result = await decodedAction();
+        formState = await decodeFormState(result, formData);
+      } catch {
+        // there's no single general obvious way to surface this error,
+        // so explicitly return classic 500 response.
+        return new Response("Internal Server Error: server action failed", {
+          status: 500,
+        });
+      }
+    }
+  }
+
+  // Serialization from React VDOM tree to RSC stream.
+  // We render RSC stream after handling server function request
+  // so that new render reflects updated state from server function call
+  // to achieve single round trip to mutate and fetch from server.
+  const rscPayload: RscPayload = {
+    root: <Root url={renderRequest.url} />,
+    formState,
+    returnValue,
+  };
+
+  const rscOptions = { temporaryReferences };
+  const rscStream = renderToReadableStream<RscPayload>(rscPayload, rscOptions);
+
+  // Respond RSC stream without HTML rendering as decided by `RenderRequest`
+  if (renderRequest.isRsc) {
+    return new Response(rscStream, {
+      status: actionStatus,
+      headers: {
+        "content-type": "text/x-component;charset=utf-8",
+      },
+    });
+  }
+
+  // Delegate to SSR environment for HTML rendering.
+  // The plugin provides `loadModule` helper to allow loading SSR environment entry module
+  // in RSC environment. however this can be customized by implementing own runtime communication
+  // e.g. `@cloudflare/vite-plugin`'s service binding.
+  const ssrEntryModule = await import.meta.viteRsc.loadModule<typeof import("./entry.ssr.tsx")>(
+    "ssr",
+    "index"
+  );
+
+  const ssrResult = await ssrEntryModule.renderHTML(rscStream, {
+    formState,
+    // Allow quick simulation of JavaScript disabled browser
+    debugNoJS: renderRequest.url.searchParams.has("__nojs"),
+  });
+
+  // Respond HTML
+  return new Response(ssrResult.stream, {
+    status: ssrResult.status,
+    headers: {
+      "Content-Type": "text/html",
+    },
+  });
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}
+```
+
+```tsx [app/framework/entry.ssr.tsx]
+import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
+import React from "react";
+import type { ReactFormState } from "react-dom/client";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { injectRSCPayload } from "rsc-html-stream/server";
+import type { RscPayload } from "./entry.rsc";
+
+export default {
+  fetch: async (request: Request) => {
+    const rscEntryModule = await import.meta.viteRsc.loadModule<typeof import("./entry.rsc")>(
+      "rsc",
+      "index"
+    );
+    return rscEntryModule.default(request);
+  },
+};
+
+export async function renderHTML(
+  rscStream: ReadableStream<Uint8Array>,
+  options: {
+    formState?: ReactFormState;
+    nonce?: string;
+    debugNoJS?: boolean;
+  }
+): Promise<{ stream: ReadableStream<Uint8Array>; status?: number }> {
+  // Duplicate one RSC stream into two.
+  // - one for SSR (ReactClient.createFromReadableStream below)
+  // - another for browser hydration payload by injecting <script>...FLIGHT_DATA...</script>.
+  const [rscStream1, rscStream2] = rscStream.tee();
+
+  // Deserialize RSC stream back to React VDOM
+  let payload: Promise<RscPayload> | undefined;
+  function SsrRoot() {
+    // Deserialization needs to be kicked off inside ReactDOMServer context
+    // for ReactDOMServer preinit/preloading to work
+    payload ??= createFromReadableStream<RscPayload>(rscStream1);
+    return React.use(payload).root;
+  }
+
+  // Render HTML (traditional SSR)
+  const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index");
+
+  let htmlStream: ReadableStream<Uint8Array>;
+  let status: number | undefined;
+
+  try {
+    htmlStream = await renderToReadableStream(<SsrRoot />, {
+      bootstrapScriptContent: options?.debugNoJS ? undefined : bootstrapScriptContent,
+      nonce: options?.nonce,
+      formState: options?.formState,
+    });
+  } catch {
+    // fallback to render an empty shell and run pure CSR on browser,
+    // which can replay server component error and trigger error boundary.
+    status = 500;
+    htmlStream = await renderToReadableStream(
+      <html>
+        <body>
+          <noscript>Internal Server Error: SSR failed</noscript>
+        </body>
+      </html>,
+      {
+        bootstrapScriptContent:
+          `self.__NO_HYDRATE=1;` + (options?.debugNoJS ? "" : bootstrapScriptContent),
+        nonce: options?.nonce,
+      }
+    );
+  }
+
+  let responseStream: ReadableStream<Uint8Array> = htmlStream;
+  if (!options?.debugNoJS) {
+    // Initial RSC stream is injected in HTML stream as <script>...FLIGHT_DATA...</script>
+    // using utility made by devongovett https://github.com/devongovett/rsc-html-stream
+    responseStream = responseStream.pipeThrough(
+      injectRSCPayload(rscStream2, {
+        nonce: options?.nonce,
+      })
+    );
+  }
+
+  return { stream: responseStream, status };
+}
+```
+
+```tsx [app/framework/error-boundary.tsx]
+"use client";
+
+import React from "react";
+
+// Minimal ErrorBoundary example to handle errors globally on browser
+export function GlobalErrorBoundary(props: { children?: React.ReactNode }) {
+  return <ErrorBoundary errorComponent={DefaultGlobalErrorPage}>{props.children}</ErrorBoundary>;
+}
+
+// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+class ErrorBoundary extends React.Component<{
+  children?: React.ReactNode;
+  errorComponent: React.FC<{
+    error: Error;
+    reset: () => void;
+  }>;
+}> {
+  override state: { error?: Error } = {};
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  reset = () => {
+    this.setState({ error: null });
+  };
+
+  override render() {
+    const error = this.state.error;
+    if (error) {
+      return <this.props.errorComponent error={error} reset={this.reset} />;
+    }
+    return this.props.children;
+  }
+}
+
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/build/webpack/loaders/next-app-loader.ts#L73
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/client/components/error-boundary.tsx#L145
+function DefaultGlobalErrorPage(props: { error: Error; reset: () => void }) {
+  return (
+    <html>
+      <head>
+        <title>Unexpected Error</title>
+      </head>
+      <body
+        style={{
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          placeContent: "center",
+          placeItems: "center",
+          fontSize: "16px",
+          fontWeight: 400,
+          lineHeight: "24px",
+        }}
+      >
+        <p>Caught an unexpected error</p>
+        <pre>
+          Error:{" "}
+          {import.meta.env.DEV && "message" in props.error ? props.error.message : "(Unknown)"}
+        </pre>
+        <button
+          onClick={() => {
+            React.startTransition(() => {
+              props.reset();
+            });
+          }}
+        >
+          Reset
+        </button>
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx [app/framework/request.tsx]
+// Framework conventions (arbitrary choices for this demo):
+// - Use `_.rsc` URL suffix to differentiate RSC requests from SSR requests
+// - Use `x-rsc-action` header to pass server action ID
+const URL_POSTFIX = "_.rsc";
+const HEADER_ACTION_ID = "x-rsc-action";
+
+// Parsed request information used to route between RSC/SSR rendering and action handling.
+// Created by parseRenderRequest() from incoming HTTP requests.
+type RenderRequest = {
+  isRsc: boolean; // true if request should return RSC payload (via _.rsc suffix)
+  isAction: boolean; // true if this is a server action call (POST request)
+  actionId?: string; // server action ID from x-rsc-action header
+  request: Request; // normalized Request with _.rsc suffix removed from URL
+  url: URL; // normalized URL with _.rsc suffix removed
+};
+
+export function createRscRenderRequest(
+  urlString: string,
+  action?: { id: string; body: BodyInit }
+): Request {
+  const url = new URL(urlString);
+  url.pathname += URL_POSTFIX;
+  const headers = new Headers();
+  if (action) {
+    headers.set(HEADER_ACTION_ID, action.id);
+  }
+  return new Request(url.toString(), {
+    method: action ? "POST" : "GET",
+    headers,
+    body: action?.body,
+  });
+}
+
+export function parseRenderRequest(request: Request): RenderRequest {
+  const url = new URL(request.url);
+  const isAction = request.method === "POST";
+  if (url.pathname.endsWith(URL_POSTFIX)) {
+    url.pathname = url.pathname.slice(0, -URL_POSTFIX.length);
+    const actionId = request.headers.get(HEADER_ACTION_ID) || undefined;
+    if (request.method === "POST" && !actionId) {
+      throw new Error("Missing action id header for RSC action request");
+    }
+    return {
+      isRsc: true,
+      isAction,
+      actionId,
+      request: new Request(url, request),
+      url,
+    };
+  } else {
+    return {
+      isRsc: false,
+      isAction,
+      request,
+      url,
+    };
+  }
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+<!-- /automd -->
+
+## Learn More
+
+- [React Server Components](https://react.dev/reference/rsc/server-components)
diff --git a/examples/vite-ssr-html/GUIDE.md b/examples/vite-ssr-html/GUIDE.md
new file mode 100644
index 0000000000..201bc2a689
--- /dev/null
+++ b/examples/vite-ssr-html/GUIDE.md
@@ -0,0 +1,16 @@
+This example renders an HTML template with server-side data and streams the response word by word. It demonstrates how to use Nitro's Vite SSR integration without a framework.
+
+## Overview
+
+1. **Add the Nitro Vite plugin** to enable SSR
+2. **Create an HTML template** with a `<!--ssr-outlet-->` comment where server content goes
+3. **Create a server entry** that fetches data and returns a stream
+4. **Add API routes** for server-side data
+
+## How It Works
+
+The `index.html` file contains an `<!--ssr-outlet-->` comment that marks where server-rendered content will be inserted. Nitro replaces this comment with the output from your server entry.
+
+The server entry exports an object with a `fetch` method. It calls the `/quote` API route using Nitro's internal fetch, then returns a `ReadableStream` that emits the quote text word by word with a 50ms delay between each word.
+
+The quote route fetches a JSON file of quotes from GitHub, caches the result, and returns a random quote. The server entry calls this route to get content for the page.
diff --git a/examples/vite-ssr-html/README.md b/examples/vite-ssr-html/README.md
new file mode 100644
index 0000000000..4da0878cac
--- /dev/null
+++ b/examples/vite-ssr-html/README.md
@@ -0,0 +1,233 @@
+---
+category: server side rendering
+icon: i-logos-html-5
+---
+
+# Vite SSR HTML
+
+> Server-side rendering with vanilla HTML, Vite, and Nitro.
+
+
+<!-- automd:ui-code-tree src="." default="app/entry-server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="app/entry-server.ts" expandAll}
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro Quotes</title>
+    <style>
+      @import "tailwindcss";
+    </style>
+  </head>
+  <body
+    class="min-h-screen flex items-center justify-center p-5 bg-gradient-to-br from-indigo-500 to-purple-600 font-sans"
+  >
+    <div class="max-w-xl w-full text-center text-white">
+      <div class="bg-white/10 backdrop-blur-md rounded-2xl p-10 shadow-xl border border-white/20">
+        <div
+          id="quote"
+          class="text-[clamp(1.2rem,4vw,1.8rem)] leading-relaxed mb-5 font-light opacity-70 transition-opacity duration-500"
+        >
+          <!--ssr-outlet-->
+        </div>
+        <div
+          id="author"
+          class="text-[clamp(1rem,3vw,1.2rem)] opacity-0 font-normal transition-opacity duration-500"
+        ></div>
+        <button
+          id="refresh-btn"
+          class="mt-5 bg-white/20 border border-white/30 text-white px-6 py-3 rounded-full cursor-pointer text-sm transition hover:bg-white/30 hover:-translate-y-0.5"
+          onclick="fetchQuote()"
+        >
+          New Quote
+        </button>
+      </div>
+      <div class="mt-8 text-sm opacity-60">
+        Powered by
+        <a
+          class="text-white no-underline border-b border-white/30 hover:border-white transition-colors"
+          href="https://vitejs.dev/"
+          >Vite</a
+        >
+        and
+        <a
+          class="text-white no-underline border-b border-white/30 hover:border-white transition-colors"
+          href="https://github.com/nitrojs/nitro"
+          >Nitro v3</a
+        >.
+      </div>
+    </div>
+
+    <script>
+      const quoteElement = document.getElementById("quote");
+      const authorElement = document.getElementById("author");
+      const refreshBtn = document.getElementById("refresh-btn");
+
+      const baseQuoteClasses =
+        "text-[clamp(1.2rem,4vw,1.8rem)] leading-relaxed mb-5 font-light transition-opacity duration-500";
+      const loadingQuoteClasses = baseQuoteClasses + " opacity-70";
+      const normalQuoteClasses = baseQuoteClasses + " opacity-100";
+      const errorQuoteClasses = baseQuoteClasses + " text-red-400 opacity-100 text-sm";
+
+      const baseAuthorClasses =
+        "text-[clamp(1rem,3vw,1.2rem)] font-normal transition-opacity duration-500";
+      const hiddenAuthorClasses = baseAuthorClasses + " opacity-0";
+      const visibleAuthorClasses = baseAuthorClasses + " opacity-80";
+
+      async function fetchQuote() {
+        try {
+          quoteElement.textContent = "Loading...";
+          quoteElement.className = loadingQuoteClasses;
+          authorElement.textContent = "";
+          authorElement.className = hiddenAuthorClasses;
+          refreshBtn.style.display = "none";
+          const response = await fetch("/quote");
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const { text, author } = await response.json();
+          quoteElement.textContent = `"${text}"`;
+          quoteElement.className = normalQuoteClasses;
+          authorElement.textContent = `— ${author}`;
+          authorElement.className = visibleAuthorClasses;
+        } catch (error) {
+          console.error("Error fetching quote:", error);
+          quoteElement.textContent = "Failed to load quote. Please try again.";
+          quoteElement.className = errorQuoteClasses;
+          authorElement.textContent = "";
+          authorElement.className = hiddenAuthorClasses;
+        } finally {
+          refreshBtn.style.display = "inline-block";
+        }
+      }
+    </script>
+  </body>
+</html>
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "nitro": "latest",
+    "tailwindcss": "^4.1.18",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro({
+      serverDir: "./",
+    }),
+    tailwindcss(),
+  ],
+});
+```
+
+```ts [app/entry-server.ts]
+import { fetch } from "nitro";
+
+export default {
+  async fetch() {
+    const quote = (await fetch("/quote").then((res) => res.json())) as {
+      text: string;
+    };
+    return tokenizedStream(quote.text, 50);
+  },
+};
+
+function tokenizedStream(text: string, delay: number): ReadableStream<Uint8Array> {
+  const tokens = text.split(" ");
+  return new ReadableStream({
+    start(controller) {
+      let index = 0;
+      function push() {
+        if (index < tokens.length) {
+          const word = tokens[index++] + (index < tokens.length ? " " : "");
+          controller.enqueue(new TextEncoder().encode(word));
+          setTimeout(push, delay);
+        } else {
+          controller.close();
+        }
+      }
+      push();
+    },
+  });
+}
+```
+
+```ts [routes/quote.ts]
+const QUOTES_URL =
+  "https://github.com/JamesFT/Database-Quotes-JSON/raw/refs/heads/master/quotes.json";
+
+let _quotes: Promise<unknown> | undefined;
+
+function getQuotes() {
+  return (_quotes ??= fetch(QUOTES_URL).then((res) => res.json())) as Promise<
+    { quoteText: string; quoteAuthor: string }[]
+  >;
+}
+
+export default async function quotesHandler() {
+  const quotes = await getQuotes();
+  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+  return Response.json({
+    text: randomQuote.quoteText,
+    author: randomQuote.quoteAuthor,
+  });
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+This example renders an HTML template with server-side data and streams the response word by word. It demonstrates how to use Nitro's Vite SSR integration without a framework.
+
+## Overview
+
+1. **Add the Nitro Vite plugin** to enable SSR
+2. **Create an HTML template** with a `<!--ssr-outlet-->` comment where server content goes
+3. **Create a server entry** that fetches data and returns a stream
+4. **Add API routes** for server-side data
+
+## How It Works
+
+The `index.html` file contains an `<!--ssr-outlet-->` comment that marks where server-rendered content will be inserted. Nitro replaces this comment with the output from your server entry.
+
+The server entry exports an object with a `fetch` method. It calls the `/quote` API route using Nitro's internal fetch, then returns a `ReadableStream` that emits the quote text word by word with a 50ms delay between each word.
+
+The quote route fetches a JSON file of quotes from GitHub, caches the result, and returns a random quote. The server entry calls this route to get content for the page.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-ssr-preact/GUIDE.md b/examples/vite-ssr-preact/GUIDE.md
new file mode 100644
index 0000000000..37ebb134a4
--- /dev/null
+++ b/examples/vite-ssr-preact/GUIDE.md
@@ -0,0 +1,113 @@
+Set up server-side rendering (SSR) with Preact, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and Preact plugins to your Vite config. Define the `client` environment with your client entry point:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import preact from "@preact/preset-vite";
+
+export default defineConfig({
+  plugins: [nitro(), preact()],
+  environments: {
+    client: {
+      build: {
+        rollupOptions: {
+          input: "./src/entry-client.tsx",
+        },
+      },
+    },
+  },
+});
+```
+
+The `environments.client` configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named `entry-server` or `server` in common directories.
+
+## 2. Create the App Component
+
+Create a shared Preact component that runs on both server and client:
+
+```tsx [src/app.tsx]
+import { useState } from "preact/hooks";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>;
+}
+```
+
+## 3. Create the Server Entry
+
+The server entry renders your Preact app to a streaming HTML response using `preact-render-to-string/stream`:
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "preact-render-to-string/stream";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(request: Request) {
+    const url = new URL(request.url);
+    const htmlStream = renderToReadableStream(<Root url={url} />);
+    return new Response(htmlStream, {
+      headers: { "Content-Type": "text/html;charset=utf-8" },
+    });
+  },
+};
+
+function Root(props: { url: URL }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+        <script type="module" src={assets.entry} />
+      </head>
+      <body>
+        <h1 className="hero">Nitro + Vite + Preact</h1>
+        <p>URL: {props.url.href}</p>
+        <div id="app">
+          <App />
+        </div>
+      </body>
+    </html>
+  );
+}
+```
+
+Import assets using the `?assets=client` and `?assets=ssr` query parameters. Nitro collects CSS and JS assets from each entry point, and `merge()` combines them into a single manifest. The `assets` object provides arrays of stylesheet and script attributes, plus the client entry URL. Use `renderToReadableStream` to stream HTML as Preact renders, improving time-to-first-byte.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, attaching Preact's event handlers:
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "preact";
+import { App } from "./app.tsx";
+
+function main() {
+  hydrate(<App />, document.querySelector("#app")!);
+}
+
+main();
+```
+
+The `hydrate` function attaches Preact to the existing server-rendered DOM inside `#app` without re-rendering it.
diff --git a/examples/vite-ssr-preact/README.md b/examples/vite-ssr-preact/README.md
new file mode 100644
index 0000000000..be3a3bf58f
--- /dev/null
+++ b/examples/vite-ssr-preact/README.md
@@ -0,0 +1,262 @@
+---
+category: server side rendering
+icon: i-logos-preact
+---
+
+# SSR with Preact
+
+> Server-side rendering with Preact in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="src/entry-server.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="src/entry-server.tsx" expandAll}
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "dev": "vite dev"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
+    "@tailwindcss/vite": "^4.1.18",
+    "nitro": "latest",
+    "preact": "^10.28.2",
+    "preact-render-to-string": "^6.6.5",
+    "tailwindcss": "^4.1.18",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}
+```
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import preact from "@preact/preset-vite";
+
+export default defineConfig({
+  plugins: [nitro(), preact()],
+  environments: {
+    client: {
+      build: {
+        rollupOptions: {
+          input: "./src/entry-client.tsx",
+        },
+      },
+    },
+  },
+});
+```
+
+```tsx [src/app.tsx]
+import { useState } from "preact/hooks";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>;
+}
+```
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "preact";
+import { App } from "./app.tsx";
+
+function main() {
+  hydrate(<App />, document.querySelector("#app")!);
+}
+
+main();
+```
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "preact-render-to-string/stream";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(request: Request) {
+    const url = new URL(request.url);
+    const htmlStream = renderToReadableStream(<Root url={url} />);
+    return new Response(htmlStream, {
+      headers: { "Content-Type": "text/html;charset=utf-8" },
+    });
+  },
+};
+
+function Root(props: { url: URL }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+        <script type="module" src={assets.entry} />
+      </head>
+      <body>
+        <h1 className="hero">Nitro + Vite + Preact</h1>
+        <p>URL: {props.url.href}</p>
+        <div id="app">
+          <App />
+        </div>
+      </body>
+    </html>
+  );
+}
+```
+
+```css [src/styles.css]
+.hero {
+  color: orange;
+}
+
+button {
+  background-color: lightskyblue;
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Set up server-side rendering (SSR) with Preact, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and Preact plugins to your Vite config. Define the `client` environment with your client entry point:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import preact from "@preact/preset-vite";
+
+export default defineConfig({
+  plugins: [nitro(), preact()],
+  environments: {
+    client: {
+      build: {
+        rollupOptions: {
+          input: "./src/entry-client.tsx",
+        },
+      },
+    },
+  },
+});
+```
+
+The `environments.client` configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named `entry-server` or `server` in common directories.
+
+## 2. Create the App Component
+
+Create a shared Preact component that runs on both server and client:
+
+```tsx [src/app.tsx]
+import { useState } from "preact/hooks";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>;
+}
+```
+
+## 3. Create the Server Entry
+
+The server entry renders your Preact app to a streaming HTML response using `preact-render-to-string/stream`:
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "preact-render-to-string/stream";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(request: Request) {
+    const url = new URL(request.url);
+    const htmlStream = renderToReadableStream(<Root url={url} />);
+    return new Response(htmlStream, {
+      headers: { "Content-Type": "text/html;charset=utf-8" },
+    });
+  },
+};
+
+function Root(props: { url: URL }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+        <script type="module" src={assets.entry} />
+      </head>
+      <body>
+        <h1 className="hero">Nitro + Vite + Preact</h1>
+        <p>URL: {props.url.href}</p>
+        <div id="app">
+          <App />
+        </div>
+      </body>
+    </html>
+  );
+}
+```
+
+Import assets using the `?assets=client` and `?assets=ssr` query parameters. Nitro collects CSS and JS assets from each entry point, and `merge()` combines them into a single manifest. The `assets` object provides arrays of stylesheet and script attributes, plus the client entry URL. Use `renderToReadableStream` to stream HTML as Preact renders, improving time-to-first-byte.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, attaching Preact's event handlers:
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "preact";
+import { App } from "./app.tsx";
+
+function main() {
+  hydrate(<App />, document.querySelector("#app")!);
+}
+
+main();
+```
+
+The `hydrate` function attaches Preact to the existing server-rendered DOM inside `#app` without re-rendering it.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-ssr-react/GUIDE.md b/examples/vite-ssr-react/GUIDE.md
new file mode 100644
index 0000000000..f531ca93ac
--- /dev/null
+++ b/examples/vite-ssr-react/GUIDE.md
@@ -0,0 +1,102 @@
+Set up server-side rendering (SSR) with React, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and React plugins to your Vite config. Define the `client` environment with your client entry point:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [nitro(), react()],
+  environments: {
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+The `environments.client` configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named `entry-server` or `server` in common directories.
+
+## 2. Create the App Component
+
+Create a shared React component that runs on both server and client:
+
+```tsx [src/app.tsx]
+import { useState } from "react";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <h1 className="hero">Nitro + Vite + React</h1>
+      <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>
+    </>
+  );
+}
+```
+
+## 3. Create the Server Entry
+
+The server entry renders your React app to a streaming HTML response. It uses `react-dom/server.edge` for edge-compatible streaming:
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { App } from "./app.tsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(_req: Request) {
+    const assets = clientAssets.merge(serverAssets);
+    return new Response(
+      await renderToReadableStream(
+        <html lang="en">
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            {assets.css.map((attr: any) => (
+              <link key={attr.href} rel="stylesheet" {...attr} />
+            ))}
+            {assets.js.map((attr: any) => (
+              <link key={attr.href} type="modulepreload" {...attr} />
+            ))}
+            <script type="module" src={assets.entry} />
+          </head>
+          <body id="app">
+            <App />
+          </body>
+        </html>
+      ),
+      { headers: { "Content-Type": "text/html;charset=utf-8" } }
+    );
+  },
+};
+```
+
+Import assets using the `?assets=client` and `?assets=ssr` query parameters. Nitro collects CSS and JS assets from each entry point, and `merge()` combines them into a single manifest. The `assets` object provides arrays of stylesheet and script attributes, plus the client entry URL. Use `renderToReadableStream` to stream HTML as React renders, improving time-to-first-byte.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, attaching React's event handlers:
+
+```tsx [src/entry-client.tsx]
+import "@vitejs/plugin-react/preamble";
+import { hydrateRoot } from "react-dom/client";
+import { App } from "./app.tsx";
+
+hydrateRoot(document.querySelector("#app")!, <App />);
+```
+
+The `@vitejs/plugin-react/preamble` import is required for React Fast Refresh during development. The `hydrateRoot` function attaches React to the existing server-rendered DOM without re-rendering it.
diff --git a/examples/vite-ssr-react/README.md b/examples/vite-ssr-react/README.md
new file mode 100644
index 0000000000..45ce971217
--- /dev/null
+++ b/examples/vite-ssr-react/README.md
@@ -0,0 +1,241 @@
+---
+category: server side rendering
+icon: i-logos-react
+---
+
+# SSR with React
+
+> Server-side rendering with React in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="src/entry-server.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="src/entry-server.tsx" expandAll}
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "dev": "vite dev"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "nitro": "latest",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-refresh": "^0.18.0",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
+```
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [nitro(), react()],
+  environments: {
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+```tsx [src/app.tsx]
+import { useState } from "react";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <h1 className="hero">Nitro + Vite + React</h1>
+      <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>
+    </>
+  );
+}
+```
+
+```tsx [src/entry-client.tsx]
+import "@vitejs/plugin-react/preamble";
+import { hydrateRoot } from "react-dom/client";
+import { App } from "./app.tsx";
+
+hydrateRoot(document.querySelector("#app")!, <App />);
+```
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { App } from "./app.tsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(_req: Request) {
+    const assets = clientAssets.merge(serverAssets);
+    return new Response(
+      await renderToReadableStream(
+        <html lang="en">
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            {assets.css.map((attr: any) => (
+              <link key={attr.href} rel="stylesheet" {...attr} />
+            ))}
+            {assets.js.map((attr: any) => (
+              <link key={attr.href} type="modulepreload" {...attr} />
+            ))}
+            <script type="module" src={assets.entry} />
+          </head>
+          <body id="app">
+            <App />
+          </body>
+        </html>
+      ),
+      { headers: { "Content-Type": "text/html;charset=utf-8" } }
+    );
+  },
+};
+```
+
+```css [src/styles.css]
+.hero {
+  color: orange;
+}
+
+button {
+  background-color: lightskyblue;
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Set up server-side rendering (SSR) with React, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and React plugins to your Vite config. Define the `client` environment with your client entry point:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [nitro(), react()],
+  environments: {
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+The `environments.client` configuration tells Vite which file to use as the browser entry point. Nitro automatically detects the server entry from files named `entry-server` or `server` in common directories.
+
+## 2. Create the App Component
+
+Create a shared React component that runs on both server and client:
+
+```tsx [src/app.tsx]
+import { useState } from "react";
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <h1 className="hero">Nitro + Vite + React</h1>
+      <button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>
+    </>
+  );
+}
+```
+
+## 3. Create the Server Entry
+
+The server entry renders your React app to a streaming HTML response. It uses `react-dom/server.edge` for edge-compatible streaming:
+
+```tsx [src/entry-server.tsx]
+import "./styles.css";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { App } from "./app.tsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(_req: Request) {
+    const assets = clientAssets.merge(serverAssets);
+    return new Response(
+      await renderToReadableStream(
+        <html lang="en">
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            {assets.css.map((attr: any) => (
+              <link key={attr.href} rel="stylesheet" {...attr} />
+            ))}
+            {assets.js.map((attr: any) => (
+              <link key={attr.href} type="modulepreload" {...attr} />
+            ))}
+            <script type="module" src={assets.entry} />
+          </head>
+          <body id="app">
+            <App />
+          </body>
+        </html>
+      ),
+      { headers: { "Content-Type": "text/html;charset=utf-8" } }
+    );
+  },
+};
+```
+
+Import assets using the `?assets=client` and `?assets=ssr` query parameters. Nitro collects CSS and JS assets from each entry point, and `merge()` combines them into a single manifest. The `assets` object provides arrays of stylesheet and script attributes, plus the client entry URL. Use `renderToReadableStream` to stream HTML as React renders, improving time-to-first-byte.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, attaching React's event handlers:
+
+```tsx [src/entry-client.tsx]
+import "@vitejs/plugin-react/preamble";
+import { hydrateRoot } from "react-dom/client";
+import { App } from "./app.tsx";
+
+hydrateRoot(document.querySelector("#app")!, <App />);
+```
+
+The `@vitejs/plugin-react/preamble` import is required for React Fast Refresh during development. The `hydrateRoot` function attaches React to the existing server-rendered DOM without re-rendering it.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Renderer](/docs/renderer)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-ssr-solid/GUIDE.md b/examples/vite-ssr-solid/GUIDE.md
new file mode 100644
index 0000000000..f0e03d01a9
--- /dev/null
+++ b/examples/vite-ssr-solid/GUIDE.md
@@ -0,0 +1,114 @@
+Set up server-side rendering (SSR) with SolidJS, Vite, and Nitro. This setup uses `renderToStringAsync` for HTML generation and supports client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and SolidJS plugins to your Vite config. SolidJS requires explicit JSX configuration and both `ssr` and `client` environments:
+
+```js [vite.config.mjs]
+import solid from "vite-plugin-solid";
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [solid({ ssr: true }), nitro()],
+  esbuild: { jsx: "preserve", jsxImportSource: "solid-js" },
+  environments: {
+    ssr: {
+      build: { rollupOptions: { input: "./src/entry-server.tsx" } },
+    },
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+Enable SSR mode in the Solid plugin with `solid({ ssr: true })`. Configure esbuild to preserve JSX for Solid's compiler and use Solid's JSX runtime. SolidJS requires explicit `ssr` and `client` environment configuration in Vite.
+
+## 2. Create the App Component
+
+Create a shared SolidJS component using reactive signals:
+
+```tsx [src/app.tsx]
+import { createSignal } from "solid-js";
+
+export function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div>
+      <h1>Hello, Solid!</h1>
+      <button onClick={() => setCount((count) => count + 1)}>Count: {count()}</button>
+    </div>
+  );
+}
+```
+
+SolidJS uses signals (`createSignal`) for state management. Unlike React's `useState`, signals are getter functions that you call to read the value.
+
+## 3. Create the Server Entry
+
+The server entry renders your SolidJS app to HTML using `renderToStringAsync` and includes the `HydrationScript` for client-side hydration:
+
+```tsx [src/entry-server.tsx]
+import { renderToStringAsync, HydrationScript } from "solid-js/web";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(req: Request): Promise<Response> {
+    const appHTML = await renderToStringAsync(() => <App />);
+    const rootHTML = await renderToStringAsync(() => <Root appHTML={appHTML} />);
+    return new Response(rootHTML, {
+      headers: { "Content-Type": "text/html" },
+    });
+  },
+};
+
+function Root(props: { appHTML?: string }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+      </head>
+      <body>
+        <div id="app" innerHTML={props.appHTML || ""} />
+        <HydrationScript />
+        <script type="module" src={assets.entry} />
+      </body>
+    </html>
+  );
+}
+```
+
+SolidJS requires rendering the app separately from the shell (two-phase rendering). The app HTML is injected via `innerHTML` to preserve hydration markers. Include the `HydrationScript` component to inject the script Solid needs to rehydrate on the client. Import assets using the `?assets=client` and `?assets=ssr` query parameters to collect CSS and JS from each entry point.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, restoring Solid's reactivity:
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "solid-js/web";
+import "./styles.css";
+import { App } from "./app.jsx";
+
+hydrate(() => <App />, document.querySelector("#app")!);
+```
+
+The `hydrate` function attaches Solid's reactive system to the existing server-rendered DOM inside `#app`. The component is wrapped in a function `() => <App />` as required by Solid's API.
diff --git a/examples/vite-ssr-solid/README.md b/examples/vite-ssr-solid/README.md
new file mode 100644
index 0000000000..74b19685f3
--- /dev/null
+++ b/examples/vite-ssr-solid/README.md
@@ -0,0 +1,271 @@
+---
+category: server side rendering
+icon: i-logos-solidjs-icon
+---
+
+# SSR with SolidJS
+
+> Server-side rendering with SolidJS in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="src/entry-server.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="src/entry-server.tsx" expandAll}
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev"
+  },
+  "devDependencies": {
+    "nitro": "latest",
+    "solid-js": "^1.9.11",
+    "vite": "beta",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}
+```
+
+```js [vite.config.mjs]
+import solid from "vite-plugin-solid";
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [solid({ ssr: true }), nitro()],
+  esbuild: { jsx: "preserve", jsxImportSource: "solid-js" },
+  environments: {
+    ssr: {
+      build: { rollupOptions: { input: "./src/entry-server.tsx" } },
+    },
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+```tsx [src/app.tsx]
+import { createSignal } from "solid-js";
+
+export function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div>
+      <h1>Hello, Solid!</h1>
+      <button onClick={() => setCount((count) => count + 1)}>Count: {count()}</button>
+    </div>
+  );
+}
+```
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "solid-js/web";
+import "./styles.css";
+import { App } from "./app.jsx";
+
+hydrate(() => <App />, document.querySelector("#app")!);
+```
+
+```tsx [src/entry-server.tsx]
+import { renderToStringAsync, HydrationScript } from "solid-js/web";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(req: Request): Promise<Response> {
+    const appHTML = await renderToStringAsync(() => <App />);
+    const rootHTML = await renderToStringAsync(() => <Root appHTML={appHTML} />);
+    return new Response(rootHTML, {
+      headers: { "Content-Type": "text/html" },
+    });
+  },
+};
+
+function Root(props: { appHTML?: string }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+      </head>
+      <body>
+        <div id="app" innerHTML={props.appHTML || ""} />
+        <HydrationScript />
+        <script type="module" src={assets.entry} />
+      </body>
+    </html>
+  );
+}
+```
+
+```css [src/styles.css]
+div {
+  font-family: system-ui, Arial, sans-serif;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+button {
+  background-color: rgb(147 197 253);
+  color: rgb(15 23 42);
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: rgb(191 219 254);
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Set up server-side rendering (SSR) with SolidJS, Vite, and Nitro. This setup uses `renderToStringAsync` for HTML generation and supports client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Configure client and server entry points
+3. Create a server entry that renders your app to HTML
+4. Create a client entry that hydrates the server-rendered HTML
+
+## 1. Configure Vite
+
+Add the Nitro and SolidJS plugins to your Vite config. SolidJS requires explicit JSX configuration and both `ssr` and `client` environments:
+
+```js [vite.config.mjs]
+import solid from "vite-plugin-solid";
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [solid({ ssr: true }), nitro()],
+  esbuild: { jsx: "preserve", jsxImportSource: "solid-js" },
+  environments: {
+    ssr: {
+      build: { rollupOptions: { input: "./src/entry-server.tsx" } },
+    },
+    client: {
+      build: { rollupOptions: { input: "./src/entry-client.tsx" } },
+    },
+  },
+});
+```
+
+Enable SSR mode in the Solid plugin with `solid({ ssr: true })`. Configure esbuild to preserve JSX for Solid's compiler and use Solid's JSX runtime. SolidJS requires explicit `ssr` and `client` environment configuration in Vite.
+
+## 2. Create the App Component
+
+Create a shared SolidJS component using reactive signals:
+
+```tsx [src/app.tsx]
+import { createSignal } from "solid-js";
+
+export function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div>
+      <h1>Hello, Solid!</h1>
+      <button onClick={() => setCount((count) => count + 1)}>Count: {count()}</button>
+    </div>
+  );
+}
+```
+
+SolidJS uses signals (`createSignal`) for state management. Unlike React's `useState`, signals are getter functions that you call to read the value.
+
+## 3. Create the Server Entry
+
+The server entry renders your SolidJS app to HTML using `renderToStringAsync` and includes the `HydrationScript` for client-side hydration:
+
+```tsx [src/entry-server.tsx]
+import { renderToStringAsync, HydrationScript } from "solid-js/web";
+import { App } from "./app.jsx";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(req: Request): Promise<Response> {
+    const appHTML = await renderToStringAsync(() => <App />);
+    const rootHTML = await renderToStringAsync(() => <Root appHTML={appHTML} />);
+    return new Response(rootHTML, {
+      headers: { "Content-Type": "text/html" },
+    });
+  },
+};
+
+function Root(props: { appHTML?: string }) {
+  const assets = clientAssets.merge(serverAssets);
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {assets.css.map((attr: any) => (
+          <link key={attr.href} rel="stylesheet" {...attr} />
+        ))}
+        {assets.js.map((attr: any) => (
+          <link key={attr.href} type="modulepreload" {...attr} />
+        ))}
+      </head>
+      <body>
+        <div id="app" innerHTML={props.appHTML || ""} />
+        <HydrationScript />
+        <script type="module" src={assets.entry} />
+      </body>
+    </html>
+  );
+}
+```
+
+SolidJS requires rendering the app separately from the shell (two-phase rendering). The app HTML is injected via `innerHTML` to preserve hydration markers. Include the `HydrationScript` component to inject the script Solid needs to rehydrate on the client. Import assets using the `?assets=client` and `?assets=ssr` query parameters to collect CSS and JS from each entry point.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML, restoring Solid's reactivity:
+
+```tsx [src/entry-client.tsx]
+import { hydrate } from "solid-js/web";
+import "./styles.css";
+import { App } from "./app.jsx";
+
+hydrate(() => <App />, document.querySelector("#app")!);
+```
+
+The `hydrate` function attaches Solid's reactive system to the existing server-rendered DOM inside `#app`. The component is wrapped in a function `() => <App />` as required by Solid's API.
+
+<!-- /automd -->
+
+## Learn More
+
+- [SolidJS Documentation](https://docs.solidjs.com/)
+- [Renderer](/docs/renderer)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-ssr-tsr-react/GUIDE.md b/examples/vite-ssr-tsr-react/GUIDE.md
new file mode 100644
index 0000000000..89ac28c03b
--- /dev/null
+++ b/examples/vite-ssr-tsr-react/GUIDE.md
@@ -0,0 +1,135 @@
+Set up TanStack Router with React, Vite, and Nitro. This setup provides file-based routing with type-safe navigation and automatic code splitting.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Create an HTML template with your app entry
+3. Create a main entry that initializes the router
+4. Define routes using file-based routing
+
+## 1. Configure Vite
+
+Add the Nitro, React, and TanStack Router plugins to your Vite config:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  plugins: [tanstackRouter({ target: "react", autoCodeSplitting: true }), react(), nitro()],
+});
+```
+
+The `tanstackRouter` plugin generates a route tree from your `routes/` directory structure. Enable `autoCodeSplitting` to automatically split routes into separate chunks. Place the TanStack Router plugin before the React plugin in the array.
+
+## 2. Create the HTML Template
+
+Create an HTML file that serves as your app shell:
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro + TanStack Router + React</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+
+## 3. Create the App Entry
+
+Create the main entry that initializes TanStack Router:
+
+```tsx [src/main.tsx]
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen.ts";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.querySelector("#root")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}
+```
+
+The `routeTree.gen.ts` file is auto-generated from your `routes/` directory structure. The `Register` interface declaration provides full type inference for route paths and params. The `!rootElement.innerHTML` check prevents re-rendering during hot module replacement.
+
+## 4. Create the Root Route
+
+The root route (`__root.tsx`) defines your app's layout:
+
+```tsx [src/routes/__root.tsx]
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+const RootLayout = () => (
+  <>
+    <div className="p-2 flex gap-2">
+      <Link to="/" className="[&.active]:font-bold">
+        Home
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+);
+
+export const Route = createRootRoute({ component: RootLayout });
+```
+
+Use `Link` for type-safe navigation with active state styling. The `Outlet` component renders child routes. Include `TanStackRouterDevtools` for development tools (automatically removed in production).
+
+## 5. Create Page Routes
+
+Page routes use `createFileRoute` and can include loaders:
+
+```tsx [src/routes/index.tsx]
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  loader: async () => {
+    const r = await fetch("/api/hello");
+    return r.json();
+  },
+  component: Index,
+});
+
+function Index() {
+  const r = Route.useLoaderData();
+
+  return (
+    <div className="p-2">
+      <h3>{JSON.stringify(r)}</h3>
+    </div>
+  );
+}
+```
+
+Fetch data before rendering with the `loader` function—data is available via `Route.useLoaderData()`. File paths determine URL paths: `routes/index.tsx` maps to `/`, `routes/about.tsx` to `/about`, and `routes/users/$id.tsx` to `/users/:id`.
diff --git a/examples/vite-ssr-tsr-react/README.md b/examples/vite-ssr-tsr-react/README.md
new file mode 100644
index 0000000000..6d1d414c9a
--- /dev/null
+++ b/examples/vite-ssr-tsr-react/README.md
@@ -0,0 +1,457 @@
+---
+category: server side rendering
+icon: i-simple-icons-tanstack
+---
+
+# SSR with TanStack Router
+
+> Client-side routing with TanStack Router in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="src/main.tsx" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="src/main.tsx" expandAll}
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro + TanStack Router + React</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.157.16",
+    "@tanstack/react-router-devtools": "^1.157.16",
+    "@tanstack/router-plugin": "^1.157.16",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "nitro": "latest",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "vite": "beta"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["sec/*"]
+    }
+  }
+}
+```
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  plugins: [tanstackRouter({ target: "react", autoCodeSplitting: true }), react(), nitro()],
+});
+```
+
+```tsx [src/main.tsx]
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen.ts";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.querySelector("#root")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}
+```
+
+```ts [src/routeTree.gen.ts]
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+```
+
+```css [src/assets/main.css]
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #ff2056;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #ff637e;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  justify-content: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+  transition: transform 300ms;
+}
+.logo:hover {
+  transform: scale(1.1);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+```
+
+```tsx [src/routes/__root.tsx]
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+const RootLayout = () => (
+  <>
+    <div className="p-2 flex gap-2">
+      <Link to="/" className="[&.active]:font-bold">
+        Home
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+);
+
+export const Route = createRootRoute({ component: RootLayout });
+```
+
+```tsx [src/routes/index.tsx]
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  loader: async () => {
+    const r = await fetch("/api/hello");
+    return r.json();
+  },
+  component: Index,
+});
+
+function Index() {
+  const r = Route.useLoaderData();
+
+  return (
+    <div className="p-2">
+      <h3>{JSON.stringify(r)}</h3>
+    </div>
+  );
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Set up TanStack Router with React, Vite, and Nitro. This setup provides file-based routing with type-safe navigation and automatic code splitting.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Create an HTML template with your app entry
+3. Create a main entry that initializes the router
+4. Define routes using file-based routing
+
+## 1. Configure Vite
+
+Add the Nitro, React, and TanStack Router plugins to your Vite config:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import react from "@vitejs/plugin-react";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  plugins: [tanstackRouter({ target: "react", autoCodeSplitting: true }), react(), nitro()],
+});
+```
+
+The `tanstackRouter` plugin generates a route tree from your `routes/` directory structure. Enable `autoCodeSplitting` to automatically split routes into separate chunks. Place the TanStack Router plugin before the React plugin in the array.
+
+## 2. Create the HTML Template
+
+Create an HTML file that serves as your app shell:
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro + TanStack Router + React</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+
+## 3. Create the App Entry
+
+Create the main entry that initializes TanStack Router:
+
+```tsx [src/main.tsx]
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen.ts";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.querySelector("#root")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}
+```
+
+The `routeTree.gen.ts` file is auto-generated from your `routes/` directory structure. The `Register` interface declaration provides full type inference for route paths and params. The `!rootElement.innerHTML` check prevents re-rendering during hot module replacement.
+
+## 4. Create the Root Route
+
+The root route (`__root.tsx`) defines your app's layout:
+
+```tsx [src/routes/__root.tsx]
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+const RootLayout = () => (
+  <>
+    <div className="p-2 flex gap-2">
+      <Link to="/" className="[&.active]:font-bold">
+        Home
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+);
+
+export const Route = createRootRoute({ component: RootLayout });
+```
+
+Use `Link` for type-safe navigation with active state styling. The `Outlet` component renders child routes. Include `TanStackRouterDevtools` for development tools (automatically removed in production).
+
+## 5. Create Page Routes
+
+Page routes use `createFileRoute` and can include loaders:
+
+```tsx [src/routes/index.tsx]
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  loader: async () => {
+    const r = await fetch("/api/hello");
+    return r.json();
+  },
+  component: Index,
+});
+
+function Index() {
+  const r = Route.useLoaderData();
+
+  return (
+    <div className="p-2">
+      <h3>{JSON.stringify(r)}</h3>
+    </div>
+  );
+}
+```
+
+Fetch data before rendering with the `loader` function—data is available via `Route.useLoaderData()`. File paths determine URL paths: `routes/index.tsx` maps to `/`, `routes/about.tsx` to `/about`, and `routes/users/$id.tsx` to `/users/:id`.
+
+<!-- /automd -->
+
+## Learn More
+
+- [TanStack Router Documentation](https://tanstack.com/router)
+- [Renderer](/docs/renderer)
diff --git a/examples/vite-ssr-tss-react/GUIDE.md b/examples/vite-ssr-tss-react/GUIDE.md
new file mode 100644
index 0000000000..c3808957d4
--- /dev/null
+++ b/examples/vite-ssr-tss-react/GUIDE.md
@@ -0,0 +1,153 @@
+Set up TanStack Start with Nitro for a full-stack React framework experience with server-side rendering, file-based routing, and integrated API routes.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Create a server entry using TanStack Start's server handler
+3. Configure the router with default components
+4. Define routes and API endpoints using file-based routing
+
+## 1. Configure Vite
+
+Add the Nitro, React, TanStack Start, and Tailwind plugins to your Vite config:
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import viteTsConfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    viteTsConfigPaths({ projects: ["./tsconfig.json"] }),
+    tanstackStart(),
+    viteReact(),
+    tailwindcss(),
+    nitro(),
+  ],
+  environments: {
+    ssr: { build: { rollupOptions: { input: "./server.ts" } } },
+  },
+});
+```
+
+The `tanstackStart()` plugin provides full SSR integration with automatic client entry handling. Use `viteTsConfigPaths()` to enable path aliases like `~/` from tsconfig. The `environments.ssr` option points to the server entry file.
+
+## 2. Create the Server Entry
+
+Create a server entry that uses TanStack Start's handler:
+
+```ts [server.ts]
+import handler, { createServerEntry } from "@tanstack/react-start/server-entry";
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request);
+  },
+});
+```
+
+TanStack Start handles SSR automatically. The `createServerEntry` wrapper integrates with Nitro's server entry format, and the `handler.fetch` processes all incoming requests.
+
+## 3. Configure the Router
+
+Create a router factory function with default error and not-found components:
+
+```tsx [src/router.tsx]
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen.ts";
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    defaultPreload: "intent",
+    defaultErrorComponent: () => <div>Internal Server Error</div>,
+    defaultNotFoundComponent: () => <div>Not Found</div>,
+    scrollRestoration: true,
+  });
+  return router;
+}
+```
+
+The router factory configures preloading behavior, scroll restoration, and default error/not-found components.
+
+## 4. Create the Root Route
+
+The root route defines your HTML shell with head management and scripts:
+
+```tsx [src/routes/__root.tsx]
+/// <reference types="vite/client" />
+import { HeadContent, Link, Scripts, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import * as React from "react";
+import appCss from "~/styles/app.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+    scripts: [{ src: "/customScript.js", type: "text/javascript" }],
+  }),
+  errorComponent: () => <h1>500: Internal Server Error</h1>,
+  notFoundComponent: () => <h1>404: Page Not Found</h1>,
+  shellComponent: RootDocument,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div className="p-2 flex gap-2 text-lg">
+          <Link to="/" activeProps={{ className: "font-bold" }} activeOptions={{ exact: true }}>
+            Home
+          </Link>{" "}
+          <Link
+            // @ts-ignore
+            to="/this-route-does-not-exist"
+            activeProps={{ className: "font-bold" }}
+          >
+            404
+          </Link>
+        </div>
+        <hr />
+        {children}
+        <TanStackRouterDevtools position="bottom-right" />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+Define meta tags, stylesheets, and scripts in the `head()` function. The `shellComponent` provides the HTML document shell that wraps all pages. Use `HeadContent` to render the head configuration and `Scripts` to inject the client-side JavaScript for hydration.
+
+## 5. Create Page Routes
+
+Page routes define your application pages:
+
+```tsx [src/routes/index.tsx]
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: Home });
+
+function Home() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+      <a href="/api/test">/api/test</a>
+    </div>
+  );
+}
+```
+
+## API Routes
+
+TanStack Start supports API routes alongside page routes. Create files in `src/routes/api/` to define server endpoints that Nitro serves automatically.
diff --git a/examples/vite-ssr-tss-react/README.md b/examples/vite-ssr-tss-react/README.md
new file mode 100644
index 0000000000..7383f4ce55
--- /dev/null
+++ b/examples/vite-ssr-tss-react/README.md
@@ -0,0 +1,328 @@
+---
+category: server side rendering
+icon: i-simple-icons-tanstack
+---
+
+# SSR with TanStack Start
+
+> Full-stack React with TanStack Start in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server.ts" expandAll}
+
+```text [.gitignore]
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.nitro
+/build/
+/api/
+/server/build
+/public/build# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.tanstack
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.157.16",
+    "@tanstack/react-router-devtools": "^1.157.16",
+    "@tanstack/react-start": "^1.157.16",
+    "nitro": "latest",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "latest",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "beta",
+    "vite-tsconfig-paths": "^6.0.5"
+  }
+}
+```
+
+```ts [server.ts]
+import handler, { createServerEntry } from "@tanstack/react-start/server-entry";
+
+export default createServerEntry({
+  fetch(request) {
+    return handler.fetch(request);
+  },
+});
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}
+```
+
+```js [vite.config.mjs]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import viteTsConfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    viteTsConfigPaths({ projects: ["./tsconfig.json"] }),
+    tanstackStart(),
+    viteReact(),
+    tailwindcss(),
+    nitro(),
+  ],
+  environments: {
+    ssr: { build: { rollupOptions: { input: "./server.ts" } } },
+  },
+});
+```
+
+```tsx [src/router.tsx]
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen.ts";
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    defaultPreload: "intent",
+    defaultErrorComponent: () => <div>Internal Server Error</div>,
+    defaultNotFoundComponent: () => <div>Not Found</div>,
+    scrollRestoration: true,
+  });
+  return router;
+}
+```
+
+```ts [src/routeTree.gen.ts]
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiTestRouteImport } from './routes/api/test'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiTestRoute = ApiTestRouteImport.update({
+  id: '/api/test',
+  path: '/api/test',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/api/test': typeof ApiTestRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/api/test': typeof ApiTestRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/api/test': typeof ApiTestRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/api/test'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/api/test'
+  id: '__root__' | '/' | '/api/test'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ApiTestRoute: typeof ApiTestRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/test': {
+      id: '/api/test'
+      path: '/api/test'
+      fullPath: '/api/test'
+      preLoaderRoute: typeof ApiTestRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ApiTestRoute: ApiTestRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
+```
+
+```tsx [src/routes/__root.tsx]
+/// <reference types="vite/client" />
+import { HeadContent, Link, Scripts, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import * as React from "react";
+import appCss from "~/styles/app.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+    scripts: [{ src: "/customScript.js", type: "text/javascript" }],
+  }),
+  errorComponent: () => <h1>500: Internal Server Error</h1>,
+  notFoundComponent: () => <h1>404: Page Not Found</h1>,
+  shellComponent: RootDocument,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div className="p-2 flex gap-2 text-lg">
+          <Link to="/" activeProps={{ className: "font-bold" }} activeOptions={{ exact: true }}>
+            Home
+          </Link>{" "}
+          <Link
+            // @ts-ignore
+            to="/this-route-does-not-exist"
+            activeProps={{ className: "font-bold" }}
+          >
+            404
+          </Link>
+        </div>
+        <hr />
+        {children}
+        <TanStackRouterDevtools position="bottom-right" />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx [src/routes/index.tsx]
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: Home });
+
+function Home() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+      <a href="/api/test">/api/test</a>
+    </div>
+  );
+}
+```
+
+```css [src/styles/app.css]
+@import "tailwindcss";
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  html {
+    color-scheme: light dark;
+  }
+
+  * {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+
+  html,
+  body {
+    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+  }
+
+  .using-mouse * {
+    outline: none !important;
+  }
+}
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+<!-- /automd -->
+
+## Learn More
+
+- [TanStack Start Documentation](https://tanstack.com/start)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-ssr-vue-router/GUIDE.md b/examples/vite-ssr-vue-router/GUIDE.md
new file mode 100644
index 0000000000..b4ad7ac154
--- /dev/null
+++ b/examples/vite-ssr-vue-router/GUIDE.md
@@ -0,0 +1,241 @@
+Set up server-side rendering (SSR) with Vue, Vue Router, Vite, and Nitro. This setup enables per-route code splitting, head management with unhead, and client hydration.
+
+## Overview
+
+1. Add the Nitro Vite plugin to your Vite config
+2. Define routes with lazy-loaded components
+3. Create a server entry that renders your app with router support
+4. Create a client entry that hydrates and takes over routing
+5. Create page components
+
+## 1. Configure Vite
+
+Add the Nitro and Vue plugins to your Vite config. Define both `client` and `ssr` environments:
+
+```js [vite.config.mjs]
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import devtoolsJson from "vite-plugin-devtools-json";
+import { nitro } from "nitro/vite";
+
+export default defineConfig((_env) => ({
+  plugins: [patchVueExclude(vue(), /\?assets/), devtoolsJson(), nitro()],
+  environments: {
+    client: { build: { rollupOptions: { input: "./app/entry-client.ts" } } },
+    ssr: { build: { rollupOptions: { input: "./app/entry-server.ts" } } },
+  },
+}));
+
+// Workaround https://github.com/vitejs/vite-plugin-vue/issues/677
+function patchVueExclude(plugin, exclude) {
+  const original = plugin.transform.handler;
+  plugin.transform.handler = function (...args) {
+    if (exclude.test(args[1])) return;
+    return original.call(this, ...args);
+  };
+  return plugin;
+}
+```
+
+The `patchVueExclude` helper prevents the Vue plugin from processing asset imports (files with `?assets` query parameter).
+
+## 2. Define Routes
+
+Create route definitions with lazy-loaded components and asset metadata:
+
+```ts [app/routes.ts]
+import type { RouteRecordRaw } from "vue-router";
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "app",
+    component: () => import("./app.vue"),
+    meta: {
+      assets: () => import("./app.vue?assets"),
+    },
+    children: [
+      {
+        path: "/",
+        name: "home",
+        component: () => import("./pages/index.vue"),
+        meta: {
+          assets: () => import("./pages/index.vue?assets"),
+        },
+      },
+      {
+        path: "/about",
+        name: "about",
+        component: () => import("./pages/about.vue"),
+        meta: {
+          assets: () => import("./pages/about.vue?assets"),
+        },
+      },
+      {
+        path: "/:catchAll(.*)",
+        name: "not-found",
+        component: () => import("./pages/not-found.vue"),
+        meta: {
+          assets: () => import("./pages/not-found.vue?assets"),
+        },
+      },
+    ],
+  },
+];
+```
+
+Use dynamic imports for lazy-loaded components to enable code splitting. The `meta.assets` function loads route-specific CSS and JS chunks. Define child routes under a root layout component for nested routing.
+
+## 3. Create the Server Entry
+
+The server entry renders your Vue app with router support and head management:
+
+```ts [app/entry-server.ts]
+import { createSSRApp } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { RouterView, createMemoryHistory, createRouter } from "vue-router";
+import { createHead, transformHtmlTemplate } from "unhead/server";
+
+import { routes } from "./routes.ts";
+
+import clientAssets from "./entry-client.ts?assets=client";
+
+async function handler(request: Request): Promise<Response> {
+  const app = createSSRApp(RouterView);
+  const router = createRouter({ history: createMemoryHistory(), routes });
+  app.use(router);
+
+  const url = new URL(request.url);
+  const href = url.href.slice(url.origin.length);
+
+  await router.push(href);
+  await router.isReady();
+
+  const assets = clientAssets.merge(
+    ...(await Promise.all(
+      router.currentRoute.value.matched
+        .map((to) => to.meta.assets)
+        .filter(Boolean)
+        .map((fn) => (fn as any)().then((m: any) => m.default))
+    ))
+  );
+
+  const head = createHead();
+
+  head.push({
+    link: [
+      ...assets.css.map((attrs: any) => ({ rel: "stylesheet", ...attrs })),
+      ...assets.js.map((attrs: any) => ({ rel: "modulepreload", ...attrs })),
+    ],
+    script: [{ type: "module", src: clientAssets.entry }],
+  });
+
+  const renderedApp = await renderToString(app);
+
+  const html = await transformHtmlTemplate(head, htmlTemplate(renderedApp));
+
+  return new Response(html, {
+    headers: { "Content-Type": "text/html;charset=utf-8" },
+  });
+}
+
+function htmlTemplate(body: string): string {
+  return /* html */ `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vue Router Custom Framework</title>
+</head>
+<body>
+  <div id="root">${body}</div>
+</body>
+</html>`;
+}
+
+export default {
+  fetch: handler,
+};
+```
+
+The server uses `createMemoryHistory()` since there's no browser URL bar—the router navigates to the requested URL before rendering. Assets are loaded dynamically based on matched routes, ensuring only the CSS and JS needed for the current page are included. The `unhead` library manages `<head>` elements, injecting stylesheets and scripts via `transformHtmlTemplate`.
+
+## 4. Create the Client Entry
+
+The client entry hydrates the server-rendered HTML and takes over routing:
+
+```ts [app/entry-client.ts]
+import { createSSRApp } from "vue";
+import { RouterView, createRouter, createWebHistory } from "vue-router";
+import { routes } from "./routes.ts";
+
+async function main() {
+  const app = createSSRApp(RouterView);
+  const router = createRouter({ history: createWebHistory(), routes });
+  app.use(router);
+
+  await router.isReady();
+  app.mount("#root");
+}
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+main();
+```
+
+The client entry creates a Vue app with `createWebHistory()` for browser-based routing. After the router is ready, it mounts to the `#root` element and hydrates the server-rendered HTML.
+
+## 5. Create the Root Component
+
+The root component provides navigation and renders child routes:
+
+```vue [app/app.vue]
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+import "./styles.css";
+</script>
+
+<template>
+  <nav>
+    <ul>
+      <li>
+        <RouterLink to="/" exact-active-class="active">Home</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/about" active-class="active">About</RouterLink>
+      </li>
+    </ul>
+  </nav>
+  <RouterView />
+</template>
+
+<style scoped>
+nav {
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+nav a {
+  color: #666;
+  text-decoration: none;
+}
+
+nav a:hover {
+  color: #333;
+}
+
+nav a.active {
+  color: #646cff;
+}
+</style>
+```
diff --git a/examples/vite-ssr-vue-router/README.md b/examples/vite-ssr-vue-router/README.md
new file mode 100644
index 0000000000..59875a9771
--- /dev/null
+++ b/examples/vite-ssr-vue-router/README.md
@@ -0,0 +1,389 @@
+---
+category: server side rendering
+icon: i-logos-vue
+---
+
+# SSR with Vue Router
+
+> Server-side rendering with Vue Router in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="app/entry-server.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="app/entry-server.ts" expandAll}
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "nitro": "latest",
+    "unhead": "^2.1.2",
+    "vite": "beta",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vue": "^3.5.27",
+    "vue-router": "^4.6.4"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```js [vite.config.mjs]
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import devtoolsJson from "vite-plugin-devtools-json";
+import { nitro } from "nitro/vite";
+
+export default defineConfig((_env) => ({
+  plugins: [patchVueExclude(vue(), /\?assets/), devtoolsJson(), nitro()],
+  environments: {
+    client: { build: { rollupOptions: { input: "./app/entry-client.ts" } } },
+    ssr: { build: { rollupOptions: { input: "./app/entry-server.ts" } } },
+  },
+}));
+
+// Workaround https://github.com/vitejs/vite-plugin-vue/issues/677
+function patchVueExclude(plugin, exclude) {
+  const original = plugin.transform.handler;
+  plugin.transform.handler = function (...args) {
+    if (exclude.test(args[1])) return;
+    return original.call(this, ...args);
+  };
+  return plugin;
+}
+```
+
+```vue [app/app.vue]
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+import "./styles.css";
+</script>
+
+<template>
+  <nav>
+    <ul>
+      <li>
+        <RouterLink to="/" exact-active-class="active">Home</RouterLink>
+      </li>
+      <li>
+        <RouterLink to="/about" active-class="active">About</RouterLink>
+      </li>
+    </ul>
+  </nav>
+  <RouterView />
+</template>
+
+<style scoped>
+nav {
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+nav a {
+  color: #666;
+  text-decoration: none;
+}
+
+nav a:hover {
+  color: #333;
+}
+
+nav a.active {
+  color: #646cff;
+}
+</style>
+```
+
+```ts [app/entry-client.ts]
+import { createSSRApp } from "vue";
+import { RouterView, createRouter, createWebHistory } from "vue-router";
+import { routes } from "./routes.ts";
+
+async function main() {
+  const app = createSSRApp(RouterView);
+  const router = createRouter({ history: createWebHistory(), routes });
+  app.use(router);
+
+  await router.isReady();
+  app.mount("#root");
+}
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+main();
+```
+
+```ts [app/entry-server.ts]
+import { createSSRApp } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { RouterView, createMemoryHistory, createRouter } from "vue-router";
+import { createHead, transformHtmlTemplate } from "unhead/server";
+
+import { routes } from "./routes.ts";
+
+import clientAssets from "./entry-client.ts?assets=client";
+
+async function handler(request: Request): Promise<Response> {
+  const app = createSSRApp(RouterView);
+  const router = createRouter({ history: createMemoryHistory(), routes });
+  app.use(router);
+
+  const url = new URL(request.url);
+  const href = url.href.slice(url.origin.length);
+
+  await router.push(href);
+  await router.isReady();
+
+  const assets = clientAssets.merge(
+    ...(await Promise.all(
+      router.currentRoute.value.matched
+        .map((to) => to.meta.assets)
+        .filter(Boolean)
+        .map((fn) => (fn as any)().then((m: any) => m.default))
+    ))
+  );
+
+  const head = createHead();
+
+  head.push({
+    link: [
+      ...assets.css.map((attrs: any) => ({ rel: "stylesheet", ...attrs })),
+      ...assets.js.map((attrs: any) => ({ rel: "modulepreload", ...attrs })),
+    ],
+    script: [{ type: "module", src: clientAssets.entry }],
+  });
+
+  const renderedApp = await renderToString(app);
+
+  const html = await transformHtmlTemplate(head, htmlTemplate(renderedApp));
+
+  return new Response(html, {
+    headers: { "Content-Type": "text/html;charset=utf-8" },
+  });
+}
+
+function htmlTemplate(body: string): string {
+  return /* html */ `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vue Router Custom Framework</title>
+</head>
+<body>
+  <div id="root">${body}</div>
+</body>
+</html>`;
+}
+
+export default {
+  fetch: handler,
+};
+```
+
+```ts [app/routes.ts]
+import type { RouteRecordRaw } from "vue-router";
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "app",
+    component: () => import("./app.vue"),
+    meta: {
+      assets: () => import("./app.vue?assets"),
+    },
+    children: [
+      {
+        path: "/",
+        name: "home",
+        component: () => import("./pages/index.vue"),
+        meta: {
+          assets: () => import("./pages/index.vue?assets"),
+        },
+      },
+      {
+        path: "/about",
+        name: "about",
+        component: () => import("./pages/about.vue"),
+        meta: {
+          assets: () => import("./pages/about.vue?assets"),
+        },
+      },
+      {
+        path: "/:catchAll(.*)",
+        name: "not-found",
+        component: () => import("./pages/not-found.vue"),
+        meta: {
+          assets: () => import("./pages/not-found.vue?assets"),
+        },
+      },
+    ],
+  },
+];
+```
+
+```ts [app/shims.d.ts]
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+```
+
+```css [app/styles.css]
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+main {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 2rem 0;
+}
+
+button {
+  background: rgb(83, 91, 242);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #535bf2;
+}
+
+.subtitle {
+  color: #666;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+```
+
+```vue [app/pages/about.vue]
+<template>
+  <main>
+    <h1>About</h1>
+    <div class="card">
+      <p>This is a simple Vue Router demo app built with Vite Plugin Fullstack.</p>
+      <p>It demonstrates basic routing and server-side rendering.</p>
+    </div>
+  </main>
+</template>
+```
+
+```vue [app/pages/index.vue]
+<script setup lang="ts">
+import { ref } from "vue";
+
+const count = ref(0);
+
+function increment() {
+  count.value++;
+}
+</script>
+
+<template>
+  <main>
+    <div class="hero">
+      <h1>Vue Router Custom Framework</h1>
+      <p class="subtitle">A simple demo app with Vite</p>
+    </div>
+
+    <div class="card counter-card">
+      <p>Count: {{ count }}</p>
+      <button @click="increment">Increment</button>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.hero {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.hero h1 {
+  color: rgb(100, 108, 255);
+}
+
+.counter-card {
+  text-align: center;
+}
+
+.counter-card h2 {
+  color: #646cff;
+  margin-bottom: 1rem;
+}
+
+.counter-card p {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 1rem 0;
+}
+</style>
+```
+
+```vue [app/pages/not-found.vue]
+<template>
+  <main>
+    <h1>Not Found 404</h1>
+  </main>
+</template>
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+<!-- /automd -->
+
+## Learn More
+
+- [Vue Router Documentation](https://router.vuejs.org/)
+- [Unhead Documentation](https://unhead.unjs.io/)
+- [Renderer](/docs/renderer)
+- [Server Entry](/docs/server-entry)
diff --git a/examples/vite-trpc/GUIDE.md b/examples/vite-trpc/GUIDE.md
new file mode 100644
index 0000000000..87d2f9075f
--- /dev/null
+++ b/examples/vite-trpc/GUIDE.md
@@ -0,0 +1,162 @@
+Set up tRPC with Vite and Nitro for end-to-end typesafe APIs without code generation. This example builds a counter with server-side rendering for the initial value and client-side updates.
+
+## Overview
+
+1. Configure Vite with the Nitro plugin and route tRPC requests
+2. Create a tRPC router with procedures
+3. Create an HTML page with server-side rendering and client interactivity
+
+## 1. Configure Vite
+
+Add the Nitro plugin and configure the `/trpc/**` route to point to your tRPC handler:
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro({
+      routes: {
+        "/trpc/**": "./server/trpc.ts",
+      },
+    }),
+  ],
+});
+```
+
+The `routes` option maps URL patterns to handler files. All requests to `/trpc/*` are handled by the tRPC router.
+
+## 2. Create the tRPC Router
+
+Define your tRPC router with procedures and export it as a fetch handler:
+
+```ts [server/trpc.ts]
+import { initTRPC } from "@trpc/server";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+let counter = 0;
+
+const t = initTRPC.create();
+
+export const appRouter = t.router({
+  get: t.procedure.query(() => {
+    return { value: counter };
+  }),
+
+  inc: t.procedure.mutation(() => {
+    counter++;
+    return { value: counter };
+  }),
+});
+
+export type AppRouter = typeof appRouter;
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return fetchRequestHandler({
+      endpoint: "/trpc",
+      req: request,
+      router: appRouter,
+    });
+  },
+};
+```
+
+Define procedures using `t.procedure.query()` for read operations and `t.procedure.mutation()` for write operations. Export the `AppRouter` type so clients get full type inference. The default export uses tRPC's fetch adapter to handle incoming requests.
+
+## 3. Create the HTML Page
+
+Create an HTML page with server-side rendering and client-side interactivity:
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tRPC Counter</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        background: #0f1115;
+        color: #e5e7eb;
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        margin: 0;
+      }
+
+      .box {
+        background: #181b22;
+        padding: 24px 32px;
+        border-radius: 10px;
+        text-align: center;
+        min-width: 200px;
+      }
+
+      button {
+        background: #2563eb;
+        border: none;
+        color: white;
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+        margin-top: 12px;
+        font-size: 14px;
+      }
+
+      button:hover {
+        background: #1d4ed8;
+      }
+
+      .value {
+        font-size: 36px;
+        margin: 12px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div>Counter</div>
+      <div class="value" id="value">
+        <script server>
+          // Server-side Rendering
+          const { result } = await serverFetch("/trpc/get").then(r => r.json())
+          echo(result?.data?.value)
+        </script>
+      </div>
+      <button id="inc">Increment</button>
+    </div>
+
+    <script setup>
+      const valueEl = document.getElementById("value");
+      const incBtn = document.getElementById("inc");
+
+      async function call(path, body) {
+        const res = await fetch(`/trpc/${path}`, {
+          method: body ? "POST" : "GET",
+          headers: { "content-type": "application/json" },
+          body: body ? JSON.stringify(body) : undefined,
+        });
+
+        const json = await res.json();
+        return json.result.data;
+      }
+
+      async function refresh() {
+        const data = await call("get");
+        valueEl.textContent = data.value;
+      }
+
+      incBtn.onclick = async () => {
+        const data = await call("inc", {});
+        valueEl.textContent = data.value;
+      };
+
+      refresh();
+    </script>
+  </body>
+</html>
+```
+
+The `<script server>` block runs on the server before sending the response, fetching the initial counter value via `serverFetch`. The `<script setup>` block runs in the browser and handles the increment button click.
diff --git a/examples/vite-trpc/README.md b/examples/vite-trpc/README.md
index dee5e95d79..8f426ca07b 100644
--- a/examples/vite-trpc/README.md
+++ b/examples/vite-trpc/README.md
@@ -1,3 +1,355 @@
+---
+category: vite
+icon: i-simple-icons-trpc
+---
+
 # Vite + tRPC
 
-Read more about tRPC: https://trpc.io/
+> End-to-end typesafe APIs with tRPC in Nitro using Vite.
+
+<!-- automd:ui-code-tree src="." default="server/trpc.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="server/trpc.ts" expandAll}
+
+```text [.gitignore]
+node_modules
+dist
+```
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tRPC Counter</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        background: #0f1115;
+        color: #e5e7eb;
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        margin: 0;
+      }
+
+      .box {
+        background: #181b22;
+        padding: 24px 32px;
+        border-radius: 10px;
+        text-align: center;
+        min-width: 200px;
+      }
+
+      button {
+        background: #2563eb;
+        border: none;
+        color: white;
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+        margin-top: 12px;
+        font-size: 14px;
+      }
+
+      button:hover {
+        background: #1d4ed8;
+      }
+
+      .value {
+        font-size: 36px;
+        margin: 12px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div>Counter</div>
+      <div class="value" id="value">
+        <script server>
+          // Server-side Rendering
+          const { result } = await serverFetch("/trpc/get").then(r => r.json())
+          echo(result?.data?.value)
+        </script>
+      </div>
+      <button id="inc">Increment</button>
+    </div>
+
+    <script setup>
+      const valueEl = document.getElementById("value");
+      const incBtn = document.getElementById("inc");
+
+      async function call(path, body) {
+        const res = await fetch(`/trpc/${path}`, {
+          method: body ? "POST" : "GET",
+          headers: { "content-type": "application/json" },
+          body: body ? JSON.stringify(body) : undefined,
+        });
+
+        const json = await res.json();
+        return json.result.data;
+      }
+
+      async function refresh() {
+        const data = await call("get");
+        valueEl.textContent = data.value;
+      }
+
+      incBtn.onclick = async () => {
+        const data = await call("inc", {});
+        valueEl.textContent = data.value;
+      };
+
+      refresh();
+    </script>
+  </body>
+</html>
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@trpc/client": "^11.8.1",
+    "@trpc/server": "^11.8.1",
+    "nitro": "latest",
+    "vite": "beta",
+    "zod": "^4.3.6"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {}
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro({
+      routes: {
+        "/trpc/**": "./server/trpc.ts",
+      },
+    }),
+  ],
+});
+```
+
+```ts [server/trpc.ts]
+import { initTRPC } from "@trpc/server";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+let counter = 0;
+
+const t = initTRPC.create();
+
+export const appRouter = t.router({
+  get: t.procedure.query(() => {
+    return { value: counter };
+  }),
+
+  inc: t.procedure.mutation(() => {
+    counter++;
+    return { value: counter };
+  }),
+});
+
+export type AppRouter = typeof appRouter;
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return fetchRequestHandler({
+      endpoint: "/trpc",
+      req: request,
+      router: appRouter,
+    });
+  },
+};
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+Set up tRPC with Vite and Nitro for end-to-end typesafe APIs without code generation. This example builds a counter with server-side rendering for the initial value and client-side updates.
+
+## Overview
+
+1. Configure Vite with the Nitro plugin and route tRPC requests
+2. Create a tRPC router with procedures
+3. Create an HTML page with server-side rendering and client interactivity
+
+## 1. Configure Vite
+
+Add the Nitro plugin and configure the `/trpc/**` route to point to your tRPC handler:
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({
+  plugins: [
+    nitro({
+      routes: {
+        "/trpc/**": "./server/trpc.ts",
+      },
+    }),
+  ],
+});
+```
+
+The `routes` option maps URL patterns to handler files. All requests to `/trpc/*` are handled by the tRPC router.
+
+## 2. Create the tRPC Router
+
+Define your tRPC router with procedures and export it as a fetch handler:
+
+```ts [server/trpc.ts]
+import { initTRPC } from "@trpc/server";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+let counter = 0;
+
+const t = initTRPC.create();
+
+export const appRouter = t.router({
+  get: t.procedure.query(() => {
+    return { value: counter };
+  }),
+
+  inc: t.procedure.mutation(() => {
+    counter++;
+    return { value: counter };
+  }),
+});
+
+export type AppRouter = typeof appRouter;
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return fetchRequestHandler({
+      endpoint: "/trpc",
+      req: request,
+      router: appRouter,
+    });
+  },
+};
+```
+
+Define procedures using `t.procedure.query()` for read operations and `t.procedure.mutation()` for write operations. Export the `AppRouter` type so clients get full type inference. The default export uses tRPC's fetch adapter to handle incoming requests.
+
+## 3. Create the HTML Page
+
+Create an HTML page with server-side rendering and client-side interactivity:
+
+```html [index.html]
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tRPC Counter</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        background: #0f1115;
+        color: #e5e7eb;
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        margin: 0;
+      }
+
+      .box {
+        background: #181b22;
+        padding: 24px 32px;
+        border-radius: 10px;
+        text-align: center;
+        min-width: 200px;
+      }
+
+      button {
+        background: #2563eb;
+        border: none;
+        color: white;
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+        margin-top: 12px;
+        font-size: 14px;
+      }
+
+      button:hover {
+        background: #1d4ed8;
+      }
+
+      .value {
+        font-size: 36px;
+        margin: 12px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div>Counter</div>
+      <div class="value" id="value">
+        <script server>
+          // Server-side Rendering
+          const { result } = await serverFetch("/trpc/get").then(r => r.json())
+          echo(result?.data?.value)
+        </script>
+      </div>
+      <button id="inc">Increment</button>
+    </div>
+
+    <script setup>
+      const valueEl = document.getElementById("value");
+      const incBtn = document.getElementById("inc");
+
+      async function call(path, body) {
+        const res = await fetch(`/trpc/${path}`, {
+          method: body ? "POST" : "GET",
+          headers: { "content-type": "application/json" },
+          body: body ? JSON.stringify(body) : undefined,
+        });
+
+        const json = await res.json();
+        return json.result.data;
+      }
+
+      async function refresh() {
+        const data = await call("get");
+        valueEl.textContent = data.value;
+      }
+
+      incBtn.onclick = async () => {
+        const data = await call("inc", {});
+        valueEl.textContent = data.value;
+      };
+
+      refresh();
+    </script>
+  </body>
+</html>
+```
+
+The `<script server>` block runs on the server before sending the response, fetching the initial counter value via `serverFetch`. The `<script setup>` block runs in the browser and handles the increment button click.
+
+<!-- /automd -->
+
+## Learn More
+
+- [tRPC](https://trpc.io/)
+- [Routing](/docs/routing)
diff --git a/examples/websocket/GUIDE.md b/examples/websocket/GUIDE.md
new file mode 100644
index 0000000000..3db63ec25b
--- /dev/null
+++ b/examples/websocket/GUIDE.md
@@ -0,0 +1,34 @@
+This example implements a simple chat room using WebSockets. Clients connect, send messages, and receive messages from other users in real-time. The server broadcasts messages to all connected clients using pub/sub channels.
+
+## WebSocket Handler
+
+Create a WebSocket route using `defineWebSocketHandler`.
+
+```ts [routes/_ws.ts]
+import { defineWebSocketHandler } from "nitro/h3";
+
+export default defineWebSocketHandler({
+  open(peer) {
+    peer.send({ user: "server", message: `Welcome ${peer}!` });
+    peer.publish("chat", { user: "server", message: `${peer} joined!` });
+    peer.subscribe("chat");
+  },
+  message(peer, message) {
+    if (message.text().includes("ping")) {
+      peer.send({ user: "server", message: "pong" });
+    } else {
+      const msg = {
+        user: peer.toString(),
+        message: message.toString(),
+      };
+      peer.send(msg); // echo
+      peer.publish("chat", msg);
+    }
+  },
+  close(peer) {
+    peer.publish("chat", { user: "server", message: `${peer} left!` });
+  },
+});
+```
+
+Different hooks are exposed by `defineWebSocketHandler()` to integrate with different parts of the websocket lifecycle.
diff --git a/examples/websocket/README.md b/examples/websocket/README.md
new file mode 100644
index 0000000000..19b4c74397
--- /dev/null
+++ b/examples/websocket/README.md
@@ -0,0 +1,296 @@
+---
+category: features
+icon: i-lucide-radio
+---
+
+# WebSocket
+
+> Real-time bidirectional communication with WebSocket support.
+
+<!-- automd:ui-code-tree src="." default="routes/_ws.ts" ignore="README.md,GUIDE.md" expandAll -->
+
+::code-tree{defaultValue="routes/_ws.ts" expandAll}
+
+```html [index.html]
+<html lang="en" data-theme="dark">
+  <head>
+    <title>CrossWS Test Page</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        background-color: #1a1a1a;
+      }
+    </style>
+    <script type="module">
+      import { createApp, reactive, nextTick } from "https://esm.sh/petite-vue@0.4.1";
+
+      let ws;
+
+      const store = reactive({
+        message: "",
+        messages: [],
+      });
+
+      const scroll = () => {
+        nextTick(() => {
+          const el = document.querySelector("#messages");
+          el.scrollTop = el.scrollHeight;
+          el.scrollTo({
+            top: el.scrollHeight,
+            behavior: "smooth",
+          });
+        });
+      };
+
+      const format = async () => {
+        for (const message of store.messages) {
+          if (!message._fmt && message.text.startsWith("{")) {
+            message._fmt = true;
+            const { codeToHtml } = await import("https://esm.sh/shiki@1.0.0");
+            const str = JSON.stringify(JSON.parse(message.text), null, 2);
+            message.formattedText = await codeToHtml(str, {
+              lang: "json",
+              theme: "dark-plus",
+            });
+          }
+        }
+      };
+
+      const log = (user, ...args) => {
+        console.log("[ws]", user, ...args);
+        store.messages.push({
+          text: args.join(" "),
+          formattedText: "",
+          user: user,
+          date: new Date().toLocaleString(),
+        });
+        scroll();
+        format();
+      };
+
+      const connect = async () => {
+        const isSecure = location.protocol === "https:";
+        const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
+        if (ws) {
+          log("ws", "Closing previous connection before reconnecting...");
+          ws.close();
+          clear();
+        }
+
+        log("ws", "Connecting to", url, "...");
+        ws = new WebSocket(url);
+
+        ws.addEventListener("message", async (event) => {
+          let data = typeof event.data === "string" ? event.data : await event.data.text();
+          const { user = "system", message = "" } = data.startsWith("{")
+            ? JSON.parse(data)
+            : { message: data };
+          log(user, typeof message === "string" ? message : JSON.stringify(message));
+        });
+
+        await new Promise((resolve) => ws.addEventListener("open", resolve));
+        log("ws", "Connected!");
+      };
+
+      const clear = () => {
+        store.messages.splice(0, store.messages.length);
+        log("system", "previous messages cleared");
+      };
+
+      const send = () => {
+        console.log("sending message...");
+        if (store.message) {
+          ws.send(store.message);
+        }
+        store.message = "";
+      };
+
+      const ping = () => {
+        log("ws", "Sending ping");
+        ws.send("ping");
+      };
+
+      createApp({
+        store,
+        send,
+        ping,
+        clear,
+        connect,
+        rand: Math.random(),
+      }).mount();
+
+      await connect();
+    </script>
+  </head>
+  <body class="h-screen flex flex-col justify-between">
+    <main v-scope="{}">
+      <!-- Messages -->
+      <div id="messages" class="flex-grow flex flex-col justify-end px-4 py-8">
+        <div class="flex items-center mb-4" v-for="message in store.messages">
+          <div class="flex flex-col">
+            <p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
+            <div class="flex items-center">
+              <img
+                :src="'https://www.gravatar.com/avatar/' + encodeURIComponent(message.user + rand) + '?s=512&d=monsterid'"
+                alt="Avatar"
+                class="w-8 h-8 rounded-full"
+              />
+              <div class="ml-2 bg-gray-800 rounded-lg p-2">
+                <p
+                  v-if="message.formattedText"
+                  class="overflow-x-scroll"
+                  v-html="message.formattedText"
+                ></p>
+                <p v-else class="text-white">{{ message.text }}</p>
+              </div>
+            </div>
+            <p class="text-gray-500 mt-1 text-xs ml-10">{{ message.date }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chatbox -->
+      <div class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full">
+        <div class="w-full min-w-6">
+          <input
+            type="text"
+            placeholder="Type your message..."
+            class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
+            @keydown.enter="send"
+            v-model="store.message"
+          />
+        </div>
+        <div class="flex">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" @click="send">
+            Send
+          </button>
+          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" @click="ping">
+            Ping
+          </button>
+          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" @click="connect">
+            Reconnect
+          </button>
+          <button
+            class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
+            @click="clear"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+`
+```
+
+```ts [nitro.config.ts]
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  serverDir: "./",
+  renderer: { static: true },
+  features: { websocket: true },
+});
+```
+
+```json [package.json]
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nitro": "latest"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "nitro/tsconfig"
+}
+```
+
+```ts [vite.config.ts]
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+export default defineConfig({ plugins: [nitro()] });
+```
+
+```ts [routes/_ws.ts]
+import { defineWebSocketHandler } from "nitro/h3";
+
+export default defineWebSocketHandler({
+  open(peer) {
+    peer.send({ user: "server", message: `Welcome ${peer}!` });
+    peer.publish("chat", { user: "server", message: `${peer} joined!` });
+    peer.subscribe("chat");
+  },
+  message(peer, message) {
+    if (message.text().includes("ping")) {
+      peer.send({ user: "server", message: "pong" });
+    } else {
+      const msg = {
+        user: peer.toString(),
+        message: message.toString(),
+      };
+      peer.send(msg); // echo
+      peer.publish("chat", msg);
+    }
+  },
+  close(peer) {
+    peer.publish("chat", { user: "server", message: `${peer} left!` });
+  },
+});
+```
+
+::
+
+<!-- /automd -->
+
+<!-- automd:file src="GUIDE.md" -->
+
+This example implements a simple chat room using WebSockets. Clients connect, send messages, and receive messages from other users in real-time. The server broadcasts messages to all connected clients using pub/sub channels.
+
+## WebSocket Handler
+
+Create a WebSocket route using `defineWebSocketHandler`.
+
+```ts [routes/_ws.ts]
+import { defineWebSocketHandler } from "nitro/h3";
+
+export default defineWebSocketHandler({
+  open(peer) {
+    peer.send({ user: "server", message: `Welcome ${peer}!` });
+    peer.publish("chat", { user: "server", message: `${peer} joined!` });
+    peer.subscribe("chat");
+  },
+  message(peer, message) {
+    if (message.text().includes("ping")) {
+      peer.send({ user: "server", message: "pong" });
+    } else {
+      const msg = {
+        user: peer.toString(),
+        message: message.toString(),
+      };
+      peer.send(msg); // echo
+      peer.publish("chat", msg);
+    }
+  },
+  close(peer) {
+    peer.publish("chat", { user: "server", message: `${peer} left!` });
+  },
+});
+```
+
+Different hooks are exposed by `defineWebSocketHandler()` to integrate with different parts of the websocket lifecycle.
+
+<!-- /automd -->
+
+## Learn More
+
+- [Routing](/docs/routing)
+- [crossws Documentation](https://crossws.h3.dev/guide/hooks)