feat: add search and filter functionality to documentation UI

Author: liorcodev

CHANGELOG.md

@@ -5,11 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] - 2026-03-15
+
+### Added
+
+- **Search & Filter System** - Find endpoints quickly with powerful filtering capabilities:
+  - **Real-time Search** - Instantly filter endpoints by name, path, description, or tags as you
+    type (300ms debounce)
+  - **Type Filter** - Filter by procedure type (All Types / Queries / Mutations)
+  - **Auth Filter** - Show only public or protected endpoints
+  - **Tag Filter** - Filter by custom tags from route metadata
+  - **Active Filter Highlighting** - Selected filters are highlighted in blue for clear visual
+    feedback
+  - **Filter Persistence** - All filter states are automatically saved to localStorage and restored
+    on page reload
+  - **Clear Filters Button** - One-click reset with red highlighting when filters are active
+  - **Dynamic Results Counter** - Shows "Showing X of Y endpoints" based on active filters
+  - **Smart UI Updates** - Automatically hides empty route groups and sidebar sections when filtered
+
+---
+
 ## [0.6.1] - 2026-02-26
 
 ### Fixed
 
-- **`meta.name` not rendered in UI** — The `name` field from route metadata was never displayed in
+- **`meta.name` not rendered in UI** - The `name` field from route metadata was never displayed in
   the generated documentation. It now appears as a title in the route card header, with the path
   shown beneath it as a secondary label. The sidebar also uses the name when available, falling back
   to the path segment.
@@ -20,12 +40,12 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Breaking Changes
 
-- **`RouteMeta` type restructured** — The `docs` metadata fields (`description`, `tags`,
+- **`RouteMeta` type restructured** - The `docs` metadata fields (`description`, `tags`,
   `deprecated`, `auth`, `roles`) must now be nested under a `docs` sub-object. The previous flat
   shape was inconsistent with how the HTML generator read the metadata, meaning those fields were
   silently ignored in the generated documentation.
 
-  **Before (broken — fields were silently ignored):**
+  **Before (broken - fields were silently ignored):**
 
   ```ts
   t.procedure.meta({

README.md

@@ -41,8 +41,9 @@ router with zero configuration. Not only does it document your API, but it also
 
 - ⚡️ **Zero Config** - Works out of the box with any tRPC v11 router
 - 🧪 **Interactive Testing** - **Test endpoints directly in the browser with live fetch requests**
+- 🔍 **Search & Filter** - Instantly find endpoints with real-time search and smart filters
 - 🎨 **Beautiful UI** - Modern, responsive design with smooth animations
-- 🔍 **Smart Schema Inference** - Automatically extracts types from Zod validators
+- 🧠 **Smart Schema Inference** - Automatically extracts types from Zod validators
 - 📝 **Auto-Filled Examples** - Pre-filled JSON with required fields, click to add optional fields
 - 🔐 **Header Management** - Add custom headers (auth tokens, etc.), save and reuse them
 - 🌐 **Deploy Anywhere** - Works with Express, Next.js, Cloudflare Workers, and more
@@ -93,6 +94,17 @@ Powered by Zod's `toJSONSchema()` method, the generator automatically:
 - **Date fields** - `z.date()` and `z.coerce.date()` are represented as ISO 8601 strings
   (`{ type: "string", format: "date-time" }`), matching how tRPC transports dates over the wire
 
+### 🔍 Search & Filter System
+
+Quickly find what you need in large APIs:
+
+- **Real-time Search** - Filter endpoints by name, path, description, or tags as you type
+- **Smart Filters** - Filter by type (query/mutation), auth status (public/protected), or custom
+  tags
+- **Filter Persistence** - Your filter selections are saved across page reloads
+- **Visual Feedback** - Active filters highlighted in blue, clear button turns red when active
+- **Dynamic Results** - Shows count of visible endpoints and auto-hides empty sections
+
 ### 🎨 Modern, Beautiful UI
 
 - **Responsive Design** - Perfect on desktop, tablet, and mobile

bun.lock

@@ -1,6 +1,6 @@
 {
   "name": "trpc-docs-generator",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "author": "Lior Cohen",
   "homepage": "https://github.com/liorcodev/trpc-docs-generator#readme",
   "repository": {
@@ -14,9 +14,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "devDependencies": {
-    "@trpc/server": "^11.12.0",
+    "@trpc/server": "^11.12.1",
     "@types/bun": "^1.3.10",
-    "@types/node": "^25.3.5",
+    "@types/node": "^25.5.0",
     "prettier": "^3.8.1",
     "sharp": "^0.34.5",
     "typescript": "^5.9.3",

package.json

@@ -122,6 +122,53 @@ export function generateDocsHtml(routes: RouteInfo[], options: DocsGeneratorOpti
             </div>
           </div>
         </div>
+
+        <div class="search-filter-bar">
+          <div class="search-box">
+            <span class="iconify search-icon" data-icon="mdi:magnify"></span>
+            <input 
+              type="search" 
+              id="searchInput" 
+              class="search-input" 
+              placeholder="Search endpoints, descriptions..."
+            />
+          </div>
+          
+          <div class="filter-group">
+            <select id="typeFilter" class="filter-select">
+              <option value="all">All Types</option>
+              <option value="query">Queries</option>
+              <option value="mutation">Mutations</option>
+            </select>
+            
+            <select id="authFilter" class="filter-select">
+              <option value="all">All Endpoints</option>
+              <option value="public">Public</option>
+              <option value="protected">Protected</option>
+            </select>
+            
+            <select id="tagFilter" class="filter-select">
+              <option value="all">All Tags</option>
+              ${Array.from(
+                new Set(routes.flatMap(r => (r.meta?.docs as RouteMeta['docs'])?.tags || []))
+              )
+                .sort()
+                .map(tag => `<option value="${escapeHtml(tag)}">${escapeHtml(tag)}</option>`)
+                .join('')}
+            </select>
+          </div>
+          
+          <div class="filter-controls">
+            <button class="clear-filters-btn" id="clearFiltersBtn" onclick="clearFilters()">
+              <span class="iconify" data-icon="mdi:filter-remove" style="width: 14px; height: 14px;"></span>
+              Clear Filters
+            </button>
+          </div>
+          
+          <div class="results-count" id="resultsCount">
+            Showing ${routes.length} of ${routes.length} endpoints
+          </div>
+        </div>
       </header>
 
       ${Object.entries(groupedRoutes)
@@ -182,8 +229,23 @@ function generateRouteCard(route: RouteInfo): string {
   const docs = route.meta?.docs as RouteMeta['docs'];
   const routeId = route.path.replace(/\./g, '-');
 
+  // Prepare searchable text and filter attributes
+  const searchableText = [
+    route.path,
+    route.meta?.name || '',
+    docs?.description || '',
+    ...(docs?.tags || [])
+  ]
+    .join(' ')
+    .toLowerCase();
+
   return `
-    <div class="route-card" id="${routeId}">
+    <div class="route-card" 
+         id="${routeId}"
+         data-type="${route.type}"
+         data-auth="${docs?.auth ? 'true' : 'false'}"
+         data-tags="${(docs?.tags || []).join(',')}"
+         data-search="${escapeHtml(searchableText)}">
       <div class="route-header">
         <span class="method-badge method-${route.type}">${route.type}</span>
         <div class="route-path-info">