Add an overlay to OBS
A controller overlay shows every button press, trigger pull and stick movement on screen as it happens. This guide sets one up in OBS, Streamlabs or TikTok LIVE Studio, whichever platform you stream to.
Quick answer: open your overlay, copy its link, then add that link to OBS as a Browser Source. Set the source to 500 × 280, place it in your scene and press any button on your controller to wake it up.
What is a controller overlay?
A controller overlay, also called a gamepad viewer or input overlay, is a live graphic of your controller that lights up with each input. Competitive streamers use it so viewers can follow their inputs in clutch moments, and because it shows that nothing is scripted.
Most modern overlays, Padcraft included, are web pages. The browser reads your controller through the Gamepad API and draws it on a transparent background, which is why you add it as a Browser Source rather than a window capture, and why it looks the same on every platform.
How do I add it to OBS?
Build your overlay
Open the overlay configurator, plug in your controller and adjust the design to match your stream. To check your buttons first, use the gamepad tester.
Copy your overlay link
Generate your link and copy it. The design is saved with the link and the background is transparent, so the overlay looks the same every time you go live.
Add it as a Browser Source
In Sources, click +, choose Browser, paste the link in the URL field and set the width and height. 500 × 280 suits a 1080p canvas; the table below gives the other sizes.
Position it and go live
Drag the source into place, resize it if needed and start your stream. Nothing needs to be installed on your PC.
What size should the Browser Source be?
The width and height you type in the Browser Source are the resolution the page is drawn at. Drawing it larger and scaling it down in the scene keeps the edges sharp on high-resolution canvases.
| Canvas | Browser Source width × height | Size on screen |
|---|---|---|
| 1280 × 720 | 500 × 280 | Scale down to about 340 pixels wide |
| 1920 × 1080 | 500 × 280 | As is, or up to about 500 pixels wide |
| 2560 × 1440 | 1000 × 560 | Scale down to about 660 pixels wide |
| 1080 × 1920 (vertical) | 1000 × 560 | About 500 to 600 pixels wide, see Add an overlay to TikTok LIVE |
Where to place it in each game is covered in Place your overlay.
Which Browser Source defaults should I change?
Only the size. The other defaults, listed in the OBS Browser Source documentation, already suit a controller overlay:
| Setting | OBS default | For your overlay |
|---|---|---|
| Width and height | 800 × 600 | Change to 500 × 280, or the size from the table above |
| Use custom frame rate | Off (the FPS field shows 30) | Leave off: the page is then drawn at your canvas frame rate |
| Custom CSS | A transparent background, no margins | Leave as is |
| Shutdown source when not visible | Off | Leave off, so the overlay stays connected between scenes |
| Refresh browser when scene becomes active | Off | Leave off, or the page reloads at every scene change |
One related option is global: Settings, Advanced, Sources, Enable Browser Source Hardware Acceleration. It is on by default and should stay on. What happens when it is off is explained in Fix overlay delay.
How do I show the overlay in every scene?
- Create a scene named Overlay and add the Browser Source there, once.
- In each gameplay scene, click + in Sources, choose Scene and select Overlay.
- Position it in each scene. When you change the link or its size later, you change it in one place.
For a single extra scene, right-click the source, choose Copy, then Paste (Reference) in the other scene, and both scenes share the same source.
Which OBS features make the overlay easier to manage?
- Right-click the source and choose Lock so you cannot drag it by accident while adjusting other sources.
- In Settings, Hotkeys, every source has Show and Hide entries. Bind one to hide the overlay during cutscenes or menus without switching scenes.
- Turn on Studio Mode to move and resize the overlay in the preview while viewers keep seeing the live scene.
What should I check before going live?
- Click Start Recording, play for 30 seconds and watch the file: the overlay should follow every input.
- Press every button, both triggers and both stick clicks at least once.
- Switch between your scenes: the overlay should stay connected in each.
- Open Docks, Stats: frames missed due to rendering lag should stay at 0.
- In Edit Transform, check that the crop is 0 on every side, so no edge of the controller is cut off.
Design your overlay for free in the browser, then generate a transparent link ready to paste into OBS, Streamlabs or any app that accepts a browser source.
Create my overlayDoes it work on Twitch, Kick and TikTok?
Yes. The overlay is part of the scene in your streaming software and is mixed into the video before it leaves your PC, so Twitch, Kick, TikTok and YouTube all receive it already in place. What matters is the software you stream with, not the platform. On a portrait canvas, follow the TikTok LIVE and vertical streaming guide.
How do I set it up in other software?
The steps are the same everywhere: add a browser layer, paste the link, size it. Only the menu names change. If you use StreamElements alerts and widgets, follow the StreamElements overlay guide. If you are still choosing between a native plugin and a web overlay, compare the two methods in Input Overlay for OBS.
Streamlabs
- In Sources, click + then Browser Source.
- Paste the link in the URL field.
- Adjust the size, then drag it into place on the canvas.
TikTok LIVE Studio
- Add a layer and choose Web Source. The name can vary slightly between versions.
- Paste the overlay link.
- Resize the layer in the scene editor.
What if something does not work?
My controller is not detected
Plug the controller in before opening the overlay, then press any button. Browsers only start reading a controller after a first input, so a freshly loaded overlay stays empty until you press something.
Close any app that holds an exclusive connection to the controller. Steam's controller settings and DS4Windows are the usual causes, since only one program can own the device at a time. The full checklist goes through every other cause.
The overlay freezes when I click into my game
If the overlay follows your inputs while OBS is in front and stops as soon as the game has focus, you are on OBS 33. It is a known bug in that version, not in your link. OBS 33 and controller input explains the two fixes that work today.
The background is not transparent
A black rectangle around the controller means the overlay was added as a window or game capture. Capture sources do not keep transparency; Browser Sources do.
Delete the source and add it again through Sources, +, Browser, then paste the link in the URL field. A color key or chroma filter on a capture source leaves rough edges around the controller.
The overlay lags behind my inputs
Check that the defaults above are unchanged, then go through the overlay delay guide, which takes the causes in order.