Keyboard
Keycode Visualizer
Visualize JavaScript keyboard events, codes, and modifiers in real-time.
Modifiers
About Keycode Visualizer
The Keycode Visualizer is an interactive debugging tool for web inputs. It listens for keyboard activity and displays the precise event properties, including key, code, which, and modifier states like Shift or Ctrl.
Debug complex shortcuts and game controls with ease. Understanding how different browsers and operating systems handle navigation keys is vital for building accessible web apps. This tool reveals exactly what the browser sees when you press a key.
Simply press any key on your keyboard. The visualizer lights up to show the active code and any modifiers relative to standard accessibility mappings.
Under the Hood
This tool attaches a global event listener (`window.addEventListener("keydown")`) to capture `KeyboardEvent` objects. It prevents default browser actions (like `Ctrl+P` printing) for supported keys to allow testing without interruptions. The visualizer extracts properties like `key`, `code` (physical key position), `which` (legacy code), and modifier flags (`ctrlKey`, `metaKey`, `shiftKey`, `altKey`) to display the complete event state.