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

https://www.bram.us/wordpress/wp-content/uploads/2026/09/show-keystrokes.mp4Recording of the <show-keystrokes> Demo & Playground. ~ When recording screen casts or doing live demos, I typically rely on a native macOS app to visualize my keystrokes on screen. Recently, however, that app got blocked on my work machine by a corporate security policy. Additionally, the keystrokes visualized through that app don’t show up when screen sharing a specific window or tab. Because I needed to demo a website that relies heavily on keyboard navigation — and thus really needed those keystrokes to be visible to the audience — I found myself in a bit of a pickle. So with the help of Gemini, I decided to build a web-native solution to fill that gap: <show-keystrokes> ~ # Embed it and you’re good to go Using <show-keystrokes> is as simple as loading the module from npm (or a CDN) and dropping the custom element onto your page. Embed it on your site and you’re good to go: <script type="module"…