Add an overlay to OBS
A controller overlay shows every button press, trigger pull and stick movement on screen, live. Here is how to set one up in OBS, Streamlabs or TikTok LIVE Studio, whatever 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 about 500 × 280, place it in your scene and press any button on your controller to wake it up.
The short version
- A controller overlay is a web page with a transparent background. You add it as a Browser Source, not as a window capture.
- The platform doesn't matter. Twitch, Kick, TikTok and YouTube all receive the overlay already baked into your video.
- Setup takes four steps and about two minutes: build it, copy the link, add a Browser Source, position it.
- A black background almost always means the wrong source type was used.
What is a controller overlay?
A controller overlay, also called a gamepad viewer or input overlay, is a live graphic that mirrors your controller on screen. Every button, trigger and stick movement shows up for your viewers as it happens. Competitive and fast-paced streamers use it so the audience can follow their inputs in clutch moments, and because it shows at a glance that nothing is scripted.
Under the hood, most modern overlays, Padcraft included, are simply a web page. The browser reads your controller through the Gamepad API and draws it live on a transparent background, so it drops cleanly into any scene. That is also why it behaves the same on every streaming platform.
How do I add it to OBS?
Build your overlay
Open the overlay configurator, plug in your controller and adjust the design until it matches your stream. To check your inputs first, use the gamepad tester.
Copy your overlay link
When the design is ready, generate your link and copy it. The background is transparent by default and your design is saved with the link, so it looks the same every time you go live.
Add it as a Browser Source
In your streaming software, add a new Browser Source, not a window or game capture. Paste the link and set a size that fits your layout. 500 × 280 is a good starting point.
Position it and go live
Drag the source into place, resize it if needed and start your stream. The overlay follows your inputs in real time, with nothing to install on your PC.
What size should the Browser Source be?
The width and height you type in the Browser Source are its render resolution. Rendering larger and scaling down in the scene keeps 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 |
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 only.
For a single extra scene, right-click the source, choose Copy, then Paste (Reference) in the other scene: both share the same source.
What should I check before going live?
- Click Start Recording, play 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.
- Check the edges: in Edit Transform, crop should be 0 on every side.
Design your overlay for free in the browser, then generate a transparent link ready to paste into OBS.
Create my overlayDoes it work on Twitch, Kick and TikTok?
No. A controller overlay is not a Twitch or TikTok feature. It lives in the scene of your streaming software and is mixed into your video before it leaves your PC. Whichever platform receives the stream sees the overlay already in place. The only thing that matters is the software you stream with.
Twitch
Usually streamed with OBS or Streamlabs. Add the overlay as a Browser Source, as shown above.
Kick
Also streamed with OBS or Streamlabs over RTMP. The setup is identical, only the stream key changes.
TikTok LIVE
From a PC, use TikTok LIVE Studio. Its Web Source layers work like Browser Sources in OBS.
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.
OBS Studio
- In Sources, click + then Browser.
- Paste your overlay link in the URL field.
- Set the width and height, for example 500 × 280.
- Leave
Shutdown source when not visibleunchecked so it stays connected between scenes.
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 doesn't work?
My controller isn't 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 opened page looks 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 suspects, since only one program can own the device at a time. The full checklist goes through every layer.
The background isn't transparent
This is the most common setup mistake and it has a single cause: the overlay was added as a window or game capture instead of a Browser Source. Browser Sources keep real transparency, capture sources don't, which leaves a black rectangle.
Delete the source and add it again through Sources, +, Browser, then paste the link in the URL field. Avoid patching a capture source with a color key or chroma filter: you lose edge quality for nothing.
The overlay lags behind my inputs
Keep the source active across scenes by leaving Shutdown source when not visible unchecked, and make sure hardware acceleration is on in the browser source settings. If you still feel a delay, the cause is usually elsewhere in your setup. The overlay delay guide goes through each one.