https://github.com/Grandgular/rive
https://github.com/Grandgular/rive
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/Grandgular/rive
- Owner: Grandgular
- License: mit
- Created: 2026-02-12T19:38:11.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-02-13T14:36:54.000Z (about 1 month ago)
- Last Synced: 2026-02-13T18:17:20.635Z (about 1 month ago)
- Language: TypeScript
- Size: 326 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - rive-angular - Modern Angular wrapper for 🌎 [Rive](rive.app/) animations with reactive state management, built with Angular signals and zoneless architecture. (Framework Interoperability / Wrappers)
- awesome-angular - rive-angular - Modern Angular wrapper for [Rive](https://rive.app/) animations with reactive state management, built with Angular signals and zoneless architecture. (Framework Interoperability / Wrappers)
README
# @grandgular/rive-angular
[](https://www.npmjs.com/package/@grandgular/rive-angular)
[](https://opensource.org/licenses/MIT)
Modern Angular wrapper for [Rive](https://rive.app) animations with reactive state management, built with Angular signals and zoneless architecture.
## Overview
This library provides a **modern, Angular-native** way to integrate Rive animations into your Angular applications:
- 🚀 **Modern Angular**: Built with Angular 18+ signals, standalone components, and zoneless architecture
- ⚡ **Performance-first**: Runs outside Angular zone, uses OnPush change detection, and IntersectionObserver
- 🎯 **Type-safe**: Full TypeScript support with strict typing
- 🔄 **Reactive**: Signal-based API for reactive state management
- 🛠️ **Developer Experience**: Built-in debug mode, validation, and detailed error codes
- 🔒 **Production-ready**: Comprehensive audit completed, all critical issues resolved (v0.2.0)
- 🎨 **Data Binding**: Full ViewModel support for dynamic colors, numbers, strings, and two-way reactivity (v0.4.0)
## Documentation
- [Full Documentation](libs/rive-angular/README.md)
- [Changelog](libs/rive-angular/CHANGELOG.md)
- [Issues Analysis & Roadmap](libs/rive-angular/docs/ng-rive-issues-analysis.md)
## Latest Release: v0.4.0 (2026-02-23)
**Data Binding (ViewModel) Support** — Full integration with Rive's ViewModel system:
- ✅ Declarative data binding via `dataBindings` input (controlled keys)
- ✅ Imperative methods: `setDataBinding()`, `setColor()`, `setColorOpacity()`, `fireViewModelTrigger()`
- ✅ Two-way reactivity via `dataBindingChange` output (including trigger events)
- ✅ Auto-detect property types (color, number, string, boolean, enum, trigger)
- ✅ Color manipulation with multiple formats (hex, ARGB, RiveColor object)
- ✅ Validation errors via `RIVE_4xx` error codes
- ✅ Feature parity with React's `@rive-app/react-webgl2` hooks
See [CHANGELOG.md](libs/rive-angular/CHANGELOG.md) for full details.
## Installation
```bash
npm install @grandgular/rive-angular @rive-app/canvas
```
## Quick Start
```typescript
import { RiveCanvasComponent, Fit } from '@grandgular/rive-angular';
import { signal } from '@angular/core';
@Component({
standalone: true,
imports: [RiveCanvasComponent],
template: `
`
})
export class AppComponent {
Fit = Fit;
themeColor = signal('#FF5733');
score = signal(0);
}
```
## Contributing
Contributions are welcome! Please feel free to submit issues or pull requests.
## License
MIT