Frequently Asked
Questions

Gamepad Viewer is a web-based tool for visualizing gamepad input in real time. It reads data from any connected controller — Xbox, PlayStation, Switch Pro, or any HID-compatible gamepad — and displays every button press, analog stick movement, and trigger pressure on screen as it happens.

Think of it as a live window into exactly what your hands are doing on the controller. Streamers use it as an on-screen overlay so their audience can follow every input during gameplay. Speedrunners use it to verify clean execution on precise inputs. Competitive players use it before tournaments to confirm all hardware is working correctly.

The entire tool runs inside your browser using the W3C Gamepad API — no downloads, no installs, no plugins required. Just connect your controller and open the page.

Yes — completely and permanently free. There is no paywall, no premium tier, no credits system, and no feature gating. Every capability including drift detection, deadzone calibration, rumble testing, custom skins, session log export, and OBS overlay generation is available from the moment you open the page.

There are also zero advertisements anywhere on the site. No banners, no popups, no sponsored content. No account is required and no email address is ever collected. You open the page, connect your controller, and everything works.

No. All processing happens entirely in your browser. Gamepad Viewer reads your controller input through the W3C Gamepad API, which operates locally on your device. No button press, stick position, or trigger value is ever transmitted to any server — not ours, not anyone else's.

Even the session log export is generated and downloaded entirely on your own device. The file never passes through any external service. Your input data is private by design, not by policy.

Nothing at all. No browser extension, no driver, no desktop app, no plugin. Gamepad Viewer uses the W3C Gamepad API that is built into every modern browser by default — Chrome, Edge, Firefox, and Safari 16 and newer all support it natively.

Connect your controller via USB or pair it via Bluetooth in your system settings, open Gamepad Viewer in your browser, press any button on the controller, and the tool detects and displays it immediately.

Yes. The interface is fully responsive and works on phones and tablets. Pair a Bluetooth controller through your device settings first, then open Gamepad Viewer in your mobile browser. Chrome and Edge on Android both support the Gamepad API fully. Safari on iOS 16 and newer also supports it. Firefox on Android has partial support.

This makes Gamepad Viewer useful as a quick pre-match controller check at tournaments or LAN events where you may not have access to a desktop setup.

Gamepad Viewer is used across a wide range of scenarios by different types of players and creators:

Streamers and YouTubers use it as an on-screen controller overlay so their audience can see every button press and stick movement during gameplay — particularly popular for speedrunning, fighting game, and platformer content.

Competitive players and tournament entrants run a pre-match diagnostic to verify that all buttons, sticks, and triggers register correctly before a live event. A faulty controller found before the match is far better than one found during it.

Anyone returning a controller under warranty uses the session log export as documented evidence of the fault — a timestamped record of drift, dead inputs, or trigger failures is much more persuasive to manufacturer support than a description alone.

There are two methods for getting Gamepad Viewer into OBS as a live overlay — Chroma Key window capture and CLR Browser Source. Both are covered in full detail on the Info Guide page, but here is a quick summary of each approach.

The Chroma Key method captures your Gamepad Viewer browser window directly in OBS using a Window Capture source, then applies a Color Key filter to remove the background, leaving just the controller skin floating transparently over your scene.

The CLR Browser method is cleaner. You generate a custom URL on the Generate URL page, then paste it directly into an OBS Browser Source. The background is fully transparent without any color keying required, and your settings are locked into the URL so it loads identically every session.

Yes. When you use the CLR Browser Source method, the background is already fully transparent — no color keying is needed. You generate your personalised URL at the Generate URL page, paste it into an OBS Browser Source, and the controller skin composites cleanly over your game footage with no extra filters required.

This is the preferred method for most streamers because it eliminates the color bleed issue that can occur with Chroma Key when the background color is close in hue to parts of the controller skin.

The W3C Gamepad API only registers a controller after it receives its first input event. Press any button on your controller after the page has loaded — this wakes the device and triggers detection. If it still does not appear, work through the following checks:

For USB connections: confirm the cable supports data transfer and is not a charge-only cable. Some USB-C cables only carry power. Try a different port or cable if unsure.

For Bluetooth connections: verify the controller appears as paired and connected in your system settings (Bluetooth & devices on Windows, Bluetooth preferences on macOS) before opening the browser.

For browser compatibility: use Chrome or Edge for the broadest Gamepad API support. Firefox works for most controllers but has some limitations with analog trigger precision. Safari requires version 16 or newer.

There is no single perfect value — it depends on your skin, your scene layout, and your stream resolution. The default starting point is Width 700 / Height 430. Work up or down in increments of 50 pixels from there until the controller skin fills the area you want without clipping or excess whitespace.

Once you find the right dimensions, note them down. If you regenerate your URL later or reinstall OBS, you can restore the exact sizing immediately without re-experimenting.

Yes. The Gamepad API reads live input from the connected device in real time. If the controller disconnects during a stream — battery dies, Bluetooth drops, cable unplugs — the overlay will stop updating and show the last known state. Reconnect and press any button to resume detection.

For important streams or recordings, using a wired USB connection eliminates the risk of Bluetooth dropout mid-session. It also typically provides a more consistent polling rate compared to wireless.

Creating a custom skin from scratch requires basic knowledge of CSS and how it works. The skin system uses CSS to define the visual appearance of every element on the controller — button shapes, colors, positions, and pressed-state highlights are all controlled through CSS rules.

The best starting point is the official example skin file on GitHub Gist. It shows a fully working skin structure with comments explaining each section. Study how the existing buttons and axes are defined, then adapt the values to suit your own design.

A few important points to keep in mind when building a custom skin:

Check the example file regularly. As Gamepad Viewer is updated, the skin format sometimes changes to support new features. The example file is kept up to date with each site update, so checking it periodically ensures your skin stays compatible.

Test inputs live. Open the viewer with your custom skin loaded while pressing buttons to verify each CSS state triggers correctly. The pressed state for each button is applied via a class name change in the DOM.

Yes — this is actually the recommended approach for most users. You can use the editcss= URL parameter to point to a correctly formatted external CSS file, which will apply your style changes on top of the currently selected built-in skin without replacing it entirely.

This approach lets you change colors, swap button shapes, adjust sizing, or rebrand an existing skin to match your stream identity, all without starting from zero. The CSS file you write only needs to contain the properties you want to override — everything else falls through to the default skin styles.

There is a small example edit file on GitHub Gist that demonstrates what can be done with this approach:

Gamepad Viewer ships with a growing library of built-in skins covering all major controller families. Current skins include:

Xbox family: Xbox 360, Xbox One, Xbox Series X|S

PlayStation family: DualShock 4 (PS4), DualSense (PS5)

Nintendo: Switch Pro Controller, Joy-Con pair

Other: Generic HID layout for non-branded controllers

The skin library is updated as new controllers gain mainstream adoption. The Xbox and DualSense skins auto-detect based on the controller ID reported by the Gamepad API, so the correct label scheme switches automatically when you connect a PlayStation or Xbox controller.

Use the Generate URL page to encode your skin settings into a shareable link. The generated URL contains all your configuration — skin selection, scale, input delay, and if you are using an edit CSS file, the URL to that file is also included as a parameter.

Anyone you share the link with can open it directly in their browser and see the exact same overlay layout. They can also paste it into OBS Browser Source to use your skin as their own overlay without any manual configuration.

For custom CSS skins hosted on GitHub Gist, share the Gist URL along with your generated viewer URL so others can inspect and copy your CSS file if they want to adapt it further.

Yes. Custom skins support background images as the controller body layer. You reference the image using a standard CSS background-image property in the skin CSS targeting the controller body element. Host the image at a publicly accessible URL and reference it in your CSS file.

For the cleanest result, use a PNG with a transparent background so the controller body shape shows cleanly without a rectangular cutout visible through the overlay. SVG format is also supported and scales cleanly at any overlay size.

The editcss= parameter tells Gamepad Viewer to load an external CSS file and apply it on top of the currently selected skin. This gives you the ability to override any visual property of any built-in skin without needing to build a full skin from scratch.

You append the parameter to the Gamepad Viewer URL with your CSS file's direct URL as the value:

The CSS file is fetched and injected into the page as a stylesheet. Any CSS selector that matches elements in the skin will override the default styles. This approach is ideal for rebranding a skin's colors, changing button highlight colors, or repositioning elements without touching the base skin logic.

Several URL parameters let you configure the overlay directly without opening the settings UI. The most commonly used ones are:

All parameters can be combined in a single URL and the Generate URL tool will build the correct string for you automatically based on your settings. Using the tool avoids typos in the parameter names.

The most common cause is a CORS (Cross-Origin Resource Sharing) issue. When Gamepad Viewer tries to fetch your CSS file from a different domain, the server hosting that file must include the correct CORS response header (Access-Control-Allow-Origin: *) to permit cross-origin loading.

GitHub Gist raw URLs include this header by default, which is why they are the recommended hosting option. If you are using a custom domain or CDN, verify that CORS is configured correctly for the URL you are referencing.

Other common causes include a typo in the URL value, the file not being publicly accessible (private repository, login-gated URL), or the CSS file containing a syntax error that causes silent failure.

For color changes, the minimal CSS needed is actually quite short. Each button pressed state is controlled by a single CSS class applied to the button element. To change the highlight color for all buttons to a single custom color, you typically need only a few lines targeting those pressed-state classes:

Host this in a plain .css file on GitHub Gist and reference it via editcss= in your URL. The Generate URL tool can then encode the full URL with your edit CSS path included.

Gamepad Viewer is compatible with any HID-compliant controller that the browser can read through the W3C Gamepad API. This covers all modern major controllers including:

Xbox: Xbox 360 (via USB), Xbox One, Xbox Series X|S — all via USB or Bluetooth

PlayStation: DualShock 4 (PS4) and DualSense (PS5) — via USB-C or Bluetooth

Nintendo: Switch Pro Controller — via USB or Bluetooth

Third-party: 8BitDo all models, Razer controllers, Hori controllers, PowerA controllers, and any generic gamepad that exposes a standard HID interface

The Auto-detection feature reads the controller ID string from the Gamepad API and automatically switches to the correct skin and label scheme (Xbox or PlayStation) where the ID is recognised.

Yes. The W3C Gamepad API supports multiple connected controllers simultaneously and assigns each one an index starting from 0. You can use the p= URL parameter to specify which gamepad index the viewer should read from:

For two-player streams where both controllers need to be visible, open two separate browser windows or tabs with p=0 and p=1 respectively, then add both as separate Browser Sources in OBS and position them independently in your scene.

Stick drift is when an analog stick reports a non-zero position while you are not touching it. The potentiometer inside the stick module wears down over time, causing it to output a small but continuous value even at rest. In gameplay, this manifests as unwanted camera movement, character walking, or aim drift.

Gamepad Viewer detects drift by sampling the raw axis values from the Gamepad API before the deadzone is applied. This is important because a deadzone correction would hide the drift signal in the viewer just as it does in-game. When any raw axis value exceeds a tight at-rest threshold (approximately 0.04), the orange Drift Detected badge activates in the Stick Positions panel.

To use this feature: set your deadzone slider to zero, rest your hand completely away from the controller, and watch the stick position readout. Any non-zero value that appears without you touching the stick indicates drift.

Yes. Click the Export button in the Live Diagnostic Console to download a timestamped TXT file containing your device name, total press count, and a complete chronological record of every input event during the session.

This log is useful when filing a warranty or support claim with a controller manufacturer. A documented record showing specific inputs failing or drift values persisting across multiple test runs is far more persuasive to support teams than a written description. Some manufacturers specifically request diagnostic output as part of their claims process.

All log generation and downloading happens entirely on your device. The file is never uploaded to any server.