Runtimes Quick Start
The Rive runtimes are open-source libraries that allow you to load and control your animations in apps, games, and websites.
Web
React
Vue
Flutter
iOS
Android
React Native
Angular

1. Add the Rive library

Add a script tag to a web page:
1
<script src="https://unpkg.com/rive-js"></script>
Copied!

2. Create a canvas

Create a canvas where you want the Rive file to display:
1
<canvas id="canvas" width="500" height="500"></canvas>
Copied!

3. Create a Rive object

Create a new instance of a Rive object, providing the url of the Rive file you wish to show, the canvas on which you want it to render, and whether you want the default animation to play.
1
<script>
2
new rive.Rive({
3
src: 'https://cdn.rive.app/animations/vehicles.riv',
4
canvas: document.getElementById('canvas'),
5
autoplay: true
6
});
7
</script>
Copied!

Complete example

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-js"></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!

Install the rive-react package

1
npm i --save rive-react
Copied!

Component

Rive React provides a basic component as it's default import for displaying simple animations.
1
import Rive from 'rive-react'
2
3
export const Simple = () => (
4
<Rive src="https://cdn.rive.app/animations/vehicles.riv" />
5
);
Copied!

Props

    src: File path or URL to the .riv file to display.
    artboard: (optional) Name to display.
    animations: (optional) Name or list of names of animtions to play.
    layout: (optional) Layout object to define how animations are displayed on the canvas.
    All attributes and eventHandlers that can be passed to a div element can also be passed to the Rive component and used in the same manner.

useRive Hook

For more advanced usage, the useRive hook is provided. The hook will return a component and a Rive object which gives you control of the current rive file.
1
import { useRive } from 'rive-react';
2
3
export default function Simple() {
4
const { rive, RiveComponent } = useRive({
5
src: 'https://cdn.rive.app/animations/vehicles.riv',
6
autoplay: false,
7
});
8
9
return (
10
<RiveComponent
11
onMouseEnter={() => rive && rive.play()}
12
onMouseLeave={() => rive && rive.pause()}
13
/>
14
);
15
}
Copied!

Parameters

    riveParams: Set of parameters that are passed to the Rive.js Rive class constructor. null and undefined can be passed to conditionally display the .riv file.
    opts: Rive React specific options.

Return Values

    RiveComponent: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a div element.
    rive: A Rive.js Rive object. This will return as null until the .riv file has fully loaded.
    canvas: HTMLCanvasElement object, on which the .riv file is rendering.
    setCanvasRef: A callback ref that can be passed to your own canvas element, if you wish to have control over the rendering of the Canvas element.
    setContainerRef: A callback ref that can be passed to a container element that wraps the canvas element, if you which to have control over the rendering of the container element.
    For the vast majority of use cases, you can just the returned RiveComponent and don't need to worry about setCanvasRef and setContainerRef.

riveParams

    src?: (optional) File path or URL to the .riv file to use. One of src or buffer must be provided.
    buffer?: (optional) ArrayBuffer containing the raw bytes from a .riv file. One of src or buffer must be provided.
    artboard?: (optional) Name of the artboard to use.
    animations?: (optional) Name or list of names of animations to play.
    stateMachines?: (optional) Name of list of names of state machines to load.
    layout?: (optional) Layout object to define how animations are displayed on the canvas. See Rive.js for more details.
    autoplay?: (optional) If true, the animation will automatically start playing when loaded. Defaults to false.
    onLoad?: (optional) Callback that get's fired when the .rive file loads .
    onLoadError?: (optional) Callback that get's fired when an error occurs loading the .riv file.
    onPlay?: (optional) Callback that get's fired when the animation starts playing.
    onPause?: (optional) Callback that get's fired when the animation pauses.
    onStop?: (optional) Callback that get's fired when the animation stops playing.
    onLoop?: (optional) Callback that get's fired when the animation completes a loop.
    onStateChange?: (optional) Callback that get's fired when a state change occurs.

opts

    useDevicePixelRatio: (optional) If true, the hook will scale the resolution of the animation based the devicePixelRatio. Defaults to true. NOTE: Requires the setContainerRef ref callback to be passed to a element wrapping a canvas element. If you use the RiveComponent, then this will happen automatically.
    fitCanvasToArtboardHeight: (optional) If true, then the canvas will resize based on the height of the artboard. Defaults to false.
The following snippet demonstrates how to create a simple Rive component in Vue 2.
1
<template>
2
<div>
3
<canvas ref="canvas" width="400" height="400"></canvas>
4
</div>
5
</template>
6
7
<script>
8
import { Rive, Layout } from 'rive-js'
9
10
export default {
11
name: 'Rive',
12
props: {
13
src: String,
14
fit: String,
15
alignment: String
16
},
17
mounted() {
18
new Rive({
19
canvas: this.$refs.canvas,
20
src: this.$props.src,
21
layout: new Layout({
22
fit: this.$props.fit,
23
alignment: this.$props.alignment,
24
}),
25
autoplay: true
26
})
27
}
28
}
29
</script>
Copied!

1. Add the Rive package dependency

pubspec.yaml
1
dependencies:
2
rive:
Copied!

2. Import the Rive package

1
import 'package:rive/rive.dart';
Copied!

3. Add a RiveAnimation widget

1
RiveAnimation.network(
2
'https://cdn.rive.app/animations/vehicles.riv',
3
)
Copied!

Complete example

main.dart
1
import 'package:flutter/material.dart';
2
import 'package:rive/rive.dart';
3
4
void main() => runApp(MaterialApp(
5
home: MyRiveAnimation(),
6
));
7
8
class MyRiveAnimation extends StatelessWidget {
9
@override
10
Widget build(BuildContext context) {
11
return const Scaffold(
12
body: Center(
13
child: RiveAnimation.network(
14
'https://cdn.rive.app/animations/vehicles.riv',
15
fit: BoxFit.cover,
16
),
17
),
18
);
19
}
20
}
Copied!

1. Add the CocoaPods dependency

Podfile
1
pod 'RiveRuntime', :git => '[email protected]:rive-app/test-ios.git'
Copied!

2. Create a UIViewController and import runtime

1
import UIKit
2
import RiveRuntime
3
4
class RiveViewController: UIViewController {
5
6
override public func loadView() {
7
super.loadView()
8
}
9
}
Copied!

3. Add a RiveView and a RiveFile

1
import UIKit
2
import RiveRuntime
3
4
class RiveViewController: UIViewController {
5
let url = "https://cdn.rive.app/animations/vehicles.riv"
6
7
override public func loadView() {
8
super.loadView()
9
10
let view = RiveView()
11
guard let riveFile = RiveFile(httpUrl: url, with: view) else {
12
fatalError("Unable to load RiveFile")
13
}
14
15
view.configure(riveFile)
16
self.view = view
17
}
18
}
Copied!

4. Tidy up once the view is dismissed

1
override public func viewDidDisappear(_ animated: Bool) {
2
(view as! RiveView).stop()
3
super.viewDidDisappear(animated)
4
}
Copied!

1. Add the Rive dependency

1
dependencies {
2
implementation 'app.rive:rive-android:0.1.1'
3
}
Copied!

2. Add RiveAnimation to your layout

1
<app.rive.runtime.kotlin.RiveAnimationView
2
android:id="@+id/my_rive_animation"
3
4
android:layout_width="match_parent"
5
android:layout_height="match_parent"
6
7
app:riveUrl="https://cdn.rive.app/animations/vehicles.riv"
8
app:riveFit="COVER" />
Copied!

3. Clean up when done

MyRiveActivity.kt
1
class MyRiveActivity : AppCompatActivity() {
2
3
private val animationView by lazy(LazyThreadSafetyMode.NONE) {
4
findViewById<RiveAnimationView>(R.id.my_rive_animation)
5
}
6
7
override fun onCreate(savedInstanceState: Bundle?) {
8
super.onCreate(savedInstanceState)
9
setContentView(R.layout.my_rive)
10
}
11
12
override fun onDestroy() {
13
super.onDestroy()
14
animationView.destroy()
15
}
16
}
Copied!

Internet permissions

This example requires your app to have permission to access the internet:
AndroidManifest.xml
1
<uses-permission android:name="android.permission.INTERNET" />
2
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Copied!
This is needed only if you're retrieving Rive files over a network. If you include the files in your Android project, this isn't necessary.

1. Add the Rive dependency

1
npm install --save rive-react-native
Copied!

2. Create iOS bridging header

    open the iOS project file in XCode open ios/<name>.xcodeproj
    create a new empty swift file.
    confirm "Create Bridging Header"

3. Add your rive component

App.js
1
import Rive from 'rive-react-native';
2
3
function App() {
4
return <Rive
5
url="https://cdn.rive.app/animations/vehicles.riv"
6
style={{width: 400, height: 400}}
7
/>;
8
}
Copied!

1. Install :

1
npm install ng-rive
Copied!

2. Import RiveModule:

animation.module.ts
1
import { RiveModule } from 'ng-rive';
2
3
@NgModule({
4
declarations: [AnimationComponent],
5
imports: [
6
CommonModule,
7
RiveModule,
8
],
9
})
10
export class AnimationModule { }
Copied!

3. Add your .riv file in your assets

1
|-- assets
2
| |--rive
3
| |-- vehicles.riv
Copied!

4. Use in template :

animation.component.html
1
<canvas riv="vehicles" width="500" height="500">
2
<riv-animation name="idle" play></riv-animation>
3
</canvas>
Copied!
Last modified 17d ago
Copy link