Show Keystrokes bởi Bramus

Show your keystrokes, keyboard shortcuts, and navigational keys in real time on any web page. Perfect for recording screencasts, giving live coding presentations, teaching accessibility and keyboard navigation, or demonstrating web apps — without needing external desktop overlay software.

Powered by the zero-dependency <show-keystrokes> custom element.

HOW IT WORKS

• Click the extension icon in the toolbar—or press Shift+Cmd+K (macOS) / Ctrl+Shift+K (Windows/Linux)—to activate keystroke visualization on the active page.
• When active, the status light on the extension icon turns green and your keystrokes are rendered on-screen as stylish keycaps.
• Use the popup to tweak settings on the fly for the current website, or toggle the visualizer off when you are done.

KEY FEATURES

• Flexible Keystroke Filtering:
- Shortcuts & Navigational Keys (Default): Shows modifier combos (e.g. ⌘ + A, ⇧ + ⌘ + T, Ctrl + C) and navigation/special keys (⇥, →, ←, ↑, ↓, Space, Enter, Esc, Backspace, F1–F15, etc.) without exposing typed passwords or prose.
- All Keystrokes: Shows every key press including letters, digits, symbols, shortcuts, and navigational keys.
- Shortcuts Only: Shows only modifier combinations and function keys.
- Navigational Keys Only: Ideal for demonstrating focus management and keyboard accessibility (Tab, Shift + Tab, arrow keys, Enter, Space).

• Viewport or Pointer Positioning:
- Pin the keycaps to any corner, edge, or center of the viewport (top-right by default).
- Or anchor the visualizer directly to your mouse pointer using CSS Anchor Positioning so viewers never have to look away from the action.

• Built-In Themes & Color Schemes:
- Modern Theme: Clean, low-profile rounded keycaps.
- Mechanical Keyboard Theme: Sculpted 3D keycaps with accented modifier keys.
- Supports automatic Light/Dark mode adaptation or explicit Light and Dark variants.

• Customizable Sizing & Timing:
- Scale keycaps across 5 sizes (Small, Medium, Large, Extra Large, Double Extra Large).
- Customize the auto-hide delay and fade-out duration, or keep the last pressed keystroke visible indefinitely.

• Per-Origin Memory & Global Defaults:
- Settings changed in the popup are automatically remembered per origin (website) and restored when you navigate across pages on that domain.
- Configure your global default appearance, test your setup live, and manage saved per-origin overrides from the extension's Settings page.