diff --git a/web/docs/src/App.svelte b/web/docs/src/App.svelte
index 7727988c..99a4a613 100644
--- a/web/docs/src/App.svelte
+++ b/web/docs/src/App.svelte
@@ -14,6 +14,7 @@
   import { bfsFirstRouteKeyUnderDir } from "./lib/manifestBfsDefault";
   import { persistExpandedPathForRouteKey } from "./lib/treeSession";
   import { DocTreeNav } from "./lib/tree";
+  import { filterTree } from "./lib/filterTree";
 
   const NAV_COLLAPSED_KEY = "fullsend-docs-nav-collapsed";
   const WIDTH_STORAGE_KEY = "fullsend-docs-sidebar-width-px";
@@ -34,6 +35,8 @@
   let narrowViewport = $state(false);
   /** Bumps when outline session keys change outside the tree (e.g. directory hash); keeps DocTreeNav in sync with sessionStorage. */
   let outlineSessionEpoch = $state(0);
+  let filterQuery = $state("");
+  let filteredManifest = $derived(filterTree(manifest, filterQuery));
 
   let outlineExpanded = $derived(
     narrowViewport ? mobileNavOpen : !navCollapsed,
@@ -422,11 +425,37 @@
           </svg>
         </button>
       </div>
+      <div class="docs-tree-filter-wrap">
+        <svg class="docs-tree-filter-icon" width="14" height="14" viewBox="0 0 16 16" focusable="false" aria-hidden="true">
+          <path fill="currentColor" d="M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z"/>
+        </svg>
+        <input
+          class="docs-tree-filter"
+          type="text"
+          placeholder="Filter docs…"
+          aria-label="Filter documents"
+          bind:value={filterQuery}
+        />
+        {#if filterQuery}
+          <button
+            type="button"
+            class="docs-tree-filter-clear"
+            aria-label="Clear filter"
+            onclick={() => filterQuery = ""}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" focusable="false" aria-hidden="true">
+              <path fill="currentColor" d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/>
+            </svg>
+          </button>
+        {/if}
+      </div>
       <nav class="docs-tree-wrap">
         <DocTreeNav
-          nodes={manifest}
+          nodes={filteredManifest}
           activeRouteKey={pageRouteKey}
           outlineSessionEpoch={outlineSessionEpoch}
+          forceExpandAll={filterQuery.trim().length > 0}
+          {filterQuery}
         />
       </nav>
     </aside>
diff --git a/web/docs/src/app.css b/web/docs/src/app.css
index f917cec1..38db840c 100644
--- a/web/docs/src/app.css
+++ b/web/docs/src/app.css
@@ -260,6 +260,59 @@ body {
   display: inline-flex;
 }
 
+.docs-tree-filter-wrap {
+  flex: 0 0 auto;
+  padding: 0.35rem 0.5rem 0;
+  position: relative;
+}
+
+.docs-tree-filter-icon {
+  position: absolute;
+  left: 0.85rem;
+  top: 56%;
+  transform: translateY(-50%);
+  color: var(--docs-muted, #888);
+  pointer-events: none;
+}
+
+.docs-tree-filter {
+  width: 100%;
+  padding: 0.3rem 0.5rem 0.3rem 1.8rem;
+  font: inherit;
+  font-size: 0.85rem;
+  border: 1px solid var(--docs-border);
+  border-radius: 0.3rem;
+  background: var(--docs-surface);
+  color: var(--docs-text);
+  outline: none;
+}
+
+.docs-tree-filter:focus {
+  border-color: var(--docs-link);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--docs-link) 25%, transparent);
+}
+
+.docs-tree-filter-clear {
+  position: absolute;
+  right: 0.75rem;
+  top: 56%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.15rem;
+  border: none;
+  border-radius: 0.2rem;
+  background: transparent;
+  color: var(--docs-muted, #888);
+  cursor: pointer;
+}
+
+.docs-tree-filter-clear:hover {
+  color: var(--docs-text);
+  background: var(--docs-border);
+}
+
 .docs-tree-wrap {
   flex: 1;
   min-height: 0;
@@ -384,6 +437,12 @@ body {
   font-weight: 600;
 }
 
+.doc-tree-match {
+  background: color-mix(in srgb, var(--docs-link) 25%, transparent);
+  color: inherit;
+  border-radius: 0.15rem;
+}
+
 @media (max-width: 768px) {
   .docs-shell-inner {
     position: relative;
diff --git a/web/docs/src/lib/DocTreeNav.svelte b/web/docs/src/lib/DocTreeNav.svelte
index 63fb6228..5c19367e 100644
--- a/web/docs/src/lib/DocTreeNav.svelte
+++ b/web/docs/src/lib/DocTreeNav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ManifestNode } from "virtual:fullsend-docs";
   import DocTreeNav from "./DocTreeNav.svelte";
+  import { highlightSegments } from "./filterTree";
   import { navigateToRouteKey } from "./routing";
 
   interface Props {
@@ -13,6 +14,8 @@
     outlineSessionEpoch?: number;
     /** POSIX path segments for this level’s parent (e.g. `guides/admin`). */
     parentDirPath?: string;
+    forceExpandAll?: boolean;
+    filterQuery?: string;
   }
 
   let {
@@ -20,6 +23,8 @@
     activeRouteKey,
     outlineSessionEpoch = 0,
     parentDirPath = "",
+    forceExpandAll = false,
+    filterQuery = "",
   }: Props = $props();
 
   /** Bumps when a folder is toggled so `isExpanded` re-reads sessionStorage. */
@@ -57,7 +62,7 @@
     <li class="doc-tree-item">
       {#if node.type === "dir"}
         {@const dirPath = parentDirPath ? `${parentDirPath}/${node.name}` : node.name}
-        {@const expanded = isExpanded(dirPath)}
+        {@const expanded = forceExpandAll || isExpanded(dirPath)}
         {@const subId = childListId(dirPath)}
         <div class="doc-tree-folder" data-doc-tree-dir={dirPath}>
           <button
@@ -100,7 +105,7 @@
                 </svg>
               {/if}
             </span>
-            <span class="doc-tree-folder-label">{node.name}</span>
+            <span class="doc-tree-folder-label">{#each highlightSegments(node.name, filterQuery) as seg}{#if seg.highlight}<mark class="doc-tree-match">{seg.text}</mark>{:else}{seg.text}{/if}{/each}</span>
           </button>
           {#if expanded}
             <div id={subId} class="doc-tree-folder-children">
@@ -109,6 +114,8 @@
                 {activeRouteKey}
                 {outlineSessionEpoch}
                 parentDirPath={dirPath}
+                {forceExpandAll}
+                {filterQuery}
               />
             </div>
           {/if}
@@ -130,7 +137,7 @@
               />
             </svg>
           </span>
-          <span class="doc-tree-link-text">{node.title}</span>
+          <span class="doc-tree-link-text">{#each highlightSegments(node.title, filterQuery) as seg}{#if seg.highlight}<mark class="doc-tree-match">{seg.text}</mark>{:else}{seg.text}{/if}{/each}</span>
         </button>
       {/if}
     </li>
diff --git a/web/docs/src/lib/filterTree.test.ts b/web/docs/src/lib/filterTree.test.ts
new file mode 100644
index 00000000..f35c889a
--- /dev/null
+++ b/web/docs/src/lib/filterTree.test.ts
@@ -0,0 +1,231 @@
+import { describe, expect, it } from "vitest";
+import { filterTree, highlightSegments } from "./filterTree";
+import type { ManifestNode } from "virtual:fullsend-docs";
+
+const tree: ManifestNode[] = [
+  {
+    type: "dir",
+    name: "guides",
+    children: [
+      {
+        type: "dir",
+        name: "admin",
+        children: [
+          {
+            type: "file",
+            name: "installation",
+            routeKey: "guides/admin/installation",
+            title: "Installation Guide",
+          },
+          {
+            type: "file",
+            name: "config",
+            routeKey: "guides/admin/config",
+            title: "Configuration",
+          },
+        ],
+      },
+      {
+        type: "file",
+        name: "quickstart",
+        routeKey: "guides/quickstart",
+        title: "Quickstart",
+      },
+    ],
+  },
+  {
+    type: "file",
+    name: "readme",
+    routeKey: "readme",
+    title: "README",
+  },
+];
+
+describe("filterTree", () => {
+  it("returns full tree when query is empty", () => {
+    expect(filterTree(tree, "")).toBe(tree);
+    expect(filterTree(tree, "  ")).toBe(tree);
+  });
+
+  it("matches file by title", () => {
+    const result = filterTree(tree, "quickstart");
+    expect(result).toEqual([
+      {
+        type: "dir",
+        name: "guides",
+        children: [
+          {
+            type: "file",
+            name: "quickstart",
+            routeKey: "guides/quickstart",
+            title: "Quickstart",
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("keeps ancestor dirs for nested match", () => {
+    const result = filterTree(tree, "installation");
+    expect(result).toEqual([
+      {
+        type: "dir",
+        name: "guides",
+        children: [
+          {
+            type: "dir",
+            name: "admin",
+            children: [
+              {
+                type: "file",
+                name: "installation",
+                routeKey: "guides/admin/installation",
+                title: "Installation Guide",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("prunes branches with no matches", () => {
+    const result = filterTree(tree, "zzz");
+    expect(result).toEqual([]);
+  });
+
+  it("matches case-insensitively", () => {
+    const result = filterTree(tree, "README");
+    expect(result).toEqual([
+      { type: "file", name: "readme", routeKey: "readme", title: "README" },
+    ]);
+  });
+
+  it("matches dir name and keeps full subtree", () => {
+    const result = filterTree(tree, "admin");
+    expect(result).toEqual([
+      {
+        type: "dir",
+        name: "guides",
+        children: [
+          {
+            type: "dir",
+            name: "admin",
+            children: [
+              {
+                type: "file",
+                name: "installation",
+                routeKey: "guides/admin/installation",
+                title: "Installation Guide",
+              },
+              {
+                type: "file",
+                name: "config",
+                routeKey: "guides/admin/config",
+                title: "Configuration",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("matches multiple words separately (fuzzy)", () => {
+    const result = filterTree(tree, "install guide");
+    expect(result).toEqual([
+      {
+        type: "dir",
+        name: "guides",
+        children: [
+          {
+            type: "dir",
+            name: "admin",
+            children: [
+              {
+                type: "file",
+                name: "installation",
+                routeKey: "guides/admin/installation",
+                title: "Installation Guide",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("matches against file routeKey (path)", () => {
+    const result = filterTree(tree, "admin config");
+    expect(result).toEqual([
+      {
+        type: "dir",
+        name: "guides",
+        children: [
+          {
+            type: "dir",
+            name: "admin",
+            children: [
+              {
+                type: "file",
+                name: "config",
+                routeKey: "guides/admin/config",
+                title: "Configuration",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("multi-word query with no combined match returns empty", () => {
+    const result = filterTree(tree, "admin readme");
+    expect(result).toEqual([]);
+  });
+});
+
+describe("highlightSegments", () => {
+  it("returns full text when query is empty", () => {
+    expect(highlightSegments("Hello", "")).toEqual([
+      { text: "Hello", highlight: false },
+    ]);
+  });
+
+  it("highlights single word match", () => {
+    expect(highlightSegments("Installation Guide", "install")).toEqual([
+      { text: "Install", highlight: true },
+      { text: "ation Guide", highlight: false },
+    ]);
+  });
+
+  it("highlights multiple words independently", () => {
+    const result = highlightSegments("Installation Guide", "guide inst");
+    expect(result).toEqual([
+      { text: "Inst", highlight: true },
+      { text: "allation ", highlight: false },
+      { text: "Guide", highlight: true },
+    ]);
+  });
+
+  it("merges overlapping highlights", () => {
+    const result = highlightSegments("abcdef", "abc bcd");
+    expect(result).toEqual([
+      { text: "abcd", highlight: true },
+      { text: "ef", highlight: false },
+    ]);
+  });
+
+  it("returns unhighlighted text when no match", () => {
+    expect(highlightSegments("Hello", "xyz")).toEqual([
+      { text: "Hello", highlight: false },
+    ]);
+  });
+
+  it("is case-insensitive", () => {
+    expect(highlightSegments("README", "read")).toEqual([
+      { text: "READ", highlight: true },
+      { text: "ME", highlight: false },
+    ]);
+  });
+});
diff --git a/web/docs/src/lib/filterTree.ts b/web/docs/src/lib/filterTree.ts
new file mode 100644
index 00000000..6503fc09
--- /dev/null
+++ b/web/docs/src/lib/filterTree.ts
@@ -0,0 +1,93 @@
+import type { ManifestNode } from "virtual:fullsend-docs";
+
+export function filterTree(
+  nodes: ManifestNode[],
+  query: string,
+): ManifestNode[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return nodes;
+  const words = q.split(/\s+/).filter(Boolean);
+  if (words.length === 0) return nodes;
+  return pruneNodes(nodes, words, "");
+}
+
+function matchesAllWords(text: string, words: string[]): boolean {
+  const lower = text.toLowerCase();
+  return words.every((w) => lower.includes(w));
+}
+
+function pruneNodes(
+  nodes: ManifestNode[],
+  words: string[],
+  parentPath: string,
+): ManifestNode[] {
+  const out: ManifestNode[] = [];
+  for (const node of nodes) {
+    if (node.type === "file") {
+      const searchText = `${node.title} ${node.routeKey}`;
+      if (matchesAllWords(searchText, words)) out.push(node);
+    } else {
+      const dirPath = parentPath
+        ? `${parentPath}/${node.name}`
+        : node.name;
+      if (matchesAllWords(dirPath, words)) {
+        out.push(node);
+      } else {
+        const children = pruneNodes(node.children, words, dirPath);
+        if (children.length > 0) {
+          out.push({ type: "dir", name: node.name, children });
+        }
+      }
+    }
+  }
+  return out;
+}
+
+export type TextSegment = { text: string; highlight: boolean };
+
+export function highlightSegments(
+  text: string,
+  query: string,
+): TextSegment[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [{ text, highlight: false }];
+  const words = q.split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [{ text, highlight: false }];
+
+  const ranges: [number, number][] = [];
+  const lower = text.toLowerCase();
+  for (const word of words) {
+    let start = 0;
+    for (;;) {
+      const idx = lower.indexOf(word, start);
+      if (idx === -1) break;
+      ranges.push([idx, idx + word.length]);
+      start = idx + 1;
+    }
+  }
+
+  if (ranges.length === 0) return [{ text, highlight: false }];
+
+  ranges.sort((a, b) => a[0] - b[0]);
+  const merged: [number, number][] = [ranges[0]];
+  for (let i = 1; i < ranges.length; i++) {
+    const last = merged[merged.length - 1];
+    if (ranges[i][0] <= last[1]) {
+      last[1] = Math.max(last[1], ranges[i][1]);
+    } else {
+      merged.push([...ranges[i]]);
+    }
+  }
+
+  const segments: TextSegment[] = [];
+  let pos = 0;
+  for (const [s, e] of merged) {
+    if (pos < s) segments.push({ text: text.slice(pos, s), highlight: false });
+    segments.push({ text: text.slice(s, e), highlight: true });
+    pos = e;
+  }
+  if (pos < text.length)
+    segments.push({ text: text.slice(pos), highlight: false });
+
+  return segments;
+}