KeymapKit

KeymapKit is a tool for visualizing keymaps.

It’s designed to help you share your keymaps with others on your own website. You can use it to show off your custom keymap, or to help others understand how to use a new keymap. I built it because when I bought my ErgoDox-EZ to help with my RSI, I wanted to build what I wish had existed for me when I was on the fence about making the investment – a detailed description not just that the keyboard was ergonomic, but what type of pain it specifically helped with and why.

If you also want to talk about specific key placement or provide details about your layout on your own website, KeymapKit is for you. You can provide a detailed explanation of each key, group keys together to describe them in a group (e.g. all QWERTY keys), and users can click around on the board to explore. You can write a guided tour of your map, similar to tours in Oryx, without needing approval from anyone.

See an example of everything you can do on the Complex Layout page.

To use it, install with npm as npm install @keymapkit/ui, define a layout in JavaScript, instantiate the web component on your page, and pass it your defined layout. If KeymapKit doesn’t come with a built-in model for your keyboard, you can define your own model. KeymapKit currently ships models of ErgoDox and Planck boards. If you want to see a model for a different board, please open an issue, or implement it yourself and publish it as a separate package on NPM (and let me know so I can link to it here).

Thanks for all the clicks.