Gamepad Viewer — controller overlay for streams
A gamepad viewer is a streamer-facing overlay that renders your controller inputs as a live on-screen diagram, so viewers can see what buttons you are pressing and how you are moving the sticks. Our free browser-based gamepad viewer drops straight into OBS as a Browser Source: pick a PlayStation, Xbox, Switch, or generic layout, choose an accent color and scale, then copy the configured URL into OBS — your settings are baked into the URL so the source stays consistent across stream restarts. Works with any controller the browser recognizes as a standard gamepad. No download required.
How the gamepad viewer works
Connect your controller
Plug in your controller or pair it via Bluetooth, then press any button. The browser detects standard gamepads automatically, and the connection status appears at the top of the page along with the detected controller identifier.
Pick a layout
Four controller diagrams are available: PlayStation (DualSense with the touchpad), Xbox (asymmetric stick layout with A/B/X/Y face buttons), Switch (parallel stick layout with B/A/Y/X face-button ordering as physically printed), and generic (numbered buttons, neutral styling). Pick the layout matching the controller you actually hold so your stream viewers see the right diagram.
Customize accent color and scale
Seven accent themes (violet, cyan, fuchsia, emerald, amber, rose, white) determine the highlight color for pressed buttons and active sticks. The scale slider runs from 0.5x to 2.0x so the overlay matches your stream layout. Adjustments apply instantly to the live preview.
Copy the OBS Browser Source URL
The OBS panel generates a configured URL with your settings baked into the query string and ui=off applied so the page renders only the controller, no controls, on a transparent background. Click Copy, paste into OBS as a Browser Source, set the width and height to match the controller diagram, and the overlay is live.
Stream restarts pick up the same settings
Because the configuration lives in the URL, OBS opens the same overlay the same way every time the scene activates. No re-setup needed. To change themes or layouts later, edit the URL or revisit this page, adjust, and copy the new URL into OBS.
What each URL parameter controls
All settings are URL query parameters so the overlay is fully configurable through the address bar alone — useful for streamers using OBS scene templates or scripting setups.
| Parameter | Values | What It Controls |
|---|---|---|
| layout | ps5 · xbox · switch · generic | Which controller diagram is rendered. PS5 includes the touchpad. Xbox uses the asymmetric stick layout. Switch uses parallel sticks and B/A/Y/X face-button ordering. Generic uses numbered buttons and a symmetric layout. |
| theme | violet · cyan · fuchsia · emerald · amber · rose · white | Accent color for pressed buttons, active stick positions, and trigger fills. Choose the theme that matches your stream branding. |
| scale | 0.5 to 2.0 (decimal) | Visual scale multiplier for the controller diagram. 1.0 is the base size. Useful for sizing the overlay to fit alongside camera and gameplay in your stream layout. |
| bg | transparent · dark · light | Background mode. Transparent is the default for OBS Browser Sources (lets your gameplay or scene show through). Dark and light are useful when using the page standalone in a browser as a controller checker. |
| ui | on (default) · off | Whether the configuration controls are visible. The OBS Browser Source URL uses ui=off automatically so the overlay shows only the controller, no controls. Click Preview OBS Mode on the page to see how this looks. |
Layouts match common controllers
Pick the layout that matches the physical controller you stream with. Any standard gamepad works with any layout, but the diagram looks most natural when paired with the controller it represents.
Common troubleshooting steps
Related diagnostics
Gamepad Viewer questions
Configure the layout, theme, and scale on this page until the overlay looks right. Click the Copy button on the OBS Browser Source URL panel. In OBS, add a new source, choose Browser, paste the URL into the URL field, set the width to 800 and height to 500 (or whatever matches your scaled diagram), and check "Refresh browser when scene becomes active" so the overlay reloads cleanly each time. The source is now ready — your controller inputs will render live whenever the scene is active.
The OBS Browser Source URL generated by this page includes bg=transparent, so the page itself renders transparent. If you still see a background in OBS, check that your OBS Browser Source does not have "Shutdown source when not visible" set in a way that breaks transparency on reload, and confirm the URL you pasted ended with bg=transparent and ui=off. Some older OBS versions also require enabling hardware acceleration in OBS settings for transparent Browser Sources to composite correctly.
No. The gamepad viewer runs entirely in your browser, and OBS's Browser Source loads the page directly from gpadlab.com — there is no extension to install, no plugin to configure, and no executable to run. The only thing you copy is the URL.
The current controls expose layout, theme, scale, and background — the four settings that cover the vast majority of streamer needs. Custom positioning of buttons, custom labels, and recording overlays are intentionally out of scope for the MVP so the tool stays focused and fast. If a custom feature is missing that you would actively use, send feedback — we prioritize streamer-facing additions in the public roadmap.
Yes, as long as the browser exposes the controller through the standard gamepad interface. The Xbox layout maps to most XInput-style controllers (the majority of third-party gamepads). The PS5 layout maps to DualSense. The Switch layout maps to the Switch Pro Controller. The Generic layout is the safe fallback when nothing else fits — buttons are numbered rather than labeled, so the diagram is correct regardless of which physical buttons trigger which standard indices.
It does not — the Switch layout intentionally labels face buttons B, A, Y, X in the order they are physically printed on a Nintendo controller (B at bottom, A at right, Y at left, X at top). This is the opposite of Xbox's A/B/X/Y ordering. The diagram matches your controller's physical labels, which is what your stream viewers will see when watching you play.
Yes. Streamlabs, XSplit, and any other broadcast software that supports a Browser Source URL works the same way — paste the configured URL, set dimensions, done. The overlay also works as a standalone controller checker in any browser tab; click Preview OBS Mode to see the bare overlay without the controls panel.
No. All controller polling and rendering happens locally in your browser tab. Nothing is sent to a server, nothing is recorded, and no input data leaves your machine. If you switch to a different page, the polling stops immediately.
How we render the controller overlay
Built on the standard browser gamepad interface. Per-frame polling reads the connected controller's button states (boolean per button), analog axis values (-1 to 1 per axis for left and right sticks), and trigger pressure (0 to 1 for L2/R2). The four SVG layouts are hand-drawn vector diagrams calibrated to look correct for their respective platforms — PS5's touchpad, Xbox's asymmetric stick offset, Switch's parallel sticks and B/A/Y/X ordering. Pressed buttons fill with the accent color and add a glow filter. Active sticks animate their inner position dot based on the current axis values. Triggers render as vertical fill bars showing analog pressure. All configuration lives in URL query parameters so the same overlay is reproducible across stream restarts and OBS scene switches. Methodology published by GPADLAB Engineering.
Run the full Controller Health Score
This test is one of six diagnostics in the composite score. See how your controller stacks up overall.
Run the Benchmark