Free Online JavaScript Event KeyCode Finder & Keyboard Visualizer

Overview

A high-performance, developer-focused utility for capturing and inspecting JavaScript KeyboardEvent objects in real-time. This tool allows developers to visualize specific properties of any key press, enabling rapid debugging and development of keyboard-driven web applications.

Core Features

• Real-time Event Capture: Listens for keydown events globally and updates the UI instantly.
• Property Inspection: Displays a comprehensive list of KeyboardEvent properties, including key, code, keyCode, which, location, altKey, ctrlKey, shiftKey, and metaKey.
• Visual Key Mapping: A dynamic, clickable keyboard visualization that highlights the key currently being pressed.
• Input History Log: Keeps a rolling list of the last 10 keyboard interactions to allow for comparison between different key presses.
• One-Click Copy: Easily copy specific event details to the clipboard for use in source code.
• Clear Interaction State: A dedicated reset button to flush the current event state and history.

UI/UX Design

• Aesthetic: A minimalist, clean light-mode aesthetic using a professional color palette (Soft Indigo, Slate Grays, and crisp White background).
• Layout:
  • Header: A simple, descriptive title with a brief tool-tip helper.
  • Main Display: A high-contrast 'Hero' section displaying the primary event.key in large, legible typography.
  • Detailed Properties: A grid-based table layout below the hero section displaying all event metadata, styled with subtle border-bottoms and generous padding for readability.
  • Interactive Keyboard: A graphical representation of a standard QWERTY keyboard at the bottom of the viewport.
• Animations: Subtle CSS ease-in-out transitions for property updates and highlight effects on the virtual keyboard to ensure a responsive, high-quality feel.

Technical Implementation Guidelines

• Architecture: Must be a single, standalone HTML file containing all necessary CSS and JavaScript.
• Storage: No usage of localStorage, sessionStorage, cookies, or IndexedDB. All state must exist in memory variables.
• Modals/Alerts: Do not use browser alert() or prompt(). All notifications or dialogs must be custom-built HTML overlay components.
• Performance: Use document.addEventListener('keydown', ...) for event capturing. Ensure the DOM update loop is efficient to prevent input lag.
• Responsive Design: The keyboard visualizer must scale using CSS rem units and flex/grid containers, ensuring it remains usable from tablet to desktop viewports.
• CDN Usage: Tailwind CSS (via CDN) for styling and an icon library (e.g., FontAwesome) for UI elements are permitted.
• Accessibility: Ensure all inputs are focusable and the interface is navigable via keyboard, even while being a keyboard inspector tool.