State Machine Overview
Understand states, transitions, layers, and how an animation becomes interactive logic.
Open state machine docsRive docs finder
A guided learning hub for Rive animators and developer teams.
The official docs are powerful, but new Rive users can get lost. This page groups the most useful places to start by role and project goal.
For animators
Learn the parts that make animation usable in products.
States
Learn how timelines become states and how blend states support loading, sliders, health, and other dynamic UI.
Open states docsData Binding Overview
Learn the newer contract between animation and code so developers can update text, values, colors, images, and logic safely.
Open data binding docsFor developers
Find the runtime docs that connect `.riv` files to real app state.
Web JS Runtime
Use the JavaScript runtime for canvas playback, state machine control, file loading, and custom web interfaces.
Open Web JS docsState Machine Playback
Play, pause, stop, and control state machines at runtime with app logic.
Open playback docsFeature Support
Check runtime support before promising a feature in production, especially for renderer-specific capabilities.
Open feature supportAnimator to developer handoff
What a product-ready Rive file should include.
Named artboards and states
Use names that explain the UI purpose, not only the visual look.
Clear state machine contract
Define what the app controls: loading, success, error, hover, active, progress, or data value.
Runtime target chosen early
Web, React, Flutter, Apple, Android, and game runtimes can have different implementation details.
Browser preview before delivery
Use Rive Player to catch playback, state machine, and file issues before handoff.
Resource library
Fast paths for common Rive questions.
Runtime feature support
Check whether a Rive feature is supported by the target runtime before handoff.
Open feature supportWeb JS parameters
Find the APIs for artboards, animations, state machines, layout, and FPS.
Open Web JS APILayout and alignment
Understand contain, cover, fill, fit width, fit height, scale down, and alignment.
Open layout docsChecklist
Before sending a `.riv` file to developers.
Artboards are named by product purpose.
Animation names match UI states.
State machines use clear names.
Inputs or data bindings are documented.
Target runtime is selected.
File is tested in Rive Player.