Skip to content

Keycode Viewer

Show key code and key values for any keypress

Updated

What is the Keycode Viewer?

The Keycode Viewer is a free, browser-based tool that captures and displays keyboard event properties as you press any key. Whether you are debugging keyboard shortcuts, building game controls, or implementing form validation, this tool shows you exactly what your browser reports for every key press.

What Does the Keycode Viewer Do?

When you press a key, the browser generates a KeyboardEvent object with multiple properties. This tool captures those events in real time and displays:

  • event.key – The value of the key pressed (e.g., "a", "Enter", "ArrowUp")
  • event.code – The physical key position (e.g., "KeyA", "Enter", "ArrowUp")
  • event.keyCode – Legacy numeric code (deprecated but still widely used)
  • event.which – Legacy property for cross-browser compatibility
  • event.charCode – Character code for printable keys
  • event.location – Distinguishes left, right, and numpad keys (0=standard, 1=left, 2=right, 3=numpad)
  • event.repeat – Whether the key is being held down
  • event.isComposing – Whether IME (Input Method Editor) composition is active
  • Modifier states – shiftKey, ctrlKey, altKey, and metaKey flags

Why Use This Tool?

Keyboard event handling can be confusing because different properties serve different purposes:

  • event.key is what the user typed – it changes with keyboard layout (e.g., pressing the key where "A" lives on QWERTY produces "a" on US English but might produce something else on AZERTY).
  • event.code is where the user pressed – it is layout-independent and identifies the physical key (e.g., "KeyA" always refers to the same physical location regardless of layout).
  • event.keyCode is a legacy numeric identifier that is deprecated but still appears in older codebases and some frameworks.

This tool helps you:

  • Debug keyboard shortcuts – Find the correct event.code or event.key value to use in your JavaScript event listeners.
  • Build games – Use event.code for layout-independent controls that work across different keyboard layouts.
  • Implement form validation – Check which keys are being pressed and whether modifier keys are active.
  • Test cross-browser behavior – Verify that keyboard events behave consistently across different browsers and operating systems.
  • Distinguish modifier keys – See the difference between left Shift, right Shift, and numpad keys using the location property.
  • Handle special keys – Identify function keys (F1-F12), navigation keys (ArrowUp, Home, End), and special keys (Enter, Escape, Tab).

Key Features

  • Real-time capture – See event properties instantly as you press keys.
  • Event type toggle – Switch between keydown and keyup event capture modes.
  • Event history – Keep track of the last 20 key presses with timestamps.
  • Copy individual values – Click to copy event.key, event.code, or any property.
  • Export as JSON – Download the current event or entire history as a JSON file.
  • Modifier key display – Shows which modifier keys (Shift, Ctrl, Alt, Meta) are active.
  • Location detection – Identifies whether a key is on the left, right, or numpad.
  • Repeat detection – Shows whether a key is being held down and auto-repeating.
  • Built-in reference – Property explanations help you understand what each value means.

Who Should Use This Tool?

  • Web developers debugging keyboard event handlers and shortcuts.
  • Game developers implementing keyboard controls that work across different layouts.
  • QA testers verifying keyboard input behavior in web applications.
  • Students learning about DOM events and keyboard handling in JavaScript.
  • Accessibility engineers testing keyboard navigation and focus management.

No Installation Required

This tool runs entirely in your browser with no installation, no sign-up, and no data sent to servers. All processing happens locally on your device, and your event history is cleared when you close the page.

Getting Started

  1. Click anywhere on the page to ensure it has focus.
  2. Press any key on your keyboard.
  3. View the event properties displayed in real time.
  4. Use the toggle to switch between keydown and keyup modes.
  5. Check the event history to compare multiple key presses.
  6. Copy or export values as needed for your development work.

How it works

The Keycode Viewer captures keyboard events from your browser and displays all relevant properties in a structured, easy-to-read format. Here is a step-by-step breakdown of how it works.

1. Event Listener Registration

When the tool loads, it registers two event listeners on the window object:

window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);

These listeners wait for keyboard events and trigger callback functions whenever you press or release a key.

2. Event Type Selection

The tool provides a Capture Mode toggle that lets you choose between:

  • Keydown – Captures events when a key is pressed down (most common for shortcuts and game controls).
  • Keyup – Captures events when a key is released (useful for detecting key release timing or implementing hold-to-activate mechanics).

Only the selected event type is captured and displayed.

3. Event Data Extraction

When a keyboard event is detected, the tool extracts all relevant properties from the KeyboardEvent object:

Property Description Example
event.type The event type ("keydown" or "keyup") "keydown"
event.key The value of the key pressed "a", "Enter", "ArrowUp"
event.code The physical key position "KeyA", "Enter", "ArrowUp"
event.keyCode Legacy numeric code (deprecated) 65 for "A"
event.which Legacy cross-browser property 65 for "A"
event.charCode Character code for printable keys 97 for lowercase "a"
event.location Key location (0=standard, 1=left, 2=right, 3=numpad) 1 for left Shift
event.repeat Whether the key is being held down true or false
event.isComposing Whether IME composition is active true or false
event.shiftKey Shift modifier state true or false
event.ctrlKey Control modifier state true or false
event.altKey Alt modifier state true or false
event.metaKey Meta/Command modifier state true or false

4. Data Display

The extracted data is displayed in several sections:

Key Identity

  • Key (event.key) – The primary value shown in large, emphasized text.
  • Code (event.code) – The physical key identifier.
  • Description – A human-readable explanation (e.g., "Letter 'A' key", "F1 function key").

Legacy Properties

  • keyCode, which, charCode – Displayed for compatibility with older codebases, though these are deprecated.

Event Metadata

  • Location – Formatted as "Standard", "Left", "Right", or "Numpad".
  • Repeat – Shows "Yes" or "No" based on whether the key is being held.
  • Composing – Indicates IME composition state.

Active Modifiers

  • Displays all active modifier keys (e.g., "Shift + Ctrl").
  • Provides a copy button to quickly copy the modifier state string.

Individual Property Copies

  • Separate copy buttons for event.key and event.code values.
  • Click to copy the exact string to your clipboard.

Export Options

  • Copy event as JSON – Copies the entire event object as formatted JSON.
  • Download as JSON – Saves a .json file with the event data.

5. Event History

The tool maintains a history of the last 20 events with:

  • Event type badge (keydown or keyup).
  • Key and code values.
  • Timestamp showing when the event occurred.
  • Key properties (keyCode, location, repeat, modifiers).
  • Individual copy button for each event as JSON.

You can toggle the history display on or off using the Show event history switch.

6. Cleanup and Memory Management

When the component unmounts (you navigate away), all event listeners are properly removed:

return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
};

This prevents memory leaks and ensures the tool does not interfere with other pages.

7. Error Handling

The tool validates event data and displays errors if something goes wrong:

  • Empty key or code values trigger error messages.
  • Invalid data is caught and displayed via an alert component.
  • The tool continues to work even if one event fails validation.

8. Browser Compatibility

The tool works in all modern browsers that support the KeyboardEvent interface:

  • Chrome, Edge, Firefox, Safari (latest versions)
  • Works on Windows, macOS, Linux, and ChromeOS
  • Supports both physical and virtual keyboards

Note: Mobile and virtual keyboards may behave differently. According to the W3C specification, virtual keyboards should report keyCode as 229 and key as "Unidentified" during IME composition, though browser implementations vary.

9. Privacy and Data Handling

  • No data is sent to servers – All processing happens locally in your browser.
  • No persistent storage – Event history is cleared when you close the page.
  • Nothing collected – The tool does not collect or store your keystrokes.

Technical Implementation

The tool is built with:

  • React – For the interactive UI component.
  • TypeScript – For type-safe event handling and data structures.
  • Pure utility functions – All event extraction and formatting logic is in utils.ts (no DOM dependencies).
  • Shared UI components – Uses the design system's Stat, CopyButton, DownloadButton, SegmentedControl, and other primitives.

This separation ensures the logic is testable, reusable, and easy to maintain.

Examples

Detect letter key press

Press the "A" key to see its event properties including key, code, and keyCode values.

Press the "A" key on your keyboard
 
Key: "a", Code: "KeyA", keyCode: 65, Location: Standard

Identify function key codes

Press F1-F12 keys to find their JavaScript key codes for implementing keyboard shortcuts.

Press the "F1" function key
 
Key: "F1", Code: "F1", keyCode: 112, Location: Standard

Check modifier key combinations

Press Ctrl+Shift+K to see which modifier keys are active and their combined state.

Press Ctrl+Shift+K simultaneously
 
Key: "K", Code: "KeyK", Modifiers: Ctrl + Shift, Location: Standard

Distinguish left/right modifier keys

Press left Shift vs right Shift to see how location property distinguishes them.

Press the left Shift key, then the right Shift key
 
Key: "Shift", Code: "ShiftLeft", Location: Left (1) / Right (2)

Debug numpad key events

Press numpad keys to see their location property and distinguish them from number row keys.

Press the "5" key on the numeric keypad
 
Key: "5", Code: "Numpad5", keyCode: 101, Location: Numpad (3)

Frequently asked questions

What is the difference between event.key and event.code?

event.key represents the value of the key pressed, which can change based on keyboard layout and modifier keys. For example, pressing the "A" key produces "a" normally but "A" when Shift is held. event.code represents the physical key position on the keyboard, which remains constant regardless of layout or modifiers. Pressing the same physical key always produces "KeyA" whether you are on QWERTY, AZERTY, or any other layout. Use event.key when you care about what the user typed (e.g., text input). Use event.code when you care about which physical key was pressed (e.g., game controls, keyboard shortcuts).

Why is keyCode deprecated and should I still use it?

The keyCode property was deprecated in the DOM Level 3 Events specification because it is numeric, non-intuitive, and inconsistent across browsers. The modern standard recommends using event.key and event.code instead. However, keyCode is still widely used in existing codebases and some older frameworks, so this tool displays it for compatibility and debugging purposes. For new projects, you should use event.code for physical key detection and event.key for character input.

What does the location property tell me?

The location property distinguishes between multiple instances of the same key on a keyboard:

  • 0 (Standard) – Key is not on the left, right, or numpad (e.g., letter keys, most function keys).
  • 1 (Left) – Key is on the left side (e.g., left Shift, left Control, left Alt).
  • 2 (Right) – Key is on the right side (e.g., right Shift, right Control, right Alt, numpad Enter).
  • 3 (Numpad) – Key is on the numeric keypad (e.g., Numpad0 through Numpad9, NumpadAdd, NumpadEnter). This is useful when you need to distinguish between, for example, left Shift and right Shift, or when implementing separate numpad controls in a game.

How do I detect modifier key combinations?

The KeyboardEvent object has four boolean properties for modifier keys:

  • shiftKey – Shift is pressed
  • ctrlKey – Control is pressed
  • altKey – Alt (or Option on Mac) is pressed
  • metaKey – Meta (Windows key or Command on Mac) is pressed The Keycode Viewer displays these as a combined string (e.g., "Ctrl + Shift"). To detect a specific combination in your code:
document.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.shiftKey && event.key === "K") {
// Ctrl+Shift+K was pressed
}
});

What does the repeat property indicate?

The repeat property is true when a key is being held down and the browser is auto-repeating the keydown events. It is false for the initial keydown event and for all keyup events. This is useful for:

  • Game development – Distinguish between a single tap and a held key for continuous movement.
  • Form validation – Prevent validation from triggering repeatedly while a key is held.
  • Performance optimization – Skip expensive operations on repeated events. Example:
document.addEventListener("keydown", (event) => {
if (event.repeat) return; // Ignore auto-repeated events
// Handle only the initial key press
});

Why do some keys show different values on different keyboards?

Keyboard layout affects the event.key value but not the event.code value. For example:

  • On a US QWERTY keyboard, pressing the key where "A" lives produces key: "a" and code: "KeyA".
  • On a French AZERTY keyboard, the same physical key produces key: "a" and code: "KeyA" (code is the same), but the key in a different position might produce different keys. This is why event.code is preferred for game controls and shortcuts – it ensures the same physical key always triggers the same action regardless of the

Related tools

More utilities you might find handy.

Developer

.env File Generator

Quickly generate clean, properly-quoted .env files from key-value pairs — no more quoting errors or broken deployments.
Developer

.htaccess Redirect Builder

Generate error-free Apache .htaccess code for 301 redirects, HTTPS enforcement, and canonical URL routing.
Developer

ASCII Converter – Text to ASCII, Hex, Binary & Back

Convert text to ASCII codes and decode back in decimal, hex, binary, or octal — live, private, and 100% browser-based.