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.
- kbd.weihangli.dev — English
- kbd.weihangli.dev/zh — 简体中文
- kbd.weihangli.dev/design — editor
- 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
enas 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.
| Area | Choice |
|---|---|
| App | Next.js 16 (App Router + Turbopack) |
| UI | React 19, Tailwind CSS 4, shadcn/ui |
| i18n | next-intl (en default, zh prefixed) |
| State | Zustand + zundo |
| Gestures | @use-gesture/react, @react-spring/web |
| Export | Browser opentype.js in apps/web/lib/export/browser/ |
| Monorepo | pnpm workspaces + Turborepo |
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
└── legacy/ # Retired NestJS API and Docker stack
A former NestJS backend (auth, cloud designs, orders, payments, admin) is kept under legacy/. The default install, dev server, and production build never load it. Restore it only if you need that stack — there is no product-mode flag.
Web-app details live in apps/web/README.md.
Requirements:
- Node.js >= 22
- pnpm 11.12.0 (
corepack enableis the usual way to pin it)
pnpm install
pnpm devThen 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).
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 # TypeScriptThird-party fonts, GLB models, images, and icons may use their own licenses — check those before redistributing.