OBS Gamepad Overlay Guide

Step by step setup

Before opening OBS, connect your controller to the same computer OBS is running on and confirm it works by opening the Gamepad Viewer in a regular browser tab first. Press a few buttons and move both sticks. If the display responds there, the hard part is already done and the OBS side is just plumbing.

In OBS, select the scene you want the overlay on, then in the Sources panel click the plus icon and choose Browser. Give it a clear name, something like Controller Overlay rather than the default Browser Source, since you will thank yourself later if you ever have more than one browser source in the same scene. In the properties window that opens, paste the Gamepad Viewer URL into the URL field. Set Width to 480 and Height to 300 to match the tool's natural proportions, then click OK.

The source will appear on your canvas at that size. Click and drag it to position it, and drag a corner handle while holding shift to resize it without distorting the proportions. Press a button on your controller while watching the OBS preview, not the separate browser tab, to confirm the live source itself is actually updating.

Sizing and placement that does not fight your gameplay

480 by 300 is the source's native aspect ratio, but the right final size on your canvas depends entirely on your own resolution and layout. For a standard 1920 by 1080 canvas, scaling the overlay down to somewhere between 320 and 380 pixels wide keeps it legible without eating a disruptive amount of screen space. For a 1280 by 720 canvas, scale proportionally down to roughly 220 to 260 pixels wide.

Placement matters as much as size. Avoid the top centre and top left, where most games place a minimap, objective tracker, or ammo counter. The bottom corners are the safest default for the widest range of games, with the exact corner chosen based on where your own game's HUD is lightest. If you are also running a webcam source, place the overlay on the opposite side of the canvas from your face cam so a viewer's eye is not forced to jump back and forth across the entire screen to follow both.

Getting transparency right

The Gamepad Viewer page is built with a transparent background specifically for this use case, so a correctly working source should show only the controller graphic and any live stats floating directly on your scene, with your game or webcam visible straight through everywhere else. If you are instead seeing a solid black or white rectangle behind it, this is almost always one of three specific causes, in order of how often each one is actually the culprit.

First, check the Browser Source properties and make sure Shutdown source when not visible is unchecked, then click the small refresh icon at the bottom of that same properties window. This single step resolves the majority of solid background cases on its own. Second, open OBS Settings, go to Advanced, and try toggling Use hardware acceleration when available off, then fully restart OBS rather than just closing the properties window, since this particular setting only takes effect after a full restart. Third, if you are running OBS through a remote desktop session or inside a virtual machine, hardware accelerated transparency can fail in ways that are specific to that environment and unrelated to anything in the source's own configuration.

Once transparency is working, it is worth testing it against more than one background, switch to a bright scene and a dark scene and confirm the overlay reads clearly against both, since a controller graphic that looks great against a dark game can become hard to see against a bright one without you ever noticing during setup.

Performance settings worth checking

A Browser Source renders at your OBS canvas frame rate, not at some independent rate of its own, so confirm your OBS Settings under Video has FPS set to at least 60 if you want the overlay's button presses and stick movement to feel responsive on the resulting recording or stream rather than visibly behind your actual inputs.

If you are running a lot of sources already and OBS itself feels sluggish, a Browser Source is a genuinely lightweight addition relative to most other source types, since it is just rendering simple shapes rather than decoding video, so it is rarely the actual cause of a performance problem even though it is sometimes the first thing people suspect simply because it is the newest thing they added.

Showing more than one controller

If you are running co-op or local multiplayer content with more than one controller plugged into the same machine, the Gamepad Viewer automatically detects every connected controller and exposes a tab to switch between them within the tool itself. For an overlay specifically, the cleanest approach for showing two players at once is adding two separate Browser Sources, each pointed at the same URL, sized and positioned independently on opposite sides of your canvas, since OBS browser sources do not share state with each other and each one needs its own controller selected if the tool you are using supports a multi controller picker.

Toggling the overlay with a Stream Deck or hotkey

If you want the ability to show or hide the overlay on demand rather than leaving it visible for an entire stream, the cleanest method is setting up a Show or Hide Sources hotkey directly in OBS, under Settings, then Hotkeys, scrolled down to your specific source name. Bind that to a keyboard shortcut or, if you use one, a Stream Deck button through OBS's own hotkey integration rather than a third party plugin, since the native toggle is more reliable across OBS updates than most plugin based alternatives.

Troubleshooting

The overlay shows but never updates, even though my controller works elsewhere

Click directly inside the Browser Source's preview area in OBS first, then press a controller button, since the Gamepad API requires the page to register at least one input after gaining focus, and a source that has never been clicked into can sometimes miss that very first detection event.

The overlay freezes after I switch away from the scene and back

This is caused by Shutdown source when not visible being checked in the Browser Source properties, which fully suspends the page when off screen and can occasionally fail to cleanly resume. Uncheck this setting if you switch scenes frequently mid stream.

The overlay looks fine in the OBS preview but slightly different in the actual recording

Always judge the final result from a short test recording or your stream's actual output rather than only the OBS preview window, since preview rendering and final encoded output can occasionally differ slightly, particularly around transparency and scaling.

Button presses on the overlay feel a beat behind my real presses

Check your OBS canvas FPS setting under Video in Settings, since a Browser Source can only render as fast as your overall canvas frame rate allows, regardless of how quickly the underlying page itself is actually updating.

The source disappeared completely after an OBS update

Browser Sources occasionally need their URL re-entered or the source recreated after a major OBS version update, particularly if the update changed the underlying browser engine OBS uses internally. Re-adding the source with the same URL and dimensions resolves this in nearly every case.