Input Visualizer

Quick start

1. 1
   Connect your controller. Plug it in over USB, or pair it over Bluetooth in your device settings first.
2. 2
   Press any button first. Browsers will not notice a controller until they see its first input.
3. 3
   Pick a layout style and a colour theme. Choose whichever reads most clearly for your screen size or recording setup.
4. 4
   Play normally. The display updates live, and the input log below builds a running history you can scroll back through.

Live display

What this is for

The main Gamepad Tester on this site is built for diagnosis, raw button indices, exact axis values down to three decimal places, every signal a worn or faulty controller might be hiding. This page is built for the opposite situation, when the hardware is fine and you just want a clean, legible, good looking display of what you are pressing, for a stream overlay style recording, for studying your own execution back after a tricky sequence, or for showing someone else exactly what input led to a particular result without them needing to read raw numbers at all.

Where the tester favours precision, this favours clarity at a glance and at a distance, including from across a room if you are filming a phone or tablet screen rather than sitting close to a monitor.

How to read the display

Layout, compact versus large

Compact keeps the full controller outline visible at once, which suits most desktop and tablet screens comfortably. Large increases the scale of every element, intended for situations where the display itself will be filmed from a distance, projected, or viewed on a small phone screen where compact details would otherwise be hard to make out.

Theme

Light and dark are straightforward visual preferences to match whatever background you are working against. Green screen fills the entire stage with a flat solid green specifically so it can be keyed out cleanly in video editing software or streaming tools that support chroma key, leaving just the controller graphic floating over whatever footage sits behind it.

The input log

Every button press is recorded the moment it happens, newest entry at the top, so you can scroll back through a sequence after the fact rather than needing to catch everything live. This is particularly useful for reviewing a fast input sequence in something like a fighting game or a speedrun trick, where the live display moves faster than the eye can comfortably track in the moment.

Using this for recording or streaming

For a screen recording or stream overlay, the green screen theme paired with the compact layout tends to crop and key out the most cleanly, since it removes the page background entirely and leaves only the controller shapes themselves against a flat colour. Frame just the stage area in your capture or browser source rather than the whole page, so the surrounding guide text and panels stay out of frame.

If you are filming a physical screen rather than capturing the browser directly, for instance recording a phone propped up next to your setup, the large layout and either the light or dark theme depending on your filming conditions will generally read more clearly on camera than the compact layout, since fine detail tends to lose definition once it has gone through a camera lens and back.

Connecting by device

Windows and Mac

Plug in over USB, or pair over Bluetooth in your system settings first. Chrome, Edge, and Firefox all support the controller out of the box once it is paired.

Android phone and tablet

Pair the controller in your device's Bluetooth settings, then open this page in Chrome. Other Android browsers vary in their support.

iPhone and iPad

Pair an MFi or Bluetooth controller in Settings, then open this page in Safari. iOS has supported the same Gamepad API since version 14.5.

Linux

Plug in over USB or pair over Bluetooth, then use Chrome or Firefox. Some distributions need a one time udev rule for certain Bluetooth controllers to be recognised by the operating system at all. If the controller is not visible at the system level, it will not be visible here either.

Troubleshooting

The display looks too small or too detailed on my screen

Switch to the large layout, which scales every shape up and simplifies what needs to be resolved at a glance, particularly helpful on phone sized screens or when filming from a distance.

Green screen keying still shows a faint background

Make sure your capture or browser source is cropped tightly to the stage area only, and check your keying tool's similarity or tolerance setting, since a too narrow tolerance can leave a thin fringe of the original colour around the edges of each shape.

The input log fills up faster than I can read it

That is expected during fast sequences. The log is meant to be scrolled back through after the fact rather than read in real time during rapid input, similar to how you would review a replay rather than narrate it live.

Nothing happens when I connect a controller

Press a button first. Many browsers will not register a controller until they see its first input.