Free Online Keyboard Keycode & Event Viewer

A professional-grade, browser-based utility designed for web developers to debug, test, and analyze keyboard events in real-time. This tool eliminates the need for boilerplate test scripts, allowing instant verification of key-event properties.

Core Features

• Real-Time Capture: Captures keydown, keyup, and keypress events instantly.
• Comprehensive Data Display: Displays all relevant event object properties: key, code, keyCode, charCode, which, location, repeat, and modifier statuses (Shift, Ctrl, Alt, Meta).
• Event History Log: A persistent-during-session table showing the most recent keystrokes in a First-In-First-Out (FIFO) list.
• Clear Action: A dedicated button to wipe the event log without reloading the page.
• Focus Management: Visual indicator when the capture area is active versus inactive.

UI Layout

• Header: Minimalist navigation bar with the tool title and a short, descriptive subtitle.
• Main Capture Stage: A large, centered "input" area that prompts the user to "Press any key to start testing". This area acts as the focus point for keyboard input.
• Results Dashboard: A structured data grid below the input area featuring clear labels and highlighted values. It includes a table for recent event history.
• Responsive Design: The input area scales with the viewport, ensuring usability on tablets and smaller laptop screens.

Design System & Aesthetics

• Palette: A professional light-mode aesthetic using a primary deep blue (#2563eb) for accents, off-white background (#f8fafc), and clean, legible sans-serif typography (Inter or system-stack).
• Transitions: Smooth, subtle fades (0.2s duration) for UI interactions, such as highlighting new event entries in the log.
• Shadows: Soft, layered box-shadows to provide depth to the input area without appearing heavy or cluttered.

Technical Implementation Directives

• Constraint Compliance:
  • The application must be contained in a single HTML file (HTML, CSS, JS).
  • STRICTLY NO STORAGE: Do not use localStorage, sessionStorage, cookies, or any persistent storage. State must exist only in memory during the browser session.
  • NO ALERTS: Use non-blocking custom UI components for user feedback.
  • External Libraries: Only use CDN links for Tailwind CSS (via a <script> or <link>) or similar utility-first CSS frameworks for rapid, consistent styling.
• Iframe Sandboxing: Must be compatible with an allow-scripts sandbox, avoiding any operations that trigger DOMExceptions (e.g., accessing blocked APIs or localStorage). All JavaScript logic should be vanilla and event-driven.