Rive Parameters

You can set any of the following parameters on the Rive object when instantiating:
export interface RiveParameters {
  canvas: HTMLCanvasElement | OffscreenCanvas, // required
  src?: string, // one of src or buffer is required
  buffer?: ArrayBuffer, // one of src or buffer is required
  artboard?: string,
  animations?: string | string[],
  stateMachines?: string | string[],
  layout?: Layout,
  autoplay?: boolean,
  onLoad?: EventCallback,
  onLoadError?: EventCallback,
  onPlay?: EventCallback,
  onPause?: EventCallback,
  onStop?: EventCallback,
  onLoop?: EventCallback,
  onStateChange?: EventCallback,
  useOffscreenRenderer?: boolean,
}
canvas - (required) Canvas element to draw Rive animations onto.
src? - (optional) File path or URL to the .riv file to use. One of src or buffer must be provided.
buffer? - (optional) ArrayBuffer containing the raw bytes from a .riv file. One of src or buffer must be provided.
artboard? - (optional) Name of the artboard to use.
animations? - (optional) Name or list of names of animations to play.
stateMachines? - (optional) Name or list of names of state machines to load.
layout? - (optional) Layout object to define how animations are displayed on the canvas.
autoplay? - (optional) If true, the animation will automatically start playing when loaded. Defaults to false.
onLoad? - (optional) Callback that gets fired when the .riv file loads.
onLoadError? - (optional) Callback that gets fired when an error occurs loading the .riv file.
onPlay? - (optional) Callback that gets fired when the animation starts playing.
onPause? - (optional) Callback that gets fired when the animation pauses.
onStop? - (optional) Callback that gets fired when the animation stops playing.
onLoop? - (optional) Callback that gets fired when the animation completes a loop.
onStateChange? - (optional) Callback that gets fired when a state change occurs.
useOffscreenRenderer? - (optional) Boolean flag to determine whether to use a shared offscreen WebGL context rather than create its own WebGL context for this instance of Rive. This is only relevant for the @rive-app/webgl package. If you are displaying multiple Rive animations, it is highly encouraged to set this flag to true. Defaults to false.
Web (JS)
Canvas vs WebGL
Last modified 8mo ago