Buttons and D-pad
The viewer lights up mapped face buttons, shoulder buttons, menus and D-pad directions when the browser receives button input. Real button values can be binary or analog.
01 / LIVE CONTROLLER MONITOR
● Waiting for controllerYour Interactive Gamepad Viewer
Connect a USB or Bluetooth gamepad, then press any controller button to let the browser identify it. Choose a device if several controllers are connected.
CONTROLLER LIVE VIEW
NO DEVICEPLAYER 01AWAITING INPUT
Press a button on a connected controllerL 0.00, 0.00 · R 0.00, 0.00
The display uses the Gamepad API. A demo is a clearly marked animation, not a detected hardware controller. The viewer does not change controller settings or transmit controller input.
02 / VIEWER APPEARANCE
Customize Your Controller Overlay
Change the controller skin, accent, background and analog display without altering your actual hardware input.
STYLE / 01
Controller Skin
STYLE / 02
Colour & Background
#FF751F
TUNING / 03
Visual Preferences
Deadzone here only filters the onscreen stick movement. It does not calibrate or modify your controller.
03 / SIGNAL INSPECTOR
Analog Sticks, Triggers & Button Signals
Inspect the values sent to the browser. Standard mapping uses common Xbox-style button indices; other controllers may use different mappings.
Analog Stick Position
NORMALIZED −1 TO +1LEFT STICK
X 0.000 · Y 0.000
RIGHT STICK
X 0.000 · Y 0.000
These are browser-reported axes. With non-standard mappings, the first four axes might not correspond to the two analog sticks.
Trigger Travel
0 TO 100%LT / L2
0%
RT / R2
0%
Analog trigger values depend on the browser and controller mapping. Some devices expose triggers as axes instead of buttons.
Live Button States
UP TO 24 BUTTONS04 / CONTENT CREATOR WORKFLOW
OBS Studio Gamepad Overlay
Make a clean view for streaming tutorials, controller demonstrations and game recordings. Copy your personalized viewer URL or open the overlay in a dedicated window.
OVERLAY BUILDER
Build Your Controller View
The overlay uses your selected skin, colour, scale and controller index.
OBS browser-source compatibility: A separate OBS Browser Source does not automatically share controller access with a regular Chrome/Edge tab. It only shows live input when its own embedded browser can access the gamepad. If it cannot, use a normal browser overlay window and Window Capture in OBS.
How to Display Inputs in OBS
- Connect your controller to the computer running the viewer.
- Press any controller button to allow the active browser to expose it.
- Customize the theme, labels, size and colour here.
- Open the Overlay Window and check it receives live gamepad input.
- Add a Window Capture source in OBS, or try the overlay URL as a Browser Source if your OBS setup exposes gamepad input.
A transparent overlay URL may show a real transparent background only in browser-source renderers that support alpha. Window Capture typically requires a suitable background or chroma-key setup.
05 / INPUT HISTORY
Controller Button Event Log
Track real button down and release events, then export the session as CSV or JSON. No event history is sent by this widget.
| Elapsed time | Event | Button | Controller index | Value |
|---|---|---|---|---|
| Connect a controller and press a button to see events. | ||||
06 / SETUP TUTORIAL
How to Connect Your Controller to Gamepad Viewer
Most modern USB and Bluetooth controllers can report input through the browser once the operating system recognizes them. You don't need an account or extra website software.
- Connect your Xbox, PlayStation or compatible gamepad to your PC or supported mobile device.
- Open Gamepad Viewer in a modern browser and keep the tab active.
- Press a gamepad button or move a stick so the controller appears in the device menu.
- Check the live controller diagram as you test each button and trigger.
Controllers with non-standard mapping can display different button positions. The raw button and axis inspector helps you identify what the browser actually exposes.
IMAGE SECTION 01Connect Your GamepadReplace data-image-url with your own image URL
07 / STREAMING TUTORIAL
How to Show Controller Inputs on a Stream
A gamepad overlay can make tutorials and live streams easier to follow by showing which controls are being used. Start with a simple visual theme that stays readable against your gameplay.
- Pick a controller appearance that matches your on-screen gamepad layout.
- Choose a bright highlight that stands out over dark and light gameplay.
- Keep the overlay large enough that buttons are visible at video resolution.
- Test the capture source with your actual controller before recording or going live.
Some OBS installations do not expose gamepads to their Browser Source. A separately captured browser window can be more reliable, although transparent backgrounds may require extra capture configuration.
IMAGE SECTION 02
GAMEPLAYABXY
Gamepad Overlay for OBSReplace data-image-url with your own image URL08 / CONTROLLER INPUT GUIDE
What Can a Gamepad Viewer Show?
A live input visualization is useful for demonstrations and quick checks, but it is not a hardware calibration laboratory.
Analog Stick Direction
Two stick markers move using normalized axis values from −1 to +1. The visual deadzone only hides small on-screen motion and does not repair actual stick drift.
Trigger Pressure
Where exposed as analog buttons, L2/R2 or LT/RT use their reported 0–1 values to fill trigger meters. Other layouts may encode the same inputs differently.
Xbox and PlayStation Labels
Switch ABXY to △ ○ × □ labels for your audience. This changes the illustration only; it does not remap your physical controller or change games.
Gamepad API Limitations
Browsers require controller activity and may not expose every controller or feature. Battery status, native polling rate and true input latency are not reliably available through the standard API.
Private Browser Processing
This tool reads Gamepad API data locally. It does not require sign-in, record audio or upload controller presses. The website's other analytics or scripts may operate under separate policies.
09 / TROUBLESHOOTING
Gamepad Not Showing Up?
Controller connected but not detected
Press a controller button while this tab is focused, try another USB cable or Bluetooth connection, and check that your operating system sees the controller.
Wrong button lights up
Choose the right label style, then inspect the reported mapping. For non-standard controllers, button indices may differ from the standard illustration.
Overlay shows no controller in OBS
Gamepad permissions and connections may not be shared with OBS's embedded browser. Try the overlay in a standard browser window and capture that window instead.
Stick marker moves on its own
Try increasing the display deadzone to hide small visual fluctuations. For hardware drift diagnosis, use your separate Stick Drift Tester.
10 / FREQUENTLY ASKED QUESTIONS
Gamepad Viewer FAQs
How does an online gamepad viewer work?
It reads supported controller input using the browser's Gamepad API and updates an on-screen diagram. Press any connected controller button to enable detection where the browser requires a user interaction.
Can I show a controller overlay in OBS Studio?
Yes, by opening the overlay in a browser and capturing its window. You can also try the generated URL in OBS Browser Source, but the embedded browser must separately expose controller input for live animation.
Does it support Xbox and PlayStation controllers?
It supports gamepads exposed through the Gamepad API, including many Xbox, DualShock, DualSense and compatible devices. Available buttons and mappings depend on the browser and operating system.
Can I change the buttons from ABXY to PlayStation symbols?
Yes. Select PlayStation labels under Controller Skin. The viewer changes what it displays without modifying physical button mappings.
Why is my gamepad not detected?
Your gamepad may need a button press while the page is active, or your browser, OS or connection may not expose it. Check the controller in another application and try a modern desktop browser.
Can the gamepad viewer detect stick drift?
It can show nonzero analog-stick values, but the visual deadzone can hide tiny movement. A dedicated stick drift test with careful measurement is more appropriate for diagnosing drift.
Does the viewer measure controller polling rate?
No. Animation frames and Gamepad API updates are not a trustworthy measurement of a controller's physical USB or Bluetooth polling rate.
Can I view multiple connected controllers?
Yes. Choose a controller from the device menu to switch the active visual display, or use Auto-select to show the first available controller.
Does the viewer work on mobile phones?
The page layout is responsive. Actual gamepad support on mobile depends on the OS, browser and connected controller. Touching the illustrated controller is not a substitute for real hardware input.
Is this Gamepad Viewer free and private?
Yes, the browser tool is free to use. Input visualization and session exports are processed locally in the widget, with no account required.
11 / MORE CONTROLLER TOOLS