stevysmith/rive-skills/rive-web

# Canvas renderer (smaller, good for most cases)
npm install @rive-app/canvas
 
# WebGL renderer (better for complex animations)
npm install @rive-app/webgl

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');
  },
});

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
  },
});

// 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();

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

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