Keybolt - Dynamic keyboard mapping & testing in browser

Keybolt is a professional-grade WebHID keyboard tester and remapping tool that dynamically detects keyboard layouts and enables real-time key visualization, mapping, and RGB config all in the browser.

Comment

💡 Inspiration

I'm a keyboard nerd. I've always loved customizing layouts and RGB effects — but most tools like VIA require desktop installation. When I discovered WebHID, the idea of configuring keyboards directly in the browser felt revolutionary.

Keybolt was inspired by the open-source usevia project. I wanted to build my own version, styled and structured the way I liked — and hopefully better in the long run.

The goal? Live keyboard mapping, testing, and RGB configuration — all in one shot, directly in the browser.

⚙️ What it does

Keybolt is a WebHID-powered tool that:

  • Detects connected keyboards and visualizes real-time key input
  • Dynamically renders custom layouts (60%, TKL, split, etc.)
  • Features a minimal, terminal-style UI with monospace fonts, dark theme, and keyboard-friendly navigation
  • Is 100% browser-based — no install, no drivers

While full key remapping and RGB write support aren't complete yet, the core testing and layout rendering work beautifully.

🏗️ How we built it

Keybolt was built with:

  • React + TypeScript + Tailwind (no Redux)
  • WebHID for low-level device communication
  • Layout and keymap rendering logic adapted from usevia
  • Custom UX design, focused on developer tools and hacker aesthetics

In the beginning, it looked pretty bad. But after a lot of iterations — and a healthy dose of buzzwords — it turned into something beautiful. ✨

🚧 Challenges we ran into

I tried to make everything work in one shot. Spoiler: it didn’t.

I attempted key remapping and RGB control over ten times with different approaches, prompts, and packet formats. Some things worked. Others failed silently. WebHID isn't the most forgiving API, and firmware compatibility varies wildly.

Getting real key input from the device felt magical. Writing back to the device? Still tricky — but I'm not giving up.

🏆 Accomplishments that we're proud of

  • Real-time keypress visualization, with proper layout detection
  • No desktop app needed — just visit the site and plug in your keyboard
  • Clean, terminal-inspired UI that feels native to keyboard power users
  • Built the whole thing from scratch using only browser tech

📚 What we learned

  • WebHID is powerful — and surprisingly underused
  • Prompting matters. A lot. I iterated on prompts 10+ times to get the layout UI just right
  • Buzzwords like “minimal chrome” and “monospace terminal aesthetic” actually helped me think about user experience
  • Live input feedback alone makes debugging mechanical keyboards easier and more fun

🚀 What's next for Keybolt – Dynamic keyboard mapping & testing in browser

  • Finish write support for full remapping and RGB configuration
  • Support layer switching, macros, and combo logic
  • Offer more customization than VIA (that's the dream!)
  • Allow exporting keymaps as QMK/VIA-compatible files
  • Package as a PWA for offline use

Built With

Share this project:

Updates