v147 · Gamepad · Input

Gamepad Button Visualizer

Live visual map of every button and axis on your connected gamepad, driven by the new event-driven rawgamepadinputchange API. Each button box updates the moment the hardware sends input — no polling loop required.

Connect a gamepad and press any button to activate it. Uses rawgamepadinputchange (Chrome 147+) with a polling fallback for older browsers.

🎮 Connect a gamepad and press a button to start
USB, Bluetooth, or any HID gamepad recognised by the OS

Buttons

Axes

Events received: 0 | Mode: checking…

event-driven vs polling

// Old: poll on every animation frame — fires even with no input
window.addEventListener('gamepadconnected', e => {
  function poll() {
    const gp = navigator.getGamepads()[e.gamepad.index];
    gp.buttons.forEach((btn, i) => { /* check each button */ });
    requestAnimationFrame(poll);
  }
  poll();
});

// New (Chrome 147+): push-based, fires only on actual hardware input
window.addEventListener('rawgamepadinputchange', e => {
  const gp = e.gamepad;
  gp.buttons.forEach((btn, i) => { /* only called when input changes */ });
});

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗