A cross-platform desktop application that displays active key presses and mouse input in real time as a transparent overlay. Inspired by gaming key displays like LabyMod's key overlay in Minecraft.
- Every key captured — Any key you press appears dynamically in the overlay, no configuration needed
- Mouse input — Left, right, middle clicks and scroll wheel are visualized with distinct colors
- Timestamps — See exactly when each input occurred (HH:MM:SS.ms format)
- Hold duration — Track how long each key/button is held, with a visual progress bar
- Auto fade-out — Released inputs fade away after a configurable delay (default 2s)
- Transparent overlay — Sits on top of other windows without interfering (click-through)
- Resolution-aware scaling — Auto-scales based on screen resolution (normalized to 1080p) with adjustable scale slider (50%–200%)
- Position presets — Quickly snap the overlay to Top Left, Top Right, Bottom Left, Bottom Right, Center, or reset to default
- OBS recording mode — Companion capture window for seamless recording in OBS Studio (see Recording with OBS)
- Custom tile colors — Personalize keyboard, mouse, and scroll tile colors to match your brand or aesthetic, with a reset-to-defaults button
- Clock format — Switch between 24-hour and 12-hour (AM/PM) timestamp display
- Profiles — Save and load named profiles that store all settings (position, colors, scale, opacity, etc.) for quick switching
- Auto-updater — Notifies you on startup when a new version is available, with a manual check button in Settings
- Settings — Customizable chroma key color, tile colors, clock format, scale, tile transparency, profile management, and update checker
- System tray — Minimize to tray, toggle visibility, reposition the overlay
- Cross-platform — Works on Windows, macOS, and Linux
Coming soon
Download the latest release for your platform from the Releases page:
- Windows —
KeyVisualizer-1.1.5.Setup.exe(installer) or.zip(portable) - macOS —
KeyVisualizer.dmg - Linux —
keyvisualizer_1.1.5_amd64.debor.zip
# Clone the repository
git clone https://github.com/8PotatoChip8/KeyVisualizer.git
cd KeyVisualizer
# Install dependencies
npm install
# Run in development mode
npm start
# Package for distribution
npm run make- Windows — No special permissions needed
- macOS — Grant Accessibility permission when prompted (required for global key capture)
- Linux (X11) — Install X11 development libraries:
sudo apt install libx11-dev libxtst-dev libxt-dev libxrandr-dev - Linux (Wayland) — Add your user to the
inputgroup for/dev/inputaccess:Then log out and back in for the change to take effect.sudo usermod -aG input $USER
- Launch KeyVisualizer — it starts as a transparent overlay (initially empty)
- Press any key or click a mouse button — it appears as a tile in the overlay
- Tiles glow while held and show timestamps + hold duration
- After releasing, tiles fade out after 2 seconds
- Right-click the system tray icon to access options
| Option | Description |
|---|---|
| Show/Hide Overlay | Toggle overlay visibility |
| Edit Position | Opens the edit panel — drag the overlay to reposition, use preset buttons, or adjust scale |
| Recording Mode (OBS) | Toggle companion capture window for OBS Studio recording |
| Settings | Open the settings window (chroma key color, tile transparency) |
| Quit | Exit the application |
When you click Edit Position, a control panel appears with:
- Preset buttons — Snap the overlay to Top Left, Top Right, Bottom Left, Bottom Right, Center, or Reset to default
- Scale slider — Adjust overlay size from 50% to 200%
- Confirm — Save the new position and scale
- Cancel — Revert to the previous position and scale
The overlay border becomes a dashed blue outline in edit mode so you can see its boundaries while dragging.
| Input | Default Color |
|---|---|
| Keyboard keys | Blue glow |
| Mouse buttons (LMB, RMB, MMB) | Orange glow |
| Scroll wheel | Green glow |
All input colors can be customized in Settings.
Open Settings from the system tray menu to configure:
- Clock format — Toggle between 24-hour and 12-hour (AM/PM) timestamp display
- Scale — Adjust overlay size from 50% to 200% (also available in Edit Position panel, stays synced)
- Tile colors — Pick custom colors for keyboard, mouse, and scroll tiles with a Reset to Defaults button
- Recording background color — Choose from presets (Magenta, Green, Blue, Red, Cyan, Black) or pick a custom color for the chroma key recording window
- Opaque tiles (Overlay) — Remove transparency from tile backgrounds in the main overlay
- Opaque tiles (Recording) — Remove transparency from tile backgrounds in the recording window for cleaner chroma keying
- Profiles — Save all current settings as a named profile, load or delete saved profiles for quick switching between configurations
- Updates — See your current version, check for updates manually, and download new releases when available. The app also checks automatically on startup and shows a brief notification if an update is available.
KeyVisualizer uses a transparent overlay window, which OBS Window Capture cannot see directly. To record the overlay in OBS:
- Enable Recording Mode — Right-click the system tray icon and check Recording Mode (OBS)
- Add a Window Capture source in OBS — Select "KeyVisualizer [Recording]" from the window list
- Add a Chroma Key filter — Right-click the source in OBS → Filters → + → Chroma Key
- Set Key Color Type to Custom Color and match the color in Settings (magenta
#FF00FFby default) - Adjust Similarity and Smoothness until the background is fully removed
- Set Key Color Type to Custom Color and match the color in Settings (magenta
- The overlay will now appear with a transparent background in your recording/stream
You will still see the normal transparent overlay on your screen — the colored-background window runs in the background purely for OBS to capture.
Tip: Use Chroma Key rather than Color Key in OBS — it handles semi-transparent edges and anti-aliased borders better. If you want the cleanest possible result, enable Opaque tiles (Recording) in Settings to eliminate transparency bleed on tile backgrounds.
Tip: OBS Display Capture can also capture the transparent overlay directly without recording mode, but it captures your entire screen. Use Recording Mode when you need to capture only the overlay as its own source.
npm start # Start in dev mode with hot reload
npm run lint # Type-check with TypeScript
npm run make # Build distributable packages- Electron — Cross-platform desktop framework
- TypeScript — Type safety
- uiohook-napi — Global keyboard & mouse event capture
- electron-forge — Packaging and distribution
- electron-store — Settings persistence