What is a Gamepad Viewer?

Gamepad Viewer, also called gamepad tester, is an online tool that allows you to display controller input on screen. This is very helpful for game streamers who want to show their gamepad actions to their screen.

It can also be used as a controller test to check if all the buttons on your controller are working properly.

This tool is developed using the HTML5 gamepad tester API to report the actions of gamepads, joysticks or anything that supports the API.

Connecting Your Controller to Gamepad Viewer / Tester

Follow the instructions below to use the gamepad viewer for streaming or testing your controller.

1. Open gamepadviewer.net on any browser that supports HTML5 such as Chrome, Firefox etc.
2. You will see a screen that shows ‘No gamepad connected’. Connect your gamepad to your laptop or desktop where you have opened the gamepad tester.
3. Once the game controller is connected successfully, the tool will detect the device itself. If it does not detect, press any key on the gamepad to wake it up.
4. Now, you will see the default gamepad graphic in your browser window.
5. Press any button on your gamepad and you will be able to see the same button get highlighted on the screen. 
6. Not only the A,B,X,Y, Up, Down, Left, Right buttons, you can also see the movement of left and right sticks as well as shoulder triggers.

If you are facing any issues in connecting your controller to the gamepad viewer, try removing and plugging in the controller again. Still not working? Share the error in the comments and I will help you get it working for you.

Adding Gamepad Viewer Custom Skins

There are 12 custom skins that you can use in the gamepad viewer. To enable any custom skins (or custom controller overlay), all you need to do is click on the skin of your choice in the Custom Skins section and you will instantly see the new skin on the screen.

Our custom skin collection includes all the popular game controllers like Xbox 360, PS3, PS4, Gamecube, FightPad Pro etc.

In case you don't want to use skins that everybody can use, you can make your own custom skin as well.

To make a custom skin for a gamepad viewer, you must have working knowledge of CSS and know how to make a CSS file from scratch. 

While you are making a custom skin, just make sure to use the same class name as preloaded skins so that tool works properly with the new skin.

Once you have your custom skin ready, use the following code to use it on the gamepad tester.

https://gamepadviewer.net/?css=https://url.to/your/custom/skin

You may also edit one of the preloaded skin using the Inspect Element feature of your browser. 

Just right click in the browser window and choose ‘Inspect Element’ from the context menu. Here you can dimensions, colors, size, background etc to your own preference. Your changes will be reflected in real time on the screen.

How to Show a Controller on Stream / OBS?

The primary use of a gamepad viewer is to display the controller on stream. If you are streaming for the first time, here are the steps to show a controller on Stream.

1. Open domainname.com and connect your gamepad to your computer.
2. Once connected, copy the URL from the address bar. If you want to show a custom skin on the screen, first choose the skin of your choice and then copy the URL.
3. Now open your OBS, and create a new scene overlay.
4. In the browser section, click the + icon to create a new source and click OK.
5. The browser source dialog box will open. Paste the copied URL in the "URL" text box.
6. Adjust the height and width according to your preference. You can also leave it as it is and resize things later.
7. Click OK to save your inputs.
8. Your controller will now be visible on screen. You can position and dimensions by simply dragging and resizing the controller view.

That’s all. You have successfully set up your controller to show on the screen when you are streaming your game or recording it.

Gamepad / Controller Test Frequently Asked Questions

Gamepad Viewer Not Working. What to do?

The gamepad viewer works on gamepad.js library which is still not full compatible with all browsers and operating systems.

Below are a few things you should check to get the gamepad working for you.

• Check if the controller is properly plugged in or paired correctly via bluetooth/wireless.
• Try pressing some buttons. It works for some controllers as pressing the buttons wakes up the gamepad API.
• Check if other running apps are using the gamepad? If yes, close them and check.
• Sometimes browsers just cache the webpage. Restarting your web browser works very well in such cases.

Does vibration work?

Yes, but only on Chrome browser as it is the only one that supports vibration so far.

What about experimental features?

The experimental gamepad features like Pose, HapticActuators etc are not widely supported yet. As soon as, the support is extended, we will update the page

Once browsers start supporting them, this page will be updated.

Why are the axis movements weird?

Different controllers respond differently to the gamepad API. So, some browsers or OSes may show a bit skewed movements. Please use the tool on Chrome for best results.