Command Palette ⌘K — Instructions

A keyboard-first launcher for your entire site — the same ⌘K experience people know from Linear, Vercel, Raycast and GitHub. Press Cmd/Ctrl+K, type a few letters, and jump to any page or run any action without touching the mouse.

1 · Preview it

Double-click snippet.html, then press Cmd‑K (Mac) or Ctrl‑K (Windows) — or just tap /. It’s plain HTML, CSS & JavaScript: no install, build, or server, and no external libraries.

2 · Add it to your site with Claude

Keep this folder inside your website project (or anywhere Claude Code can read it), then ask Claude something like:

“Add the command palette from snippet.html in this folder to my site, and fill CMDK_COMMANDS with one command per page in my nav.”

“Wire the ⌘K palette so ‘Copy email’ copies my real address and ‘Contact’ scrolls to my contact section.”

Tip: point Claude at the file by name — e.g. “use the code in snippet.html from the Command-Palette folder” — so it copies the exact component (the #cmdk-css styles, the #cmdk markup, and the #cmdk-js script).

3 · Define your commands

Everything the palette shows lives in one array near the top of the script, CMDK_COMMANDS. Each entry is a single command:

{ id:'pricing', name:'View Pricing', hint:'Plans & rates',
  group:'Pages', icon:I.tag, run:function(){ go('#pricing'); } }

name / hint — the title and grey subtitle (both are fuzzy-searchable).
group — the heading it appears under (e.g. Pages, Actions, Links).
icon — pick a ready-made icon from the I set (I.page, I.mail, I.moon…) or pass your own inline SVG.
run — what happens on Enter/click. Use the built-in helpers below.

Three helpers are available inside run:

go('#section') smooth-scrolls to an element; go('page.html') navigates to another page.
copy('text') copies text to the clipboard.
toast('Saved!') shows a small confirmation message.

4 · Customize

Open shortcut: it’s Cmd/Ctrl‑K and / by default — change the keys in the keydown handler.
Recent list: the last picks are remembered in localStorage and shown when the box is empty.
Brand colors: restyle the #cmdk-css block — the accent uses your orange, the icons your blue.
Trigger button: any element with data-cmdk-open opens the palette, so you can add a search button in your header too.

Good to know

No dependencies: works in any site — static HTML, WordPress, React, anything.
Accessible: dialog role, focus trap, full keyboard control, and respects reduced-motion.
Yours to change: add as many commands as you like, or ask Claude to generate them from your sitemap.

Prepared by Inner Web SolutionsBuilt with Claude