I Built a Browser-Based Keyboard Tester: What I Learned About Keyboard Events

A keyboard seems simple until you try to build something that needs to detect every key a user presses.

I recently built keyboardtest, a browser-based keyboard testing tool. The idea is simple: press a key, and immediately see whether the browser receives the keyboard event.

But building something this simple taught me a few interesting things about browser keyboard input.

The basic idea

Browsers provide keyboard events that allow JavaScript applications to react when users press and release keys.

For a simple keyboard tester, the basic flow is:

1. Listen for a keyboard event.
2. Identify the key that was pressed.
3. Update the corresponding key on the virtual keyboard.
4. Keep track of keys that are currently pressed.
5. Reset the visual state when the key is released.

The result is a virtual keyboard that reacts in real time.

Why testing every key is useful

A keyboard tester can be useful when:

• A key appears to be broken
• You're checking a new keyboard
• You're buying a used laptop
• You're troubleshooting a mechanical keyboard
• You want to check a gaming keyboard
• Several keys behave unexpectedly

Instead of guessing whether a keyboard is working, you can visually check which keys are being registered.

Some interesting edge cases

Keyboard input isn't always as straightforward as it looks.

Modifier keys such as Shift, Ctrl, Alt, and Meta need special handling because they can be held while other keys are pressed.

There are also differences between physical keyboard layouts and the values reported by the browser. A useful keyboard tester therefore needs to think carefully about how it represents keys rather than assuming every keyboard has exactly the same layout.

Another interesting area is simultaneous key presses. This is particularly important for gaming keyboards, where users may press several keys at once.

Building the project

The main goal of keyboardtest was to keep the experience simple:

• Open the website
• Start pressing keys
• See the result immediately

There is no desktop application to install and no complicated configuration.

You can try it here:

https://keyboardtest.tech

I'm continuing to improve the project and I'm particularly interested in browser compatibility, keyboard layouts, accessibility, and better ways to diagnose keyboard problems.

What I learned

The biggest lesson was that even a small browser utility can have surprisingly interesting technical details behind it.

Keyboard events are easy to demonstrate, but building a useful tool around them means thinking about different operating systems, layouts, modifier keys, simultaneous input, and user experience.

If you've built anything involving browser keyboard events, I'd be interested to hear about the edge cases you've encountered.

What keyboard-related browser feature would you add to a testing tool?