Fork me on GitHub

HTML5 Gamepad Tester 

Displays info about all gamepads connected to your computer

Press any button on your gamepad(s) to make them show up


Why isn't my gamepad showing up?
The Gamepad API is still inconsistent across browsers and OSes. Some things to check:
What information is being displayed here?
Multiple gamepads can be connected to a computer at once. This displays them all, and their current state.
Does vibration work?
Chrome is, so far, the only browser that supports vibration.
What about experiemental features?
Features like Pose, HapticActuators, and others, are not widely supported yet.
Once browsers start supporting them, this page will be updated.
Why are the axis values weird?
Not all controllers are reported the same way, across devices, browsers, and OSes.
This site simply displays what the Gamepad API returns.

For developers:

If your browser supports it, using the Gamepad API in your own code is pretty simple.

The first thing to do is listen for `gamepadconnected` events on `window`.

This will fire once for every gamepad. It will fire when a gamepad is connected, or the first time it's detected by the browser, like if it was already plugged in and you just refreshed the page. The callback is passed a `GamepadEventInit` object.

window.addEventListener("gamepadconnected", (event) => {
  console.log("A gamepad connected:");

window.addEventListener("gamepaddisconnected", (event) => {
  console.log("A gamepad disconnected:");

More importantly, to get updates on the current gamepad state, you need to call `navigator.getGamepads()`, which returns an array of currently connected gamepads, and their current button and axis positions. Typically you'd call this function once per frame.

var gamepads = navigator.getGamepads();

What you get back looks like this:

    axes: [0.01, 0.01, 0.02, 0.04],
    buttons: [
      { pressed: true, value: 1 },
      { pressed: false, value: 0 },
      { pressed: false, value: 0 },
      { pressed: false, value: 0 },
    connected: true,
    id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)",
    index: 0,
    mapping: "standard",
    timestamp: 177550

Some things, like right and left triggers on an xbox controller, are reported as buttons, with a floating point `value`s.

Recently, vibration support has been added in Chrome, which can be called like this on xbox and ps4 controllers (at least).

gamepad.vibrationActuator.playEffect("dual-rumble", {
  startDelay: 0,
  duration: 1000,
  weakMagnitude: 1.0,
  strongMagnitude: 1.0

There are more experimental APIs in the works, with things like VR pose data, haptic feedback, and more, but they are not widely supported at this time.

More resources

Gamepad API - detailed information about the Gamepad API including experimental features.

Gamepad.js - the source code for this site.