What is the difference between key and code?

event.code is the physical key position (KeyA always means the leftmost key on the home row) while event.key is what that key produces under the current layout ("a" on QWERTY, "q" on AZERTY). Use code for game controls, key for text shortcuts.

Does anything get logged?

No. Keystrokes are read by the page only — nothing is sent to a server or stored.

Will this work for media keys and function keys?

Most do, but some keys (volume, brightness, Fn-modified keys on laptops) are intercepted by the OS before the browser ever sees them.

keyboard · event.key · event.code · live · local

Inspect any keyboard event

Q: Why is keyCode deprecated?

keyCode and which are legacy numeric codes that vary by browser and layout. The modern KeyboardEvent.key and KeyboardEvent.code strings are standardized and layout-aware.

Press any key — physical, modifier, or composed — and see event.key, event.code, location, modifier state, and the legacy keyCode/which. Live history of the last 10 presses.

Keycode Info

Key

—

press any

Code

—

event.code

keyCode

—

legacy

History

presses

input · press anywhere

Press any key…

output · event details

Press any key to populate

Quick Start

How to inspect keys

Modern keyboard events carry layout-independent code, semantic key, and legacy keyCode. This tool surfaces all three plus modifier state, repeat flag, and physical location.

01
Focus the page
Click outside any input. Otherwise the typing target swallows the event.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
focusinpututf-8client-sidevalidated
focus · textpage · set
```
document.body
```
loaded · parsedclient-side
02
Press a key
Letter, modifier, function — anything fires a keydown.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
pressoptionslivememoisedtoggles
press · memoisedkey · live
```
Enter ↵
```
options set · memoisedlive
03
Read event fields
event.code is layout-independent; event.key reflects the current layout.
Randomness — where used — comes from crypto.getRandomValues, never Math.random. Heavy work sits in useMemo.
fieldscomputeinstantlocaldeterministic
code · instantKeyA · computed
```
key: "a"
code: KeyA
```
computed · instantinstant
04
Combine modifiers
Hold Ctrl/Alt/Shift/Meta to see modifier booleans flip.
Copy writes through navigator.clipboard and downloads use a Blob — zero network traffic. Same input plus same options always yield the same bytes.
modscopydownloadzero-networkreproducible
ok · copiedcombo · copied
```
Ctrl+Shift+K
```
shipped · ready to shipsuccess

Pro tips

Pro tips for everyday utilities

Reach for crypto.getRandomValues

Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.

Sort IDs lexicographically

UUID v4 has no time ordering. Use ULID or UUID v7 if you need sorted IDs.

Mock data with seeds

Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.

Reference cards beat memory

Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.

Browser APIs vary

Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.

Persist in the right place

localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.

Use Cases

When to inspect keys

Shortcut handlers, accessibility, game input.

Shortcut handlers

Pick event.code vs event.key for the right binding model. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.

CSPRNG-backed

Accessibility audits

Confirm tabindex and arrow-key handlers fire on the right key. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.

a11y

Game input

Map WASD by physical key (event.code) regardless of layout. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.

snappy

Cross-browser checks

Spot differences between Chromium, Firefox, and Safari. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.

feature-detected

Repeat detection

Use event.repeat to ignore key holds for command actions. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.

deterministic

Layout debugging

See what AZERTY or Dvorak users actually send. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.

i18n

FAQ

Frequently asked questions

event.key vs event.code?

event.key reflects the printed character (depends on layout & modifiers). event.code is the physical key position (KeyA, Digit1) — layout-independent.

Why is keyCode deprecated?

It conflated layout and physical position, was inconsistent across browsers, and was replaced by event.code in modern specs.

What is event.location?

Tells you left/right modifier (e.g., LeftShift vs RightShift) or whether the digit came from Numpad.

Why don't text inputs trigger?

Inputs absorb keypresses for editing. Click outside any input before pressing.

Does it run locally?

Yes — events are inspected in your browser only. Nothing is sent to a server.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!