Installation Guide

The rive-react library is distributed across four separate NPM packages, each tailored to a specific rendering backend. This allows you to choose the package that best fits your project's performance and bundle size requirements. The latest version supports React ^16.8.0 through ^19.0.

Choosing a Package

Before installing, you need to decide which renderer is right for you. Here's a breakdown of the available packages:

Package Name Renderer Description
@rive-app/react-canvas Canvas The standard Canvas renderer. It's well-supported and a good default choice for most use cases.
@rive-app/react-canvas-lite Canvas A lightweight version of the Canvas renderer. It excludes support for Rive Text and Audio, resulting in a significantly smaller bundle size.
@rive-app/react-webgl WebGL A more performant renderer that leverages the GPU. Ideal for complex animations or when rendering multiple Rive instances on a single page.
@rive-app/react-webgl2 WebGL2 The latest and most advanced renderer, built on WebGL2. This is required for using the new Data Binding/ViewModel features.

Recommendation:

  • For new projects or if you plan to use Data Binding, start with @rive-app/react-webgl2.
  • If bundle size is a critical concern and you don't need Text or Audio, use @rive-app/react-canvas-lite.
  • For general-purpose use without Data Binding, @rive-app/react-canvas is a solid choice.

Installing

Once you've chosen your package, install it using your preferred package manager.

npm install @rive-app/react-webgl2
# or
yarn add @rive-app/react-webgl2
# or
bun add @rive-app/react-webgl2

WebGL

npm install @rive-app/react-webgl
# or
yarn add @rive-app/react-webgl
# or
bun add @rive-app/react-webgl

Canvas (Full)

npm install @rive-app/react-canvas
# or
yarn add @rive-app/react-canvas
# or
bun add @rive-app/react-canvas

Canvas (Lite)

npm install @rive-app/react-canvas-lite
# or
yarn add @rive-app/react-canvas-lite
# or
bun add @rive-app/react-canvas-lite

After installation, you can proceed to the Quick Start guide to render your first animation.