Rive Guide
Search…
Web (JS)
JS/WASM runtime for Rive

This guide documents how to get started using the Web runtime library. Rive runtime libraries are open-source. The source is available in its GitHub repository. This library has both a high-level JavaScript API (with TypeScript support), as well as a low-level API to load in Web Assembly (WASM) and control the rendering loop yourself. This runtime is great for the following:
  • Quickly integrating Rive into all kinds of web applications (i.e Webflow, Wordpress, etc.)
  • Providing a base API to build other web-based Rive runtime wrappers (i.e React, Angular, etc.)
  • Advanced use cases in controlling a render loop

Follow the steps below for a quick start on integrating Rive into your web app.

Add the following script tag to a web page; we recommend sticking to one version, such as seen below:
<script src="https://unpkg.com/@rive-app/[email protected]"></script>
Find the versions of the runtimes in the "Versions" tab here: https://www.npmjs.com/package/@rive-app/canvas
Alternatively, you can import our recommended web runtime package via npm/yarn in your project:
npm install @rive-app/canvas
// example.js
import rive from "@rive-app/canvas";
If you need more details and options for a web runtime, check out the installation section in the README docs.

Create a canvas element where you want the Rive file to display in your HTML:
<canvas id="canvas" width="500" height="500"></canvas>

Create a new instance of a Rive object, providing the following properties:
  • src - A string of the URL where the .riv file is hosted (like in the example below), or the path to a local .riv file
  • canvas - The canvas element on which you want the animation to render
  • autoplay - Boolean for whether you want the default animation to play
<script>
new rive.Rive({
src: "https://cdn.rive.app/animations/vehicles.riv",
// Or the path to a local Rive asset
// src: './example.riv',
canvas: document.getElementById("canvas"),
autoplay: true
});
</script>

Putting this altogether, you can load an example Rive animation in one HTML file:
<html>
<head>
<title>Rive Hello World</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="https://unpkg.com/@rive-app/[email protected]"></script>
<script>
new rive.Rive({
src: "https://cdn.rive.app/animations/vehicles.riv",
canvas: document.getElementById("canvas"),
autoplay: true
});
</script>
</body>
</html>
Try it out on your own: Check out this CodeSandbox for a small setup to test your own Rive files!

You can choose to load Rive files in the following ways:
  • Hosted URL - The string of the URL where the .riv file is hosted. Set this to the src attribute when instantiating a Rive object
  • Static assets in the bundle - String of a path to the public/static assets in your web project. Treat .riv files in the project just as you would any other asset in your bundle, such as images or font files
  • Fetching a file - Instead of using the src attribute, use the buffer attribute to load in an ArrayBuffer when fetching a file. See an example here

Copy link
On this page
Overview
Getting Started
1. Install the dependency
2. Create a canvas
3. Create a Rive instance
Complete example
Loading in Rive files
Resources