⌨️ Realistic Keyboard Event Viewer

Three‑zone layout: main keys · editing/navigation · numpad
Press any key
event.code
—
event.key
—
event.which
—
event.keyCode deprecated
—
👁️ Double‑click to reveal
Ctrl
Shift
Alt
Meta
🔲 Virtual Keyboard (realistic 3‑zone layout)

Physical layout — highlight on press.

📋 Recent Events
Press keys to record
✓ Works offline ✓ No tracking ✓ Developer-first

📘 KeyboardEvent Properties Reference

KeyboardEvent.code represents the physical key on the keyboard. KeyboardEvent.key represents the character generated. This tool features a realistic three‑zone keyboard layout.

❓ Frequently Asked Questions

What's the difference between event.key and event.code?

key is logical, code is physical location.

Why are keyCode and which deprecated?

Inconsistent across browsers. Use key and code.

How to detect Ctrl+C or Cmd+V?

Check event.ctrlKey (or event.metaKey) and event.code === 'KeyC'.

Does this tool show numpad keys?

Yes, the numpad is on the right, exactly like a real keyboard.

Why don't some keys (e.g., Print Screen) highlight?

OS may intercept them; they're included for completeness.

How can I test arrow keys and editing keys?

They are in the middle zone, between main keys and numpad.

Is this tool mobile‑friendly?

Best with physical keyboard attached.