Hero with Interactive Command Palette Demo — Free HTML CSS JS Snippet

Most product heroes describe a keyboard-driven command palette in a bullet point. This one lets a visitor actually use one, right in the fold — a real, working Cmd+K-style palette with grouped results, live substring filtering, match highlighting, and full arrow-key navigation, all before they've signed up for anything.

A single `render()` function owns the entire palette state

Rather than separately manipulating the DOM for filtering, highlighting, and active-item styling, one render() function reads the current input value, filters the commands array into currentMatches, and rebuilds the results list from scratch as an HTML string. This "re-render the whole list on every state change" approach — the same idea React popularized — keeps the DOM, the filtered data, and the active selection index from ever drifting out of sync with each other, because there's only one code path that produces the visible list.

Match highlighting without a regex library

highlight(text, query) finds the query's position with a plain indexOf on lowercased strings, then slices the original (correctly-cased) text into a before/match/after triple and wraps the matched slice in <mark>. Every slice is passed through escapeHtml() first — user-typed text is being inserted as HTML via innerHTML, so escaping &, <, and > prevents a visitor's own search query from being interpreted as markup.

Grouped results via a "last group seen" tracker

The commands array isn't pre-grouped into nested arrays; instead render() walks the flat, filtered list once and inserts a .cpd-group-label heading only when the current item's group differs from lastGroup. This keeps the source data flat and simple (just add a command with any group string) while still rendering correctly-grouped section headers, including when filtering removes an entire group from view.

Keyboard navigation matches real palette conventions

ArrowDown/ArrowUp move activeIndex and re-render (clamped so it can't go out of bounds), Enter calls runActive() on whichever command is currently active — regardless of whether it was reached by keyboard or mouse hover — and Escape clears the query. Hovering a result with the mouse also updates activeIndex and re-renders, so keyboard and mouse interaction always agree on which single item is "active" at any moment.

"Running" a command is simulated, but the state machine is real

runActive() swaps the input's value to show a checkmark confirmation, then resets everything after a short delay — there's no real navigation since this is a demo, but the selection, filtering, and active-index tracking are all fully functional, so the interaction pattern is exactly what you'd wire real navigation into.

Customizing it

Add real commands by extending the commands array with group, name, sub, icon, and shortcut fields — everything else (grouping, filtering, highlighting) works generically off that data. Replace runActive()'s checkmark simulation with real navigation (e.g. window.location.href) once wiring this into an actual app rather than a marketing demo.