Controller Input Overlay for OBS

How to use it

1. Connect your controller and press a button so the page detects it.
2. Choose a skin: PS5, Xbox, Switch Pro, fight stick or minimal.
3. Adjust the size, colours and whether stick movement and trigger pressure are shown.
4. Press Copy overlay link.
5. In OBS, add a Browser source, paste the link, and set the width and height shown on this page.
6. Position the overlay on your scene. It has a transparent background.

What your results mean

Settings you can change:

Setting What it does

Skin The controller picture shown on stream

Size Scale the overlay to fit your layout

Highlight colour The colour buttons light up when pressed

Show sticks / triggers Display stick position and trigger pressure

Controller number Choose which controller to show if several are connected

OBS tips

Tip Why

Keep the overlay page open only inside OBS A second open copy can take over the controller

Untick "Shutdown source when not visible" Keeps the overlay responsive when switching scenes

Refresh the source if it stops updating Right-click the source → Refresh

Your settings are stored in the overlay link itself, so there's nothing to log into.

Who uses an input overlay

Speedrunners use overlays to prove runs and show techniques. Fighting game players use them so viewers can see combos and inputs. Teachers and content creators use them in tutorials, so viewers can copy exactly what's pressed.

Because the overlay reads your controller directly in the browser source, it works with any game, including ones without built-in input displays.

Setting it up in OBS step by step

In OBS, select the scene you want the overlay on and click the plus button under Sources. Choose Browser, give it a name such as "Controller", and click OK. Paste your overlay link into the URL box, enter the width and height shown on our setup page, and click OK again.

The overlay appears on your scene with a transparent background. Drag it into position and resize it if needed. Press a button on your controller to check it's working. If you use more than one scene, add the same source to each, or use OBS's "Add Existing" option so you only set it up once.

OBS setting Value

Source type Browser

URL Your copied overlay link

Width / height As shown on the setup page

Shutdown source when not visible Off

Refresh browser when scene becomes active Off

Choosing the right skin

Match the skin to the controller you're actually holding, so viewers recognise the buttons. The PS5, Xbox and Switch Pro skins show the same layout as the controller, including trigger pressure and stick position.

For fighting games, the fight stick skin shows the lever and eight buttons in the usual arcade layout. If you want something less distracting, the minimal skin shows only buttons as they're pressed, which suits tutorials and smaller screen layouts.

Positioning tips for viewers

Put the overlay where it doesn't cover important parts of the game, usually a bottom corner. Keep it large enough to read on a phone, since many viewers watch on small screens. If your camera is in one corner, put the overlay in the other, or stack them neatly.

For tutorials and speedrun guides, a larger overlay near the centre-bottom can be better, because viewers are there to see your inputs. For casual streams, a small overlay is enough.

Using it with multiple controllers

If more than one controller is connected, choose which one to show with the controller number setting. For two-player streams, add the overlay twice, one source per controller, and set each to a different controller number.

Controller numbers depend on the order controllers were connected. If the wrong one shows, reconnect the controllers in the order you want, or change the number and copy the link again.

Performance and stream quality

The overlay is very light and doesn't affect your game's performance in any noticeable way. It only reads controller input; it doesn't send anything to your game, so it can't add input lag.

If the overlay ever stutters, check that OBS's browser source isn't set to a very low frame rate, and that your computer isn't under heavy load. Refreshing the source usually fixes a frozen overlay.

Using the overlay with other streaming software

The overlay is a web page, so it works in any streaming software that supports browser sources. OBS Studio, Streamlabs and many others do. The setup is the same: add a browser source, paste the link and set the size.

If your software doesn't support browser sources, you can capture a browser window showing the overlay instead, though you'll lose the transparent background.

Recording tutorials and guides

For recorded videos, the overlay shows viewers exactly what you pressed. That's especially useful for combos, speedrun techniques and showing beginners how to perform a move.

Place the overlay where it won't be covered by captions or video editing. If you edit your videos, record the overlay as part of the scene so it stays in sync with the game.

Matching your stream's style

Choose colours that match your stream's look. A highlight colour that stands out against the game makes presses easy to see. Keep the overlay simple if your stream already has a lot going on.

Different skins suit different streams. A full controller skin looks great for single-player streams, while the minimal skin keeps things clean for busy layouts.

Troubleshooting a blank overlay

If the overlay shows nothing, press a button on the controller. Browsers only start reading a controller after it's been used once. If it still doesn't appear, check the controller number in the settings matches the controller you're using.

If OBS still shows nothing, right-click the browser source and choose "Refresh cache of current page". Make sure the controller is connected before opening OBS.

Using the overlay with a fight stick

Fight sticks work with the overlay just like gamepads. Choose the fight stick skin to show the lever and buttons in the arcade layout. Directions appear on the lever, and each button lights up as you press it.

For fighting game content, consider using our Fight Stick Input Display too, which shows a history of inputs viewers can read.

Privacy and security

The overlay only reads your controller's inputs. It doesn't record or send anything else from your computer. Your settings are stored in the link itself, not on our servers.

Don't share your overlay link publicly if you'd rather others didn't use your exact settings, though there's no harm if they do.

Overlay size and resolution

Set the browser source's width and height to the size shown on the setup page, then scale it in OBS. Scaling up from a small source can make the overlay blurry, so if you want it large on screen, increase the source size instead.

For 1080p streams, the default size works well. For 1440p or 4K recording, a larger source keeps the overlay sharp.

Showing analog trigger pressure

On controllers with analog triggers, the overlay fills each trigger as you press it, so viewers can see how hard you're pressing. That's useful for driving games, where throttle and brake control matter.

If triggers only show as on or off, your controller may report them as digital buttons, which is normal for some controllers like the Switch Pro Controller.

Checking the overlay before you go live

Before every stream, open your scene, press a few buttons and move both sticks to make sure the overlay responds. Controllers sometimes reconnect with a different number after a restart, which can leave the overlay showing nothing. A quick check takes seconds and saves an awkward moment on stream.

If you use a preview scene in OBS, add the overlay there too, so you can check it without viewers seeing.

Common problems

Frequently asked questions

Related tools and guides

• Button Test→
• Fight Stick Input Display→
• Fight Stick Test→