diff --git a/flake.nix b/flake.nix
--- a/flake.nix
+++ b/flake.nix
@@ -100,6 +100,7 @@
         appview = self.callPackage ./nix/pkgs/appview.nix {};
         docs = self.callPackage ./nix/pkgs/docs.nix {
           inherit inter-fonts-src ibm-plex-mono-src lucide-src;
+          inherit (pkgs) pagefind;
         };
         spindle = self.callPackage ./nix/pkgs/spindle.nix {};
         knot-unwrapped = self.callPackage ./nix/pkgs/knot-unwrapped.nix {};
@@ -256,6 +257,16 @@
       watch-tailwind = {
         type = "app";
         program = ''${tailwind-watcher}/bin/run'';
+      };
+      serve-docs = {
+        type = "app";
+        program = toString (pkgs.writeShellScript "serve-docs" ''
+          echo "building docs..."
+          docsOut=$(nix build --no-link --print-out-paths .#docs)
+          echo "serving docs at http://localhost:1414"
+          cd "$docsOut"
+          exec ${pkgs.python3}/bin/python3 -m http.server 1414
+        '');
       };
       vm = let
         guestSystem =
diff --git a/docs/search.html b/docs/search.html
--- a/docs/search.html
+++ b/docs/search.html
@@ -1,7 +1,1 @@
-<form action="https://google.com/search" role="search" aria-label="Sitewide" class="w-full">
-  <input type="hidden" name="q" value="+[inurl:https://docs.tangled.org]">
-  <label>
-    <span style="display:none;">Search</span>
-    <input type="text" name="q" placeholder="Search docs ..." class="w-full font-normal">
-  </label>
-</form>
+<div class="pagefind-search"></div>
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,101 +1,192 @@
+@media (max-width: 768px) {
+    .pagefind-ui__result-thumb {
+        width: 0 !important;
+    }
+    .pagefind-ui__result-excerpt,
+    .pagefind-ui__result-title {
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
+    .pagefind-ui__search-input,
+    .pagefind-ui__search-clear {
+        max-width: 100%;
+    }
+    .pagefind-ui__form {
+        overflow: hidden;
+    }
+}
+
 svg {
-  width: 16px;
-  height: 16px;
+    width: 16px;
+    height: 16px;
 }
 
 :root {
-  --syntax-alert: #d20f39;
-  --syntax-annotation: #fe640b;
-  --syntax-attribute: #df8e1d;
-  --syntax-basen: #40a02b;
-  --syntax-builtin: #1e66f5;
-  --syntax-controlflow: #8839ef;
-  --syntax-char: #04a5e5;
-  --syntax-constant: #fe640b;
-  --syntax-comment: #9ca0b0;
-  --syntax-commentvar: #7c7f93;
-  --syntax-documentation: #9ca0b0;
-  --syntax-datatype: #df8e1d;
-  --syntax-decval: #40a02b;
-  --syntax-error: #d20f39;
-  --syntax-extension: #4c4f69;
-  --syntax-float: #40a02b;
-  --syntax-function: #1e66f5;
-  --syntax-import: #40a02b;
-  --syntax-information: #04a5e5;
-  --syntax-keyword: #8839ef;
-  --syntax-operator: #179299;
-  --syntax-other: #8839ef;
-  --syntax-preprocessor: #ea76cb;
-  --syntax-specialchar: #04a5e5;
-  --syntax-specialstring: #ea76cb;
-  --syntax-string: #40a02b;
-  --syntax-variable: #8839ef;
-  --syntax-verbatimstring: #40a02b;
-  --syntax-warning: #df8e1d;
+    --syntax-alert: #d20f39;
+    --syntax-annotation: #fe640b;
+    --syntax-attribute: #df8e1d;
+    --syntax-basen: #40a02b;
+    --syntax-builtin: #1e66f5;
+    --syntax-controlflow: #8839ef;
+    --syntax-char: #04a5e5;
+    --syntax-constant: #fe640b;
+    --syntax-comment: #9ca0b0;
+    --syntax-commentvar: #7c7f93;
+    --syntax-documentation: #9ca0b0;
+    --syntax-datatype: #df8e1d;
+    --syntax-decval: #40a02b;
+    --syntax-error: #d20f39;
+    --syntax-extension: #4c4f69;
+    --syntax-float: #40a02b;
+    --syntax-function: #1e66f5;
+    --syntax-import: #40a02b;
+    --syntax-information: #04a5e5;
+    --syntax-keyword: #8839ef;
+    --syntax-operator: #179299;
+    --syntax-other: #8839ef;
+    --syntax-preprocessor: #ea76cb;
+    --syntax-specialchar: #04a5e5;
+    --syntax-specialstring: #ea76cb;
+    --syntax-string: #40a02b;
+    --syntax-variable: #8839ef;
+    --syntax-verbatimstring: #40a02b;
+    --syntax-warning: #df8e1d;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --syntax-alert: #f38ba8;
-    --syntax-annotation: #fab387;
-    --syntax-attribute: #f9e2af;
-    --syntax-basen: #a6e3a1;
-    --syntax-builtin: #89b4fa;
-    --syntax-controlflow: #cba6f7;
-    --syntax-char: #89dceb;
-    --syntax-constant: #fab387;
-    --syntax-comment: #6c7086;
-    --syntax-commentvar: #585b70;
-    --syntax-documentation: #6c7086;
-    --syntax-datatype: #f9e2af;
-    --syntax-decval: #a6e3a1;
-    --syntax-error: #f38ba8;
-    --syntax-extension: #cdd6f4;
-    --syntax-float: #a6e3a1;
-    --syntax-function: #89b4fa;
-    --syntax-import: #a6e3a1;
-    --syntax-information: #89dceb;
-    --syntax-keyword: #cba6f7;
-    --syntax-operator: #94e2d5;
-    --syntax-other: #cba6f7;
-    --syntax-preprocessor: #f5c2e7;
-    --syntax-specialchar: #89dceb;
-    --syntax-specialstring: #f5c2e7;
-    --syntax-string: #a6e3a1;
-    --syntax-variable: #cba6f7;
-    --syntax-verbatimstring: #a6e3a1;
-    --syntax-warning: #f9e2af;
-  }
+    :root {
+        --syntax-alert: #f38ba8;
+        --syntax-annotation: #fab387;
+        --syntax-attribute: #f9e2af;
+        --syntax-basen: #a6e3a1;
+        --syntax-builtin: #89b4fa;
+        --syntax-controlflow: #cba6f7;
+        --syntax-char: #89dceb;
+        --syntax-constant: #fab387;
+        --syntax-comment: #6c7086;
+        --syntax-commentvar: #585b70;
+        --syntax-documentation: #6c7086;
+        --syntax-datatype: #f9e2af;
+        --syntax-decval: #a6e3a1;
+        --syntax-error: #f38ba8;
+        --syntax-extension: #cdd6f4;
+        --syntax-float: #a6e3a1;
+        --syntax-function: #89b4fa;
+        --syntax-import: #a6e3a1;
+        --syntax-information: #89dceb;
+        --syntax-keyword: #cba6f7;
+        --syntax-operator: #94e2d5;
+        --syntax-other: #cba6f7;
+        --syntax-preprocessor: #f5c2e7;
+        --syntax-specialchar: #89dceb;
+        --syntax-specialstring: #f5c2e7;
+        --syntax-string: #a6e3a1;
+        --syntax-variable: #cba6f7;
+        --syntax-verbatimstring: #a6e3a1;
+        --syntax-warning: #f9e2af;
+    }
 }
 
 /* pandoc syntax highlighting classes */
-code span.al { color: var(--syntax-alert); font-weight: bold; }                           /* alert          */
-code span.an { color: var(--syntax-annotation); font-weight: bold; font-style: italic; }  /* annotation     */
-code span.at { color: var(--syntax-attribute); }                                          /* attribute      */
-code span.bn { color: var(--syntax-basen); }                                              /* basen          */
-code span.bu { color: var(--syntax-builtin); }                                            /* builtin        */
-code span.cf { color: var(--syntax-controlflow); font-weight: bold; }                     /* controlflow    */
-code span.ch { color: var(--syntax-char); }                                               /* char           */
-code span.cn { color: var(--syntax-constant); }                                           /* constant       */
-code span.co { color: var(--syntax-comment); font-style: italic; }                        /* comment        */
-code span.cv { color: var(--syntax-commentvar); font-weight: bold; font-style: italic; }  /* commentvar     */
-code span.do { color: var(--syntax-documentation); font-style: italic; }                  /* documentation  */
-code span.dt { color: var(--syntax-datatype); }                                           /* datatype       */
-code span.dv { color: var(--syntax-decval); }                                             /* decval         */
-code span.er { color: var(--syntax-error); font-weight: bold; }                           /* error          */
-code span.ex { color: var(--syntax-extension); }                                          /* extension      */
-code span.fl { color: var(--syntax-float); }                                              /* float          */
-code span.fu { color: var(--syntax-function); }                                           /* function       */
-code span.im { color: var(--syntax-import); font-weight: bold; }                          /* import         */
-code span.in { color: var(--syntax-information); font-weight: bold; font-style: italic; } /* information    */
-code span.kw { color: var(--syntax-keyword); font-weight: bold; }                         /* keyword        */
-code span.op { color: var(--syntax-operator); }                                           /* operator       */
-code span.ot { color: var(--syntax-other); }                                              /* other          */
-code span.pp { color: var(--syntax-preprocessor); }                                       /* preprocessor   */
-code span.sc { color: var(--syntax-specialchar); }                                        /* specialchar    */
-code span.ss { color: var(--syntax-specialstring); }                                      /* specialstring  */
-code span.st { color: var(--syntax-string); }                                             /* string         */
-code span.va { color: var(--syntax-variable); }                                           /* variable       */
-code span.vs { color: var(--syntax-verbatimstring); }                                     /* verbatimstring */
-code span.wa { color: var(--syntax-warning); font-weight: bold; font-style: italic; }     /* warning        */
+code span.al {
+    color: var(--syntax-alert);
+    font-weight: bold;
+} /* alert          */
+code span.an {
+    color: var(--syntax-annotation);
+    font-weight: bold;
+    font-style: italic;
+} /* annotation     */
+code span.at {
+    color: var(--syntax-attribute);
+} /* attribute      */
+code span.bn {
+    color: var(--syntax-basen);
+} /* basen          */
+code span.bu {
+    color: var(--syntax-builtin);
+} /* builtin        */
+code span.cf {
+    color: var(--syntax-controlflow);
+    font-weight: bold;
+} /* controlflow    */
+code span.ch {
+    color: var(--syntax-char);
+} /* char           */
+code span.cn {
+    color: var(--syntax-constant);
+} /* constant       */
+code span.co {
+    color: var(--syntax-comment);
+    font-style: italic;
+} /* comment        */
+code span.cv {
+    color: var(--syntax-commentvar);
+    font-weight: bold;
+    font-style: italic;
+} /* commentvar     */
+code span.do {
+    color: var(--syntax-documentation);
+    font-style: italic;
+} /* documentation  */
+code span.dt {
+    color: var(--syntax-datatype);
+} /* datatype       */
+code span.dv {
+    color: var(--syntax-decval);
+} /* decval         */
+code span.er {
+    color: var(--syntax-error);
+    font-weight: bold;
+} /* error          */
+code span.ex {
+    color: var(--syntax-extension);
+} /* extension      */
+code span.fl {
+    color: var(--syntax-float);
+} /* float          */
+code span.fu {
+    color: var(--syntax-function);
+} /* function       */
+code span.im {
+    color: var(--syntax-import);
+    font-weight: bold;
+} /* import         */
+code span.in {
+    color: var(--syntax-information);
+    font-weight: bold;
+    font-style: italic;
+} /* information    */
+code span.kw {
+    color: var(--syntax-keyword);
+    font-weight: bold;
+} /* keyword        */
+code span.op {
+    color: var(--syntax-operator);
+} /* operator       */
+code span.ot {
+    color: var(--syntax-other);
+} /* other          */
+code span.pp {
+    color: var(--syntax-preprocessor);
+} /* preprocessor   */
+code span.sc {
+    color: var(--syntax-specialchar);
+} /* specialchar    */
+code span.ss {
+    color: var(--syntax-specialstring);
+} /* specialstring  */
+code span.st {
+    color: var(--syntax-string);
+} /* string         */
+code span.va {
+    color: var(--syntax-variable);
+} /* variable       */
+code span.vs {
+    color: var(--syntax-verbatimstring);
+} /* verbatimstring */
+code span.wa {
+    color: var(--syntax-warning);
+    font-weight: bold;
+    font-style: italic;
+} /* warning        */
diff --git a/docs/template.html b/docs/template.html
--- a/docs/template.html
+++ b/docs/template.html
@@ -34,20 +34,33 @@
       $header-includes$
     $endfor$
 
-    <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="icon" href="/static/logos/dolly.ico" sizes="48x48"/>
-    <link rel="icon" href="/static/logos/dolly.svg" sizes="any" type="image/svg+xml"/>
-    <link rel="apple-touch-icon" href="/static/logos/dolly.png"/>
+    <link href="$root$pagefind/pagefind-ui.css" rel="stylesheet">
+    <script src="$root$pagefind/pagefind-ui.js"></script>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        document.querySelectorAll(".pagefind-search").forEach((el) => {
+          new PagefindUI({
+            element: el,
+            showSubResults: true,
+            resetStyles: false,
+          });
+        });
+      });
+    </script>
+    <link rel="preload" href="$root$static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="icon" href="$root$static/logos/dolly.ico" sizes="48x48"/>
+    <link rel="icon" href="$root$static/logos/dolly.svg" sizes="any" type="image/svg+xml"/>
+    <link rel="apple-touch-icon" href="$root$static/logos/dolly.png"/>
 
   </head>
-  <body class="bg-white dark:bg-gray-900 flex flex-col min-h-svh">
+  <body class="bg-white dark:bg-gray-900 flex flex-col min-h-svh"$if(single-page)$ data-pagefind-ignore$endif$>
     $for(include-before)$
       $include-before$
     $endfor$
 
     $if(toc)$
       <!-- mobile TOC trigger -->
-      <div class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+      <div data-pagefind-ignore class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <button
           type="button"
           popovertarget="mobile-toc-popover"
@@ -62,9 +75,10 @@
       <div
         id="mobile-toc-popover"
         popover
+        data-pagefind-ignore
         class="mobile-toc-popover
                bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
-               h-full overflow-y-auto shadow-sm
+               h-full overflow-x-hidden overflow-y-auto shadow-sm
                px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
       >
         <div class="flex flex-col min-h-full">
@@ -89,6 +103,7 @@
       <nav
         id="$idprefix$TOC"
         role="doc-toc"
+        data-pagefind-ignore
         class="hidden md:flex md:flex-col gap-4 fixed left-0 top-0 w-80 h-screen
                bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
                p-4 z-50 overflow-y-auto">
diff --git a/nix/pkgs/docs.nix b/nix/pkgs/docs.nix
--- a/nix/pkgs/docs.nix
+++ b/nix/pkgs/docs.nix
@@ -1,5 +1,6 @@
 {
   pandoc,
+  pagefind,
   tailwindcss,
   runCommandLocal,
   inter-fonts-src,
@@ -59,4 +60,7 @@
 
   # styles
   cd ${src} && ${tailwindcss}/bin/tailwindcss -i input.css -o $out/stylesheet.css
+
+  # search index
+  ${pagefind}/bin/pagefind --site $out --output-path $out/pagefind
 ''