Keyboard Designer
English | 简体中文
Keyboard Designer is a browser-based keycap editor. Open it, pick a layout, paint colors and legends, then export PNG, SVG, JSON, or production jig files — no sign-up, no backend, no cloud storage.
The app is already deployed on Vercel. Open kbd.weihangli.dev in your browser to try it — no install required.
What it does
- Live editor — drag to pan, box-select keys, and preview every color, legend, and icon as you edit.
- Layouts — built-in ANSI 60% / 68% / 81% / TKL 87 / 104 / 108 / 144 layouts, driven by JSON.
- Layers — stack keycap color and style overrides, then manage them from the layer panel.
- Keycap styling — legends, fonts, weight, solid colors, gradients, borders, padding, and alignment.
- Batch edit — change many keys at once after a box or multi-select.
- Canvas artwork — drop images onto the board, transform them, and layer them with the keys.
- Undo / redo — full history in the current session (
Ctrl/⌘ + Z / Y).
- Exports — PNG, SVG (text outlined in the browser with opentype.js), JSON, and jig SVG. No API call.
- Session fonts — load TTF/OTF for the current tab; they live in memory and disappear on refresh.
- English / 简体中文 — UI locale with
en as the default.
There is no account, user center, or admin console. Design state exists only in the current browser tab. Refresh, close the tab, or crash the browser and unsaved work is gone. Save by exporting JSON and keep those files in your own backup flow.
The product does not need API, PostgreSQL, Redis, Prisma, JWT, email, object storage, or payment configuration.
Tech stack
Repository layout
keyboard-designer/
├── apps/
│ └── web/ # Next.js product (home + /design editor)
├── packages/
│ ├── ui/ # Shared shadcn/ui components and styles
│ ├── eslint-config/ # Shared ESLint config
│ └── typescript-config/ # Shared TypeScript config
└── artifacts/ # Blender sources and video assets
A former NestJS backend (auth, cloud designs, orders, payments, admin) and its frontend pages have been removed from this repository. The last full-stack snapshot is archived at the git tag v0-fullstack-archive.
Web-app details live in apps/web/README.md.
Run locally
Requirements:
- Node.js >= 22
- pnpm 11.12.0 (
corepack enable is the usual way to pin it)
pnpm install
pnpm dev
Then open:
http://localhost:3000 — marketing home (English)http://localhost:3000/zh — marketing home (简体中文)http://localhost:3000/design — editorhttp://localhost:3000/zh/design — editor in 简体中文
No backend process and no environment variables are required. The editor is desktop-first (≥ 768px).
Scripts
From the repo root:
pnpm dev # Next.js dev server
pnpm build # production build
pnpm start # serve the production build
pnpm lint # lint
pnpm test # unit tests
pnpm typecheck # TypeScript
License
MIT License.
Third-party fonts, GLB models, images, and icons may use their own licenses — check those before redistributing.
