Add a runtime

Web
Flutter
iOS
Android
Web

1. Import the runtime package

To use the library, run npm install rive-canvas and include it within the <body> of your HTML file.

<script src="/node_modules/rive-canvas/rive.js"></script>

2. Instantiate the Rive engine

Then instantiate the Rive engine and load the WASM file(s) within your JavaScript.

Rive({
locateFile: (file) => '/node_modules/rive-canvas/'+file,
}).then((module) => {
// Rive's ready to rock 'n roll
// Let's load up a Rive animation file...
});

CDN alternative

As with all npm packages, you can use the freely available CDN via unpkg.com.

<script src="https://unpkg.com/rive-canvas@0.0.2/rive.js"></script>
Rive({
locateFile: (file) => 'https://unpkg.com/rive-canvas@0.0.10/' + file,
}).then((rive) => {
// Rive's ready to rock 'n roll
// Let's load up a Rive animation file...
});
Flutter

iOS

Stay tuned for information on our upcoming iOS runtime!

Android

Stay tuned for information on our upcoming Android runtime!