Build a command palette for your web app

The command palette, that cmd+k overlay you find in the tools developers love, is one of the highest-leverage bits of UX you can add. It gives power users a fast, keyboard-driven way to do anything your app already does. Here is how to build one.

The three parts

A command palette is simpler than it looks. It has three pieces:

• A registry of actions, each with a label and a handler.
• A shortcut that opens the palette.
• A filtered list that narrows as the user types, and runs the chosen action on select.

Register the actions

Define your actions as data, so the palette is just a view over them:

const actions = [
  { label: "Go to Dashboard", run: () => navigate("/dashboard") },
  { label: "New Post", run: () => navigate("/posts/new") },
  { label: "Toggle Dark Mode", run: () => toggleTheme() },
];

Anything the app can do becomes an entry here.

Open it with a shortcut

Listen for the shortcut globally and toggle the palette:

window.addEventListener("keydown", (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});

Filter and run

As the user types, filter the actions by label and show the matches. On Enter or click, run the selected action's handler and close the palette:

const results = actions.filter((a) =>
  a.label.toLowerCase().includes(query.toLowerCase())
);
// render results; on select: result.run(); closePalette();

A fuzzy match is nicer than a plain substring, but substring is a fine start.

The details that make it feel good

• Full keyboard control. Arrow keys to move, Enter to run, Escape to close. A palette you have to reach for the mouse to use defeats the point.
• Accessible. It is a modal dialog, so trap focus, label it, and return focus on close.
• Fast. Keep the action list light so filtering is instant as the user types.

Why it is worth it

The clever part of a command palette is that it adds no features, it just exposes the ones you have in a faster interface. For anyone who lives in your app, typing a few letters beats clicking through menus every time. It is a small build that makes your product feel considerably more capable to the people who use it most.