Gamepad | Frontend Practical Guide

Widely availableSuitable for production when it improves semantics, input, or browser integration.

Overview

The navigator.getGamepads() API accesses and responds to signals from game controllers. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Gamepad`	21	12	29	10.1	25	10.3
`axes` The Gamepad.axes property of the interface returns an array representing the controls with axes present on the device (e.g., analog thumb sticks).	21	12	29	10.1	25	10.3
`buttons` The buttons property of the Gamepad interface returns an array of GamepadButton objects representing the buttons present on the device.	21	12	29	10.1	25	10.3
`connected` The Gamepad.connected property of the interface returns a boolean indicating whether the gamepad is still connected to the system.	25	12	29	10.1	25	10.3
`id` The Gamepad.id property of the interface returns a string containing some information about the controller.	21	12	29	10.1	25	10.3
`index` The Gamepad.index property of the interface returns an integer that is auto-incremented to be unique for each device currently connected to the system.	21	12	29	10.1	25	10.3
`mapping` The Gamepad.mapping property of the Gamepad interface returns a string indicating whether the browser has remapped the controls on the device to a known layout.	21	12	29	10.1	25	10.3
`secure_context_required` Experimental Secure context required	86	86	91		86
`timestamp` The Gamepad.timestamp property of the Gamepad interface returns a DOMHighResTimeStamp representing the last time the data for this gamepad was updated.	21	12	29	10.1	25	10.3
`GamepadButton` The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device.	21	12	29	10.1	25	10.3
`pressed` The GamepadButton.pressed property of the GamepadButton interface returns a boolean indicating whether the button is currently pressed (true) or unpressed (false).	21	12	29	10.1	25	10.3
`secure_context_required` Experimental Secure context required	86	86	91		86
`value` The GamepadButton.value property of the GamepadButton interface returns a double value used to represent the current state of analog buttons on many modern gamepads, such as the triggers.	21	12	29	10.1	25	10.3
`GamepadEvent` The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnectedevent and Window.gamepaddisconnectedevent are fired in response to.	21	12	29	10.1	25	10.3
`gamepad` The GamepadEvent.gamepad property of the GamepadEvent interface returns a Gamepad object, providing access to the associated gamepad data for fired Window.gamepadconnectedevent and Window.gamepaddisconnectedevent events.	21	12	29	10.1	25	10.3
`GamepadEvent` The GamepadEvent() constructor creates a new GamepadEvent object.	35	12	29	10.1	35	10.3
`secure_context_required` Experimental Secure context required	86	86	91		86
`getGamepads` The Navigator.getGamepads() method returns an array of Gamepad objects, one for each gamepad connected to the device.	35	12	29	10.1	35	10.3
`getGamepads (secure context required)` Experimental Secure context required	86	86	91		86
`gamepadconnected_event` The gamepadconnected event is fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.	143	143	89	16	143	16
`gamepaddisconnected_event` The gamepaddisconnected event is fired when the browser detects that a gamepad has been disconnected.	143	143	89	16	143	16
Other
`html.elements.iframe.allow.gamepad` Experimental			91

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

window.addEventListener('gamepadconnected', (e) => {
  console.log('Controller connected:', e.gamepad.id);
});
function update() {
  const gp = navigator.getGamepads()[0];
  if (gp) console.log('A button:', gp.buttons[0].pressed);
  requestAnimationFrame(update);
}

Use cases

Use Gamepad
Use Gamepad when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Gamepad to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Gamepad in your target browsers and input environments before depending on it as a primary behavior.

Overview

Browser support

Syntax

Use cases

Use Gamepad

Handle edge cases

Cautions

Accessibility

Related links