Keyboard Layout Visualizer
Side-by-side rendering of five major keyboard layouts (QWERTY, Dvorak, Colemak, AZERTY, Workman) with finger colour-coding and home-row indicators. Paste any text to see how the keystrokes distribute across your fingers on each layout. 100% offline.
What is the Keyboard Layout Visualizer?
Keyboard Layout Visualizer renders five major keyboard layouts at full size with finger-by-finger colour coding and home-row markers: QWERTY (US, 1873) — Sholes & Glidden's universal default; Dvorak (1936) — August Dvorak's optimised vowels-under-left-home-row layout; Colemak (2006) — Shai Coleman's modern minimum-relocation refresh; AZERTY (1907) — the French national variant of QWERTY; and Workman (2010) — OJ Bucao's bias toward stronger fingers. Each key is colour-coded by which finger should type it (pinkies red/pink, indexes green/cyan, thumbs gray) and the home-row keys are marked with a dot. A finger-load analyser takes any sample text and counts how many keystrokes each finger would make on the chosen layout, showing per-finger percentages, home-row hit rate, and strong-finger (index + middle) load. Useful for evaluating alternative layouts before committing to relearning your typing.
How to use it
- Pick a layout from the picker (QWERTY default).
- Hover over any key to see which finger types it.
- Paste your sample text — code, prose, your typical input — into the finger load analyser.
- Compare the per-finger keystroke percentages across layouts by switching between them.
Benefits
- Five layouts rendered at full size with accurate physical-key positions.
- Finger-by-finger colour coding (8 fingers + thumbs) — instantly see typing zones.
- Home-row markers on each layout's home row.
- Finger-load analyser counts keystrokes per finger on any sample text.
- Home-row hit rate and strong-finger (index + middle) percentage at the top.
- Compare layouts by switching the picker — the analysis re-runs instantly.
- Live histogram with per-finger bars sized by load percentage.
- Tooltip on hover shows which finger should type each key.
- Runs 100% in your browser — Toollyz has no server.
Frequently asked questions
What's a 'finger load'?
How many keystrokes a particular finger has to make for a given text. A balanced layout spreads load across all fingers; an unbalanced layout overworks pinkies or skips the home row. Sub-50% home-row hit rate is the classic QWERTY pain point that Dvorak / Colemak / Workman were designed to fix.
Why is Dvorak supposed to be more efficient?
Dvorak put the most-used English letters on the home row, vowels under the left hand and consonants under the right. Result: ~70% home-row hit rate vs ~30% for QWERTY on English text. Real-world speed gains are modest because skilled typists hit ~80 WPM regardless.
What's the catch with Dvorak / Colemak?
Re-learning takes 1-3 months of frustrating typing. Most macOS / Windows / Linux systems have these layouts built in — switch via Settings. But shared computers, programming muscle memory and shortcut keys all stay in QWERTY land.
Is Workman better than Colemak?
Subjective. Workman biases load toward index + middle fingers (the strong ones), which feels comfortable. Colemak preserves more QWERTY positions (less to relearn). Different people prefer different trade-offs.
Why is AZERTY here?
It's the French national keyboard layout — and the universal default in France. Different special-character placement than QWERTY but uses the same physical keyboard.
What's the finger-load colour coding mean?
Each key is shaded with the colour of the finger that should type it: left pinky red, left ring orange/yellow, left middle yellow, left index green, right index cyan, right middle blue, right ring purple, right pinky pink, thumbs gray. The home-row markers are dots in the middle of those keys.
Does the analyser handle shift / numbers / punctuation?
Currently only the base (unshifted) characters. Shifted characters and digits / punctuation rows are visible on the keyboard but not counted by the analyser. A future version may add a 'with shift modifier' mode.
Why aren't Cyrillic / CJK layouts included?
We focus on Latin-script keyboards. Non-Latin layouts have entirely different physical key arrangements and would warrant a separate tool.
Can I add a custom layout?
Not via the UI — the layouts are static data. Fork the GitHub repo to contribute additional layouts.
How do I switch to a different layout on my computer?
macOS: System Settings → Keyboard → Input Sources → +. Windows: Settings → Time & Language → Language → Options → Add a keyboard. Linux: depends on desktop — Settings → Region & Language → Input Sources.
Is anything uploaded?
No. Rendering and analysis run entirely in your browser.