Keystroke Visualizer

If you teach online, record coding tutorials, or stream, your audience constantly wonders "what did you just press?" Neither macOS, Windows, nor the browser gives a built-in way to show the keys behind a shortcut, so viewers rewind, guess, or give up. A keystroke visualizer fixes that by drawing each key combination on screen the instant you press it.

This free tool runs entirely in your browser — nothing is uploaded and there is no sign-up. Press a shortcut like ⌘C or Ctrl+Shift+P and it appears as a clean badge that fades on its own. Switch between macOS glyphs (⌘ ⌥ ⇧ ⌃) and Windows labels (Ctrl, Alt, Shift, Win) so it matches whatever you are demonstrating. With "Shortcuts only" on it ignores ordinary typing and shows just the combinations and special keys, so you can teach shortcuts without exposing what you write.

You can place the badges at the bottom, top, center, or a corner, scale them small to large, slow the fade for recordings, and switch the stage to a light theme or a pure green screen. The green-screen theme is made for streamers: go fullscreen, add the tab as a Window Capture in OBS or Streamlabs, apply a Chroma Key filter, and your keystrokes float over your gameplay or screen share with the background dropped out.

Because it lives in a browser tab, it shines when the thing you are demonstrating is also in the browser, or when you are compositing in OBS. The moment you need keystrokes shown over a native desktop app — VS Code, a design tool, a terminal — without a capture chain, you want a system-wide overlay instead.

And when the goal is a finished video rather than a live overlay, you want a screen recorder that shows your keystrokes directly in the recording — no separate capture layer, no editing pass to add captions of what you pressed. Limelight records your screen with the keystrokes (and a glowing cursor and auto-zoom into each click) composited straight into the exported mp4 or 9:16 clip, so the keys are part of the video the moment you stop recording.