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!
​
Runtimes - Previous
Background
Next - Runtimes
Load a file
Last updated 2 weeks ago