Rive Web

A JavaScript/TypeScript and Web Assembly (WASM) runtime library for Rive.

This library allows full control over Rive files with a high-level API for hooking up many simple interactions and animations, as well as a low-level API that allows you to drive your own render loop to create multiple artboards, animations, and state machines all in one canvas.

Table of contents

• :star: Rive Overview
• 🤖 Build with your agent
• 🚀 Getting Started & API docs
• :mag: Supported Browsers
• :thread: Threads and the replay worker
• :books: Examples
• :runner: Migration Guides
• 👨‍💻 Contributing
• :question: Issues

Rive overview

Rive is an agent-native 2D and 3D engine for games, apps, and interactive UI. Use it as your whole engine, or add it to the products you already have. Build with your coding agent through the Rive CLI, or draw, rig, and animate by hand with the professional design and animation tools in the Rive Editor. Both work on the same files. Open-source runtimes, no royalties or runtime fees. Rive files (.riv) play natively on web, mobile, desktop, game engines, consoles, smart TVs, and cars.

:house_with_garden: Homepage

:blue_book: Rive docs

Build with your agent

Paste this into Claude Code, Codex, Cursor, or any agent that runs commands on your computer:

Install the Rive CLI from rive.app/cli. Build an interactive hero for my website as a Rive file and add it to the page with the Rive web runtime.

Your agent installs the Rive CLI, writes the scene, and opens a preview window that rebuilds every time it saves. Keep giving it notes, or open the same file in the Rive Editor and shape it by hand. Trying it needs no account. Writing the .riv that ships on your site needs a free Rive account. Free exports play a short Rive splash screen; paid plans export without it. See Getting started with the Rive CLI.

Getting started

Follow along with the link below for a quick start in getting Rive JS integrated into your web applications.

• Getting Started with Rive in Web
• API documentation

For more information, see the Runtime sections of the Rive help documentation:

• Layout
• State Machines
• Data Binding
• Rive Events
• Loading Assets

Supported browsers

Rive can be used in all major browsers. We're constantly working to improve performance with our renderer so that animations playback smoothly for all.

Threads and the replay worker

@rive-app/webgl2-threads loads a threaded build on pages that are cross origin isolated. There, instances created with enableGPUCanvas: true hand their canvas to one worker shared by every instance on the page: each frame advances and records on the page's thread while the worker replays the previous frame on the GPU, so the two no longer add up on the page's thread. This is on by default wherever the browser can draw WebGL2 on a transferred OffscreenCanvas. Safari 26.2 to 26.3.1 get the build without threads, since their threads lose each other's heap growth.

• Turn it off for the whole page with RuntimeLoader.setReplayWorker(false) before the runtime loads, or for one instance with useReplayWorker: false. Both keep replay on the page's thread, as do builds without threads, pages that are not isolated, and browsers without WebGL2 on OffscreenCanvas.
• A canvas handed to the worker stays with it. Setting its width and height properties still resizes it (the browser owns its attributes from then on), but the page can no longer get a context from it, and any later instance on that canvas renders through the worker too, reusing the same WebGL context.
• Images in those files decode on the worker, off the page's thread.
• The page records at most two frames ahead of the worker and skips a frame rather than queue more; the next frame advances by the time skipped.

Examples

Check out some of the demos using this JS/WASM runtime in the Rive documentation.

Awesome Rive

For even more examples and resources on using Rive at runtime or in other tools, checkout the awesome-rive repo.

Migration guides

Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through major version bumps; breaking changes and all!

Migration guides

Contributing

We love contributions! Check out our contributing docs to get more details into how to run this project, the examples, and more all locally.

Issues

Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.