Tool

Gamepad viewer and controller overlay

This is a live picture of your controller for a stream or a recording: every button lights as you press it, and the sticks and triggers move as you move them. Use it on this page, or load the bare version as a browser source in your streaming app, where it draws only the controller on a clear background.

Build your overlay address

Browser source address: Paste it into your streaming app.

https://inputconfig.com/embed/gamepad-viewer

What happens: The address opens the drawing alone, on a clear background, with the names and color you picked.

Add it to a stream

  1. Pick the button names and the highlight color above. The address under them changes to match.
  2. Copy the address.
  3. In your streaming app, add a browser source and paste the address. OBS calls it Browser.
  4. Set the source to 620 wide and 460 high, or any size with the same shape.
  5. Press a button on the controller. The overlay starts to respond after the first press.

If the overlay stays still

Climb this ladder, smallest step first:

  1. Press a button. A page sees a controller only after a press.
  2. Check it here first. If the drawing on this page responds in your normal browser, the controller and the address are fine.
  3. Capture a window instead. If the drawing responds here and not inside the streaming app, that app's built-in browser is not passing controller input to pages. Open the overlay address in a normal browser window and capture that window.

I built the bare page to the rules a browser source follows: a clear background and nothing on it but the drawing. I have not tested it in every streaming app, so treat the window capture as the fallback that always works.

What the viewer shows

Buttons, both sticks, the D-pad and both triggers, on one generic controller shape with the names you choose. It does not show a touchpad surface or motion, because a browser does not pass those to a page. To check a controller instead of showing it, use the gamepad tester.

It works. Now give it a job

A tester tells you the controller is fine. On a Mac, InputConfig is the app I make for the next step: it turns the buttons and sticks you just tested into keys, the mouse pointer, clicks and scrolling, in any app or game. It is free, and its Live Visualizer draws the same live picture inside the app, with the touchpad and motion sensors a browser does not pass to a page. Test it here, then put it to work there.

Questions

How do I show my controller on a stream?

Copy the overlay address from this page and add it to your streaming app as a browser source. It draws the controller on a clear background and lights each input as you press it.

Is this gamepad viewer free?

Yes. There is no account and no watermark, and nothing it reads from the controller is sent anywhere.

Can I change the button names and the color?

Yes. Pick PlayStation, Xbox, Switch or plain numbers, and any highlight color. The overlay address changes to match.

Related

Download InputConfig on the Mac App StoreFree. macOS 14 or later. No account, nothing leaves your Mac. Open source on GitHub.