Rive Guide
Search
K

Angular

Community-driven Angular runtime for Rive

Overview

This guide documents how to get started using the community-built Angular runtime library. The source is available in its GitHub repository. This library contains modules to help integrate Rive into your Angular web application.

Getting Started

Follow the steps below for a quick start on integrating Rive into your Angular app.

1. Install the dependency

npm install ng-rive

2. Import the module

import { RiveModule } from 'ng-rive';
@NgModule({
declarations: [AnimationComponent],
imports: [
CommonModule,
RiveModule,
],
})
export class AnimationModule { }

3. Add the Rive file to assets

|-- assets
| |--rive
| |-- vehicles.riv

4. Render the Rive template

animation-component.html
<canvas riv="vehicles" width="500" height="500">
<riv-animation name="idle" play></riv-animation>
</canvas>

Resources

Last modified 1mo ago