Picture of kb layout manager

kb layout manager

Published March 18, 2018

In the interest of productivity and ergonomics, I built a mechanical keyboard from scratch, and coded the firmware from the ground up as well. A primary motivation was to be able to remap keys where they are most convenient to type. The keyboard was easy enough to reprogram on the fly, but changing key mappings in C source code was cumbersome to the point where I would never bother changing anything!

Of course, the only reasonable solution is to overengineer a web interface for it. kb layout manager is the result.


The frontend is powered by Vue.js, featuring a skeumorphic HTML5/CSS3 rendering of the keyboard (no canvas needed!). The face of each key is made of <input> and <select> elements, and keys are colored according to their mapped function. The page supports viewing and modifying multi-layer layouts. There are controls at the bottom for saving the C source file, or even for flashing to the keyboard directly.

The direct flashing works by way of a websocket on the backend, listening for input from the frontend. When requested, the backend calls out to the C compiler and Teensy CLI flashing tool to reprogram a connected keyboard.

live demo

I host a live demo of the layout manager here. The ability to compile and reflash a keyboard is disabled, since the backend is running on a server without a keyboard attached. I've considered allowing it to at least compile and serve the resulting .hex binary, but I'm not sure I want to run free compilation as a service for the public! If you're interested in trying those features out, you can always run it locally on your own computer.