We strongly recommend controlling your Rive file through Data Binding, rather than Inputs.
For more information on creating Inputs in Rive, please refer to: Inputs.

​
Controlling state machine inputs

Once the Rive file is loaded and instantiated, the state machine can be queried for inputs, and these input values can be set, and in the case of triggers, fired, all programmatically.
Inputs can also be set on components at runtime, see Nested Inputs below.

​
Examples

​
Inputs

The web runtime provides an onLoad callback that’s run when the Rive file is loaded and ready for use. We use this callback to ensure that the state machine is instantiated before we query for inputs.
<div id="button">
    <canvas id="canvas" width="1000" height="500"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/canvas@2.10.3"></script>
<script>
    const button = document.getElementById('button');

    const r = new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        autoplay: true,
        stateMachines: 'bumpy',
        onLoad: (_) => {
            // Get the inputs via the name of the state machine
            const inputs = r.stateMachineInputs('bumpy');
            // Find the input you want to set a value for, or trigger
            const bumpTrigger = inputs.find(i => i.name === 'bump');
            button.onclick = () => bumpTrigger.fire();
        },
    });
</script>
We use the stateMachineInputs function on the Rive object to retrieve the inputs. Each input will have a name and type. There are three types:
  • StateMachineInputType.Trigger which has a fire() function
  • StateMachineInputType.Number which has a value number property where you can get/set the value
  • StateMachineInputType.Boolean which has a value boolean property where you can get/set the value
const inputs = r.stateMachineInputs("bumpy");
inputs.forEach((i) => {
  const inputName = i.name;
  const inputType = i.type;
  switch (inputType) {
    case rive.StateMachineInputType.Trigger:
      i.fire();
      break;
    case rive.StateMachineInputType.Number:
      i.value = 42;
      break;
    case rive.StateMachineInputType.Boolean:
      i.value = true;
      break;
  }
});

​
Nested Inputs

You can control the inputs of Components at runtime. These inputs are not on the main artboard but on a component. To set a nested input, you need to know the path where the input exists at an artboard level.

​
Example

Image
  • Use the artboard’s unique hierarchy name, not the artboard’s name.
  • Do not include the name of the main artboard. In the example above, the path is Volume Molecule, not Menu/Volume Molecule.
  • Ensure the components are marked as exported in the editor to access them at runtime:
Image
You can go as many components deep as needed. For example, the Volume Molecule artboard shown above has two components with the following unique hierarchy names:
  • Volume Component
  • FX Component
Once you go more than one component deep the path will be a / separated string of the unique hierarchy names.
Image If you load in the Menu artboard at runtime, and want to get/set an input on the FX Component artboard, the path will be Volume Molecule/FX Component
Do not use / in the name for your components, as that will break the search functionality at runtime.
To set the Volume input for the above example:
const rive = new Rive({...});
...
rive?.setNumberStateAtPath("volume", 80.0, "Volume Molecule/Volume Component");
All options:
  • setNumberStateAtPath(inputName: string, value: number, path: string)
  • setBooleanStateAtPath(inputName: string, value: boolean, path: string)
  • fireStateAtPath(inputName: string, path: string)