v149 · Web APIs · Input · demo

Axes Explorer

A live visualiser of both analog stick axes and all digital buttons. Toggle between event-driven mode (rawgamepadinputchange) and polling mode (requestAnimationFrame) to see how axis updates differ: the event path fires on every micro-movement, polling only snaps to frame boundaries.

Chrome 149+ — rawgamepadinputchange event. Connect a gamepad and press any button to activate. Keyboard simulation is provided for browsers without a gamepad.

Connect a gamepad and press any button · or use the keyboard: WASD = left stick, arrow keys = right stick, Space = A button

No gamepad connected — use keyboard simulation (WASD / arrows / Space)
Left stick (axes 0 & 1)
X: 0.00 Y: 0.00
Right stick (axes 2 & 3)
X: 0.00 Y: 0.00
Buttons (0–15)
Event log
// Event-driven — fires at device rate (sub-frame fidelity)
window.addEventListener('rawgamepadinputchange', (event) => {
  const gp = event.gamepad;
  const leftX = gp.axes[0];
  const leftY = gp.axes[1];
  // axes updated at device rate — no missed inputs between frames
  updatePlayerPosition(leftX, leftY);
});

// Poll — only fires once per animation frame
function pollLoop() {
  const [gp] = navigator.getGamepads();
  if (gp) {
    const leftX = gp.axes[0];  // may miss high-freq axis changes
    updatePlayerPosition(leftX, gp.axes[1]);
  }
  requestAnimationFrame(pollLoop);
}

see also

implementation reference

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