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.
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.