​
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

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

​
Resources

GitHub: https://github.com/dappsnation/ng-rive

API Docs: https://github.com/dappsnation/ng-rive#api

Was this page helpful?

Suggest editsRaise issue
AndroidVue