Shortcuts and the cheat sheet

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="open">Open the palette</button>
    <button class="demo-btn" id="cheat">Show the cheat sheet</button>
  </div>
  <div class="demo-field">
    <label class="demo-label" for="note">A field, to prove a point</label>
    <input id="note" class="demo-input" placeholder="Type “n” here — nothing happens">
  </div>
  <p class="demo-out" id="out">Try N, then G then P, then ⌘⇧E</p>
</div>

import { createCommandPalette } from 'https://www.devix.pk/cdn/oss/command-palette@1.0.0/index.js';

const out = document.getElementById('out');
const did = (what) => (out.textContent = `ran: ${what}`);

const palette = createCommandPalette({
  recents: false,
  items: [
    { id: 'new', title: 'New invoice', section: 'Create', shortcut: 'n', perform: () => did('New invoice (n)') },
    { id: 'export', title: 'Export everything', section: 'Account', shortcut: 'mod+shift+e', perform: () => did('Export (⌘⇧E)') },
    // Two steps, Gmail style: press g, then p.
    { id: 'projects', title: 'Go to projects', section: 'Go to', shortcut: 'g then p', perform: () => did('Projects (g then p)') },
    { id: 'settings', title: 'Go to settings', section: 'Go to', shortcut: 'g then s', perform: () => did('Settings (g then s)') },
  ],
});

document.getElementById('open').addEventListener('click', () => palette.open());
document.getElementById('cheat').addEventListener('click', () => palette.showShortcuts());

@import url('https://www.devix.pk/cdn/oss/command-palette@1.0.0/command-palette.min.css');