Search Palette

Client-Side Command Palette

A Cmd-K palette over a Fuse.js index built at render from the Payload Local API

  • Frontend
  • Product Engineering
  • Search
  • React
  • Performance
  • Component Libraries
  • UI Engineering

Overview

  • Search on a content site usually means a hosted index (Algolia) and a sync pipeline. For a site this size that's overkill and a moving part that can go stale. Instead the whole corpus is flattened into a small SearchDocument[] at build/ISR time straight from the Local API, shipped as static JSON, and Fuse.js builds the index in the browser — no server round-trip, no index to keep in sync.

  • The work that makes it feel good is in the edges: a fuzzy matcher tuned so typos still hit but "hippo" doesn't surface unrelated items; section results that resolve through the same scoping chokepoint the visitor mirror uses, so a recruiter never lands on a dead anchor; and an empty state that, for a visitor, is their curated relevant content rather than a blank box.

  • It also became the proving ground for the component layer — the trigger, the facet chips, the result cards, and a shared MetaCard row all came out of building it.

System Design