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

1. Add the package

To get started, add the Rive package and your Rive file to your pubspec.yaml file.

dependencies:
rive: ^0.6.2
flutter:
assets:
- assets/truck.riv

2. Install

Install the package from the command line.

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import the package

Now in your Dart code, import the library.

import 'package:rive/rive.dart';
iOS

Stay tuned for information on our upcoming iOS runtime!

Android

Stay tuned for information on our upcoming Android runtime!