Skip to main content
The Web (JS) runtime sends input from game controllers to your Rive graphic, so players can drive it with a controller’s buttons and sticks. Gamepad input is on by default in @rive-app/canvas, @rive-app/canvas-lite, and @rive-app/webgl2 2.48.0+. To react to a controller in your file, add a Gamepad listener to a state machine. Scripts can receive gamepad events too.

How input reaches the graphic

  • The runtime reads every controller the browser detects once per frame, before the state machine advances.
  • Controllers without the browser’s standard button layout also work. Their buttons and sticks are sent as the browser reports them.
  • Each Rive instance on the page sends input to its playing state machine. If it plays more than one, only the first receives controller input.
  • Gamepad events go to the node that has focus, then up through its ancestors. When no node has focus, only scripts receive them.

Requiring canvas focus

By default, a Rive instance receives controller input even when its canvas doesn’t have browser focus. To send input only while browser focus is on the canvas, set requireFocus to true in gamepadOptions. This helps when several graphics on one page use a controller.
The Semantics overlay and the hidden input count as part of the canvas. While browser focus is somewhere else, controllers stay connected, but the graphic sees all buttons released and all sticks at rest.

Turning off gamepad input

To stop a Rive instance from reading controllers, set shouldDisableGamepad to true. Its state machine then receives no gamepad events.
Setting shouldDisableRiveListeners to true also turns off gamepad input.