Quick answer: to show controller inputs on screen, create or open a gamepad viewer, copy its overlay URL, then add that URL to OBS as a Browser Source. Set the source to roughly 500 × 280, position it in your scene and press a controller button to activate the live input display.
The short version
- A controller overlay is just a web page with a transparent background — you add it as a Browser Source, not a window capture.
- The platform doesn't matter. Twitch, Kick, TikTok and YouTube all receive the overlay already baked into your video.
- Setup is four steps and about two minutes: build it, copy the link, add a Browser Source, position it.
- If the background comes out black, you almost certainly added the wrong source type.
On this page
What is a controller overlay or gamepad viewer?
A controller overlay (also called a gamepad viewer or input overlay) is a live on-screen graphic that mirrors what you're doing on your controller in real time — every button, trigger and stick shows up for your viewers to see. It's popular with competitive and fast-paced streamers because it lets the audience follow inputs during clutch moments, and it works as a simple trust signal that inputs aren't scripted.
Technically, most modern overlays (including PADCRAFT) are just a web page: your browser reads your controller through the Gamepad API and renders it live, with a transparent background so it drops cleanly into your scene. That's what makes them work identically across streaming platforms — the overlay doesn't know or care whether you're live on Twitch, Kick or TikTok.
How to show controller inputs on screen
Build your overlay
Open the free overlay configurator, plug in your controller and customize the design until it matches your stream. If you only need to verify the inputs first, use the browser gamepad tester.
Copy your unique overlay link
Once you're happy with it, generate and copy the link. It has a transparent background baked in by default, and your customization is saved in the URL — so it stays 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 gamepad viewer link, and set a width and height that fit your layout. A good starting point is 500 × 280.
Position it and go live
Drag it into place in your scene, resize as needed, then start your stream. The overlay updates in real time with no noticeable lag — no install, no plugin, and it works the same on Twitch, Kick or TikTok.
PADCRAFT generates a ready-to-paste, transparent-background overlay link in under a minute — free, no install.
Create my overlay →Twitch, Kick, TikTok — does the platform matter?
No — and this trips people up. A controller overlay isn't a Twitch feature or a TikTok feature; it's part of your local scene in your streaming software, composited into the video before it's sent anywhere. Whatever platform receives that video stream sees the overlay baked in. The only thing that matters is which streaming software you're using to go live.
Twitch
Typically streamed via OBS or Streamlabs. Add the overlay as a Browser Source in your scene exactly as described above.
Kick
Also streamed via OBS/Streamlabs using RTMP — setup is identical to Twitch, only the stream key destination changes.
TikTok LIVE
From a PC, use TikTok LIVE Studio, which supports Browser/Web Source layers the same way OBS does.
Setup by software
OBS Studio
- Sources panel → + → Browser
- Paste your overlay URL
- Set Width/Height (e.g. 500 × 280)
- Leave "Shutdown source when not visible" unchecked so it stays connected between scenes
Streamlabs
- Sources → + → Browser Source
- Paste the URL in the "URL" field
- Adjust width/height, then drag it into position on the canvas
TikTok LIVE Studio
- Add layer → Web Source (naming may vary slightly by app version)
- Paste the overlay link
- Resize the layer in the scene editor
Common problems and fixes
My controller isn't detected
Plug it in before opening the overlay page, then press any button — most browsers only activate the Gamepad API after a first input, so a freshly opened page looks broken until you press something.
Close any app holding an exclusive connection to the pad — Steam's controller configurator and DS4Windows are the usual culprits. Only one program can own the device at a time.
The background isn't transparent
This is the single most common setup mistake, and it has one cause: the overlay was added as a window or game capture instead of a Browser Source. Browser Sources support real alpha transparency; capture sources generally don't, so you get an opaque black rectangle.
Delete the source and re-add it via Sources → + → Browser, then paste the overlay link into the URL field. Don't try to fix a capture source with a colour key or chroma filter — you'll lose edge quality for no reason.
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 enabled in your browser source settings. If it still feels delayed, the cause is usually elsewhere in your chain — we walk through every one of them in the overlay delay guide.