Rive Help Center
Search…
Getting started
Editor
Tutorials
Runtimes
Community
Web (JS)
JS/WASM runtime for Rive
Overview
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
Getting Started
Follow the steps below for a quick start on integrating Rive into your web app.
1. Install the dependency
Add the following script tag to a web page; we recommend sticking to one version, such as seen below:
1
<script src="https://unpkg.com/@rive-app/[email protected]"></script>
Copied!
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:
1
npm install @rive-app/canvas
2
​
3
// example.js
4
import rive from "@rive-app/canvas";
Copied!
If you need more details and options for a web runtime, check out the installation section in the README docs.
2. Create a canvas
Create a canvas element where you want the Rive file to display in your HTML:
1
<canvas id="canvas" width="500" height="500"></canvas>
Copied!
3. Create a Rive instance
Create a new instance of a Rive object, providing the following properties:
src- A string of the URL where the.rivfile is hosted (like in the example below), or the path to a local.rivfilecanvas- The canvas element on which you want the animation to renderautoplay- Boolean for whether you want the default animation to play
1
<script>
2
new rive.Rive({
3
src: "https://cdn.rive.app/animations/vehicles.riv",
4
// Or the path to a local Rive asset
5
// src: './example.riv',
6
canvas: document.getElementById("canvas"),
7
autoplay: true
8
});
9
</script>
Copied!
Complete example
Putting this altogether, you can load an example Rive animation in one HTML file:
1
<html>
2
<head>
3
<title>Rive Hello World</title>
4
</head>
5
<body>
6
<canvas id="canvas" width="500" height="500"></canvas>
7
​
8
<script src="https://unpkg.com/@rive-app/[email protected]"></script>
9
<script>
10
new rive.Rive({
11
src: "https://cdn.rive.app/animations/vehicles.riv",
12
canvas: document.getElementById("canvas"),
13
autoplay: true
14
});
15
</script>
16
</body>
17
</html>
Copied!
Loading in Rive files
You can choose to load Rive files in the following ways:
- Hosted URL - The string of the URL where the
.rivfile is hosted. Set this to thesrcattribute when instantiating aRiveobject - Static assets in the bundle - String of a path to the public/static assets in your web project. Treat
.rivfiles 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
srcattribute, use thebufferattribute to load in an ArrayBuffer when fetching a file. See an example here​
Resources
​
Last modified 20d ago