Try QWERTY, Dvorak, and Colemak in your browser with typing practice and an on-screen keyboard.
Selecting a layout updates the URL, so you can share a link that opens the intended layout. The simulator changes typing in its practice area; it does not change your computer's input settings.
The site opens in a warm light theme. The Light/Dark button in the header remembers your choice on this browser and applies it to the simulator and guides. It still works for the current visit if browser storage is unavailable.
On a phone or tablet, tap the keyboard docked at the bottom of the screen to explore each layout. Shift, Backspace, Space, and optional key hints work with touch; 123 switches to numbers and symbols, and ABC returns to letters. Space or the return arrow advances a completed word. A connected physical keyboard also works.
- How to Learn Dvorak
- How to Learn Colemak
- QWERTY vs. Dvorak vs. Colemak
- A History of Keyboard Layouts
Install dependencies, then run the development server:
npm ci
npm run devOpen http://localhost:3000 with your browser to see the result.
Simulator routes live in src/app/(tester)/. Article content lives in src/content/; the reading layout and guide routes live in src/app/(reading)/. Keyboard diagrams use the same mappings as the simulator.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
npm run build
npm run test:analytics
npm run test:typingThe canonical production domain is https://keyboardlayout.app/. Metadata, the sitemap, robots.txt, and analytics share src/lib/site.ts. Vercel deploys changes merged into main automatically. Preserve the configured legacy-domain redirects so existing links continue to work.
See analytics documentation for event definitions and local verification. Localhost and preview traffic are excluded from production ingestion.
A product by Experimental Software.