Visualize your keystrokes on screenshots or videos

Screenshots by themselves are sometimes not enough to explain things on a laptop, especially if it involves keystrokes. With the help of a keystroke visualizer, it is possible to improve screenshots (or videos) by adding such details.

For this purpose, I can highly recommend Keycastr, an open-source keystroke visualizer available for macOS.

Installation is pretty easy through Homebrew (manual download is still possible, of course).

The only tricky part (just for occasional macOS users) is granting the necessary permissions.

KeyCastr requires access to the macOS Accessibility API to receive your key events and broadcast the keystrokes. However, this procedure is well explained in the documentation.

Once you started the program, the default visualizer nicely renders your keystrokes. There are quite some configuration options like changing the font size, linger time, text color, and more.

The default position is on the bottom left of your display. To modify the position of the text box displaying the keystrokes, click and drag the text box :)

To visualize interactions like pressing down a key on your keyboard, you can use the "Svelte" visualizer.