> ## Documentation Index
> Fetch the complete documentation index at: https://rive-debug-panel.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)](#web-js)                 | Depends on package | Rive / Canvas2D                              |
| [Web (React)](#web-react)           | Depends on package | Rive / Canvas2D                              |
| Apple                               | Rive               | Rive                                         |
| Android (Compose)                   | Rive               | Rive                                         |
| [Android (Legacy)](#android-legacy) | Rive               | Rive / Canvas / Skia (removed as of v10.0.0) |
| React Native                        | Rive               | Rive                                         |
| [Flutter](#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="Android (Legacy)">
    Options: `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="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](/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>