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:

preview2-v2.mp4

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.