A lightweight, high-performance on-screen keyboard overlay utility designed for web browsers. It provides real-time visual feedback of your movement inputs by rendering a classic, compact T-shaped directional pad in the bottom-right corner of the webpage.
The interface features individual, minimalist black boxes housing clean directional arrow symbols (↑, ←, ↓, →). It is engineered to monitor both standard Arrow keys and WASD layouts. Upon detection of a valid keypress, the corresponding element instantaneously transitions from a muted, dark profile to a vibrant, neon blue glow with dynamic scaling effects, offering clear and immediate verification of keyboard tracking. Crafted in pure JavaScript, it can be executed on-the-fly via the browser's developer console on virtually any webpage.
- Dual Layout Support: Maps both
WASDandArrow Keysseamlessly. - Sleek Visual Design: Features a 55px minimalist dark theme with a modern neon blue glow effect when active.
- Zero Dependencies: Pure vanilla JavaScript; requires no extensions or installations.
- Instant Removal: Automatically cleans up older instances if you run the script multiple times on the same page.
- Click-Through Setup: Engineered with
pointer-events: noneso it never blocks clicks on the actual website underneath it.
To use this GUI on any website or browser game:
- Copy the full JavaScript code from the
keystrokes.jsfile in this repository. - Navigate to the website where you want to display the keystrokes.
- Open your browser's Developer Tools by right-clicking anywhere and selecting Inspect, or by pressing
F12(Cmd + Option + Ion Mac). - Click on the Console tab.
- Paste the copied code into the console prompt line and press Enter.
- Click back onto the webpage/game screen to ensure the window has focus, and start pressing your keys!
This project is open-source and available under the MIT License.