> ## Documentation Index
> Fetch the complete documentation index at: https://rive-react-imperative.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Choosing a Renderer

> Choose and configure the renderer used by Rive runtimes.

Rive runtimes can render through the [Rive Renderer](https://rive.app/renderer?utm_source=docs\&utm_medium=content) 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.

<Note>
  Some Rive features, including Vector Feathering, require the Rive Renderer.

  See [Feature
  Support](/feature-support) for more information.
</Note>

## 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.

<Tabs>
  <Tab title="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.                           |
  </Tab>

  <Tab title="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.                           |

    <Note>
      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`.
    </Note>
  </Tab>

  <Tab title={"Apple (Legacy Runtime)"}>
    <Note>
      The current Apple runtime uses the Rive Renderer only. Renderer setup is only needed for the legacy Apple runtime.
    </Note>

    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:

    ```swift theme={null}
    @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`:

    ```swift theme={null}
    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.

    ```swift theme={null}
    @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`:

    ```swift theme={null}
    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.

    ```swift theme={null}
    @main
    struct MyRiveRendererApp: App {
        @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

        var body: some Scene {
            WindowGroup {
                ContentView()
            }
        }
    }
    ```
  </Tab>

  <Tab title="Android">
    Options: `Rive (default) / Canvas / Skia (removed in v10.0.0)`

    Specify the renderer target in XML:

    ```kotlin theme={null}
    <app.rive.runtime.kotlin.RiveAnimationView
    app:riveRenderer="Rive"
    … />
    ```

    Alternatively, when initializing Rive:

    ```kotlin theme={null}
    Rive.init(applicationContext, defaultRenderer = RendererType.Rive)
    ```
  </Tab>

  <Tab title="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`

    <Info>
      See the **Apple** and **Android** sections for additional information on renderers and fallbacks.
    </Info>

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

        return <App />;
    }
    ```
  </Tab>

  <Tab title="Flutter">
    <Warning>
      The Rive Renderer is not yet supported on Linux through Flutter.
    </Warning>

    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](/runtimes/flutter/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)

    ```dart theme={null}
        // 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](/runtimes/flutter/flutter#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.
  </Tab>
</Tabs>