diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000..41583e36ca
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io
diff --git a/PLAN_MICRO.md b/PLAN_MICRO.md
new file mode 100644
index 0000000000..825dd75742
--- /dev/null
+++ b/PLAN_MICRO.md
@@ -0,0 +1,201 @@
+# Plan: Deno Microservice for Documentation Generation
+
+> **Status**: Recommended approach. Uses official `@deno/doc` with full feature support.
+
+Deploy a separate Vercel project using `vercel-deno` runtime that exposes a docs generation API.
+
+## Architecture
+
+```
+npmx.dev (Nuxt/Node.js)          docs-api.npmx.dev (Deno)
+┌─────────────────────┐          ┌─────────────────────┐
+│ /api/registry/docs  │  HTTP    │ /api/generate       │
+│         │           │ ──────>  │         │           │
+│         ▼           │          │         ▼           │
+│ generateDocsWithDeno│          │ @deno/doc           │
+└─────────────────────┘          └─────────────────────┘
+```
+
+## Implementation
+
+### Part 1: Deno Microservice
+
+#### Project Structure
+
+```
+docs-api/
+├── api/
+│   └── generate.ts
+├── vercel.json
+└── README.md
+```
+
+#### `vercel.json`
+
+```json
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "functions": {
+    "api/**/*.[jt]s": {
+      "runtime": "vercel-deno@3.1.0"
+    }
+  }
+}
+```
+
+#### `api/generate.ts`
+
+```typescript
+#!/usr/bin/env deno run --allow-net --allow-env
+
+import { doc } from 'jsr:@deno/doc'
+
+interface GenerateRequest {
+  package: string
+  version: string
+}
+
+function validateAuth(req: Request): boolean {
+  const authHeader = req.headers.get('Authorization')
+  const expectedToken = Deno.env.get('API_SECRET')
+  if (!expectedToken) return true
+  return authHeader === `Bearer ${expectedToken}`
+}
+
+export default async function handler(req: Request): Promise<Response> {
+  const headers = {
+    'Access-Control-Allow-Origin': 'https://npmx.dev',
+    'Access-Control-Allow-Methods': 'POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    'Content-Type': 'application/json',
+  }
+
+  if (req.method === 'OPTIONS') {
+    return new Response(null, { status: 204, headers })
+  }
+
+  if (req.method !== 'POST') {
+    return new Response(JSON.stringify({ error: 'method_not_allowed' }), { status: 405, headers })
+  }
+
+  if (!validateAuth(req)) {
+    return new Response(JSON.stringify({ error: 'unauthorized' }), { status: 401, headers })
+  }
+
+  try {
+    const body: GenerateRequest = await req.json()
+
+    if (!body.package || !body.version) {
+      return new Response(JSON.stringify({ error: 'bad_request' }), { status: 400, headers })
+    }
+
+    const specifier = `https://esm.sh/${body.package}@${body.version}?target=deno`
+    const nodes = await doc(specifier)
+
+    return new Response(JSON.stringify({ nodes }), { status: 200, headers })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error'
+
+    if (message.includes('Could not find')) {
+      return new Response(JSON.stringify({ error: 'not_found' }), { status: 404, headers })
+    }
+
+    return new Response(JSON.stringify({ error: 'generation_failed', message }), {
+      status: 500,
+      headers,
+    })
+  }
+}
+```
+
+### Part 2: Update Main App
+
+#### Environment Variables
+
+```bash
+DOCS_API_URL=https://docs-api.npmx.dev/api/generate
+DOCS_API_SECRET=your-secret-token
+```
+
+#### Update `server/utils/docs.ts`
+
+```typescript
+const DOCS_API_URL = process.env.DOCS_API_URL || 'https://docs-api.npmx.dev/api/generate'
+const DOCS_API_SECRET = process.env.DOCS_API_SECRET
+
+async function runDenoDoc(packageName: string, version: string): Promise<DenoDocResult> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  }
+
+  if (DOCS_API_SECRET) {
+    headers['Authorization'] = `Bearer ${DOCS_API_SECRET}`
+  }
+
+  const response = await fetch(DOCS_API_URL, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ package: packageName, version }),
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: 'Unknown error' }))
+    if (response.status === 404) {
+      return { nodes: [] }
+    }
+    throw new Error(`Docs API error: ${error.message}`)
+  }
+
+  return (await response.json()) as DenoDocResult
+}
+
+export async function generateDocsWithDeno(
+  packageName: string,
+  version: string,
+): Promise<DocsGenerationResult | null> {
+  const result = await runDenoDoc(packageName, version)
+
+  if (!result.nodes || result.nodes.length === 0) {
+    return null
+  }
+
+  // Rest remains the same
+  const flattenedNodes = flattenNamespaces(result.nodes)
+  const mergedSymbols = mergeOverloads(flattenedNodes)
+  const symbolLookup = buildSymbolLookup(flattenedNodes)
+
+  const html = await renderDocNodes(mergedSymbols, symbolLookup)
+  const toc = renderToc(mergedSymbols)
+
+  return { html, toc, nodes: flattenedNodes }
+}
+```
+
+#### Remove Unused Code
+
+Delete from `server/utils/docs.ts`:
+
+- `execFileAsync` import
+- `DENO_DOC_TIMEOUT_MS`, `DENO_DOC_MAX_BUFFER` constants
+- `denoCheckPromise`, `isDenoInstalled()`, `verifyDenoInstalled()`
+- `buildEsmShUrl()` (moved to microservice)
+- Old `runDenoDoc()` implementation
+
+### Local Development
+
+Keep subprocess as fallback for local dev:
+
+```typescript
+async function runDenoDoc(packageName: string, version: string): Promise<DenoDocResult> {
+  if (process.dev && (await isDenoInstalled())) {
+    return runLocalDenoDoc(packageName, version)
+  }
+  return runRemoteDenoDoc(packageName, version)
+}
+```
+
+## Pros/Cons
+
+**Pros**: Uses official `@deno/doc`, exact parity with `deno doc` CLI, actively maintained, clean separation
+
+**Cons**: Two deployments, +100-200ms latency, CORS/auth setup, more complex local dev
diff --git a/PLAN_WASM.md b/PLAN_WASM.md
new file mode 100644
index 0000000000..8698f00068
--- /dev/null
+++ b/PLAN_WASM.md
@@ -0,0 +1,110 @@
+# Plan: WASM-based Documentation Generation
+
+> **Status**: Alternative approach. See PLAN_MICRO.md for recommended approach.
+
+Replace the `deno doc` subprocess with `tsdoc-extractor`, a WASM build of `deno_doc` for Node.js.
+
+## Package
+
+- **npm**: `tsdoc-extractor`
+- **Size**: 2.8MB WASM + ~25KB JS
+- **Last updated**: July 2023
+- **Output**: Same JSON format as `deno doc --json`
+
+## Test Results
+
+```
+ufo@1.5.0:  58 nodes (works)
+vue@3.5.0:   4 nodes (re-exports not followed - WASM limitation)
+```
+
+## Key Finding
+
+esm.sh serves types URL in the `x-typescript-types` header, not at the main URL:
+
+```bash
+$ curl -sI 'https://esm.sh/ufo@1.5.0' | grep x-typescript-types
+x-typescript-types: https://esm.sh/ufo@1.5.0/dist/index.d.ts
+```
+
+## Architecture
+
+```
+Current:  [Request] -> [subprocess: deno doc --json] -> [parse JSON]
+New:      [Request] -> [fetch types] -> [tsdoc-extractor WASM] -> [parse JSON]
+```
+
+## Implementation
+
+### 1. Install
+
+```bash
+pnpm add tsdoc-extractor
+```
+
+### 2. Create `server/utils/docs-wasm.ts`
+
+```typescript
+import { doc, defaultResolver } from 'tsdoc-extractor'
+import type { DenoDocNode, DocsGenerationResult } from '#shared/types/deno-doc'
+
+async function getTypesUrl(packageName: string, version: string): Promise<string | null> {
+  const url = `https://esm.sh/${packageName}@${version}`
+  const response = await fetch(url, { method: 'HEAD' })
+  return response.headers.get('x-typescript-types')
+}
+
+function createResolver() {
+  return (specifier: string, referrer: string): string => {
+    if (specifier.startsWith('.')) {
+      return new URL(specifier, referrer).toString()
+    }
+    if (specifier.startsWith('https://esm.sh/')) {
+      return specifier
+    }
+    if (!specifier.startsWith('http')) {
+      return `https://esm.sh/${specifier}`
+    }
+    return defaultResolver(specifier, referrer)
+  }
+}
+
+export async function generateDocsWithWasm(
+  packageName: string,
+  version: string,
+): Promise<DocsGenerationResult | null> {
+  const typesUrl = await getTypesUrl(packageName, version)
+
+  if (!typesUrl) {
+    return null
+  }
+
+  const nodes = (await doc(typesUrl, {
+    resolve: createResolver(),
+  })) as DenoDocNode[]
+
+  if (!nodes || nodes.length === 0) {
+    return null
+  }
+
+  const flattenedNodes = flattenNamespaces(nodes)
+  const mergedSymbols = mergeOverloads(flattenedNodes)
+  const symbolLookup = buildSymbolLookup(flattenedNodes)
+
+  const html = await renderDocNodes(mergedSymbols, symbolLookup)
+  const toc = renderToc(mergedSymbols)
+
+  return { html, toc, nodes: flattenedNodes }
+}
+```
+
+## Limitations
+
+- **WASM from 2023**: Known issues with `export *` re-exports
+- **Rebuild requires Rust**: Need wasm-pack and deno_doc source to update
+
+## Pros/Cons
+
+**Pros**: No external dependency, single deployment, faster cold starts
+
+**Cons**: Old WASM with known issues, complex packages may fail, 2.8MB bundle increase
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index d3ab19aa5d..ca95211937 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -12,7 +12,10 @@ withDefaults(
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
+  <header
+    aria-label="Site header"
+    class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
+  >
     <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
       <NuxtLink
         v-if="showLogo"
diff --git a/app/components/DocsVersionSelector.vue b/app/components/DocsVersionSelector.vue
new file mode 100644
index 0000000000..00c094fbc4
--- /dev/null
+++ b/app/components/DocsVersionSelector.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { compareVersions } from '~/utils/versions'
+
+const props = defineProps<{
+  packageName: string
+  currentVersion: string
+  versions: Record<string, unknown>
+  distTags: Record<string, string>
+}>()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement>()
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+})
+
+/** Maximum number of versions to show in dropdown */
+const MAX_VERSIONS = 10
+
+/** Get sorted list of recent versions with their tags */
+const recentVersions = computed(() => {
+  const versionList = Object.keys(props.versions)
+    .sort((a, b) => compareVersions(b, a))
+    .slice(0, MAX_VERSIONS)
+
+  // Create a map of version -> tags
+  const versionTags = new Map<string, string[]>()
+  for (const [tag, version] of Object.entries(props.distTags)) {
+    const existing = versionTags.get(version)
+    if (existing) {
+      existing.push(tag)
+    } else {
+      versionTags.set(version, [tag])
+    }
+  }
+
+  return versionList.map(version => ({
+    version,
+    tags: versionTags.get(version) ?? [],
+    isCurrent: version === props.currentVersion,
+  }))
+})
+
+const latestVersion = computed(() => props.distTags.latest)
+
+function getDocsUrl(version: string): string {
+  return `/docs/${props.packageName}/v/${version}`
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative">
+    <button
+      type="button"
+      aria-haspopup="listbox"
+      :aria-expanded="isOpen"
+      class="flex items-center gap-1.5 text-fg-subtle font-mono text-sm hover:text-fg transition-colors"
+      @click="isOpen = !isOpen"
+      @keydown="handleKeydown"
+    >
+      <span>{{ currentVersion }}</span>
+      <span
+        v-if="currentVersion === latestVersion"
+        class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-sans font-medium"
+      >
+        latest
+      </span>
+      <span
+        class="i-carbon-chevron-down w-3.5 h-3.5 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        role="listbox"
+        :aria-activedescendant="`version-${currentVersion}`"
+        class="absolute top-full left-0 mt-2 min-w-[180px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[300px] overflow-y-auto"
+        @keydown="handleKeydown"
+      >
+        <NuxtLink
+          v-for="{ version, tags, isCurrent } in recentVersions"
+          :id="`version-${version}`"
+          :key="version"
+          :to="getDocsUrl(version)"
+          role="option"
+          :aria-selected="isCurrent"
+          class="flex items-center justify-between gap-3 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-colors"
+          :class="isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-muted'"
+          @click="isOpen = false"
+        >
+          <span class="truncate">{{ version }}</span>
+          <span v-if="tags.length > 0" class="flex items-center gap-1 shrink-0">
+            <span
+              v-for="tag in tags"
+              :key="tag"
+              class="text-[10px] px-1.5 py-0.5 rounded font-sans font-medium"
+              :class="
+                tag === 'latest'
+                  ? 'bg-emerald-500/10 text-emerald-400'
+                  : 'bg-bg-muted text-fg-subtle'
+              "
+            >
+              {{ tag }}
+            </span>
+          </span>
+        </NuxtLink>
+
+        <div
+          v-if="Object.keys(versions).length > MAX_VERSIONS"
+          class="border-t border-border mt-1 pt-1 px-3 py-2"
+        >
+          <NuxtLink
+            :to="`/${packageName}`"
+            class="text-xs text-fg-subtle hover:text-fg transition-colors"
+            @click="isOpen = false"
+          >
+            View all {{ Object.keys(versions).length }} versions
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index bc79a7c135..487a5081ae 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -217,6 +217,30 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
+// Docs URL: prefer package's homepage (often their docs site), fall back to our API docs
+const docsLink = computed(() => {
+  const homepage = displayVersion.value?.homepage
+  if (homepage) {
+    return {
+      href: homepage,
+      isExternal: true,
+    }
+  }
+
+  // Fall back to our generated API docs
+  if (displayVersion.value) {
+    return {
+      to: {
+        name: 'docs' as const,
+        params: { path: [...pkg.value!.name.split('/'), 'v', displayVersion.value.version] },
+      },
+      isExternal: false,
+    }
+  }
+
+  return null
+})
+
 function normalizeGitUrl(url: string): string {
   return url
     .replace(/^git\+/, '')
@@ -610,17 +634,7 @@ defineOgImageComponent('Package', {
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
               </a>
             </li>
-            <li v-if="homepageUrl">
-              <a
-                :href="homepageUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon-link w-4 h-4" aria-hidden="true" />
-                homepage
-              </a>
-            </li>
+
             <li v-if="displayVersion?.bugs?.url">
               <a
                 :href="displayVersion.bugs.url"
@@ -672,6 +686,26 @@ defineOgImageComponent('Package', {
               </a>
             </li>
 
+            <li v-if="docsLink">
+              <a
+                v-if="docsLink.isExternal"
+                :href="docsLink.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              >
+                <span class="i-carbon-document w-4 h-4" aria-hidden="true" />
+                docs
+              </a>
+              <NuxtLink
+                v-else
+                :to="docsLink.to"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              >
+                <span class="i-carbon-document w-4 h-4" aria-hidden="true" />
+                docs
+              </NuxtLink>
+            </li>
             <li v-if="displayVersion">
               <NuxtLink
                 :to="{
@@ -681,6 +715,7 @@ defineOgImageComponent('Package', {
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
                 aria-keyshortcuts="."
               >
+                <span class="i-carbon-code w-4 h-4" aria-hidden="true" />
                 code
                 <kbd
                   class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
diff --git a/app/pages/docs/[...path].vue b/app/pages/docs/[...path].vue
new file mode 100644
index 0000000000..3d23af0c98
--- /dev/null
+++ b/app/pages/docs/[...path].vue
@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import type { DocsResponse } from '#shared/types'
+import { assertValidPackageName } from '#shared/utils/npm'
+
+definePageMeta({
+  name: 'docs',
+})
+
+const route = useRoute('docs')
+const router = useRouter()
+
+const parsedRoute = computed(() => {
+  const segments = route.params.path || []
+  const vIndex = segments.indexOf('v')
+
+  if (vIndex === -1 || vIndex >= segments.length - 1) {
+    return {
+      packageName: segments.join('/'),
+      version: null as string | null,
+    }
+  }
+
+  return {
+    packageName: segments.slice(0, vIndex).join('/'),
+    version: segments.slice(vIndex + 1).join('/'),
+  }
+})
+
+const packageName = computed(() => parsedRoute.value.packageName)
+const requestedVersion = computed(() => parsedRoute.value.version)
+
+// Validate package name on server-side for early error detection
+if (import.meta.server && packageName.value) {
+  assertValidPackageName(packageName.value)
+}
+
+const { data: pkg } = usePackage(packageName)
+
+const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
+
+watch(
+  [requestedVersion, latestVersion, packageName],
+  ([version, latest, name]) => {
+    if (!version && latest && name) {
+      router.replace(`/docs/${name}/v/${latest}`)
+    }
+  },
+  { immediate: true },
+)
+
+const resolvedVersion = computed(() => requestedVersion.value ?? latestVersion.value)
+
+const docsUrl = computed(() => {
+  if (!packageName.value || !resolvedVersion.value) return null
+  return `/api/registry/docs/${packageName.value}/v/${resolvedVersion.value}`
+})
+
+const shouldFetch = computed(() => !!docsUrl.value)
+
+const { data: docsData, status: docsStatus } = useLazyFetch<DocsResponse>(
+  () => docsUrl.value ?? '',
+  {
+    watch: [docsUrl],
+    immediate: shouldFetch.value,
+    default: () => ({
+      package: packageName.value,
+      version: resolvedVersion.value ?? '',
+      html: '',
+      toc: null,
+      status: 'missing' as const,
+      message: 'Docs are not available for this version.',
+    }),
+  },
+)
+
+const pageTitle = computed(() => {
+  if (!packageName.value) return 'API Docs - npmx'
+  if (!resolvedVersion.value) return `${packageName.value} docs - npmx`
+  return `${packageName.value}@${resolvedVersion.value} docs - npmx`
+})
+
+useSeoMeta({
+  title: () => pageTitle.value,
+})
+
+const showLoading = computed(() => docsStatus.value === 'pending')
+const showEmptyState = computed(() => docsData.value?.status !== 'ok')
+</script>
+
+<template>
+  <div class="docs-page min-h-screen">
+    <!-- Visually hidden h1 for accessibility -->
+    <h1 class="sr-only">{{ packageName }} API Documentation</h1>
+
+    <!-- Sticky header - positioned below AppHeader -->
+    <header
+      aria-label="Package documentation header"
+      class="docs-header sticky z-10 bg-bg/95 backdrop-blur border-b border-border"
+    >
+      <div class="px-4 sm:px-6 lg:px-8 py-4">
+        <div class="flex items-center justify-between gap-4">
+          <div class="flex items-center gap-3 min-w-0">
+            <NuxtLink
+              v-if="packageName"
+              :to="`/${packageName}`"
+              class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
+            >
+              {{ packageName }}
+            </NuxtLink>
+            <DocsVersionSelector
+              v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+              :package-name="packageName"
+              :current-version="resolvedVersion"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags']"
+            />
+            <span v-else-if="resolvedVersion" class="text-fg-subtle font-mono text-sm shrink-0">
+              {{ resolvedVersion }}
+            </span>
+          </div>
+          <div class="flex items-center gap-3 shrink-0">
+            <span
+              class="text-xs px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
+            >
+              API Docs
+            </span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="flex">
+      <!-- Sidebar TOC -->
+      <aside
+        v-if="docsData?.toc && !showEmptyState"
+        class="hidden lg:block w-64 xl:w-72 shrink-0 border-r border-border"
+      >
+        <div class="docs-sidebar sticky overflow-y-auto p-4">
+          <h2 class="text-xs font-semibold text-fg-subtle uppercase tracking-wider mb-4">
+            Contents
+          </h2>
+          <!-- eslint-disable vue/no-v-html -->
+          <div class="toc-content" v-html="docsData.toc" />
+        </div>
+      </aside>
+
+      <!-- Main content -->
+      <main class="flex-1 min-w-0">
+        <div v-if="showLoading" class="p-6 sm:p-8 lg:p-12 space-y-4">
+          <div class="skeleton h-8 w-64 rounded" />
+          <div class="skeleton h-4 w-full max-w-2xl rounded" />
+          <div class="skeleton h-4 w-5/6 max-w-2xl rounded" />
+          <div class="skeleton h-4 w-3/4 max-w-2xl rounded" />
+        </div>
+
+        <div v-else-if="showEmptyState" class="p-6 sm:p-8 lg:p-12">
+          <div class="max-w-xl rounded-lg border border-border bg-bg-muted p-6">
+            <h2 class="font-mono text-lg mb-2">Docs not available</h2>
+            <p class="text-fg-subtle text-sm">
+              {{ docsData?.message ?? 'We could not generate docs for this version.' }}
+            </p>
+            <div class="flex gap-4 mt-4">
+              <NuxtLink
+                v-if="packageName"
+                :to="`/${packageName}`"
+                class="link-subtle font-mono text-sm"
+              >
+                View package
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+
+        <!-- eslint-disable vue/no-v-html -->
+        <div v-else class="docs-content p-6 sm:p-8 lg:p-12" v-html="docsData?.html" />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Layout constants - must match AppHeader height */
+.docs-page {
+  --app-header-height: 57px;
+  --docs-header-height: 57px;
+  --combined-header-height: calc(var(--app-header-height) + var(--docs-header-height));
+}
+
+.docs-header {
+  top: var(--app-header-height);
+}
+
+.docs-sidebar {
+  top: var(--combined-header-height);
+  height: calc(100vh - var(--combined-header-height));
+}
+
+/* Table of contents styles */
+.toc-content ul {
+  @apply space-y-1;
+}
+
+.toc-content > ul > li {
+  @apply mb-4;
+}
+
+.toc-content > ul > li > a {
+  @apply text-sm font-medium text-fg-muted hover:text-fg;
+}
+
+.toc-content > ul > li > ul {
+  @apply mt-2 pl-3 border-l border-border/50;
+}
+
+.toc-content > ul > li > ul a {
+  @apply text-xs text-fg-subtle hover:text-fg block py-0.5 truncate;
+}
+
+/* Main docs content container - no max-width to use full space */
+.docs-content {
+  @apply max-w-none;
+}
+
+/* Section headings */
+.docs-content .docs-section {
+  @apply mb-16;
+}
+
+.docs-content .docs-section-title {
+  @apply text-lg font-semibold text-fg mb-8 pb-3 pt-4 border-b border-border sticky bg-bg z-[2];
+  top: var(--combined-header-height);
+}
+
+/* Individual symbol articles */
+.docs-content .docs-symbol {
+  @apply mb-10 pb-10 border-b border-border/30 last:border-0;
+}
+
+.docs-content .docs-symbol:target {
+  @apply scroll-mt-32;
+}
+
+.docs-content .docs-symbol:target .docs-symbol-header {
+  @apply bg-amber-500/10 -mx-3 px-3 py-1 rounded-md;
+}
+
+/* Symbol header (name + badges) */
+.docs-content .docs-symbol-header {
+  @apply flex items-center gap-3 mb-4 flex-wrap;
+}
+
+.docs-content .docs-anchor {
+  @apply text-fg-subtle/50 hover:text-fg-subtle transition-colors text-lg no-underline;
+}
+
+.docs-content .docs-symbol-name {
+  @apply font-mono text-lg font-semibold text-fg m-0;
+}
+
+/* Badges */
+.docs-content .docs-badge {
+  @apply text-xs px-2 py-0.5 rounded-full font-medium;
+}
+
+.docs-content .docs-badge--function {
+  @apply bg-blue-500/15 text-blue-400;
+}
+.docs-content .docs-badge--class {
+  @apply bg-amber-500/15 text-amber-400;
+}
+.docs-content .docs-badge--interface {
+  @apply bg-emerald-500/15 text-emerald-400;
+}
+.docs-content .docs-badge--typeAlias {
+  @apply bg-violet-500/15 text-violet-400;
+}
+.docs-content .docs-badge--variable {
+  @apply bg-orange-500/15 text-orange-400;
+}
+.docs-content .docs-badge--enum {
+  @apply bg-pink-500/15 text-pink-400;
+}
+.docs-content .docs-badge--namespace {
+  @apply bg-cyan-500/15 text-cyan-400;
+}
+.docs-content .docs-badge--async {
+  @apply bg-purple-500/15 text-purple-400;
+}
+
+/* Signature code block - now uses Shiki */
+.docs-content .docs-signature {
+  @apply mb-5;
+}
+
+.docs-content .docs-signature .shiki {
+  @apply text-sm bg-bg-muted/50 border border-border/50 p-4 rounded-lg;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.docs-content .docs-signature .shiki code {
+  @apply text-sm;
+  white-space: pre-wrap;
+}
+
+/* Overload count badge */
+.docs-content .docs-overload-count {
+  @apply text-xs text-fg-subtle;
+}
+
+/* More overloads indicator */
+.docs-content .docs-more-overloads {
+  @apply text-xs text-fg-subtle italic mt-2 mb-0;
+}
+
+/* Description text */
+.docs-content .docs-description {
+  @apply text-sm text-fg-muted leading-relaxed mb-5;
+}
+
+.docs-content .docs-description code {
+  @apply bg-bg-muted px-1.5 py-0.5 rounded text-xs font-mono;
+}
+
+/* Deprecation warning */
+.docs-content .docs-deprecated {
+  @apply bg-amber-500/10 border border-amber-500/20 rounded-lg p-4 mb-5;
+}
+
+.docs-content .docs-deprecated strong {
+  @apply text-amber-400 text-sm;
+}
+
+.docs-content .docs-deprecated p {
+  @apply text-amber-300/80 text-sm mt-2 mb-0;
+}
+
+/* Parameters, Returns, Examples, See Also sections */
+.docs-content .docs-params,
+.docs-content .docs-returns,
+.docs-content .docs-examples,
+.docs-content .docs-see,
+.docs-content .docs-members {
+  @apply mb-5;
+}
+
+.docs-content .docs-params h4,
+.docs-content .docs-returns h4,
+.docs-content .docs-examples h4,
+.docs-content .docs-see h4,
+.docs-content .docs-members h4 {
+  @apply text-xs font-semibold text-fg-subtle uppercase tracking-wider mb-3;
+}
+
+/* Definition lists for params/members */
+.docs-content dl {
+  @apply space-y-2;
+}
+
+.docs-content dt {
+  @apply font-mono text-sm text-fg-muted;
+}
+
+.docs-content dd {
+  @apply text-sm text-fg-subtle ml-4 mb-3;
+}
+
+/* Returns paragraph */
+.docs-content .docs-returns p {
+  @apply text-sm text-fg-muted m-0;
+}
+
+/* Example code blocks - now uses Shiki */
+.docs-content .docs-examples .shiki {
+  @apply text-sm bg-bg-muted border border-border/50 p-4 rounded-lg overflow-x-auto mb-3;
+}
+
+.docs-content .docs-examples .shiki code {
+  @apply text-sm;
+}
+
+/* See also list */
+.docs-content .docs-see ul {
+  @apply list-disc list-inside text-sm text-fg-muted space-y-1;
+}
+
+.docs-content .docs-link {
+  @apply text-blue-400 hover:text-blue-300 underline underline-offset-2;
+}
+
+/* Symbol cross-reference links */
+.docs-content .docs-symbol-link {
+  @apply text-emerald-400 hover:text-emerald-300 underline underline-offset-2;
+}
+
+/* Unknown symbol references shown as code */
+.docs-content .docs-symbol-ref {
+  @apply bg-bg-muted px-1.5 py-0.5 rounded text-xs font-mono;
+}
+
+/* Inline code in descriptions */
+.docs-content .docs-inline-code {
+  @apply bg-bg-muted px-1.5 py-0.5 rounded text-xs font-mono;
+}
+
+/* Enum members */
+.docs-content .docs-enum-members {
+  @apply flex flex-wrap gap-2 list-none p-0;
+}
+
+.docs-content .docs-enum-members li {
+  @apply m-0;
+}
+
+.docs-content .docs-enum-members code {
+  @apply text-sm font-mono text-fg-muted bg-bg-muted px-2 py-1 rounded;
+}
+
+/* Members section (constructors, properties, methods) */
+.docs-content .docs-members pre {
+  @apply text-sm bg-bg-muted/50 border border-border/50 p-3 rounded-lg overflow-x-auto font-mono;
+}
+
+.docs-content .docs-members pre code {
+  @apply text-fg-muted;
+}
+</style>
diff --git a/server/api/registry/docs/[...pkg].get.ts b/server/api/registry/docs/[...pkg].get.ts
new file mode 100644
index 0000000000..282f1e4411
--- /dev/null
+++ b/server/api/registry/docs/[...pkg].get.ts
@@ -0,0 +1,56 @@
+import type { DocsResponse } from '#shared/types'
+import { fetchNpmPackage } from '#server/utils/npm'
+import { assertValidPackageName, parsePackageParam } from '#shared/utils/npm'
+import { generateDocsWithDeno } from '#server/utils/docs'
+
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParam = getRouterParam(event, 'pkg')
+    if (!pkgParam) {
+      throw createError({ statusCode: 400, message: 'Package name is required' })
+    }
+
+    const { packageName, version: requestedVersion } = parsePackageParam(pkgParam)
+
+    if (!packageName) {
+      throw createError({ statusCode: 400, message: 'Package name is required' })
+    }
+    assertValidPackageName(packageName)
+
+    const packument = await fetchNpmPackage(packageName)
+    const version = requestedVersion ?? packument['dist-tags']?.latest
+
+    if (!version) {
+      throw createError({ statusCode: 404, message: 'No latest version found' })
+    }
+
+    const generated = await generateDocsWithDeno(packageName, version)
+
+    if (!generated) {
+      return {
+        package: packageName,
+        version,
+        html: '',
+        toc: null,
+        status: 'missing',
+        message: 'Docs are not available for this package. It may not have TypeScript types.',
+      } satisfies DocsResponse
+    }
+
+    return {
+      package: packageName,
+      version,
+      html: generated.html,
+      toc: generated.toc,
+      status: 'ok',
+    } satisfies DocsResponse
+  },
+  {
+    maxAge: 60 * 60, // 1 hour cache
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      return `docs:v5:${pkg}`
+    },
+  },
+)
diff --git a/server/utils/code-highlight.ts b/server/utils/code-highlight.ts
index 8b43aa4fe8..b8933597a6 100644
--- a/server/utils/code-highlight.ts
+++ b/server/utils/code-highlight.ts
@@ -268,6 +268,9 @@ export async function highlightCode(
         theme: 'github-dark',
       })
 
+      // Shiki doesn't encode > in text content (e.g., arrow functions)
+      html = escapeRawGt(html)
+
       // Make import statements clickable for JS/TS languages
       if (IMPORT_LANGUAGES.has(language)) {
         html = linkifyImports(html, {
diff --git a/server/utils/docs/client.ts b/server/utils/docs/client.ts
new file mode 100644
index 0000000000..0cc7c52049
--- /dev/null
+++ b/server/utils/docs/client.ts
@@ -0,0 +1,88 @@
+/**
+ * Deno Integration
+ *
+ * Functions for running deno doc and processing its output.
+ * This is the layer that differs between microservice and WASM implementations.
+ *
+ * @module server/utils/docs/client
+ */
+
+import { execFile } from 'node:child_process'
+import { promisify } from 'node:util'
+import type { DenoDocResult } from '#shared/types/deno-doc'
+
+const execFileAsync = promisify(execFile)
+
+// =============================================================================
+// Configuration
+// =============================================================================
+
+/** Timeout for deno doc command in milliseconds (2 minutes) */
+const DENO_DOC_TIMEOUT_MS = 2 * 60 * 1000
+
+/** Maximum buffer size for deno doc output (50MB for large packages like React) */
+const DENO_DOC_MAX_BUFFER = 50 * 1024 * 1024
+
+// =============================================================================
+// Deno Integration
+// =============================================================================
+
+/** Cached promise for deno availability check - computed once on first access */
+let denoCheckPromise: Promise<boolean> | null = null
+
+/**
+ * Check if deno is installed (cached after first check).
+ */
+async function isDenoInstalled(): Promise<boolean> {
+  if (!denoCheckPromise) {
+    denoCheckPromise = execFileAsync('deno', ['--version'], { timeout: 5000 })
+      .then(() => true)
+      .catch(() => false)
+  }
+  return denoCheckPromise
+}
+
+/**
+ * Verify that deno is installed and available.
+ * @throws {Error} If deno is not installed
+ */
+export async function verifyDenoInstalled(): Promise<void> {
+  const available = await isDenoInstalled()
+  if (!available) {
+    throw new Error(
+      'Deno is not installed. Please install Deno to generate API documentation: https://deno.land',
+    )
+  }
+}
+
+/**
+ * Build esm.sh URL for a package that deno doc can process.
+ */
+export function buildEsmShUrl(packageName: string, version: string): string {
+  return `https://esm.sh/${packageName}@${version}?target=deno`
+}
+
+/**
+ * Run deno doc and parse the JSON output.
+ */
+export async function runDenoDoc(specifier: string): Promise<DenoDocResult> {
+  try {
+    const { stdout } = await execFileAsync('deno', ['doc', '--json', specifier], {
+      maxBuffer: DENO_DOC_MAX_BUFFER,
+      timeout: DENO_DOC_TIMEOUT_MS,
+    })
+
+    return JSON.parse(stdout) as DenoDocResult
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message.includes('ETIMEDOUT') || error.message.includes('timed out')) {
+        throw new Error(
+          `Deno doc timed out after ${DENO_DOC_TIMEOUT_MS / 1000}s - package may be too large`,
+          { cause: error },
+        )
+      }
+      throw new Error(`Deno doc failed: ${error.message}`, { cause: error })
+    }
+    throw new Error('Deno doc failed with unknown error', { cause: error })
+  }
+}
diff --git a/server/utils/docs/format.ts b/server/utils/docs/format.ts
new file mode 100644
index 0000000000..8bf1952c49
--- /dev/null
+++ b/server/utils/docs/format.ts
@@ -0,0 +1,95 @@
+/**
+ * Signature Formatting
+ *
+ * Functions for formatting TypeScript signatures, parameters, and types.
+ *
+ * @module server/utils/docs/format
+ */
+
+import type { DenoDocNode, FunctionParam, TsType } from '#shared/types/deno-doc'
+import { cleanSymbolName } from './text'
+
+/**
+ * Generate a TypeScript signature string for a node.
+ */
+export function getNodeSignature(node: DenoDocNode): string | null {
+  const name = cleanSymbolName(node.name)
+
+  switch (node.kind) {
+    case 'function': {
+      const typeParams = node.functionDef?.typeParams?.map(t => t.name).join(', ')
+      const typeParamsStr = typeParams ? `<${typeParams}>` : ''
+      const params = node.functionDef?.params?.map(p => formatParam(p)).join(', ') || ''
+      const ret = formatType(node.functionDef?.returnType) || 'void'
+      const asyncStr = node.functionDef?.isAsync ? 'async ' : ''
+      return `${asyncStr}function ${name}${typeParamsStr}(${params}): ${ret}`
+    }
+    case 'class': {
+      const ext = node.classDef?.extends ? ` extends ${formatType(node.classDef.extends)}` : ''
+      const impl = node.classDef?.implements?.map(t => formatType(t)).join(', ')
+      const implStr = impl ? ` implements ${impl}` : ''
+      const abstractStr = node.classDef?.isAbstract ? 'abstract ' : ''
+      return `${abstractStr}class ${name}${ext}${implStr}`
+    }
+    case 'interface': {
+      const typeParams = node.interfaceDef?.typeParams?.map(t => t.name).join(', ')
+      const typeParamsStr = typeParams ? `<${typeParams}>` : ''
+      const ext = node.interfaceDef?.extends?.map(t => formatType(t)).join(', ')
+      const extStr = ext ? ` extends ${ext}` : ''
+      return `interface ${name}${typeParamsStr}${extStr}`
+    }
+    case 'typeAlias': {
+      const typeParams = node.typeAliasDef?.typeParams?.map(t => t.name).join(', ')
+      const typeParamsStr = typeParams ? `<${typeParams}>` : ''
+      const type = formatType(node.typeAliasDef?.tsType) || 'unknown'
+      return `type ${name}${typeParamsStr} = ${type}`
+    }
+    case 'variable': {
+      const keyword = node.variableDef?.kind === 'const' ? 'const' : 'let'
+      const type = formatType(node.variableDef?.tsType) || 'unknown'
+      return `${keyword} ${name}: ${type}`
+    }
+    case 'enum': {
+      return `enum ${name}`
+    }
+    default:
+      return null
+  }
+}
+
+/**
+ * Format a function parameter.
+ */
+export function formatParam(param: FunctionParam): string {
+  const optional = param.optional ? '?' : ''
+  const type = formatType(param.tsType)
+  return type ? `${param.name}${optional}: ${type}` : `${param.name}${optional}`
+}
+
+/**
+ * Format a TypeScript type.
+ */
+export function formatType(type?: TsType): string {
+  if (!type) return ''
+
+  if (type.repr) return type.repr
+
+  if (type.kind === 'keyword' && type.keyword) {
+    return type.keyword
+  }
+
+  if (type.kind === 'typeRef' && type.typeRef) {
+    const params = type.typeRef.typeParams?.map(t => formatType(t)).join(', ')
+    return params ? `${type.typeRef.typeName}<${params}>` : type.typeRef.typeName
+  }
+
+  if (type.kind === 'array' && type.array) {
+    return `${formatType(type.array)}[]`
+  }
+
+  if (type.kind === 'union' && type.union) {
+    return type.union.map(t => formatType(t)).join(' | ')
+  }
+
+  return type.repr || 'unknown'
+}
diff --git a/server/utils/docs/index.ts b/server/utils/docs/index.ts
new file mode 100644
index 0000000000..4790cedb16
--- /dev/null
+++ b/server/utils/docs/index.ts
@@ -0,0 +1,58 @@
+/**
+ * API Documentation Generator
+ *
+ * Generates TypeScript API documentation for npm packages using `deno doc`.
+ * Uses esm.sh to resolve package types, which handles @types/* packages automatically.
+ *
+ * @module server/utils/docs
+ */
+
+import type { DocsGenerationResult } from '#shared/types/deno-doc'
+import { buildEsmShUrl, runDenoDoc, verifyDenoInstalled } from './client'
+import { buildSymbolLookup, flattenNamespaces, mergeOverloads } from './processing'
+import { renderDocNodes, renderToc } from './render'
+
+/**
+ * Generate API documentation for an npm package.
+ *
+ * Uses `deno doc --json` with esm.sh URLs to extract TypeScript type information
+ * and JSDoc comments, then renders them as HTML.
+ *
+ * @param packageName - The npm package name (e.g., "react", "@types/lodash")
+ * @param version - The package version (e.g., "19.2.3")
+ * @returns Generated documentation or null if no types are available
+ * @throws {Error} If deno is not installed or the command fails
+ *
+ * @example
+ * ```ts
+ * const docs = await generateDocsWithDeno('ufo', '1.5.0')
+ * if (docs) {
+ *   console.log(docs.html)
+ * }
+ * ```
+ */
+export async function generateDocsWithDeno(
+  packageName: string,
+  version: string,
+): Promise<DocsGenerationResult | null> {
+  // Verify deno is available
+  await verifyDenoInstalled()
+
+  const url = buildEsmShUrl(packageName, version)
+  const result = await runDenoDoc(url)
+
+  if (!result.nodes || result.nodes.length === 0) {
+    return null
+  }
+
+  // Process nodes: flatten namespaces, merge overloads, and build lookup
+  const flattenedNodes = flattenNamespaces(result.nodes)
+  const mergedSymbols = mergeOverloads(flattenedNodes)
+  const symbolLookup = buildSymbolLookup(flattenedNodes)
+
+  // Render HTML and TOC from pre-computed merged symbols
+  const html = await renderDocNodes(mergedSymbols, symbolLookup)
+  const toc = renderToc(mergedSymbols)
+
+  return { html, toc, nodes: flattenedNodes }
+}
diff --git a/server/utils/docs/processing.ts b/server/utils/docs/processing.ts
new file mode 100644
index 0000000000..9a0a1354c0
--- /dev/null
+++ b/server/utils/docs/processing.ts
@@ -0,0 +1,114 @@
+/**
+ * Node Processing
+ *
+ * Functions for processing deno doc output: flattening namespaces,
+ * merging overloads, and building symbol lookups.
+ *
+ * @module server/utils/docs/processing
+ */
+
+import type { DenoDocNode } from '#shared/types/deno-doc'
+import type { MergedSymbol, SymbolLookup } from './types'
+import { cleanSymbolName, createSymbolId } from './text'
+
+/**
+ * Flatten namespace elements into top-level nodes for easier display.
+ * Also filters out import/reference nodes that aren't useful for docs.
+ */
+export function flattenNamespaces(nodes: DenoDocNode[]): DenoDocNode[] {
+  const result: DenoDocNode[] = []
+
+  for (const node of nodes) {
+    // Skip internal nodes
+    if (node.kind === 'import' || node.kind === 'reference') {
+      continue
+    }
+
+    result.push(node)
+
+    // Inline namespace members with qualified names
+    if (node.kind === 'namespace' && node.namespaceDef?.elements) {
+      for (const element of node.namespaceDef.elements) {
+        result.push({
+          ...element,
+          name: `${node.name}.${element.name}`,
+        })
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * Build a lookup table mapping symbol names to their HTML anchor IDs.
+ * Used for {@link} cross-references.
+ */
+export function buildSymbolLookup(nodes: DenoDocNode[]): SymbolLookup {
+  const lookup = new Map<string, string>()
+
+  for (const node of nodes) {
+    const cleanName = cleanSymbolName(node.name)
+    const id = createSymbolId(node.kind, cleanName)
+    lookup.set(cleanName, id)
+  }
+
+  return lookup
+}
+
+/**
+ * Merge function/method overloads into single entries.
+ *
+ * TypeScript packages often export many overloads for the same function
+ * (e.g., React's `h` has 23 overloads). This groups them together.
+ */
+export function mergeOverloads(nodes: DenoDocNode[]): MergedSymbol[] {
+  const byKey = new Map<string, DenoDocNode[]>()
+
+  for (const node of nodes) {
+    const cleanName = cleanSymbolName(node.name)
+    const key = `${node.kind}:${cleanName}`
+    const existing = byKey.get(key)
+    if (existing) {
+      existing.push(node)
+    } else {
+      byKey.set(key, [node])
+    }
+  }
+
+  const result: MergedSymbol[] = []
+
+  for (const [, groupedNodes] of byKey) {
+    const first = groupedNodes[0]
+    if (!first) continue // Should never happen, but defensive programming etc
+
+    // Use JSDoc from the best-documented overload
+    const withDoc = groupedNodes.find(n => n.jsDoc?.doc) ?? first
+
+    result.push({
+      name: cleanSymbolName(first.name),
+      kind: first.kind,
+      nodes: groupedNodes,
+      jsDoc: withDoc.jsDoc,
+    })
+  }
+
+  // Sort alphabetically
+  result.sort((a, b) => a.name.localeCompare(b.name))
+
+  return result
+}
+
+/**
+ * Group merged symbols by their kind (function, class, etc.)
+ */
+export function groupMergedByKind(symbols: MergedSymbol[]): Record<string, MergedSymbol[]> {
+  const grouped: Record<string, MergedSymbol[]> = {}
+
+  for (const sym of symbols) {
+    const kindGroup = (grouped[sym.kind] ??= [])
+    kindGroup.push(sym)
+  }
+
+  return grouped
+}
diff --git a/server/utils/docs/render.ts b/server/utils/docs/render.ts
new file mode 100644
index 0000000000..51398b23ee
--- /dev/null
+++ b/server/utils/docs/render.ts
@@ -0,0 +1,426 @@
+/**
+ * HTML Rendering
+ *
+ * Functions for rendering documentation nodes as HTML.
+ *
+ * @module server/utils/docs/render
+ */
+
+import type { DenoDocNode, JsDocTag } from '#shared/types/deno-doc'
+import { highlightCodeBlock } from '../shiki'
+import { formatParam, formatType, getNodeSignature } from './format'
+import { groupMergedByKind } from './processing'
+import { createSymbolId, escapeHtml, parseJsDocLinks, renderMarkdown } from './text'
+import type { MergedSymbol, SymbolLookup } from './types'
+
+// =============================================================================
+// Configuration
+// =============================================================================
+
+/** Maximum number of overload signatures to display per symbol */
+const MAX_OVERLOAD_SIGNATURES = 5
+
+/** Maximum number of items to show in TOC per category before truncating */
+const MAX_TOC_ITEMS_PER_KIND = 50
+
+/** Order in which symbol kinds are displayed */
+const KIND_DISPLAY_ORDER = [
+  'function',
+  'class',
+  'interface',
+  'typeAlias',
+  'variable',
+  'enum',
+  'namespace',
+] as const
+
+/** Human-readable titles for symbol kinds */
+const KIND_TITLES: Record<string, string> = {
+  function: 'Functions',
+  class: 'Classes',
+  interface: 'Interfaces',
+  typeAlias: 'Type Aliases',
+  variable: 'Variables',
+  enum: 'Enums',
+  namespace: 'Namespaces',
+}
+
+// =============================================================================
+// Main Rendering Functions
+// =============================================================================
+
+/**
+ * Render all documentation nodes as HTML.
+ */
+export async function renderDocNodes(
+  symbols: MergedSymbol[],
+  symbolLookup: SymbolLookup,
+): Promise<string> {
+  const grouped = groupMergedByKind(symbols)
+  const sections: string[] = []
+
+  for (const kind of KIND_DISPLAY_ORDER) {
+    const kindSymbols = grouped[kind]
+    if (!kindSymbols || kindSymbols.length === 0) continue
+
+    sections.push(await renderKindSection(kind, kindSymbols, symbolLookup))
+  }
+
+  return sections.join('\n')
+}
+
+/**
+ * Render a section for a specific symbol kind.
+ */
+async function renderKindSection(
+  kind: string,
+  symbols: MergedSymbol[],
+  symbolLookup: SymbolLookup,
+): Promise<string> {
+  const title = KIND_TITLES[kind] || kind
+  const lines: string[] = []
+
+  lines.push(`<section class="docs-section" id="section-${kind}">`)
+  lines.push(`<h2 class="docs-section-title">${title}</h2>`)
+
+  for (const symbol of symbols) {
+    lines.push(await renderMergedSymbol(symbol, symbolLookup))
+  }
+
+  lines.push(`</section>`)
+
+  return lines.join('\n')
+}
+
+/**
+ * Render a merged symbol (with all its overloads).
+ */
+async function renderMergedSymbol(
+  symbol: MergedSymbol,
+  symbolLookup: SymbolLookup,
+): Promise<string> {
+  const primaryNode = symbol.nodes[0]
+  if (!primaryNode) return '' // Safety check - should never happen
+
+  const lines: string[] = []
+  const id = createSymbolId(symbol.kind, symbol.name)
+  const hasOverloads = symbol.nodes.length > 1
+
+  lines.push(`<article class="docs-symbol" id="${id}">`)
+
+  // Header
+  lines.push(`<header class="docs-symbol-header">`)
+  lines.push(
+    `<a href="#${id}" class="docs-anchor" aria-label="Link to ${escapeHtml(symbol.name)}">#</a>`,
+  )
+  lines.push(`<h3 class="docs-symbol-name">${escapeHtml(symbol.name)}</h3>`)
+  lines.push(`<span class="docs-badge docs-badge--${symbol.kind}">${symbol.kind}</span>`)
+  if (primaryNode.functionDef?.isAsync) {
+    lines.push(`<span class="docs-badge docs-badge--async">async</span>`)
+  }
+  if (hasOverloads) {
+    lines.push(`<span class="docs-overload-count">${symbol.nodes.length} overloads</span>`)
+  }
+  lines.push(`</header>`)
+
+  // Signatures
+  const signatures = symbol.nodes
+    .slice(0, hasOverloads ? MAX_OVERLOAD_SIGNATURES : 1)
+    .map(n => getNodeSignature(n))
+    .filter(Boolean) as string[]
+
+  if (signatures.length > 0) {
+    const signatureCode = signatures.join('\n')
+    const highlightedSignature = await highlightCodeBlock(signatureCode, 'typescript')
+    lines.push(`<div class="docs-signature">${highlightedSignature}</div>`)
+
+    if (symbol.nodes.length > MAX_OVERLOAD_SIGNATURES) {
+      const remaining = symbol.nodes.length - MAX_OVERLOAD_SIGNATURES
+      lines.push(`<p class="docs-more-overloads">+ ${remaining} more overloads</p>`)
+    }
+  }
+
+  // Description
+  if (symbol.jsDoc?.doc) {
+    const description = symbol.jsDoc.doc.trim()
+    lines.push(`<div class="docs-description">${renderMarkdown(description, symbolLookup)}</div>`)
+  }
+
+  // JSDoc tags
+  if (symbol.jsDoc?.tags && symbol.jsDoc.tags.length > 0) {
+    lines.push(await renderJsDocTags(symbol.jsDoc.tags, symbolLookup))
+  }
+
+  // Type-specific members
+  if (symbol.kind === 'class' && primaryNode.classDef) {
+    lines.push(renderClassMembers(primaryNode.classDef))
+  } else if (symbol.kind === 'interface' && primaryNode.interfaceDef) {
+    lines.push(renderInterfaceMembers(primaryNode.interfaceDef))
+  } else if (symbol.kind === 'enum' && primaryNode.enumDef) {
+    lines.push(renderEnumMembers(primaryNode.enumDef))
+  }
+
+  lines.push(`</article>`)
+
+  return lines.join('\n')
+}
+
+/**
+ * Render JSDoc tags (params, returns, examples, etc.)
+ */
+async function renderJsDocTags(tags: JsDocTag[], symbolLookup: SymbolLookup): Promise<string> {
+  const lines: string[] = []
+
+  const params = tags.filter(t => t.kind === 'param')
+  const returns = tags.find(t => t.kind === 'return')
+  const examples = tags.filter(t => t.kind === 'example')
+  const deprecated = tags.find(t => t.kind === 'deprecated')
+  const see = tags.filter(t => t.kind === 'see')
+
+  // Deprecated warning
+  if (deprecated) {
+    lines.push(`<div class="docs-deprecated">`)
+    lines.push(`<strong>Deprecated</strong>`)
+    if (deprecated.doc) {
+      lines.push(`<p>${parseJsDocLinks(deprecated.doc, symbolLookup)}</p>`)
+    }
+    lines.push(`</div>`)
+  }
+
+  // Parameters
+  if (params.length > 0) {
+    lines.push(`<div class="docs-params">`)
+    lines.push(`<h4>Parameters</h4>`)
+    lines.push(`<dl>`)
+    for (const param of params) {
+      lines.push(
+        `<dt><code>${escapeHtml(param.name || '')}${param.optional ? '?' : ''}</code></dt>`,
+      )
+      if (param.doc) {
+        lines.push(`<dd>${parseJsDocLinks(param.doc, symbolLookup)}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  // Returns
+  if (returns?.doc) {
+    lines.push(`<div class="docs-returns">`)
+    lines.push(`<h4>Returns</h4>`)
+    lines.push(`<p>${parseJsDocLinks(returns.doc, symbolLookup)}</p>`)
+    lines.push(`</div>`)
+  }
+
+  // Examples (with syntax highlighting)
+  if (examples.length > 0) {
+    lines.push(`<div class="docs-examples">`)
+    lines.push(`<h4>Example${examples.length > 1 ? 's' : ''}</h4>`)
+    for (const example of examples) {
+      if (example.doc) {
+        const langMatch = example.doc.match(/```(\w+)?/)
+        const lang = langMatch?.[1] || 'typescript'
+        const code = example.doc.replace(/```\w*\n?/g, '').trim()
+        const highlighted = await highlightCodeBlock(code, lang)
+        lines.push(highlighted)
+      }
+    }
+    lines.push(`</div>`)
+  }
+
+  // See also
+  if (see.length > 0) {
+    lines.push(`<div class="docs-see">`)
+    lines.push(`<h4>See Also</h4>`)
+    lines.push(`<ul>`)
+    for (const s of see) {
+      if (s.doc) {
+        lines.push(`<li>${parseJsDocLinks(s.doc, symbolLookup)}</li>`)
+      }
+    }
+    lines.push(`</ul>`)
+    lines.push(`</div>`)
+  }
+
+  return lines.join('\n')
+}
+
+// =============================================================================
+// Member Rendering
+// =============================================================================
+
+/**
+ * Render class members (constructor, properties, methods).
+ */
+function renderClassMembers(def: NonNullable<DenoDocNode['classDef']>): string {
+  const lines: string[] = []
+  const { constructors, properties, methods } = def
+
+  if (constructors && constructors.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Constructor</h4>`)
+    for (const ctor of constructors) {
+      const params = ctor.params?.map(p => formatParam(p)).join(', ') || ''
+      lines.push(`<pre><code>constructor(${escapeHtml(params)})</code></pre>`)
+    }
+    lines.push(`</div>`)
+  }
+
+  if (properties && properties.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Properties</h4>`)
+    lines.push(`<dl>`)
+    for (const prop of properties) {
+      const modifiers: string[] = []
+      if (prop.isStatic) modifiers.push('static')
+      if (prop.readonly) modifiers.push('readonly')
+      const modStr = modifiers.length > 0 ? `${modifiers.join(' ')} ` : ''
+      const type = formatType(prop.tsType)
+      const opt = prop.optional ? '?' : ''
+      lines.push(
+        `<dt><code>${escapeHtml(modStr)}${escapeHtml(prop.name)}${opt}: ${escapeHtml(type)}</code></dt>`,
+      )
+      if (prop.jsDoc?.doc) {
+        lines.push(`<dd>${escapeHtml(prop.jsDoc.doc.split('\n')[0] ?? '')}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  if (methods && methods.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Methods</h4>`)
+    lines.push(`<dl>`)
+    for (const method of methods) {
+      const params = method.functionDef?.params?.map(p => formatParam(p)).join(', ') || ''
+      const ret = formatType(method.functionDef?.returnType) || 'void'
+      const staticStr = method.isStatic ? 'static ' : ''
+      lines.push(
+        `<dt><code>${escapeHtml(staticStr)}${escapeHtml(method.name)}(${escapeHtml(params)}): ${escapeHtml(ret)}</code></dt>`,
+      )
+      if (method.jsDoc?.doc) {
+        lines.push(`<dd>${escapeHtml(method.jsDoc.doc.split('\n')[0] ?? '')}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render interface members (properties, methods).
+ */
+function renderInterfaceMembers(def: NonNullable<DenoDocNode['interfaceDef']>): string {
+  const lines: string[] = []
+  const { properties, methods } = def
+
+  if (properties && properties.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Properties</h4>`)
+    lines.push(`<dl>`)
+    for (const prop of properties) {
+      const type = formatType(prop.tsType)
+      const opt = prop.optional ? '?' : ''
+      const ro = prop.readonly ? 'readonly ' : ''
+      lines.push(
+        `<dt><code>${escapeHtml(ro)}${escapeHtml(prop.name)}${opt}: ${escapeHtml(type)}</code></dt>`,
+      )
+      if (prop.jsDoc?.doc) {
+        lines.push(`<dd>${escapeHtml(prop.jsDoc.doc.split('\n')[0] ?? '')}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  if (methods && methods.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Methods</h4>`)
+    lines.push(`<dl>`)
+    for (const method of methods) {
+      const params = method.params?.map(p => formatParam(p)).join(', ') || ''
+      const ret = formatType(method.returnType) || 'void'
+      lines.push(
+        `<dt><code>${escapeHtml(method.name)}(${escapeHtml(params)}): ${escapeHtml(ret)}</code></dt>`,
+      )
+      if (method.jsDoc?.doc) {
+        lines.push(`<dd>${escapeHtml(method.jsDoc.doc.split('\n')[0] ?? '')}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render enum members.
+ */
+function renderEnumMembers(def: NonNullable<DenoDocNode['enumDef']>): string {
+  const lines: string[] = []
+  const { members } = def
+
+  if (members && members.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Members</h4>`)
+    lines.push(`<ul class="docs-enum-members">`)
+    for (const member of members) {
+      lines.push(`<li><code>${escapeHtml(member.name)}</code></li>`)
+    }
+    lines.push(`</ul>`)
+    lines.push(`</div>`)
+  }
+
+  return lines.join('\n')
+}
+
+// =============================================================================
+// Table of Contents
+// =============================================================================
+
+/**
+ * Render table of contents.
+ */
+export function renderToc(symbols: MergedSymbol[]): string {
+  const grouped = groupMergedByKind(symbols)
+  const lines: string[] = []
+
+  lines.push(`<nav class="toc text-sm" aria-label="Table of contents">`)
+  lines.push(`<ul class="space-y-3">`)
+
+  for (const kind of KIND_DISPLAY_ORDER) {
+    const kindSymbols = grouped[kind]
+    if (!kindSymbols || kindSymbols.length === 0) continue
+
+    const title = KIND_TITLES[kind] || kind
+    lines.push(`<li>`)
+    lines.push(
+      `<a href="#section-${kind}" class="font-semibold text-fg-muted hover:text-fg block mb-1">${title} <span class="text-fg-subtle font-normal">(${kindSymbols.length})</span></a>`,
+    )
+
+    const showSymbols = kindSymbols.slice(0, MAX_TOC_ITEMS_PER_KIND)
+    lines.push(`<ul class="pl-3 space-y-0.5 border-l border-border/50">`)
+    for (const symbol of showSymbols) {
+      const id = createSymbolId(symbol.kind, symbol.name)
+      lines.push(
+        `<li><a href="#${id}" class="text-fg-subtle hover:text-fg font-mono text-xs block py-0.5 truncate">${escapeHtml(symbol.name)}</a></li>`,
+      )
+    }
+    if (kindSymbols.length > MAX_TOC_ITEMS_PER_KIND) {
+      const remaining = kindSymbols.length - MAX_TOC_ITEMS_PER_KIND
+      lines.push(`<li class="text-fg-subtle text-xs py-0.5">... and ${remaining} more</li>`)
+    }
+    lines.push(`</ul>`)
+
+    lines.push(`</li>`)
+  }
+
+  lines.push(`</ul>`)
+  lines.push(`</nav>`)
+
+  return lines.join('\n')
+}
diff --git a/server/utils/docs/text.ts b/server/utils/docs/text.ts
new file mode 100644
index 0000000000..4fb9a0d43c
--- /dev/null
+++ b/server/utils/docs/text.ts
@@ -0,0 +1,98 @@
+/**
+ * Text Processing Utilities
+ *
+ * Functions for escaping HTML, parsing JSDoc links, and rendering markdown.
+ *
+ * @module server/utils/docs/text
+ */
+
+import type { SymbolLookup } from './types'
+
+/**
+ * Escape HTML special characters.
+ *
+ * @internal Exported for testing
+ */
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+/**
+ * Clean up symbol names by stripping esm.sh prefixes.
+ *
+ * Packages using @types/* definitions get "default." or "default_" prefixes
+ * from esm.sh that we need to remove for clean display.
+ */
+export function cleanSymbolName(name: string): string {
+  if (name.startsWith('default.')) {
+    return name.slice(8)
+  }
+  if (name.startsWith('default_')) {
+    return name.slice(8)
+  }
+  return name
+}
+
+/**
+ * Create a URL-safe HTML anchor ID for a symbol.
+ */
+export function createSymbolId(kind: string, name: string): string {
+  return `${kind}-${name}`.replace(/[^a-zA-Z0-9-]/g, '_')
+}
+
+/**
+ * Parse JSDoc {@link} tags into HTML links.
+ *
+ * Handles:
+ * - {@link https://example.com} - external URL
+ * - {@link https://example.com Link Text} - external URL with label
+ * - {@link SomeSymbol} - internal cross-reference
+ *
+ * @internal Exported for testing
+ */
+export function parseJsDocLinks(text: string, symbolLookup: SymbolLookup): string {
+  let result = escapeHtml(text)
+
+  result = result.replace(/\{@link\s+([^\s}]+)(?:\s+([^}]+))?\}/g, (_, target, label) => {
+    const displayText = label || target
+
+    // External URL
+    if (target.startsWith('http://') || target.startsWith('https://')) {
+      return `<a href="${target}" target="_blank" rel="noopener" class="docs-link">${displayText}</a>`
+    }
+
+    // Internal symbol reference
+    const symbolId = symbolLookup.get(target)
+    if (symbolId) {
+      return `<a href="#${symbolId}" class="docs-symbol-link">${displayText}</a>`
+    }
+
+    // Unknown symbol
+    return `<code class="docs-symbol-ref">${displayText}</code>`
+  })
+
+  return result
+}
+
+/**
+ * Render simple markdown-like formatting.
+ * Uses <br> for line breaks to avoid nesting issues with inline elements.
+ *
+ * @internal Exported for testing
+ */
+export function renderMarkdown(text: string, symbolLookup: SymbolLookup): string {
+  let result = parseJsDocLinks(text, symbolLookup)
+
+  result = result
+    .replace(/`([^`]+)`/g, '<code class="docs-inline-code">$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\n\n+/g, '<br><br>')
+    .replace(/\n/g, '<br>')
+
+  return result
+}
diff --git a/server/utils/docs/types.ts b/server/utils/docs/types.ts
new file mode 100644
index 0000000000..c4e373b49a
--- /dev/null
+++ b/server/utils/docs/types.ts
@@ -0,0 +1,24 @@
+/**
+ * Internal Types for Docs Module
+ * These are highly coupled to `deno doc`, hence they live here instead of shared types.
+ *
+ * @module server/utils/docs/types
+ */
+
+import type { DenoDocNode } from '#shared/types/deno-doc'
+
+/**
+ * Map of symbol names to anchor IDs for cross-referencing.
+ * @internal Exported for testing
+ */
+export type SymbolLookup = Map<string, string>
+
+/**
+ * Symbol with merged overloads
+ */
+export interface MergedSymbol {
+  name: string
+  kind: string
+  nodes: DenoDocNode[]
+  jsDoc?: DenoDocNode['jsDoc']
+}
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index 1a97a5e93d..b1845c7007 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -272,10 +272,12 @@ export async function renderReadmeHtml(
     // Use Shiki if language is loaded, otherwise fall back to plain
     if (loadedLangs.includes(language as never)) {
       try {
-        return shiki.codeToHtml(text, {
+        const html = shiki.codeToHtml(text, {
           lang: language,
           theme: 'github-dark',
         })
+        // Shiki doesn't encode > in text content (e.g., arrow functions)
+        return escapeRawGt(html)
       } catch {
         // Fall back to plain code block
       }
diff --git a/server/utils/shiki.ts b/server/utils/shiki.ts
index fe28a40863..c0b7af1951 100644
--- a/server/utils/shiki.ts
+++ b/server/utils/shiki.ts
@@ -55,10 +55,13 @@ export async function highlightCodeBlock(code: string, language: string): Promis
 
   if (loadedLangs.includes(language as never)) {
     try {
-      return shiki.codeToHtml(code, {
+      const html = shiki.codeToHtml(code, {
         lang: language,
         theme: 'github-dark',
       })
+      // Shiki doesn't encode > in text content (e.g., arrow functions =>)
+      // We need to encode them for HTML validation
+      return escapeRawGt(html)
     } catch {
       // Fall back to plain
     }
@@ -68,3 +71,20 @@ export async function highlightCodeBlock(code: string, language: string): Promis
   const escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   return `<pre><code class="language-${language}">${escaped}</code></pre>\n`
 }
+
+/**
+ * Escape raw > characters in HTML text content.
+ * Shiki outputs > without encoding in constructs like arrow functions (=>).
+ * This replaces > that appear in text content (after >) but not inside tags.
+ *
+ * @internal Exported for testing
+ */
+export function escapeRawGt(html: string): string {
+  // Match > that appears after a closing tag or other > (i.e., in text content)
+  // Pattern: after </...> or after >, match any > that isn't starting a tag
+  return html.replace(/>([^<]*)/g, (match, textContent) => {
+    // Encode any > in the text content portion
+    const escapedText = textContent.replace(/>/g, '&gt;')
+    return `>${escapedText}`
+  })
+}
diff --git a/shared/types/deno-doc.ts b/shared/types/deno-doc.ts
new file mode 100644
index 0000000000..45d099ad0e
--- /dev/null
+++ b/shared/types/deno-doc.ts
@@ -0,0 +1,139 @@
+/**
+ * Types for deno doc JSON output.
+ *
+ * These types represent the structure of the JSON output from `deno doc --json`.
+ * In an ideal world, we'd generate these or implement our own AST / parser.
+ * That might be an endgame, but there's a lot of value in using deno's implementation, too.
+ * Well trodden ground and all that.
+ *
+ * @see: https://deno.land/x/deno_doc
+ */
+
+/** JSDoc tag from deno doc output */
+export interface JsDocTag {
+  kind: string
+  name?: string
+  doc?: string
+  optional?: boolean
+  type?: string
+}
+
+/** TypeScript type representation from deno doc */
+export interface TsType {
+  repr: string
+  kind: string
+  keyword?: string
+  typeRef?: {
+    typeName: string
+    typeParams?: TsType[] | null
+  }
+  array?: TsType
+  union?: TsType[]
+  literal?: {
+    kind: string
+    string?: string
+    number?: number
+    boolean?: boolean
+  }
+}
+
+/** Function parameter from deno doc */
+export interface FunctionParam {
+  kind: string
+  name: string
+  optional?: boolean
+  tsType?: TsType
+}
+
+/** A documentation node from deno doc output */
+export interface DenoDocNode {
+  name: string
+  kind: string
+  isDefault?: boolean
+  location?: {
+    filename: string
+    line: number
+    col: number
+  }
+  declarationKind?: string
+  jsDoc?: {
+    doc?: string
+    tags?: JsDocTag[]
+  }
+  functionDef?: {
+    params?: FunctionParam[]
+    returnType?: TsType
+    isAsync?: boolean
+    isGenerator?: boolean
+    typeParams?: Array<{ name: string }>
+  }
+  classDef?: {
+    isAbstract?: boolean
+    properties?: Array<{
+      name: string
+      tsType?: TsType
+      readonly?: boolean
+      optional?: boolean
+      isStatic?: boolean
+      jsDoc?: { doc?: string }
+    }>
+    methods?: Array<{
+      name: string
+      isStatic?: boolean
+      functionDef?: {
+        params?: FunctionParam[]
+        returnType?: TsType
+      }
+      jsDoc?: { doc?: string }
+    }>
+    constructors?: Array<{
+      params?: FunctionParam[]
+    }>
+    extends?: TsType
+    implements?: TsType[]
+  }
+  interfaceDef?: {
+    properties?: Array<{
+      name: string
+      tsType?: TsType
+      readonly?: boolean
+      optional?: boolean
+      jsDoc?: { doc?: string }
+    }>
+    methods?: Array<{
+      name: string
+      params?: FunctionParam[]
+      returnType?: TsType
+      jsDoc?: { doc?: string }
+    }>
+    extends?: TsType[]
+    typeParams?: Array<{ name: string }>
+  }
+  typeAliasDef?: {
+    tsType?: TsType
+    typeParams?: Array<{ name: string }>
+  }
+  variableDef?: {
+    tsType?: TsType
+    kind?: string
+  }
+  enumDef?: {
+    members?: Array<{ name: string; init?: TsType }>
+  }
+  namespaceDef?: {
+    elements?: DenoDocNode[]
+  }
+}
+
+/** Raw output from deno doc --json */
+export interface DenoDocResult {
+  version: number
+  nodes: DenoDocNode[]
+}
+
+/** Result of documentation generation */
+export interface DocsGenerationResult {
+  html: string
+  toc: string | null
+  nodes: DenoDocNode[]
+}
diff --git a/shared/types/docs.ts b/shared/types/docs.ts
new file mode 100644
index 0000000000..a59164f811
--- /dev/null
+++ b/shared/types/docs.ts
@@ -0,0 +1,17 @@
+export type DocsStatus = 'ok' | 'missing' | 'error'
+
+export interface DocsResponse {
+  package: string
+  version: string
+  html: string
+  toc: string | null
+  breadcrumbs?: string | null
+  status: DocsStatus
+  message?: string
+}
+
+export interface DocsSearchResponse {
+  package: string
+  version: string
+  index: Record<string, unknown>
+}
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 2414a4f37f..2f64fc5ebc 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -2,3 +2,5 @@ export * from './npm-registry'
 export * from './jsr'
 export * from './osv'
 export * from './readme'
+export * from './docs'
+export * from './deno-doc'
diff --git a/shared/utils/npm.ts b/shared/utils/npm.ts
index 18e66763f7..220636c490 100644
--- a/shared/utils/npm.ts
+++ b/shared/utils/npm.ts
@@ -1,5 +1,61 @@
 import validatePackageName from 'validate-npm-package-name'
 
+/**
+ * Parsed package parameters from URL path segments.
+ */
+export interface ParsedPackageParams {
+  /** The npm package name (e.g., "vue", "@nuxt/kit") */
+  packageName: string
+  /** The version if specified (e.g., "3.4.0"), undefined otherwise */
+  version: string | undefined
+  /** Remaining path segments after the version (e.g., for file paths) */
+  rest: string[]
+}
+
+/**
+ * Parse package name, optional version, and remaining path from URL segments.
+ *
+ * Supports these URL patterns:
+ * - `/pkg` → { packageName: "pkg", version: undefined, rest: [] }
+ * - `/pkg/v/1.2.3` → { packageName: "pkg", version: "1.2.3", rest: [] }
+ * - `/pkg/v/1.2.3/src/index.ts` → { packageName: "pkg", version: "1.2.3", rest: ["src", "index.ts"] }
+ * - `/@scope/pkg` → { packageName: "@scope/pkg", version: undefined, rest: [] }
+ * - `/@scope/pkg/v/1.2.3` → { packageName: "@scope/pkg", version: "1.2.3", rest: [] }
+ *
+ * @param pkgParam - The raw package parameter from the URL (e.g., "vue/v/3.4.0/src/index.ts")
+ * @returns Parsed package name, optional version, and remaining path segments
+ *
+ * @example
+ * ```ts
+ * parsePackageParam('vue')
+ * // { packageName: 'vue', version: undefined, rest: [] }
+ *
+ * parsePackageParam('vue/v/3.4.0')
+ * // { packageName: 'vue', version: '3.4.0', rest: [] }
+ *
+ * parsePackageParam('@nuxt/kit/v/1.0.0/src/index.ts')
+ * // { packageName: '@nuxt/kit', version: '1.0.0', rest: ['src', 'index.ts'] }
+ * ```
+ */
+export function parsePackageParam(pkgParam: string): ParsedPackageParams {
+  const segments = pkgParam.split('/')
+  const vIndex = segments.indexOf('v')
+
+  if (vIndex !== -1 && vIndex < segments.length - 1) {
+    return {
+      packageName: segments.slice(0, vIndex).join('/'),
+      version: segments[vIndex + 1],
+      rest: segments.slice(vIndex + 2),
+    }
+  }
+
+  return {
+    packageName: segments.join('/'),
+    version: undefined,
+    rest: [],
+  }
+}
+
 /**
  * Validate an npm package name and throw an HTTP error if invalid.
  * Uses validate-npm-package-name to check against npm naming rules.
diff --git a/test/unit/docs-text.spec.ts b/test/unit/docs-text.spec.ts
new file mode 100644
index 0000000000..ff1a674458
--- /dev/null
+++ b/test/unit/docs-text.spec.ts
@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'vitest'
+import { escapeHtml, parseJsDocLinks, renderMarkdown } from '../../server/utils/docs/text'
+import type { SymbolLookup } from '../../server/utils/docs/types'
+
+describe('escapeHtml', () => {
+  it('should escape < and >', () => {
+    expect(escapeHtml('<script>')).toBe('&lt;script&gt;')
+  })
+
+  it('should escape &', () => {
+    expect(escapeHtml('foo & bar')).toBe('foo &amp; bar')
+  })
+
+  it('should escape quotes', () => {
+    expect(escapeHtml('"hello"')).toBe('&quot;hello&quot;')
+    expect(escapeHtml("'hello'")).toBe('&#39;hello&#39;')
+  })
+
+  it('should handle multiple special characters', () => {
+    expect(escapeHtml('<a href="test?a=1&b=2">')).toBe(
+      '&lt;a href=&quot;test?a=1&amp;b=2&quot;&gt;',
+    )
+  })
+
+  it('should return empty string for empty input', () => {
+    expect(escapeHtml('')).toBe('')
+  })
+
+  it('should not modify text without special characters', () => {
+    expect(escapeHtml('hello world')).toBe('hello world')
+  })
+})
+
+describe('parseJsDocLinks', () => {
+  const emptyLookup: SymbolLookup = new Map()
+
+  it('should convert external URLs to links', () => {
+    const result = parseJsDocLinks('{@link https://example.com}', emptyLookup)
+    expect(result).toContain('href="https://example.com"')
+    expect(result).toContain('target="_blank"')
+    expect(result).toContain('rel="noopener"')
+  })
+
+  it('should handle external URLs with labels', () => {
+    const result = parseJsDocLinks('{@link https://example.com Example Site}', emptyLookup)
+    expect(result).toContain('href="https://example.com"')
+    expect(result).toContain('>Example Site</a>')
+  })
+
+  it('should convert internal symbol references to anchor links', () => {
+    const lookup: SymbolLookup = new Map([['MyFunction', 'function-MyFunction']])
+    const result = parseJsDocLinks('{@link MyFunction}', lookup)
+    expect(result).toContain('href="#function-MyFunction"')
+    expect(result).toContain('docs-symbol-link')
+  })
+
+  it('should render unknown symbols as code', () => {
+    const result = parseJsDocLinks('{@link UnknownSymbol}', emptyLookup)
+    expect(result).toContain('<code class="docs-symbol-ref">UnknownSymbol</code>')
+  })
+
+  it('should escape HTML in surrounding text', () => {
+    const result = parseJsDocLinks('Use <T> with {@link https://example.com}', emptyLookup)
+    expect(result).toContain('&lt;T&gt;')
+  })
+
+  it('should handle multiple links', () => {
+    const result = parseJsDocLinks(
+      'See {@link https://a.com} and {@link https://b.com}',
+      emptyLookup,
+    )
+    expect(result).toContain('href="https://a.com"')
+    expect(result).toContain('href="https://b.com"')
+  })
+
+  it('should not convert non-http URLs to links', () => {
+    const result = parseJsDocLinks('{@link javascript:alert(1)}', emptyLookup)
+    // Should be treated as unknown symbol, not a link
+    expect(result).not.toContain('href="javascript:')
+    expect(result).toContain('<code')
+  })
+
+  it('should handle http URLs (not just https)', () => {
+    const result = parseJsDocLinks('{@link http://example.com}', emptyLookup)
+    expect(result).toContain('href="http://example.com"')
+  })
+})
+
+describe('renderMarkdown', () => {
+  const emptyLookup: SymbolLookup = new Map()
+
+  it('should convert inline code', () => {
+    const result = renderMarkdown('Use `foo()` here', emptyLookup)
+    expect(result).toContain('<code class="docs-inline-code">foo()</code>')
+  })
+
+  it('should escape HTML inside inline code', () => {
+    const result = renderMarkdown('Use `Array<T>` here', emptyLookup)
+    expect(result).toContain('&lt;T&gt;')
+    expect(result).not.toContain('<T>')
+  })
+
+  it('should convert bold text', () => {
+    const result = renderMarkdown('This is **important**', emptyLookup)
+    expect(result).toContain('<strong>important</strong>')
+  })
+
+  it('should convert single newlines to <br>', () => {
+    const result = renderMarkdown('line 1\nline 2', emptyLookup)
+    expect(result).toBe('line 1<br>line 2')
+  })
+
+  it('should convert double newlines to <br><br>', () => {
+    const result = renderMarkdown('paragraph 1\n\nparagraph 2', emptyLookup)
+    expect(result).toBe('paragraph 1<br><br>paragraph 2')
+  })
+
+  it('should handle multiple formatting in same text', () => {
+    const result = renderMarkdown('Use `foo()` for **important** tasks', emptyLookup)
+    expect(result).toContain('<code class="docs-inline-code">foo()</code>')
+    expect(result).toContain('<strong>important</strong>')
+  })
+
+  it('should process {@link} tags', () => {
+    const lookup: SymbolLookup = new Map([['MyFunc', 'function-MyFunc']])
+    const result = renderMarkdown('See {@link MyFunc} for details', lookup)
+    expect(result).toContain('href="#function-MyFunc"')
+  })
+
+  it('should escape HTML in regular text', () => {
+    const result = renderMarkdown('Returns <T> or null', emptyLookup)
+    expect(result).toContain('&lt;T&gt;')
+  })
+
+  it('should handle empty string', () => {
+    expect(renderMarkdown('', emptyLookup)).toBe('')
+  })
+
+  it('should handle text with only whitespace', () => {
+    const result = renderMarkdown('  \n  ', emptyLookup)
+    expect(result).toBe('  <br>  ')
+  })
+})
diff --git a/test/unit/parse-package-param.spec.ts b/test/unit/parse-package-param.spec.ts
new file mode 100644
index 0000000000..5db70f23f3
--- /dev/null
+++ b/test/unit/parse-package-param.spec.ts
@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import { parsePackageParam } from '../../shared/utils/npm'
+
+describe('parsePackageParam', () => {
+  describe('unscoped packages', () => {
+    it('parses package name without version', () => {
+      const result = parsePackageParam('vue')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('parses package name with version', () => {
+      const result = parsePackageParam('vue/v/3.4.0')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: '3.4.0',
+        rest: [],
+      })
+    })
+
+    it('parses package name with prerelease version', () => {
+      const result = parsePackageParam('nuxt/v/4.0.0-rc.1')
+      expect(result).toEqual({
+        packageName: 'nuxt',
+        version: '4.0.0-rc.1',
+        rest: [],
+      })
+    })
+
+    it('parses package name with version and file path', () => {
+      const result = parsePackageParam('vue/v/3.4.0/src/index.ts')
+      expect(result).toEqual({
+        packageName: 'vue',
+        version: '3.4.0',
+        rest: ['src', 'index.ts'],
+      })
+    })
+
+    it('parses package name with version and nested file path', () => {
+      const result = parsePackageParam('lodash/v/4.17.21/lib/fp/map.js')
+      expect(result).toEqual({
+        packageName: 'lodash',
+        version: '4.17.21',
+        rest: ['lib', 'fp', 'map.js'],
+      })
+    })
+  })
+
+  describe('scoped packages', () => {
+    it('parses scoped package name without version', () => {
+      const result = parsePackageParam('@nuxt/kit')
+      expect(result).toEqual({
+        packageName: '@nuxt/kit',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('parses scoped package name with version', () => {
+      const result = parsePackageParam('@nuxt/kit/v/1.0.0')
+      expect(result).toEqual({
+        packageName: '@nuxt/kit',
+        version: '1.0.0',
+        rest: [],
+      })
+    })
+
+    it('parses scoped package name with version and file path', () => {
+      const result = parsePackageParam('@vue/compiler-sfc/v/3.5.0/dist/index.d.ts')
+      expect(result).toEqual({
+        packageName: '@vue/compiler-sfc',
+        version: '3.5.0',
+        rest: ['dist', 'index.d.ts'],
+      })
+    })
+
+    it('parses deeply nested scoped packages', () => {
+      const result = parsePackageParam('@types/node/v/22.0.0')
+      expect(result).toEqual({
+        packageName: '@types/node',
+        version: '22.0.0',
+        rest: [],
+      })
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles package name that looks like a version marker', () => {
+      // Package named "v" shouldn't be confused with version separator
+      const result = parsePackageParam('v')
+      expect(result).toEqual({
+        packageName: 'v',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('handles version segment without actual version', () => {
+      // "v" at the end without a version after it
+      const result = parsePackageParam('vue/v')
+      expect(result).toEqual({
+        packageName: 'vue/v',
+        version: undefined,
+        rest: [],
+      })
+    })
+
+    it('handles package with "v" in the name followed by version', () => {
+      const result = parsePackageParam('vueuse/v/12.0.0')
+      expect(result).toEqual({
+        packageName: 'vueuse',
+        version: '12.0.0',
+        rest: [],
+      })
+    })
+
+    it('handles empty rest when file path is empty', () => {
+      const result = parsePackageParam('react/v/18.2.0')
+      expect(result.rest).toEqual([])
+      expect(result.rest.length).toBe(0)
+    })
+  })
+})
diff --git a/test/unit/shiki.spec.ts b/test/unit/shiki.spec.ts
new file mode 100644
index 0000000000..c715f6ef99
--- /dev/null
+++ b/test/unit/shiki.spec.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+import { escapeRawGt, highlightCodeBlock } from '../../server/utils/shiki'
+
+describe('escapeRawGt', () => {
+  it('should encode > in arrow functions', () => {
+    const input = '<span style="color:#F97583">=></span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span style="color:#F97583">=&gt;</span>')
+  })
+
+  it('should encode > in comparison operators', () => {
+    const input = '<span>x > 5</span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span>x &gt; 5</span>')
+  })
+
+  it('should encode multiple > in text content', () => {
+    const input = '<span>a > b > c</span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span>a &gt; b &gt; c</span>')
+  })
+
+  it('should not affect HTML tag structure', () => {
+    const input = '<span class="test"><code>text</code></span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span class="test"><code>text</code></span>')
+  })
+
+  it('should not affect attributes containing >', () => {
+    // Attributes with > are already encoded by Shiki, but test anyway
+    const input = '<span title="a &gt; b">text</span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span title="a &gt; b">text</span>')
+  })
+
+  it('should handle empty text content', () => {
+    const input = '<span></span><code></code>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span></span><code></code>')
+  })
+
+  it('should handle text without special characters', () => {
+    const input = '<span>hello world</span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span>hello world</span>')
+  })
+
+  it('should handle nested spans (Shiki output structure)', () => {
+    const input =
+      '<span class="line"><span style="color:#F97583">const</span><span> x = () =></span><span> 5</span></span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe(
+      '<span class="line"><span style="color:#F97583">const</span><span> x = () =&gt;</span><span> 5</span></span>',
+    )
+  })
+
+  it('should handle >= operator', () => {
+    const input = '<span>x >= 5</span>'
+    const output = escapeRawGt(input)
+    expect(output).toBe('<span>x &gt;= 5</span>')
+  })
+
+  it('should handle generic type syntax', () => {
+    const input = '<span>Array&lt;T></span>'
+    const output = escapeRawGt(input)
+    // The < is already encoded, the > should be encoded
+    expect(output).toBe('<span>Array&lt;T&gt;</span>')
+  })
+})
+
+describe('highlightCodeBlock', () => {
+  it('should highlight TypeScript code', async () => {
+    const code = 'const x = 1'
+    const html = await highlightCodeBlock(code, 'typescript')
+
+    expect(html).toContain('<pre')
+    expect(html).toContain('const')
+    expect(html).toContain('shiki')
+  })
+
+  it('should encode > in arrow functions', async () => {
+    const code = 'const fn = () => 5'
+    const html = await highlightCodeBlock(code, 'typescript')
+
+    // The > in => should be encoded
+    expect(html).toContain('=&gt;')
+    expect(html).not.toMatch(/=>(?!&)/) // no raw => (except in &gt;)
+  })
+
+  it('should encode > in generic types', async () => {
+    const code = 'const x: Array<string> = []'
+    const html = await highlightCodeBlock(code, 'typescript')
+
+    // Should have encoded >
+    expect(html).toContain('&gt;')
+  })
+
+  it('should fall back to plain code for unknown languages', async () => {
+    const code = 'some random code > with special < chars'
+    const html = await highlightCodeBlock(code, 'unknownlang123')
+
+    expect(html).toContain('&gt;')
+    expect(html).toContain('&lt;')
+    expect(html).toContain('language-unknownlang123')
+  })
+
+  it('should escape special characters in fallback', async () => {
+    const code = '<script>alert("xss")</script>'
+    const html = await highlightCodeBlock(code, 'unknownlang123')
+
+    expect(html).toContain('&lt;script&gt;')
+    expect(html).not.toContain('<script>')
+  })
+})
diff --git a/tests/docs.spec.ts b/tests/docs.spec.ts
new file mode 100644
index 0000000000..a822889756
--- /dev/null
+++ b/tests/docs.spec.ts
@@ -0,0 +1,186 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('API Documentation Pages', () => {
+  test('docs page loads and shows content for a package', async ({ page, goto }) => {
+    // Use a small, stable package with TypeScript types
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Page title should include package name
+    await expect(page).toHaveTitle(/ufo.*docs/i)
+
+    // Header should show package name and version
+    await expect(page.locator('header').getByText('ufo')).toBeVisible()
+    await expect(page.locator('header').getByText('1.6.3')).toBeVisible()
+
+    // API Docs badge should be visible
+    await expect(page.locator('text=API Docs')).toBeVisible()
+
+    // Should have documentation content
+    const docsContent = page.locator('.docs-content')
+    await expect(docsContent).toBeVisible()
+
+    // Should have at least one function documented
+    await expect(page.locator('.docs-badge--function').first()).toBeVisible()
+  })
+
+  test('docs page shows TOC sidebar on desktop', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // TOC sidebar should be visible (on desktop viewport)
+    const tocSidebar = page.locator('aside')
+    await expect(tocSidebar).toBeVisible()
+
+    // Should have "Contents" heading
+    await expect(tocSidebar.getByText('Contents')).toBeVisible()
+
+    // Should have section links (Functions, etc.)
+    await expect(tocSidebar.locator('a[href="#section-function"]')).toBeVisible()
+  })
+
+  test('TOC links navigate to sections', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Click on Functions in TOC
+    const functionsLink = page.locator('aside a[href="#section-function"]')
+    await functionsLink.click()
+
+    // URL should have the hash
+    await expect(page).toHaveURL(/#section-function/)
+
+    // Section should be scrolled into view
+    const functionSection = page.locator('#section-function')
+    await expect(functionSection).toBeInViewport()
+  })
+
+  test('clicking symbol name scrolls to symbol', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find a symbol link in the TOC
+    const symbolLink = page.locator('aside a[href^="#function-"]').first()
+    const href = await symbolLink.getAttribute('href')
+
+    // Click the symbol link
+    await symbolLink.click()
+
+    // URL should have the hash
+    await expect(page).toHaveURL(new RegExp(href!.replace('#', '#')))
+  })
+
+  test('docs page without version redirects to latest', async ({ page, goto }) => {
+    await goto('/docs/ufo', { waitUntil: 'networkidle' })
+
+    // Should redirect to include version
+    await expect(page).toHaveURL(/\/docs\/ufo\/v\//)
+  })
+
+  test('package link in header navigates to package page', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Click on package name in header
+    const packageLink = page.locator('header a').filter({ hasText: 'ufo' })
+    await packageLink.click()
+
+    // Should navigate to package page (URL ends with /ufo)
+    await expect(page).toHaveURL(/\/ufo$/)
+  })
+
+  test('docs page handles package gracefully when types unavailable', async ({ page, goto }) => {
+    // Use a simple JS package - the page should load without crashing
+    // regardless of whether it has types or shows an error state
+    await goto('/docs/is-odd/v/3.0.1', { waitUntil: 'networkidle' })
+
+    // Header should always show the package name
+    await expect(page.locator('header').getByText('is-odd')).toBeVisible()
+
+    // Page should be in one of two states:
+    // 1. Shows "not available" / error message
+    // 2. Shows actual docs content (if types were found)
+    const errorState = page.locator('text=/not available|could not generate/i')
+    const docsContent = page.locator('.docs-content')
+
+    // One of these should be visible
+    await expect(errorState.or(docsContent)).toBeVisible()
+  })
+})
+
+test.describe('Version Selector', () => {
+  test('version selector dropdown shows versions', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find and click the version selector button
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    // Skip if version selector not present (data might not be loaded)
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    // Dropdown should appear with version options
+    const dropdown = page.locator('[role="listbox"]')
+    await expect(dropdown).toBeVisible()
+
+    // Should show multiple versions
+    const versionOptions = dropdown.locator('[role="option"]')
+    await expect(versionOptions.first()).toBeVisible()
+  })
+
+  test('selecting a version navigates to that version', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    // Find and click the version selector button
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    // Skip if version selector not present
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    // Find a different version and click it
+    const differentVersion = page.locator('[role="option"]').filter({ hasNotText: '1.6.3' }).first()
+
+    // Skip if no other versions available
+    if (!(await differentVersion.isVisible())) {
+      test.skip()
+      return
+    }
+
+    const versionText = await differentVersion.textContent()
+    await differentVersion.click()
+
+    // URL should change to the new version
+    if (versionText) {
+      const versionMatch = versionText.match(/\d+\.\d+\.\d+/)
+      if (versionMatch) {
+        await expect(page).toHaveURL(new RegExp(`/docs/ufo/v/${versionMatch[0]}`))
+      }
+    }
+  })
+
+  test('escape key closes version dropdown', async ({ page, goto }) => {
+    await goto('/docs/ufo/v/1.6.3', { waitUntil: 'networkidle' })
+
+    const versionButton = page.locator('header button').filter({ hasText: '1.6.3' })
+
+    if (!(await versionButton.isVisible())) {
+      test.skip()
+      return
+    }
+
+    await versionButton.click()
+
+    const dropdown = page.locator('[role="listbox"]')
+    await expect(dropdown).toBeVisible()
+
+    // Press escape
+    await page.keyboard.press('Escape')
+
+    // Dropdown should close
+    await expect(dropdown).not.toBeVisible()
+  })
+})