DEV Community

Cover image for I Built a Free Browser-Based Keyboard Testing Tool with Next.js
Chandra Sekhar Dey
Chandra Sekhar Dey

Posted on

I Built a Free Browser-Based Keyboard Testing Tool with Next.js

As developers, we often need to verify whether a keyboard is working correctly. Maybe a key has stopped responding, a mechanical switch is chattering, or you're trying to test anti-ghosting before gaming.

Most existing tools either require downloading software, contain intrusive ads, or don't provide enough information for debugging.

So I decided to build KeyboardTester.

👉 https://keyboardtest.tech

Why I Built It

The goal was simple:

No installation
No account required
Works instantly in any modern browser
Privacy-friendly (everything happens in the browser)

Whether you're a developer, gamer, IT technician, or just troubleshooting a laptop keyboard, you should be able to test every key within seconds.

Tech Stack

The project is built using:

Next.js 16 (App Router)
React 19
TypeScript
Tailwind CSS
Shadcn UI / Radix UI
Static deployment through Cloudflare CDN

The application is designed to be lightweight, responsive, and accessible.

Features

Current features include:

🎹 Interactive keyboard tester
⌨️ Real-time key highlighting
👻 Ghosting and N-Key Rollover (NKRO) testing
⚡ Multiple simultaneous key detection
📊 Key event inspector (key, code, keyCode)
⏱️ Typing speed (WPM) test
🖱️ CPS (Clicks Per Second) tester
🍎 macOS keyboard layout support
🪟 Windows and laptop keyboard layouts
Challenges

One interesting challenge was handling browser keyboard events consistently.

Different operating systems and browsers can report keys differently, especially modifier keys like:

Command (⌘)
Option (⌥)
Alt
Fn
Windows key

Making the tester behave consistently required careful handling of keyboard events across platforms.

Performance

One thing I wanted to prioritize was speed.

The site loads quickly because it's statically generated and served through a global CDN. Since processing happens locally in the browser, there are no server round trips while testing your keyboard.

What's Next?

I'm planning to add:

More international keyboard layouts
Better accessibility improvements
Additional hardware diagnostics
More typing analytics
New testing utilities
I'd Love Your Feedback

If you enjoy building developer tools or have ideas for keyboard diagnostics, I'd appreciate your feedback.

You can try it here:

https://keyboardtest.tech

Top comments (0)