# Rive for Qt Quick and QML

> Play Rive animations in Qt Quick and QML, drawn by Rive's own GPU renderer and handed to Qt's scene graph zero-copy, so feathering, blend modes and clipping look exactly as they do in Rive.

rive-qt-plugin plays [Rive](https://rive.app) files in Qt Quick. Add a
`RiveView` to your QML, point it at a `.riv`, and it renders with Rive's own
GPU renderer, then hands the frame to Qt's scene graph without a copy.

It is free and open source under the MIT license:
[ hypernuclear/rive-qt-plugin on GitHub](https://github.com/hypernuclear/rive-qt-plugin).

```qml

RiveView {
    anchors.fill: parent
    source: "qrc:/animations/hero.riv"
}
```

## Exactly what Rive renders

Most ways of getting Rive into another toolkit reimplement Rive's drawing on
top of that toolkit: Rive hands over paths and paints, and the integration
draws them its own way. Every feature Rive's renderer has, that integration
has to build again, and the newer ones tend to be missing. Feathering (Rive's
soft edges and glows) is the usual casualty: the paint's feather value is
accepted and then ignored, and the soft edge comes out hard.

rive-qt-plugin doesn't draw anything itself. It runs Rive's GPU renderer, the
same one in Rive's own players, on the graphics device Qt is already using
for your window, and renders the artboard into a texture there. That texture
goes straight into the scene graph as a node:

- **Zero-copy.** No CPU rasterization, no readback, no per-frame upload. The
  frame Rive draws is the frame Qt composites.
- **Pixel-for-pixel with Rive.** Feathering, blend modes, clipping, image
  meshes and text all come from Rive's renderer, so what you see in the Rive
  editor is what your app shows.
- **New Rive features arrive with the runtime.** The plugin pins an upstream
  `rive-runtime` release. Updating it brings Rive's renderer changes with it;
  there is no second renderer to catch up.

## What it covers

- **State machines**, advanced on the scene graph's frame clock, with
  `stateChanged` signals and the current state's timeline and playhead.
- **Data binding.** Read and write the artboard's view-model properties from
  QML: numbers, booleans, strings, colors, enums, triggers, nested view
  models, lists, images and artboard references.
- **Input.** Mouse, touch and keyboard go to the state machine's listeners by
  default, mapped through the fit into artboard space.
- **Layout.** Every Rive fit and alignment, plus `Fit.Layout` with
  `layoutSize` for responsive artboards.
- **Linear animations**, including frame-accurate scrubbing for timelines
  you drive yourself.
- **Audio** (through the OS, or handed to your own audio stack),
  **scripting** (Luau) and **text** with a process-wide font fallback.

The full surface is in the [QML API reference](/docs/rive-qt/qml-api/).

## Platforms

`RiveView` picks the backend that matches the graphics API Qt chose for the
window (its `QRhi`):

| Platform | Backends |
|----------|----------|
| macOS | Metal (Vulkan through MoltenVK, optional) |
| Windows | Direct3D 11, Direct3D 12 |
| Linux | OpenGL, Vulkan |

It needs Qt 6.5 or later (tested through 6.12). Every change is built and
render-tested on macOS (Apple silicon and Intel), Windows and Linux before it
lands.

## In production

hypernuclear built it for [hypershot](/), our screenshot app for Mac
and Windows. hypershot's onboarding and permission guides are Rive files
played through `RiveView`.

## Where to go next

- [Getting started](/docs/rive-qt/getting-started/): add it to a CMake
  project and show your first `.riv`
- [Viewer](/docs/rive-qt/viewer/): open your own `.riv` files and try
  every control before writing any code
- [QML API reference](/docs/rive-qt/qml-api/): every property, method and
  signal
- [GitHub](https://github.com/hypernuclear/rive-qt-plugin): source, issues
  and the standalone viewer

---

From https://hypernuclear.com/docs/rive-qt/