GamePad Viewer - The Official Controller Display & Tester

Free GamePad Viewer - The Official Controller Display & Tester v2.0-beta

NOTE: If you're not seeing the changes as soon as you load the page, the CSS might be cached.
  • Added back the Xbox 360 skin, cause reasons
  • The new URL ID for the Xbox 360 skin is 4
To start off, sorry there hasn't been any updates in a while. School, life, stuff. Also, I'm a bit of a believer in the honor system. If you'd like to donate to me for how much of a help this tool I've made has been to you, I believe it's up to you to decide how much you think this app is worth. And now, onto the updates
  • Hello darkness my old friend, I've come to speak with you again...
  • Finally updated the Xbox controller skin
  • Added a dark Xbox controller skin along with a white one
  • The new order of skins for the URL params is 0: White Xbox, 1: Dark Xbox, 2: PS Controller, 3: NES Controller
  • New Xbox skin is the first to be saved in SVG format, allowing for infinite scalability. Speaking of scaling..
  • You can now scale controllers using &sc=[scale multiplier] in the URL! Do note, this currently works best with the Xbox controller skins at the moment due to them being scalable vectors. The other controllers will look pixelated at larger sizes, but I'm working on moving them over to SVG a well :)
  • Added links to my Twitch, ImRaising and YouTube to the top bar.
Also, to reiterate on the current version of the URL parameters:
Code:[Player Number]&s=[Style Number]&sc=[Scale Multiplier]
For example:
-Player number can be 1-4 and a player must be specified for this to work.
-Default scale multiplier is 1 (e.g. 1 times the size of the controller skin) and can also take decimal values
Style numbers are as follows:
0 = White Xbox One Controller
1 = Xbox One Controller (not necessary to add &s= for this skin as it's set by default)
2 = PlayStation 3 Controller
3 = NES Controller
  • Added an NES controller skin, because retro and why not.
The skin number for the NES controller is 3, and I should have a dropdown with a full list of the parameters sometime soon as well. I've also been experimenting with a way on creating a high contrast version of skins, though I don't think it's ready for primetime yet.
Alas, finally I've been able to somewhat make this tool into a pseudo-plugin by allowing people to use Faruton's CLR Browser Source plugin to have the Gamepad Display show up natively as an OBS source via custom URL

Code:[Player Number]&s=[Style Number]
Player number can be 1-4 and a player must be specified for this to work.
Style numbers are as follows:
1 = Xbox 360 Controller (not necessary to add &s= for this skin as it's set by default)
2 = PlayStation 3 Controller

To take advantage of this simply:

  1. Create a new CLR Browser Source
  2. For the URL, make sure it follows the format above. For example, if you want to select player 2 with a playstation skin simply use
  3. For window size, I've found it best to have it set to 800x570 for the PlayStation skin and 680x550 for the Xbox skin
  4. You can set the overlay opacity in the same window to whatever you like
This update should make it easier for anyone to set up the display, and a lot more performance friendly as well.
I've added a PlayStation 3 skin as well as an easy way of switching between them on the fly.

Simply click on the Xbox logo and you'll be greeted with a dropdown with options for both Xbox and PlayStation. Then, select the option you want and the skin changes automatically.

I'll have to redo the Xbox controller skin at some point as well as add other skins, such as fightsticks and retro controllers.

Hopefully, for those of you who prefer to use a PS3 layout, this new update provides you with a damn fine looking controller ;)