<show-keystrokes>

Interactive Playground

Press any shortcut or navigational key on your keyboard (e.g. →, SHIFT + TAB, CMD + A, SHIFT + CMD + T). Click the stage area below to focus and capture keystrokes—while focused, keystrokes are prevented from bubbling up so you can safely test keys like SPACE, TAB, or arrow keys without scrolling the page.

<show-keystrokes position="normal" theme="modern" color-scheme="light"></show-keystrokes>

Features

Installation & Setup

npm install show-keystrokes

import 'show-keystrokes';

Attributes & Configuration

Configure <show-keystrokes> declaratively using HTML attributes or dynamically via JavaScript properties.

CSS Custom Properties

Use the interactive controls below to tweak the --show-keystrokes-* CSS Custom Properties on a live static instance and copy the generated CSS.

show-keystrokes {
  /* Adjust any control above to generate custom property overrides */
}

CSS Shadow Parts (::part()) & Anatomy

All internal elements of <show-keystrokes> are exposed for external styling through ::part() pseudo-elements (see live ::part() examples below). Hover any label below to highlight the corresponding part:

Built-In Themes (Light & Dark Variants)

<show-keystrokes> ships with two built-in themes: Modern (theme="modern") and Mechanical Keyboard (theme="mechanical"), each with both Light and Dark variants.

macOS vs. Windows & Key Label Notation

<show-keystrokes> automatically detects the user's operating system and defaults to symbol glyphs (notation="symbols" → ⌘, ⇧, ⌥, ⌃, ⇥, ↵). Set notation="text" to render text labels (CMD, SHIFT, TAB, ENTER), or explicitly set platform="mac" / platform="windows".

Custom Styling via CSS ::part() & Variables

Style keys using CSS Custom Properties or target ::part(key), ::part(modifier), and ::part(separator) directly.

show-keystrokes.custom-neon::part(key) {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid #0284c7;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35), 0 2px 0 #0369a1;
}

show-keystrokes.custom-neon::part(modifier) {
  color: #f472b6;
  border-color: #db2777;
}

JavaScript API

import { create } from 'show-keystrokes';

// Dynamically create & append a <show-keystrokes> element
const el = create(
  {
    keystrokes: 'all',
    theme: 'modern',
    colorScheme: 'dark',
    size: 'large',
    position: 'viewport top right',
  },
  document.body
);

// Programmatically display a keystroke
el.showKeys('SHIFT + TAB');
el.keys = 'CMD + A';

// Enable or disable listening (reflects to the `disabled` attribute)
el.disabled = true;
el.disabled = false;

// Clear display
el.clear();

// Listen for keystroke events
el.addEventListener('keystroke', (e) => {
  console.log(e.detail.label);    // e.g. "SHIFT + TAB"
  console.log(e.detail.keys);     // e.g. ["SHIFT", "TAB"]
  console.log(e.detail.category); // "shortcut" | "navigation" | "keystroke"
});

Showing static keystrokes

Use the keys and static attributes on <show-keystrokes> to render static keycaps in documentation, tutorials, or UI hints without attaching keyboard event listeners or auto-hiding.

<show-keystrokes keys="→" static></show-keystrokes>
<show-keystrokes keys="SHIFT + TAB" static></show-keystrokes>
<show-keystrokes keys="CMD + A" static></show-keystrokes>
<show-keystrokes keys="SHIFT + CMD + T" static></show-keystrokes>

Bookmarklet

<show-keystrokes> is also available as a bookmarklet for when you want to inject it onto any webpage without modifying the page’s code or installing anything. Drag the button below to your browser’s bookmarks toolbar—clicking it on any page dynamically imports create from https://cdn.jsdelivr.net/npm/show-keystrokes/index.js and appends a <show-keystrokes> instance with the default positioning and theme applied.

if (!document.getElementById('show-keystrokes-bookmarklet')) {
  import('https://cdn.jsdelivr.net/npm/show-keystrokes/index.js')
    .then(({ create }) => create({ id: 'show-keystrokes-bookmarklet' }))
    .catch((err) => alert(`Failed to load show-keystrokes: ${err.message}`));
}

Extension

<show-keystrokes> is also available as a browser extension for when you want to inject it onto any webpage without modifying the page’s code—perfect for live demos, talks, and screen casting. The extension is available on the Chrome Web Store.

Compared to the bookmarklet, the browser extension offers several key advantages:

• Persists across navigations: Automatically re-injects <show-keystrokes> as you navigate between pages on an enabled origin—no need to re-click the bookmarklet on every page load.
• Per-origin configuration & overrides: Customize keystrokes, position, positionArea, and size for individual websites directly from the extension popup, with your settings saved and restored automatically on future visits.
• Configurable global defaults: Set your preferred default options (keystrokes, position, size, theme, color-scheme, hide-delay, and hide-duration), preview them live, and manage saved per-origin configurations from the extension’s Settings page.
• Quick keyboard shortcut & status indicator: Press SHIFT + CMD + K (macOS) or SHIFT + CTRL + K (Windows/Linux) to toggle <show-keystrokes> on or off at any time, with a green status badge on the toolbar icon showing when it is active.
• Works on strict CSP websites: Bundles <show-keystrokes> locally inside the extension so it works reliably even on websites whose Content Security Policy blocks external CDN scripts.