This JavaScript key code viewer shows the exact values your browser reports for a keyboard event: event.key, event.code, the legacy keyCode and which, plus the state of the modifier keys. Press any key and the panel updates instantly, so you can look up the value you need while building keyboard shortcuts, hotkeys or a custom key handler. It is the fastest reference for anyone who has ever asked what keyCode is Enter or what event.code the right arrow reports.
Modern web code should prefer event.key and event.code over the deprecated keyCode property. event.key gives you the character or named value, such as a, Enter or ArrowUp, and it respects the active keyboard layout. event.code gives you the physical position on the keyboard, such as KeyA or ArrowUp, which stays the same regardless of layout. This viewer shows both side by side so you can pick the right one for your use case, whether you are matching a shortcut by meaning or by physical position.
The legacy keyCode and which values are still included because a lot of older tutorials and libraries reference them. They are shown for completeness, but the panel makes clear that they are deprecated so you do not build new code on top of them. The modifier readout tells you whether Ctrl, Shift, Alt or Meta were held at the moment of the event, which is essential when you are detecting combinations like Ctrl and S or Cmd and K.
Because the tool captures raw DOM keyboard events, it doubles as a quick way to debug an unexpected shortcut. If a key combination is not firing in your own app, press it here first to confirm what the browser actually reports, then compare that against the condition in your handler. Everything runs locally in the browser, so no keystrokes leave your machine, and you can keep the page open as a scratchpad while you write your event code.
How to use the key code viewer
- Click the capture panel to give it keyboard focus.
- Press any key or key combination you want to inspect.
- Read the reported event.key, event.code, keyCode and which values.
- Check the modifier row to see whether Ctrl, Shift, Alt or Meta were held.
- Copy the value you need straight into your own keyboard handler.
Frequently asked questions
Should I use event.key, event.code or keyCode?
Use event.key when you care about the character or named action, and event.code when you care about the physical key position. Avoid keyCode in new code: it is deprecated and inconsistent across browsers. This viewer shows all of them so you can choose the right property.
What is the difference between event.key and event.code?
event.key reflects the logical value produced, which changes with the keyboard layout, so the same physical key can report different keys. event.code reflects the physical key position and does not change with layout, which makes it better for position-based shortcuts like WASD movement.
Why is keyCode deprecated?
keyCode returns numeric values that were never fully standardized and differ between browsers and platforms, especially for punctuation. The modern key and code properties replaced it. The value is still displayed here for reference with older code, but you should not rely on it for new work.
More hardware tests
Keep checking your gear with the rest of the MyGearCheck suite: