v2.0.0 — Renderer split (WebGL2 + Canvas)

Tag: v2.0.0
Packages: @grandgular/rive-angular-webgl2@2.0.0 · @grandgular/rive-angular-canvas@2.0.0

This release is a major product-line change: Rive for Angular is split into two renderer-specific npm packages, matching Rive’s Canvas vs WebGL2 model (similar to rive-react). The monolithic @grandgular/rive-angular meta package is no longer built from this repository — you choose one runtime at install time (@rive-app/webgl2 or @rive-app/canvas).

The Angular public API (<rive-canvas>, RiveCanvasComponent, RiveFileService, provideRiveRuntime, data binding, etc.) stays the same; what changes are package names, import paths, and peer dependencies.

What’s new

Item	Role
@grandgular/rive-angular-webgl2	Recommended for most apps — Rive Renderer via peer @rive-app/webgl2
@grandgular/rive-angular-canvas	Smaller Canvas2D runtime via peer @rive-app/canvas
Embedded rive-angular-core	Shared code is copied into each published package; npm run sync:rive-angular-core syncs from libs/rive-angular-core
libs/rive-angular-core	Internal library for shared tests/utilities (not published on its own)

Install (pick one)

WebGL2 / Rive Renderer (recommended):

npm install @grandgular/rive-angular-webgl2 @rive-app/webgl2

Canvas2D:

npm install @grandgular/rive-angular-canvas @rive-app/canvas

Code change

Replace the old import with the package you install:

// Before (meta package — no longer published from this repo)
import { RiveCanvasComponent, Fit, Alignment } from '@grandgular/rive-angular';

// After — WebGL2 (example)
import { RiveCanvasComponent, Fit, Alignment } from '@grandgular/rive-angular-webgl2';

// After — Canvas2D (example)
// import { RiveCanvasComponent, Fit, Alignment } from '@grandgular/rive-angular-canvas';

Template usage is unchanged:

<rive-canvas
  src="assets/animation.riv"
  [fit]="Fit.Contain"
  [alignment]="Alignment.Center"
/>

Optional: provideRiveRuntime (unchanged API)

import { ApplicationConfig } from '@angular/core';
import { provideRiveRuntime } from '@grandgular/rive-angular-webgl2';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRiveRuntime({
      wasmUrl: 'assets/rive/rive.wasm',
      lazy: true,
    }),
  ],
};

(Use the same import path as the package you chose — rive-angular-webgl2 or rive-angular-canvas.)

Migration from @grandgular/rive-angular

1. Remove the old package: npm uninstall @grandgular/rive-angular
2. Install one of the two packages and its Rive peer (@rive-app/webgl2 or @rive-app/canvas) as above
3. Update all imports from '@grandgular/rive-angular' to the new package name
4. If the legacy package still exists on npm for your users, mark it deprecated with a message pointing to the new package names (see repository maintainer notes)

Why 2.0.0 on new package names?

Both new packages ship as 2.0.0 to mark the next major in the Grandgular Rive Angular line: removing the single meta package and requiring new install paths and peers is a breaking change for consumers, even where the component API is unchanged. See the root README (“Why 2.0.0”).

Details

• Full narrative: README.md
• Changelog: CHANGELOG.md (section 2.0.0)
• Per-package READMEs: rive-angular-webgl2 · rive-angular-canvas

GitHub release title (copy-paste)

v2.0.0 — Renderer split (WebGL2 + Canvas)

Use this file as the release description body, or paste the sections you need into the GitHub “Release notes” field when you publish tag v2.0.0.