Web Command Palette gives you the power to create keyboard shortcuts that simply work cross-platform.

Examples

In the below examples, you can see how Web Command Palette takes care of all the boilerplate for you.

Simple Example

Without Web Command Palette

window.addEventListener("keydown", (event) => {
  const modKey =
    navigator.platform.search(
      /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC|Mac68K/
    ) !== -1
      ? "metaKey"
      : "ctrlKey";
      
  if (event[modKey] && event.altKey && event.code === "KeyG") {
    event.preventDefault();
    alert("Go!");
  } else if (event[modKey] && event.shiftKey && event.code === "KeyG") {
    event.preventDefault();
    alert("Stop!");
  }
});

With Web Command Palette

registerCommands({
  "mod+opt+KeyG": alert("Go!"),
  "mod+opt+shift+KeyG": alert("Stop!"),
});

These above examples show basic functionality, but what if you only want your users to use a keyboard shortcut in a certain context?

Without Web Command Palette

import { modal } from "./modal";

window.addEventListener("keydown", (event) => {
  const modKey =
    navigator.platform.search(
      /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC|Mac68K/
    ) !== -1
      ? "metaKey"
      : "ctrlKey";

  if (modal.isOpen) {
    if (event.code === "Escape") {
      event.preventDefault();
      modal.close();
    } else if (event[modKey] && event.code === "KeyS) {
      event.preventDefault();
      modal.saveState();
    }
  }
});

With Web Command Palette

import { modal } from "./modal";

registerCommands({
  "Escape": {
    run: () => modal.close(),
    when: () => modal.isOpen,
  },
  "mod+KeyS": {
    run: () => modal.saveState(),
    when: () => modal.isOpen,
  }
});

Chords

Another common pattern for keyboard shortcuts is chaining them together. For example, you may want your users to press “Ctrl/Cmd G” then “C” to go to a catalog of items and “Ctrl/Cmd F” then “C” to search within that same catalogue.

Without Web Command Palette

let currentChord = null;

window.addEventListener("keydown", (event) => {
  const modKey =
    navigator.platform.search(
      /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC|Mac68K/
    ) !== -1
      ? "metaKey"
      : "ctrlKey";
  
  if (currentChord === null) {
    if (event[modKey] && event.code === "KeyG") {
      event.preventDefault();
      currentChord = "goto";
    } else if (event[modKey] && event.code === "KeyF") {
      event.preventDefault();
      currentChord = "find";
    }
  } else if (currentChord === "goto" && event.code === "KeyC") {
    event.preventDefault();
    currentChord = null;
    goToCatalog();
  } else if (currentChord === "find" && event.code === "KeyC") {
    event.preventDefault();
    currentChord = null;
    findInCatalog();
  } else if (currentChord !== null) {
    currentChord = null;
  }
});

With Web Command Palette

registerCommands({
  "mod+KeyG KeyC": () => goToCatalog(),
  "mod+KeyF KeyC": () => findInCatalog(),
});