rive-web

Rive Web Runtime

Embed and control Rive animations on the web with JavaScript/TypeScript.

Installation

# Canvas renderer (smaller, good for most cases)
npm install @rive-app/canvas

# WebGL renderer (better for complex animations)
npm install @rive-app/webgl

Quick Start

import { Rive } from '@rive-app/canvas';

const rive = new Rive({ src: 'animation.riv', canvas: document.getElementById('canvas') as HTMLCanvasElement, autoplay: true, onLoad: () => { console.log('Animation loaded'); }, });

## Key Concepts

| Concept | Description |
|---------|-------------|
| **Rive Instance** | Main controller for the animation |
| **State Machine** | Interactive logic built in Rive editor |
| **Inputs** | Variables to control state machine (Boolean, Number, Trigger) |
| **Events** | Signals fired by the state machine |
| **Artboard** | Container for animation content |

## Common Patterns

### Loading Animation

```typescript
const rive = new Rive({
  src: 'animation.riv',           // URL or path
  canvas: canvasElement,
  stateMachines: 'State Machine', // Name from Rive editor
  autoplay: true,
  onLoad: () => {
    // Animation ready
  },
  onStateChange: (event) => {
    // State changed
  },
});

Controlling Inputs

// Get inputs
const inputs = rive.stateMachineInputs('State Machine');

// Set boolean
const toggle = inputs.find(i => i.name === 'isActive');
toggle.value = true;

// Set number
const progress = inputs.find(i => i.name === 'progress');
progress.value = 0.75;

// Fire trigger
const click = inputs.find(i => i.name === 'onClick');
click.fire();

Handling Events

rive.on('riveevent', (event) => {
  console.log('Event:', event.data.name);
  // Access custom properties
  const data = event.data.properties;
});

Cleanup

// Always cleanup when done
rive.cleanup();

Rules

@file rules/loading.md @file rules/state-machines.md @file rules/inputs.md