Skip to main content

Web (JavaScript)

The Rive web runtime is an open-source JavaScript library. Under the hood it uses WebAssembly (a compiled binary format that runs in the browser at near-native speed), which makes it fast. It lets you play Rive animations on any web page. It supports WebGL2 (a browser API for hardware-accelerated graphics rendering — it makes animations smooth by using the device's GPU), Canvas, and lightweight rendering options.

Installation​

Choose a delivery method based on your project setup.

Via script tag (CDN):

<script src="https://unpkg.com/@rive-app/webgl2@2"></script>

This makes a global rive object available on the page.

Via package manager:

npm install @rive-app/webgl2

Available packages:

  • @rive-app/webgl2 — Full-featured, uses the Rive Renderer (recommended). The Rive Renderer is Rive's own high-quality graphics engine, built on top of WebGL2. It gives you the richest visual output and full feature support.
  • @rive-app/canvas — Canvas-only, no Rive Renderer
  • @rive-app/canvas-lite — Smallest bundle, limited feature support

Basic Setup​

You need three things: a <canvas> element, a Rive instance, and the path to your .riv file.

<canvas id="rive-canvas" width="500" height="500"></canvas>
import Rive from '@rive-app/webgl2';

const r = new Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('rive-canvas'),
  autoplay: true,
  stateMachines: 'bumpy',
  onLoad: () => {
    // Called when the file has loaded
    r.resizeDrawingSurfaceToCanvas();
  },
});
tip

Call resizeDrawingSurfaceToCanvas() after load to match the canvas to the device pixel ratio for crisp rendering on high-DPI screens.

Cleanup​

When you no longer need a Rive instance, call cleanup() to release memory:

r.cleanup();

This frees the underlying WebAssembly objects and prevents memory leaks.

Loading Options​

Use the method that fits how your .riv file is delivered:

MethodWhen to use
URL string (src)Hosted .riv file
Static bundle assetBundled with your app
Fetch → ArrayBuffer (a chunk of raw binary data loaded from a URL or API)Load from API / dynamic source
Reuse loaded fileBest performance when using the same file in multiple places

Next Steps​