` in the top-right corner of the page, reading out the FPS. Call this after Rive has initialized in the `onLoad` callback, or at another point in time.
### disableFPSCounter()
`disableFPSCounter(): void`
Disables the FPS reporting for the runtime.
## Other
Other API's and properties are provided to report playing/paused/stopped entities in the Rive instance.
### source
Property to get the `src` attribute in the Rive instance
### activeArtboard
Property to get the name of the active artboard
### animationNames
Property to get an array of all animation names on the loaded in Artboard (even if the animations are not specified at instantiation)
### stateMachineNames
Property to get an array of all state machine names on the loaded in Artboard (even if the state machine(s) are not specified at instantiation)
### playingAnimationNames
Property to get an array of all active playing timeline animation names on the Rive instance (if you are playing a state machine, this will not return the currently active state timeline animations)
### playingStateMachineNames
Property to get an array of all active playing state machine names on the Rive instance
### pausedAnimationNames
Property to get an array of all active paused timeline animation names on the Rive instance (if you are playing a state machine, this will not return the currently active state timeline animations)
### pausedStateMachineNames
Property to get an array of all active paused state machine names on the Rive instance
### isPlaying
Property that returns `true` if any animation is playing
### isPaused
Property that returns `true` if all instanced animations are paused
### isStopped
Property that returns `true` if no instanced animations are playing or paused
### bounds
Property that returns the bounds of the Artboard
### layout (get/set)
Property to either get or set a Rive `Layout`
**Example:**
```typescript
import {Rive, Layout, Fit, Alignment} from '@rive-app/canvas';
const riveInstance = new rive.Rive({
src: 'https://cdn.rive.app/animations/vehicles.riv',
canvas: document.getElementById('canvas'),
autoplay: true,
stateMachines: 'bumpy',
});
const buttonEl = document.querySelector("button");
buttonEl.onclick = function() {
// Set new Layout
riveInstance.layout = new Layout({
fit: Fit.Cover,
alignment: Alignment.TopCenter,
});
};
```
# Web (JS)
Source: https://uat.rive.app/docs/runtimes/web/web-js
JavaScript/WASM runtime for Rive.
Note that certain Rive features may not be supported yet for a particular runtime, or may require using the Rive Renderer.
For more details, refer to the [feature support](/feature-support/) and [choosing a renderer](/runtimes/choose-a-renderer/) pages.
## Overview
This guide documents how to get started using the Rive web runtime library. The runtime is open source and available in this [GitHub repository](https://github.com/rive-app/rive-wasm). This library has a high-level JavaScript API (with TypeScript support) and a low-level API to load in Web Assembly (WASM) and control the rendering loop yourself. This runtime allows you to:
* Quickly integrate Rive into all web applications (Webflow, WordPress, etc.)
* Provides a base API to build other web-based Rive runtime wrappers (React, Svelte, etc.)
* Support advanced use cases by controlling the render loop (web-based game engines)
## Quick Start
See our [quick start example](https://codesandbox.io/p/sandbox/rive-quick-start-js-xmwcm6).
This example only demonstrates loading a .riv file resource in various ways and creating a Rive instance. The other sections detail more advanced use cases.
## Getting started
Follow the steps below to integrate Rive into your web app.
The following instructions describe using the `@rive-app/canvas` package. Rive provides web-based packages like WebGL, Canvas, and Lite versions.
See [Canvas vs WebGL](./canvas-vs-webgl) for guidance on which package is the correct choice for your use case.
We recommend always using the [latest version](https://www.npmjs.com/package/@rive-app/canvas). The versions listed below and in the examples may differ from the latest.
```html
// Add the following script tag to your web page to get the latest version:
// You can also pin to a specific version (See [here](https://www.npmjs.com/package/@rive-app/canvas) for the latest):
// This will make a global `rive` object available, allowing you to access the Rive API via the `rive` entry point:
new rive.Rive({});
```
```bash npm
npm install @rive-app/canvas
```
```bash pnpm
pnpm add @rive-app/canvas
```
```bash yarn
yarn add @rive-app/canvas
```
```bash bun
bun add @rive-app/canvas
```
```javascript Importing
// Import the entire module under the global identifier `rive`
import * as rive from "@rive-app/canvas";
// Alternatively, import only the specific parts you need
import { Rive } from "@rive-app/canvas";
```
Not using [Rive Text](/editor/text/) and [Rive Audio](/editor/events/audio-events)? Consider using [@rive-app/canvas-lite](./canvas-vs-webgl#rive-app-canvas-lite) which is a smaller package variant.
Add a canvas element to your HTML where you want the Rive graphic to be displayed:
```json
```
To create a new instance of a Rive object, provide the following properties:
* `src`: A string representing the URL of the hosted `.riv` file (as shown in the example below) or the path to the public asset `.riv` file. For more details, refer to [Rive Parameters](./rive-parameters) on how to properly use this property.
* `artboard` - (Optional) A string representing the artboard you want to display. If not supplied the default is selected.
* `stateMachines` - A string representing the name of the state machine you wish to play.
* `canvas` - The canvas element where the animation will be rendered.
* `autoplay` - A boolean indicating whether the animation should play automatically.
```javascript
```
The `resizeDrawingSurfaceToCanvas` method ensures that the Rive animation is correctly scaled to fit the dimensions of the specified canvas element. By default, the canvas rendering surface might not match the exact size of the `
### Complete example
Bringing it all together, here's how to load a Rive graphic in a single HTML file.
```html
Rive Hello World
```
### Loading Rive files
[See this example](https://codesandbox.io/p/sandbox/rive-quick-start-js-xmwcm6) for the different ways to load in a .riv file, the options are:
1. **Hosted URL**: Use a string representing the URL where the `.riv` file is hosted. Set this as the `src` attribute when creating a new Rive instance.
2. **Static Assets in the bundle**: Provide a string with the path to a publicly accessible `.riv` file within your web project. Handle `.riv` files just like any other static asset (e.g., images or fonts) in your project.
3. **Fetching a file**: Instead of using the `src` attribute, use the `buffer` attribute to load an `ArrayBuffer` when fetching a file. This is useful when reusing the same `.riv` file across multiple Rive instances, allowing you to load it only once.
4. **Reusing a Loaded File**: Use the `rivFile` parameter to reuse a previously loaded Rive runtime file object, avoiding the need to fetch it again via the `src` URL or reload it from the `buffer`. This can significantly improve performance by eliminating redundant network requests and loading times, especially when creating multiple Rive instances from the same source. Unlike the `src` and `buffer` parameters, which require parsing under the hood to create a runtime file object, the `riveFile` parameter uses an already parsed object, including any loaded assets. See [Caching a Rive File](../caching-a-rive-file).
For more details, refer to the [Rive Parameters](./rive-parameters) section on the `src` property.
## 4. Clean up Rive
When working with a Rive instance, it's important to properly clean it up when it's no longer needed. This is especially necessary in scenarios where:
* The UI containing Rive animations is no longer needed (e.g., when a modal with Rive graphics is closed).
* The animation or state machine has completed and will not be shown or run again.
Under the hood, Rive creates various low-level objects (such as artboard instances, animation instances, and state machine instances) in C++, which need to be manually deleted to prevent memory leaks. If not cleaned up, these objects can consume unnecessary resources, potentially impacting your application's performance.
Fortunately, the high-level JavaScript API simplifies this process. You don't need to track every object created during the Rive instance lifecycle. Instead, you can clean up all associated objects with a single method call.
To clean up a Rive instance and free up resources, simply call the following method on your Rive instance:
```javascript
const riveInstance = new Rive({...));
...
// When ready to cleanup
riveInstance.cleanup();
```
# Rive runtime concepts
Learn how to interact with your Rive graphics during runtime.
}>
Configuring runtime animation playback properties.
}>
Controlling your Rive graphic's layout (fit and alignment) at runtime.
}>
Interacting with Rive state machines from runtime.
}>
Update Rive text at runtime.
}>
Runtime audio properties and controls.
}>
Subscribe to Rive events at runtime.
}>
Loading and replacing assets (images, fonts, audio) dynamically at runtime.
}>
Cache and reuse a Rive file object across multiple Rive instances.
# Additional Rive web resources
More in-depth Rive web documentation and advanced use cases.
}>
API docs for the Rive instance.
}>
A guide to the different Rive web packages
}>
Frequently asked questions
}>
Instructions on how to preload and self-host the rive WASM library.
}>
Control the Rive render loop and layout, and draw multiple artboards to the same canvas.
# Examples
* [Basic gallery app](https://github.com/rive-app/rive-wasm/tree/master/js/examples/_frameworks/parcel_example_canvas)
* [Tracking mouse cursor](https://codesandbox.io/p/sandbox/tracking-mouse-cursor-n38gdd)
* [Simple skinning](https://codesandbox.io/p/sandbox/simple-skinning-example-96xnwn)
* [Connecting to page scroll](https://codesandbox.io/p/sandbox/rive-page-scroll-h4msqw)
* [Playing state machine only when scrolled into the user's viewport](https://codesandbox.io/p/sandbox/rive-wait-for-scroll-into-view-y9wg8d)
# Awesome Rive
Source: https://uat.rive.app/docs/tutorials/awesome-rive
# Learn Rive
Source: https://uat.rive.app/docs/tutorials/learn-rive
export const YouTube = ({id, timestamp}) => {
const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
return
;
};
## Rive for ABSOLUTE BEGINNERS
## Rive 101
## Community
**Rive Academy: Volume 1**
Rive Academy: Volume 1 is the ultimate introduction to the world of interactive animation built with Rive. You’ll learn how to design, animate, and prototype interactive motion design that you can ship anywhere. By the end of the course you’ll be ready to use Rive in production, and go further in more advanced courses.
**Rive: Interactive Motion**
Discover the web-based software revolutionizing interactive experiences. Build 2 big faux 3d spaces filled with awesome interactive setups. Learn on practise all Rive techniques and use it in full power.