Rive Web WASM Runtime

The @rive-app/canvas package provides an easy-to-use, high-level Rive API that uses a CanvasRenderingContext2D renderer. This approach leverages the browser's native high-level vector graphics renderer instead of WebGL.

Key Benefits

• Small Download Size: Extremely lightweight compared to WebGL-based runtimes.
• High Concurrency: Ideal for displaying many animated canvases simultaneously (e.g., in lists or grids) because it is not subject to the browser's WebGL context limits.
• Feature Support: Supports simple vector graphics animations, raster images, and mesh deformations.
• Automatic Dependency Management: Automatically requests the required WebAssembly (WASM) backing dependency for you.

The @rive-app/canvas-advanced-single package provides a low-level Rive API using the CanvasRenderingContext2D renderer. It is designed for developers who need more granular control than the standard @rive-app/canvas package provides.

Key features include:

• Full control over the update and render loop: Manually manage when Rive updates its state and draws to the canvas.
• Multi-artboard rendering: The ability to render multiple Rive artboards onto a single canvas element.
• Hierarchy manipulation: Deeper control and manipulation of individual components within a Rive hierarchy.
• Inline WASM: The WebAssembly (WASM) binary is bundled directly within the JavaScript package, eliminating the need for separate runtime requests to load the WASM file.

Rive Web is a JavaScript/TypeScript and WebAssembly (WASM) runtime library designed to run Rive animations in web applications. It provides two levels of control:

1. High-level API: Designed for simple interactions and hooking up animations easily.
2. Low-level API: Allows developers to drive their own render loop, enabling the creation of multiple artboards, animations, and state machines within a single canvas.

This runtime is used to load interactive motion graphics created in the Rive collaborative editor into websites and apps.

The @rive-app/canvas-single package provides an easy-to-use high-level Rive API that uses a CanvasRenderingContext2D renderer. This approach leverages the browser's native high-level vector graphics renderer.

Key Benefits

• Small Footprint: Extremely small download size.
• High Concurrency: Ideal for displaying many animated canvases concurrently (e.g., in lists or grids) because it is not subject to the browser's WebGL context limits.
• Feature Support: Supports simple vector graphics animations, raster images, and mesh deformations.
• Zero Runtime WASM Requests: The WebAssembly (WASM) dependency is included directly in the JS bundle, so no additional network requests are required to load it at runtime.

Choose between the lite and standard advanced versions based on your requirements for package size and feature support:

To use Rive's Layout system (which allows graphics to respond to window resizing or zooming), you must configure the Rive instance with specific fit and alignment settings:

1. Set the fit property to Fit.layout.
2. Update the artboard size dynamically as the window or container size changes.
3. Use the align method and adjust the scaleFactor parameter to account for the device pixel ratio or to implement custom zoom levels.

This example utilizes the high-level JS/TS API provided by @rive-app/canvas.

// Conceptual usage based on the layout example
// 1. Set fit to Fit.layout
// 2. Update artboard size on resize
// 3. Adjust scaleFactor in align() for zoom/DPI

The Neostream Events sample demonstrates three primary patterns for integrating Rive events with web application logic:

• Open URL Events: Triggering browser navigation (opening a URL) when a specific Rive event is fired.
• HTML/DOM Synchronization: Using Rive events to update the DOM, such as detecting animation completion or changing CSS properties like the mouse cursor when hovering over clickable Rive elements.
• Audio Synchronization: Triggering audio playback in sync with specific animation events to create immersive experiences.

Starting with version 0.7.5, the Rive and Layout constructors underwent a breaking change. They no longer accept individual parameters. Instead, they require a single parameterized object.

• Old way: Passing individual arguments to the constructor.
• New way: Pass a single configuration object.

Note: Layout.new and Rive.new were deprecated in favor of new Layout(params) and new Rive(params) using the same parameter object structure.

// v0.7.5+ pattern
const rive = new Rive({
  src: '...', 
  // other properties
});

The Neostream Events Sample demonstrates how to synchronize Rive's interactive animations with web applications using various event types. To run the development environment locally, follow these steps:

1. Clone the repository and navigate to the sample directory:

   cd neostream-events

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

To achieve responsive layouts in Rive that react to window resizing or zooming, use the following approach:

1. Set the fit property to Fit.layout.
2. Update the artboard size dynamically as the window dimensions change.
3. Use the align method and adjust the scaleFactor parameter to account for the device pixel ratio or to implement custom zoom levels for your graphics.