Show keystrokes on a website with the <show-keystrokes> custom element

A new open-source web component, <show-keystrokes>, visualizes keyboard shortcuts and navigation keys on screen for screencasts and live demos, offering a browser-native alternative to native macOS keystroke-visualizer apps that get blocked by corporate security policies or don't show up in window/tab screen sharing. It's embedded via a single script tag, supports positioning modes (viewport corner, following the cursor, or inline), and adapts automatically to macOS versus Windows/Linux modifier key labels with light/dark theming. Under the hood it relies on the Popover API for top-layer rendering and CSS Anchor Positioning for cursor-following behavior with automatic flip fallbacks. The project also ships a bookmarklet and a Chrome Extension (pending Chrome Web Store review) so it can be injected onto any site, including ones with strict CSP.

Source: https://www.bram.us/2026/09/23/show-keystrokes. 8 Sync News only summarizes and links out; content copyright belongs to the authors and original sources.