Choosing a Renderer

Choose and configure the renderer used by Rive runtimes.

Rive runtimes can render through the Rive Renderer or, in some runtimes, a platform-specific renderer such as Canvas2D, Skia, or Impeller.

The Rive Renderer is designed to provide better performance and visual fidelity across all platforms. It leverages modern graphics APIs and techniques to deliver high-quality rendering for Rive graphics.

Some Rive features, including Vector Feathering, require the Rive Renderer.

See Feature Support for more information.

Renderer Defaults

Runtime	Default Renderer	Options
Web (JS)	Depends on package	Rive / Canvas2D
Web (React)	Depends on package	Rive / Canvas2D
Apple (New Runtime)	Rive	Rive
Apple (Legacy Runtime)	Rive	Rive / CoreGraphics / Skia (deprecated in v6.0.0)
Android	Rive	Rive / Canvas / Skia (removed as of v10.0.0)
React Native	Rive	See Apple and Android
Flutter	No default	Rive / Flutter Skia / Flutter Impeller

Runtime Setup

Only some runtimes require you to choose or configure a renderer. The sections below cover runtimes that expose renderer setup through packages, initialization options, or factory settings.

If a runtime is not listed here, there is no renderer setup to configure. It uses the renderer supported by that runtime automatically.

Web (JS)

The Web runtime provides multiple packages with the same core API. Choose the package based on the renderer you want to use.

Package	Renderer	Use when
@rive-app/webgl2	Rive	You want the best support for Rive Renderer features and rendering fidelity.
@rive-app/canvas	Canvas2D	You have several Rive instances on screen, want a slightly smaller package, or do not need Rive Renderer-only features.
@rive-app/canvas-lite	Canvas2D	You want the smallest Canvas2D package and do not need the full Canvas2D runtime feature set.

Web (React)

The Web runtime provides multiple packages with the same core API. Choose the package based on the renderer you want to use.

Package	Renderer	Use when
@rive-app/react-webgl2	Rive Renderer	You want the best support for Rive Renderer features and rendering fidelity.
@rive-app/react-canvas	Canvas2D	You have several Rive instances on screen, want a slightly smaller package, or do not need Rive Renderer-only features.
@rive-app/react-canvas-lite	Canvas2D	You want the smallest Canvas2D package and do not need the full Canvas2D runtime feature set.

These packages provide the Rive React component and hooks. If you want to use the imperative JavaScript runtime in a React app, install one of the Web JavaScript packages instead, such as @rive-app/webgl2, @rive-app/canvas, or @rive-app/canvas-lite.

Apple (Legacy Runtime)

The current Apple runtime uses the Rive Renderer only. Renderer setup is only needed for the legacy Apple runtime.

Options: Rive (default) / Core Graphics / Skia (deprecated in v6.0.0)

Below are some notes on configuring the renderer in UIKit and SwiftUI.

UIKit

Set the global renderer type during your application launch:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }

    ...
}

SwiftUI

New SwiftUI applications launch with the App protocol, but you can still add UIApplicationDelegate functionality.

SwiftUI - iOS

Create a new file and class called AppDelegate as such, including a line to set the defaultRenderer to RendererType.riveRenderer:

import UIKit
import Foundation
import RiveRuntime

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }
}

Next, at the entry point of your application, use UIApplicationDelegateAdaptor to set the AppDelegate created above for the application delegate.

@main
struct MyRiveRendererApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

SwiftUI - macOS

Create a new file and class called AppDelegate as such, including a line to set the defaultRenderer to RendererType.riveRenderer:

import Foundation
import RiveRuntime

class AppDelegate: NSObject, NSApplicationDelegate {
    func application(_ application: NSApplication, applicationDidFinishLaunching notification: Notification) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true

Next, at the entry point of your application, use UIApplicationDelegateAdaptor to set the AppDelegate created above for the application delegate.

@main
struct MyRiveRendererApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Android

Options: Rive (default) / Canvas / Skia (removed in v10.0.0)

Specify the renderer target in XML:

<app.rive.runtime.kotlin.RiveAnimationView
app:riveRenderer="Rive"
… />

Alternatively, when initializing Rive:

Rive.init(applicationContext, defaultRenderer = RendererType.Rive)

React Native

For React Native, you can set the default renderer for both iOS and Android using RiveRenderer.defaultRenderer.

If you do not set a renderer, React Native uses the default renderer for each platform.

• Apple options: Rive (default) / CoreGraphics
• Android options: Rive (default) / Canvas

See the Apple and Android sections for additional information on renderers and fallbacks.

export default function Main() {
    useEffect(() => {
        RiveRenderer.defaultRenderer(
            RiveRendererIOS.Rive,
            RiveRendererAndroid.Rive
        );
    }, []);

    return <App />;
}

Flutter

The Rive Renderer is not yet supported on Linux through Flutter.

The Rive Renderer is available in the Flutter runtime as of 0.14.0. Use the latest version of the rive package for the newest fixes and improvements.

The Rive Renderer is exposed through rive_native, which is included as a dependency of the rive package. See Rive Native for more information.

When creating a Rive File or FileLoader, you need to specify a factory to use:

• Factory.rive for the Rive renderer
• Factory.flutter for the Flutter renderer (Skia or Impeller)

    // Rive renderer
    File.asset("assets/vehicles.riv", riveFactory: Factory.rive)
    // Flutter renderer
    File.asset("assets/vehicles.riv", riveFactory: Factory.flutter)

You can use different renderers for different graphics in your app.

Some considerations when choosing a renderer:

• If you plan on showing many Rive graphics that are all drawing to different Rive widgets consider using a RivePanel with Factory.rive to draw multiple graphics to the same texture to reduce the overhead of allocating native render targets and textures. Or make use of Factory.flutter.
• If you are showing a complex graphic, consider using Factory.rive to take advantage of the Rive renderer’s optimizations.
• Vector Feathering is only available with Factory.rive, so if you need that feature, use the Rive renderer.