Typing Layout Visualizer – QWERTY, Dvorak, Colemak
Compare standard keyboard layouts side-by-side. Click keys to see characters. Useful for learning alternative layouts.
UD5 Toolkit
Inspect key, code, keyCode, and all event properties in real-time.
| event.key | — |
| event.code | — |
| event.keyCode | — |
| event.which | — |
| event.charCode | — |
| event.location | — |
| event.repeat | — |
| event.isComposing | — |
| event.type | — |
| event.timeStamp | — |
No events recorded yet. Press any key to start.
event.key returns the character or name of the key (e.g., "a", "Enter", "ArrowUp"). It reflects what the user sees printed on the key cap. This is the modern, recommended property.
event.code returns the physical key identifier (e.g., "KeyA", "ArrowUp", "ShiftLeft"). It's tied to the physical position on the keyboard, regardless of layout. Use this for game controls or when you need location-specific detection.
event.keyCode is a numeric code (e.g., 65 for A, 13 for Enter). It is deprecated and should be avoided in new code. It was inconsistent across browsers and keyboard layouts.
keyCode was deprecated because it was browser-inconsistent, didn't handle international keyboard layouts well, and couldn't distinguish between physical keys. For example, pressing the semicolon key (;) on a US keyboard produced keyCode 186, but the same physical key on a German keyboard produced a different code. The newer event.code and event.key properties solve these issues.
event.repeat.event.code is typically empty.event.location indicates where on the keyboard the key is physically located:
0 – Standard key (most keys)1 – Left-side modifier (e.g., left Shift, left Ctrl)2 – Right-side modifier (e.g., right Shift, right Ctrl)3 – Numeric keypadThis is especially useful when you need to distinguish between left and right Shift/Ctrl/Alt keys.
event.code may be empty or return generic values. For reliable cross-device input handling, consider using input or change events on form fields, or use event.key with a fallback for desktop-specific features.
event.ctrlKey, event.metaKey, event.altKey, event.shiftKey. For example, to detect Ctrl+C: if (event.ctrlKey && event.key === 'c') { ... }. On Mac, users expect Cmd+C, so check event.metaKey as well for cross-platform support.
event.isComposing returns true when the user is in the middle of composing text using an Input Method Editor (IME), such as typing Chinese, Japanese, or Korean characters. During composition, you typically want to ignore keyboard events until the composition is complete (when isComposing becomes false), to avoid handling incomplete input.
Compare standard keyboard layouts side-by-side. Click keys to see characters. Useful for learning alternative layouts.
Write a JavaScript snippet and get a ready‑to‑drag bookmarklet link. With minification and encoding. Easy browser tools.
Animate text that looks like it's being decoded or scrambled before settling on the final word. Copy the JS snippet.
Drop a PDF and extract any embedded JavaScript or form actions. Check for malicious code. Privacy‑friendly analysis.
Build a complete Event structured data with performer, location, and dates. Get Google‑ready JSON‑LD for tickets.
Paste JavaScript and catch syntax errors instantly with line numbers. Lightweight pre‑commit check. Local.
Watch a simulation of how the JavaScript event loop handles synchronous code, microtasks, and macrotasks. Learn async.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Fill in event details and generate 'Add to Calendar' links for Google, Outlook, and Yahoo, plus a downloadable .ics file.
Connect your MIDI keyboard and see pressed notes visually on a piano roll. Check velocity, channel, and aftertouch. No DAW needed.
Input any JavaScript object and see if structuredClone can deep‑copy it. Compare with JSON.parse/stringify. Learn transferables.
Touch the screen and see the exact coordinates, radius, and force of each touch point. Indispensable for mobile web devs.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Choose Babel presets (env, React, TypeScript) and plugins. Get a clean babel.config.json to transpile your code. Local tool.
Write JavaScript code and see the output or console.log results immediately. Safe iframe sandbox. For quick experiments.
Paste any JavaScript snippet and get a ready‑to‑drag bookmarklet link. Minify and encode automatically. Pure client.
Press any key and see it light up on a standard QWERTY layout. Check functionality or demonstrate shortcuts.
Convert any text into JavaScript‑style \uXXXX escape sequences and vice versa. Handles emojis. Useful for i18n development.
Plan a party or event budget by category (venue, food, decorations). See total and cost per guest. Export summary.
Paste any JavaScript expression and see its evaluated type and value. Understand JS coercion and type quirks. Educational.
Enter a URL and extract tab‐index order violations and focusable elements. Quick accessibility audit. Client‑side fetch.
Type any condition and see the result of the ternary operator. Understand truthy/falsy values. Quick learning tool.
Create a personal countdown to any future date (birthday, vacation, launch). Shows days, hours, minutes, seconds. Locally stored.
Play a virtual piano keyboard using mouse or computer keys. Sustain and octave control. Record and play back your tune.
Press keys on your physical keyboard and see them highlighted on a virtual keyboard. Detects multi-key rollover. Quick hardware check.
Press any key to see the corresponding JavaScript event key, code, and keyCode. An essential debugging tool for front-end developers handling keyboard input.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Make your JavaScript code more readable with this online beautifier. Format and indent JS automatically. Works entirely in your browser, protecting your code privacy.