Add out of band loading to rive-wasm

Draft, as there's a quite a few bits to do, but would be neat to get thoughts on it

it "works" but there are questions.

- [x] clean up commits a bit
- [x] pull out cdn stuff to pr that alone & unblock @umberto-sonnino
- [x] make prettier example, i think something with a few images is going to work well
- [x] sort out cpp api for decoding assets. dart lets you set the image, i think cpp needs to do the same. (rather than make it implement decode as it currently does)
- [x] asyncify?! ( we are not doing this at this point)
- [x] make fonts replaceable
- [x] fonts do not replace after rendering/ sometimes async fonts do not get drawn (will tackle this later, need to add artboard referencers to assets so that we know what needs to be made dirty once they are updated)
- [x] fix tests
- [x] add tests
- [x] test webgl
- [x] figure out caching (pushed off for later pr)

example looks a bit like this:

but it can look like this if the fonts do not load properly

![CleanShot 2023-09-26 at 15 52 56](

(to repro ☝️ set latency to 300ms)

to run.
compile wasm

`cd rive/packages/runtime_wasm/wasm` && `./`

run the example
`cd rive/packages/runtime_wasm/wasm/examples/out_of_band_example` && `npm start` (oh and `npm install` first)

f95f54140 Add out of band loading to rive-wasm (#6017)

Co-authored-by: Maxwell Talbot <>
7 files changed
tree: 8708e794c91a702bb550b1ff8d75e9ed9fe7eda0
  1. .github/
  2. .vscode/
  3. build/
  4. decoders/
  5. dependencies/
  6. dev/
  7. include/
  8. rivinfo/
  9. skia/
  10. src/
  11. tess/
  12. test/
  13. utils/
  14. vello/
  15. viewer/
  16. .dockerignore
  17. .gitignore
  18. .lua-format
  19. .rive_head
  21. Dockerfile
  22. Doxyfile

Build Status Discord badge Twitter handle


Rive hero image

Rive C++ is a runtime library for Rive, a real-time interactive design and animation tool.

The C++ runtime for Rive provides these runtime features:

  • Loading Artboards and their contents from .riv files.
  • Querying LinearAnimations and StateMachines from Artboards.
  • Making changes to Artboard hierarchy (fundamentally same guts used by LinearAnimations and StateMachines) and effienclty solving those changes via Artboard::advance.
  • Abstract Renderer for submitting high level vector path commands with retained path objects to optimize and minimize path re-computation (ultimately up to the concrete rendering implementation).
  • Example concrete renderer written in C++ with Skia. Skia renderer code is in skia/renderer/src/skia_renderer.cpp.

Build System

We use premake5. The Rive dev team primarily works on MacOS. There is some work done by the community to also support Windows and Linux. PRs welcomed for specific platforms you wish to support! We encourage you to use premake as it's highly extensible and configurable for a variety of platforms.


In the rive-cpp directory, run to debug build and release for a release build.

If you've put the premake5 executable in the rive-cpp/build folder, you can run it with PATH=.:$PATH ./

Rive makes use of clang vector builtins, which are, as of 2022, still a work in progress. Please use clang and ensure you have the latest version.

Building skia projects

cd skia/dependencies
./      // this will invoke

To build viewer (plus you'll needed CMake installed)



Uses the Catch2 testing framework.

cd dev

In the dev directory, run to compile and execute the tests.

(if you've installed premake5 in rive-cpp/build, you can run it with PATH=../../build:$PATH ./

The tests live in rive/test. To add new tests, create a new xxx_test.cpp file here. The test harness will automatically pick up the new file.

There's a VSCode command provided to run tests from the Tasks: Run Task command palette.

Code Formatting

rive-cpp uses clang-format, you can install it with brew on MacOS: brew install clang-format.

Memory Checks

Note that if you‘re on MacOS you’ll want to install valgrind, which is somewhat complicated these days. This is the easiest solution (please PR a better one when it becomes available).

brew tap LouisBrunner/valgrind
brew install --HEAD LouisBrunner/valgrind/valgrind

You can now run the all the tests through valgrind by running memory.

Disassembly Explorer

If you want to examine the generated assembly code per cpp file, install Disassembly Explorer in VSCode.

A disassemble task is provided to compile and preview the generated assembly. You can reach it via the Tasks: Run Task command palette or you can bind it to a shortcut by editing your VSCode keybindings.json:

        "key": "cmd+d",
        "command": "workbench.action.tasks.runTask",
        "args": "disassemble"