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.
Follow the instructions below to use the gamepad viewer for streaming or testing your controller.
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.
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.
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.
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.
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 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.
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.