heytappr.book a demo

free tool

build a ⌘k menu without guessing at shortcuts

list your commands, press the keys you want for each one, and see which ones the browser or the operating system already owns. try the palette right here, then copy the code for cmdk, shadcn/ui, or plain javascript. nothing leaves your browser.

start from

opens the palette

› paste a list of routes

10 commands

    • typinga single-key shortcut. make sure it's ignored while someone is typing in an input, or every "G" they type fires it. the exported code does this for you.
    • typinga single-key shortcut. make sure it's ignored while someone is typing in an input, or every "?" they type fires it. the exported code does this for you.
command-menu.tsx
"use client";

// npm install cmdk
import { Command } from "cmdk";
import { useEffect, useState } from "react";

const commands = [
  {
    "group": "navigation",
    "label": "Go to dashboard",
    "shortcut": "g",
    "keywords": [
      "home",
      "overview"
    ],
    "href": "/dashboard",
    "hint": "G"
  },
  {
    "group": "navigation",
    "label": "Projects",
    "shortcut": "",
    "keywords": [
      "work",
      "list"
    ],
    "href": "/projects",
    "hint": ""
  },
  {
    "group": "navigation",
    "label": "Reports",
    "shortcut": "",
    "keywords": [
      "analytics",
      "charts",
      "export"
    ],
    "href": "/reports",
    "hint": ""
  },
  {
    "group": "create",
    "label": "New project",
    "shortcut": "mod+shift+o",
    "keywords": [
      "add",
      "create"
    ],
    "href": "/projects/new",
    "hint": "⌘⇧O"
  },
  {
    "group": "create",
    "label": "Invite a teammate",
    "shortcut": "",
    "keywords": [
      "add user",
      "team",
      "member"
    ],
    "href": "/settings/members?invite=1",
    "hint": ""
  },
  {
    "group": "settings",
    "label": "Settings",
    "shortcut": "mod+,",
    "keywords": [
      "preferences",
      "account"
    ],
    "href": "/settings",
    "hint": "⌘,"
  },
  {
    "group": "settings",
    "label": "Billing",
    "shortcut": "",
    "keywords": [
      "invoice",
      "plan",
      "payment",
      "card"
    ],
    "href": "/settings/billing",
    "hint": ""
  },
  {
    "group": "help",
    "label": "Keyboard shortcuts",
    "shortcut": "shift+?",
    "keywords": [
      "help",
      "keys",
      "hotkeys"
    ],
    "href": "#shortcuts",
    "hint": "⇧?"
  },
  {
    "group": "help",
    "label": "Contact support",
    "shortcut": "",
    "keywords": [
      "help",
      "bug",
      "question"
    ],
    "href": "mailto:support@example.com",
    "hint": ""
  },
  {
    "group": "account",
    "label": "Log out",
    "shortcut": "",
    "keywords": [
      "sign out",
      "exit"
    ],
    "href": "/logout",
    "hint": ""
  }
];

function isMac() {
  return /Mac|iPhone|iPad|iPod/.test(navigator.platform);
}

// "mod" is Cmd on macOS and Ctrl everywhere else
function matches(e: KeyboardEvent, combo: string) {
  var parts = combo.split("+");
  var key = parts.pop();
  if (key === "") key = "+";
  var want: Record<string, boolean> = { mod: false, ctrl: false, alt: false, shift: false };
  parts.forEach(function (p) { want[p] = true; });
  var mac = isMac();
  var mod = mac ? e.metaKey : e.ctrlKey;
  var ctrl = mac ? e.ctrlKey : e.metaKey;
  if (mod !== want.mod || ctrl !== want.ctrl || e.altKey !== want.alt || e.shiftKey !== want.shift) return false;
  var names: Record<string, string> = { space: " ", escape: "escape", enter: "enter", plus: "+", tab: "tab" };
  var k = (names[key] || key).toLowerCase();
  var physical = (e.code || "").replace(/^Key|^Digit/, "").toLowerCase();
  return e.key.toLowerCase() === k || physical === k;
}

// single-key shortcuts must not fire while someone is typing
function isTyping(e: KeyboardEvent) {
  var t = e.target as HTMLElement | null;
  return !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
}

function needsModifier(combo: string) {
  return /(^|\+)(mod|ctrl|alt)\+/.test(combo);
}

// "#something" hrefs are custom actions: listen for the "command" event.
// in next.js, swap window.location.assign for router.push.
function run(href: string) {
  if (href.startsWith("#")) {
    window.dispatchEvent(new CustomEvent("command", { detail: href.slice(1) }));
  } else {
    window.location.assign(href);
  }
}

export function CommandMenu() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (matches(e, "mod+k")) {
        e.preventDefault();
        setOpen((o) => !o);
        return;
      }
      for (const c of commands) {
        if (!c.shortcut || !matches(e, c.shortcut)) continue;
        if (!needsModifier(c.shortcut) && isTyping(e)) continue;
        e.preventDefault();
        setOpen(false);
        run(c.href);
        return;
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Command menu">
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="navigation">
          {commands
            .filter((c) => c.group === "navigation")
            .map((c) => (
              <Command.Item key={c.label} value={c.label} keywords={c.keywords} onSelect={() => { setOpen(false); run(c.href); }}>
                <span>{c.label}</span>
                {c.shortcut && <kbd>{c.hint}</kbd>}
              </Command.Item>
            ))}
        </Command.Group>
        <Command.Group heading="create">
          {commands
            .filter((c) => c.group === "create")
            .map((c) => (
              <Command.Item key={c.label} value={c.label} keywords={c.keywords} onSelect={() => { setOpen(false); run(c.href); }}>
                <span>{c.label}</span>
                {c.shortcut && <kbd>{c.hint}</kbd>}
              </Command.Item>
            ))}
        </Command.Group>
        <Command.Group heading="settings">
          {commands
            .filter((c) => c.group === "settings")
            .map((c) => (
              <Command.Item key={c.label} value={c.label} keywords={c.keywords} onSelect={() => { setOpen(false); run(c.href); }}>
                <span>{c.label}</span>
                {c.shortcut && <kbd>{c.hint}</kbd>}
              </Command.Item>
            ))}
        </Command.Group>
        <Command.Group heading="help">
          {commands
            .filter((c) => c.group === "help")
            .map((c) => (
              <Command.Item key={c.label} value={c.label} keywords={c.keywords} onSelect={() => { setOpen(false); run(c.href); }}>
                <span>{c.label}</span>
                {c.shortcut && <kbd>{c.hint}</kbd>}
              </Command.Item>
            ))}
        </Command.Group>
        <Command.Group heading="account">
          {commands
            .filter((c) => c.group === "account")
            .map((c) => (
              <Command.Item key={c.label} value={c.label} keywords={c.keywords} onSelect={() => { setOpen(false); run(c.href); }}>
                <span>{c.label}</span>
                {c.shortcut && <kbd>{c.hint}</kbd>}
              </Command.Item>
            ))}
        </Command.Group>
      </Command.List>
    </Command.Dialog>
  );
}

why bother with a palette

menus scale badly. every feature you add is one more item someone has to scan past, and after a while the people who use your product most are the ones clicking through the most layers. a command palette flips that around. the user types three letters of what they want and presses enter. the menu can grow forever and the effort stays the same.

the hard part is rarely the palette itself. libraries like cmdk handle the list and the search well. the hard part is the shortcuts, because the good ones are already taken, and you only find out when someone presses ⌘w to open your "workspaces" command and loses their tab instead.

how the conflict check works

the checker knows two kinds of taken keys. some never reach the page at all: the browser or the operating system acts on them first, so ⌘w closes the tab and ⌘space opens spotlight no matter what your code says. others do reach the page and can be taken over with preventDefault, like ⌘l, ⌘r or ⌘f, but people expect the browser behavior, so taking them tends to annoy the exact users who know shortcuts best. it also flags two commands sharing a shortcut, and single-key shortcuts that would fire while someone is typing.

shortcuts are recorded with "mod" meaning ⌘ on a mac and ctrl everywhere else, which is what nearly every web app wants. the exported code follows the same rule, so one shortcut list works on both.

what the palette can't do

a palette only helps people who already know roughly what to type. someone who doesn't know your product calls it "workspaces" will search for "teams", find nothing, and leave. keywords help, so add the words your users actually use. past that point, the question stops being "what's the command" and becomes "how do i do this", which is the question heytappr answers by walking the user through the real screen. if your palette's empty state is a dead end today, that's the gap. we wrote more about it in how to kill "how do i" tickets.

questions

What is a command palette?

A search box, usually opened with Cmd+K or Ctrl+K, that lists everything you can do in an app. You type a few letters of what you want and press Enter, instead of hunting through menus.

Which keyboard shortcuts should a web app avoid?

Anything the browser or operating system keeps for itself. Cmd/Ctrl+W, T, N and Shift+T never reach the page at all, and neither do Cmd+Q, Cmd+Space, Cmd+H or Cmd+M on a Mac, or Alt+F4 and Ctrl+Shift+Esc on Windows. Keys like Cmd/Ctrl+L, R, F, P, S and D do reach the page, but people expect them to do the browser thing.

Why do single-key shortcuts need special handling?

Because people type. A shortcut on the letter g fires every time someone types a g in a search box unless the code ignores key presses that happen inside inputs, textareas and editable text. The exported code does that.

Is Cmd+K safe to use?

It's the convention for command palettes, and browsers let pages take it. On Windows and Linux, Chrome and Firefox use Ctrl+K to start a search in the address bar, so a page that takes it over is replacing that, which most users of palette-heavy apps are used to.

Does this tool send my commands anywhere?

No. Everything runs in your browser. The share link stores the palette in the part of the URL after the #, which browsers don't send to servers.