live demo

https://jaroslaw-weber.github.io/keyfab/

what is this project

this project is for quickly creating and sharing good looking custom keyboard layout designs.

video preview:

https://github.com/jaroslaw-weber/keyfab/assets/9774233/e541dc41-a00d-4952-b22f-a5c2f22aaebf

screenshots:

it's similar concept as http://www.keyboard-layout-editor.com/ but more easy to use.

features

physical layout

• predefined layouts (piantor/moonlander/...) keyboard types
• change physical layout of the keyboard with shortcuts
• change physical layout by editing yaml in browser
• import/export layouts

input mode

• quick label input (just click and type)
• speed up with "select on focus" and "tab to next key" features

global style

• endless flexibility in styling (use css to create custom styles)
• ready to use styles
• edit layer name
• change layer count
• batch change key style
• custom fonts through css
• advanced css editor

share

• share features with others!
• explore layouts created by other users
• import / export layouts to JSON

dev mode on local machine

Run:

npm run dev

Open http://localhost:3000 with your browser to see the result.