diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 10d76be..2766332 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -26,6 +26,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install browser engine
+        run: npx playwright install --with-deps chromium
+
       - name: Format
         run: npm run fmt:check
 
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index fccccb1..4b80593 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -39,6 +39,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install browser engine
+        run: npx playwright install --with-deps chromium
+
       - name: Validate source
         run: npm run fmt:check && npm run lint && npm run typecheck
 
diff --git a/.gitignore b/.gitignore
index dbd76ba..6d0b757 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,10 +52,11 @@ Thumbs.db
 # Screenshots
 screenshots/
 **/screenshots/
+**/__screenshots__/
 .codex-screenshots/
+.vitest-attachments/
 
 # Environment
 .env
 .env.*
 !.env.example
-
diff --git a/package-lock.json b/package-lock.json
index e97a982..38b4fc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@askrjs/website",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@askrjs/website",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "Apache-2.0",
       "dependencies": {
         "@askrjs/askr": "0.0.92",
@@ -31,7 +31,9 @@
         "@askrjs/vite": "0.0.13",
         "@types/node": "^26.2.0",
         "@typescript/native": "npm:typescript@^7.0.2",
+        "@vitest/browser-playwright": "4.1.10",
         "monaco-editor": "^0.56.0",
+        "playwright": "^1.62.1",
         "tsx": "4.23.11",
         "typescript": "npm:@typescript/typescript6@^6.0.2",
         "vite-plus": "^0.2.8"
@@ -2544,6 +2546,30 @@
         "vitest": "4.1.10"
       }
     },
+    "node_modules/@vitest/browser-playwright": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.1.10.tgz",
+      "integrity": "sha512-nMoXGEiRpT7m3W7NsbvrM2aKNwiNHZf+zEpUCvMteGjZFvfT96Q9fh7QyB98dvDWXiKvrLxA7bJ1mCOOv+JQPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/browser": "4.1.10",
+        "@vitest/mocker": "4.1.10",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "playwright": "*",
+        "vitest": "4.1.10"
+      },
+      "peerDependenciesMeta": {
+        "playwright": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/@vitest/browser-preview": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/@vitest/browser-preview/-/browser-preview-4.1.10.tgz",
@@ -4597,6 +4623,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pngjs": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
diff --git a/package.json b/package.json
index 4e73a62..f5dae0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/website",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "description": "Askr marketing and documentation site",
   "license": "Apache-2.0",
@@ -17,9 +17,10 @@
     "lint": "vp lint src tests scripts ssg.config.ts vite.config.ts",
     "fmt": "vp fmt .",
     "fmt:check": "vp fmt . --check",
-    "test:unit": "vp test run --exclude tests/generated-output-contract.test.ts",
+    "test:unit": "vp test run --exclude tests/generated-output-contract.test.ts --exclude \"tests/browser/**\"",
     "test:static": "vp test run tests/generated-output-contract.test.ts",
-    "test": "npm run test:unit",
+    "test": "npm run test:unit && npm run test:browser",
+    "test:browser": "vp test run -c vitest.test.browser.config.ts --mode production",
     "typecheck": "tsc --noEmit",
     "check": "npm run fmt:check && npm run lint && npm run typecheck && npm test && npm run build",
     "preview": "vp preview --outDir dist"
@@ -47,7 +48,9 @@
     "@askrjs/vite": "0.0.13",
     "@types/node": "^26.2.0",
     "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitest/browser-playwright": "4.1.10",
     "monaco-editor": "^0.56.0",
+    "playwright": "^1.62.1",
     "tsx": "4.23.11",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite-plus": "^0.2.8"
diff --git a/src/pages/docs/search.tsx b/src/pages/docs/search.tsx
index 3ea8a9f..90f4593 100644
--- a/src/pages/docs/search.tsx
+++ b/src/pages/docs/search.tsx
@@ -25,7 +25,9 @@ function loadSearchIndex(): Promise<typeof import('./search-index')> {
 }
 
 function DocsSearchInput(props: {
+  activeResultId: () => string | undefined;
   close: () => void;
+  onKeyDown: (event: KeyboardEvent) => void;
   runSearch: (value: string | undefined) => Promise<void>;
 }) {
   return (
@@ -33,8 +35,14 @@ function DocsSearchInput(props: {
       <SearchIcon size={18} aria-hidden="true" />
       <CommandInput
         data-docs-search-input
+        role="combobox"
+        aria-autocomplete="list"
+        aria-controls="docs-search-results"
+        aria-expanded="true"
+        aria-activedescendant={props.activeResultId()}
         placeholder="Search concepts, imports, and API symbols"
         aria-label="Search documentation"
+        onKeyDown={props.onKeyDown}
         onInput={(event: Event) =>
           void props.runSearch((event.currentTarget as HTMLInputElement).value)
         }
@@ -52,11 +60,44 @@ function DocsSearchInput(props: {
   );
 }
 
+function searchResultId(index: number): string {
+  return `docs-search-result-${index}`;
+}
+
+function DocsSearchResult(props: {
+  activeIndex: () => number;
+  index: () => number;
+  result: DocsSearchRecord;
+  setActiveIndex: (index: number) => void;
+}) {
+  const index = props.index();
+  const active = props.activeIndex() === index;
+  return (
+    <CommandPaletteLink
+      id={searchResultId(index)}
+      href={`${props.result.route}${props.result.anchor ? `#${props.result.anchor}` : ''}`}
+      role="option"
+      aria-selected={active ? 'true' : 'false'}
+      data-active={active ? 'true' : undefined}
+      data-docs-search-result
+      onPointerEnter={() => props.setActiveIndex(props.index())}
+    >
+      <span>
+        <strong>{props.result.title}</strong>
+        <small>{props.result.description}</small>
+      </span>
+      <em>{props.result.group}</em>
+    </CommandPaletteLink>
+  );
+}
+
 function DocsSearchResults(props: {
+  activeIndex: () => number;
   error: () => boolean;
   loading: () => boolean;
   query: () => string;
   results: () => DocsSearchRecord[];
+  setActiveIndex: (index: number) => void;
 }) {
   return (
     <div
@@ -85,21 +126,18 @@ function DocsSearchResults(props: {
               </Show>
             }
           >
-            <CommandPaletteList>
+            <CommandPaletteList id="docs-search-results" role="listbox">
               <For
                 each={props.results}
                 by={(result) => `${result.route}#${result.anchor ?? ''}`}
               >
-                {(result) => (
-                  <CommandPaletteLink
-                    href={`${result.route}${result.anchor ? `#${result.anchor}` : ''}`}
-                  >
-                    <span>
-                      <strong>{result.title}</strong>
-                      <small>{result.description}</small>
-                    </span>
-                    <em>{result.group}</em>
-                  </CommandPaletteLink>
+                {(result, index) => (
+                  <DocsSearchResult
+                    activeIndex={props.activeIndex}
+                    index={index}
+                    result={result}
+                    setActiveIndex={props.setActiveIndex}
+                  />
                 )}
               </For>
             </CommandPaletteList>
@@ -116,6 +154,7 @@ function DocsSearchResults(props: {
 }
 
 function DocsSearchContent(props: DocsSearchContentProps) {
+  const [activeIndex, setActiveIndex] = state(-1);
   const [query, setQuery] = state('');
   const [loading, setLoading] = state(false);
   const [results, setResults] = state<DocsSearchRecord[]>([]);
@@ -123,6 +162,7 @@ function DocsSearchContent(props: DocsSearchContentProps) {
 
   const runSearch = async (value: string | undefined): Promise<void> => {
     const nextValue = value ?? '';
+    setActiveIndex(-1);
     setQuery(nextValue);
     setError(false);
     if (!nextValue.trim()) {
@@ -143,14 +183,50 @@ function DocsSearchContent(props: DocsSearchContentProps) {
       if ((query() ?? '') === nextValue && props.isOpen()) setLoading(false);
     }
   };
+  const activeResultId = (): string | undefined => {
+    const index = activeIndex();
+    return index >= 0 && index < results().length
+      ? searchResultId(index)
+      : undefined;
+  };
+  const onSearchKeyDown = (event: KeyboardEvent): void => {
+    const count = results().length;
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (count === 0) return;
+      event.preventDefault();
+      const current = activeIndex();
+      setActiveIndex(
+        event.key === 'ArrowDown'
+          ? current < 0 || current >= count - 1
+            ? 0
+            : current + 1
+          : current <= 0
+            ? count - 1
+            : current - 1
+      );
+      return;
+    }
+    if (event.key !== 'Enter') return;
+    const id = activeResultId();
+    if (!id) return;
+    event.preventDefault();
+    document.getElementById(id)?.click();
+  };
   return (
     <>
-      <DocsSearchInput close={props.close} runSearch={runSearch} />
+      <DocsSearchInput
+        activeResultId={activeResultId}
+        close={props.close}
+        onKeyDown={onSearchKeyDown}
+        runSearch={runSearch}
+      />
       <DocsSearchResults
+        activeIndex={activeIndex}
         error={error}
         loading={loading}
         query={query}
         results={results}
+        setActiveIndex={setActiveIndex}
       />
     </>
   );
diff --git a/src/styles.css b/src/styles.css
index 2fbe45f..2c8e2a3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1383,7 +1383,8 @@ html[data-theme='dark'] .github-mark img.github-mark__dark {
   text-decoration: none;
 }
 
-.docs-search__results a:hover {
+.docs-search__results a:hover,
+.docs-search__results a[data-active='true'] {
   background: var(--ak-color-primary-soft);
 }
 
diff --git a/tests/browser/docs-search.test.tsx b/tests/browser/docs-search.test.tsx
new file mode 100644
index 0000000..dcf41dd
--- /dev/null
+++ b/tests/browser/docs-search.test.tsx
@@ -0,0 +1,108 @@
+import { page, userEvent } from '@vitest/browser/context';
+import { cleanupApp, createSPA } from '@askrjs/askr/boot';
+import { jsx as createElement } from '@askrjs/askr/jsx-runtime';
+import { createRouteRegistry, route } from '@askrjs/askr/router';
+import { afterEach, beforeEach, describe, expect, it } from 'vite-plus/test';
+import { DocsSearch } from '../../src/pages/docs/search';
+import { searchDocs } from '../../src/pages/docs/search-index';
+
+const query = 'createSPA';
+const destination = searchDocs(query, 1)[0];
+
+if (!destination) {
+  throw new Error(`Expected a documentation search result for ${query}`);
+}
+
+const registry = createRouteRegistry(() => {
+  route('/search-test', DocsSearch);
+  route(destination.route, () =>
+    createElement('p', {
+      'data-search-destination': '',
+      children: 'Destination reached',
+    })
+  );
+});
+
+async function settle(): Promise<void> {
+  await Promise.resolve();
+  await Promise.resolve();
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+async function waitForElement<T extends Element>(
+  read: () => T | null
+): Promise<T> {
+  const deadline = performance.now() + 5_000;
+  do {
+    const element = read();
+    if (element) return element;
+    await settle();
+    await new Promise((resolve) => setTimeout(resolve, 25));
+  } while (performance.now() < deadline);
+  throw new Error('Timed out waiting for the documentation search interaction');
+}
+
+describe('documentation command-palette search', () => {
+  let container: HTMLDivElement | undefined;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    window.history.replaceState({}, '', '/search-test');
+  });
+
+  afterEach(async () => {
+    if (container) {
+      cleanupApp(container);
+      container.remove();
+      container = undefined;
+    }
+    await page.viewport(1280, 900);
+  });
+
+  it('moves a real keyboard highlight from the input and navigates on Enter', async () => {
+    await createSPA({ root: container!, registry });
+    await userEvent.click(container!.querySelector('button')!);
+
+    const input = await waitForElement(
+      () =>
+        document.querySelector(
+          '[data-docs-search-input]'
+        ) as HTMLInputElement | null
+    );
+    await userEvent.fill(input, query);
+    const firstResult = await waitForElement(
+      () =>
+        document.querySelector(
+          '[data-slot="command-item"]'
+        ) as HTMLAnchorElement | null
+    );
+    const resultLinks = Array.from(
+      document.querySelectorAll<HTMLAnchorElement>('[data-slot="command-item"]')
+    );
+    const lastResult = resultLinks.at(-1)!;
+
+    expect(document.activeElement).toBe(input);
+    expect(input.getAttribute('aria-activedescendant')).toBeNull();
+
+    await userEvent.keyboard('{ArrowDown}');
+
+    expect(document.activeElement).toBe(input);
+    expect(input.getAttribute('aria-activedescendant')).toBe(firstResult.id);
+    expect(firstResult.getAttribute('data-active')).toBe('true');
+
+    await userEvent.keyboard('{ArrowUp}');
+    expect(input.getAttribute('aria-activedescendant')).toBe(lastResult.id);
+    expect(lastResult.getAttribute('data-active')).toBe('true');
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(input.getAttribute('aria-activedescendant')).toBe(firstResult.id);
+
+    await userEvent.keyboard('{Enter}');
+    await waitForElement(() =>
+      document.querySelector('[data-search-destination]')
+    );
+
+    expect(window.location.pathname).toBe(destination.route);
+  });
+});
diff --git a/vitest.test.browser.config.ts b/vitest.test.browser.config.ts
new file mode 100644
index 0000000..a80bf47
--- /dev/null
+++ b/vitest.test.browser.config.ts
@@ -0,0 +1,32 @@
+import { askr } from '@askrjs/vite';
+import { playwright } from 'vite-plus/test/browser-playwright';
+import { defineConfig } from 'vite-plus';
+
+export default defineConfig({
+  plugins: [askr()],
+  test: {
+    api: {
+      host: '127.0.0.1',
+    },
+    globals: true,
+    browser: {
+      api: {
+        host: '127.0.0.1',
+        port: 0,
+      },
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+    include: ['tests/browser/**/*.test.tsx'],
+  },
+  oxc: {
+    jsx: {
+      runtime: 'automatic',
+      importSource: '@askrjs/askr',
+    },
+    jsxInject:
+      "import { jsx, jsxs, Fragment } from '@askrjs/askr/jsx-runtime';",
+  },
+});