Guide
How to add a controller overlay to OBS
Show every button press, stick movement and trigger pull on your stream. It takes about a minute and you do not need to install anything.
Step 1
Connect your controller
Plug your controller in with a cable or pair it over Bluetooth with the PC that runs OBS. Xbox, PlayStation, Switch Pro and most third-party pads all work, as long as Windows sees them as a game controller.
Step 2
Create an overlay
Open gamepad.lol and choose Create an overlay. You do not need an account to start: an anonymous overlay stays up for 7 days, and you can sign in later to keep it for good.
Pick the skin that matches your controller. The preview reacts to your controller as soon as you press a button.
Step 3
Make it fit your scene
Change the idle, pressed and accent colors, toggle button labels and set the overlay size. If a stick drifts and twitches while you are not touching it, raise the stick deadzone a little.
Drag any element in the preview to move it, or hide the parts you do not need. Save when you are happy; you can come back and change everything later.
Step 4
Add it to OBS as a Browser Source
Copy the Browser Source URL from your overlay. In OBS, click the plus button under Sources, choose Browser, give it a name and press OK.
Paste the link into the URL field and set the width and height to match your overlay (800 × 500 by default). Leave the custom CSS box in OBS alone; the background is already transparent.
Browser Source
Step 5
Press a button
Browsers only expose a controller after it has been used, so press any button once. The overlay starts moving right away. Resize and position the source in your scene like any other.
Troubleshooting
- The overlay shows up but does not move
- Press a button on the controller first. If it still stays still, open the source's Properties, click Refresh cache of current page and press a button again.
- The wrong controller is showing
- The overlay follows the first connected controller. Disconnect other pads, wheels or virtual controllers (for example from remapping tools) and refresh the source.
- The overlay is cut off
- The Browser Source width and height need to match the overlay size you set in the editor. Change either one so they agree.
- I am on macOS
- OBS on macOS does not let browser sources read controllers, which affects every browser-based input overlay. A small native helper that solves this is on the way.
- I stream from a second PC
- For now the controller has to be connected to the PC that runs OBS. Sending inputs from a separate gaming PC is coming with the same native helper.
Still stuck? The FAQ covers more questions.