⌘K

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="open">Open the palette</button>
    <span class="demo-hint">or press <kbd>⌘</kbd><kbd>K</kbd> / <kbd>Ctrl</kbd><kbd>K</kbd> inside this frame</span>
  </div>
  <p class="demo-out" id="out">Nothing run yet</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: 'demo.palette.recents',
  items: [
    { id: 'invoice.new', title: 'New invoice', section: 'Create', keywords: ['add', 'bill'], shortcut: 'mod+shift+n', perform: () => did('New invoice') },
    { id: 'draft.new', title: 'New draft', section: 'Create', perform: () => did('New draft') },
    { id: 'customer.new', title: 'New customer', section: 'Create', subtitle: 'Add someone to bill', perform: () => did('New customer') },
    { id: 'go.invoices', title: 'Go to invoices', section: 'Go to', meta: '42', perform: () => did('Invoices') },
    { id: 'go.customers', title: 'Go to customers', section: 'Go to', meta: '128', perform: () => did('Customers') },
    { id: 'go.settings', title: 'Go to settings', section: 'Go to', subtitle: 'Workspace preferences', perform: () => did('Settings') },
    { id: 'export', title: 'Export everything', section: 'Account', subtitle: 'A zip of every invoice', perform: () => did('Export') },
    { id: 'billing', title: 'Billing and plan', section: 'Account', perform: () => did('Billing') },
    { id: 'signout', title: 'Sign out', section: 'Account', perform: () => did('Sign out') },
  ],
});

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

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

kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border: 1px solid var(--demo-line-strong); border-radius: 5px; background: var(--demo-surface); font-size: 11px; }