p {
  font-size: 14px;
}

ul li {
  font-size: 14px;
}

ol li {
  font-size: 14px;
}

Explore

In this section, we'll step through a typical workflow from creating an artboard all the way to exporting your first Rive file. Before we get started, check out our brief overview of the interface to familiarise yourself with the various sections and modes.

Overview

Fundamentals Overview

Rive

Welcome to the Rive Docs. We've split this documentation into the sub-sections below. If you can't find the information you're looking for or have questions for us, join us on [Twitter](https://twitter.com/rive_app), [Discord](https://discord.com/invite/FGjmaTr), or contact us by filling out [this form](https://rive.app/contact).

Introduction

Editor & runtime performance and usage considerations.

Best Practices

Quick Links

Community Overview

Marketplace Overview

Rive Experts

Pricing

Configure your own AWS S3 bucket to work with Rive

Bring Your Own S3 Bucket

Terms of Service

Acceptable Use Policy

Privacy Policy

Keyboard Shortcuts

Tagging

Getting Started

Getting Started with the Rive Runtimes

Sizes

Runtime Sizes

Animation Playback

Rive offers multiple options for controlling how graphics are laid out within the canvas, view, widget, or texture.

Layout

Playing and changing inputs in state machines

State Machines

Connect your code to bound editor elements using View Models

Data Binding

Text

To learn more on how to add audio to your Rive file, see [Audio Events](/editor/events/audio-events).

Playing Audio

Rive Events

Loading and replacing assets dynamically at runtime

Loading Assets

Caching a Rive File

Logging

Defold

Noesis

Feature Support

Learn Rive

Awesome Rive

Rive's interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.

Access design and animation tools from the Rive Editor toolbar.

Toolbar

The hierarchy is always located on the left side of the editor.

Hierarchy

The Inspector is located on the right side of the Editor.

Inspector

The Stage is an infinite canvas where you can place artboards containing all your graphics.

Stage

The Rive Editor has two distinct modes, Design and Animate. Switching between modes changes the interface to show the appropriate tools and options.

Design vs Animate Mode

Artboards

Nested Artboards can speed up your workflow by allowing you to reuse animations and State Machines. Any changes made to the source Artboard will be reflected across any of the Nested Artboards.

Nested Artboards

The Pen tool allows you to create custom vector paths as well as add additional vertices to your procedural paths. Learn more about the Pen tool by either watching the video or reading more below.

Pen Tool Overview

The Pen tool is a great way to build complex shapes and paths, but it's not always the most simple tool. Here are a few things to remember when using the pen tool that will help you get started.

Pen Tool Tips

Rive allows you to create, edit, and animate vector graphics using either procedural or custom shapes. These graphics combine shape and path layers to define them, which Rive exposes to give you greater flexibility and control with your designs and animations.

Shapes and Paths Overview

Making good use of shapes and paths helps you to create your designs more easily. In this example, you can find 3 different ways to use shapes and paths.

Shape and Path Tips

Procedural Shapes

Use groups to organize your graphics or to add extra transform spaces.

Groups

Selecting and Navigating Groups

Transform Spaces

Group Tips

Fill and Stroke

Although shapes and paths define the shape of your graphics, it's the fills and strokes that will give your graphics form. Here are a few ways to use fills and strokes to bring your creations to another level.

Fill and Stroke Tips

No matter the type of vector you create, you can edit the vertices by changing their position or handles in both design and animate mode.

Edit Vertices

Edit Vertices Tips

Freeze and Origin

Import your assets by dragging and dropping them onto the Rive Editor. You can import SVG, JSON, PNG, PSD, and JPG formats.

Importing Assets

Rive saves your files automatically as you work. Even if multiple people are working on the same file at the same time, Rive tracks all changes and stores them in the Revision History.

Revision History

Manipulating Shapes

Bones

How you rig your design is important. A smart rig allows you to create fewer keys, making your animation easy to work with and keeping your timeline tidy.

Bone Tips

Meshes are an excellent way to add natural and organic deformations to raster graphics. Make skin flex, fabric ripple, hair flow, and more.

Meshes

Clipping allows you to cut one shape out from another.

Clipping

A Solo is similar to a group, but only one of the elements inside the solo is rendered at a time. This is much faster than having to animate the opacity of each object individually.

Solos

Trim Path

Joysticks make it easy to set up sophisticated rigs with simple controls. You can quickly animate body poses, eyes, mouths, hands, and more. You can even control joysticks with other joysticks.

Joysticks

Constraints Overview

Learn how to use Inverse Kinematics in Rive.

IK Constraint

The Distance Constraint makes an object stay close, far, or exactly at a specific distance to another object.

Distance Constraint

The Scale Constraint allows you to set limits on an object's scale and/or copy the scale properties from a target object. These properties can be independently activated.

Scale Constraint

The Rotation Constraint allows you to set limits on an object's rotation and/or copy the rotation properties from a target object. These properties can be independently activated.

Rotation Constraint

The Transform Constraint allows its owner to copy all the transformation properties from a target object, regardless of their hierarchical relationships. These properties include Position, Rotation, and Scale.

Transform Constraint

Translation Constraint

Follow Path Constraint

Animate Mode Overview

Timeline

Keys

Rive allows you to mix animations from the same artboard at runtime, creating more interesting ways for you to add interactivity to your apps and games.

Animation Mixing

Interpolation (Easing)

Animating Draw Order

State Machine

States

Inputs

Transitions

Listeners

Layers

Audio Events

Exporting for Runtime

Exporting for Video or Static Design

Exporting for Backup

Share Links are a fast no-code way to get your Rive files running on a website or to present your graphics to a client.

Learn more about the Rive integration into Framer. 

Framer And Rive

Text Overview

Text Runs

Text Styles

Text Modifiers

Fonts

Layouts allow you to build responsive UI components in Rive. Make your designs fit, fill, or reflow content based on the space available.

Layouts Overview

Layout parameters can broadly be grouped into one of two categories — those that affect the parent layout, and those that affect the child layouts.

Layout Parameters

Add animation to a layout container to define how it interpolates when content reflows. When a layout container needs to resize, its children may need to change their position. Adding layout animation allows the reflowing of children to happen over time and with a chosen easing curve.

Layout Animation

Layouts & Constraints

Scrolling

N-Slicing

Features Support

Format

Web (JS)

Rive Parameters

Canvas vs WebGL

Migrating from rive.js

Preloading WASM

Using low-level JS APIs to construct Rive scenes.

Low-level API Usage

Migration notes going from v1 to v2 of the JS runtime.

Migrating from v1 to v2

React

Parameters and Return Values

Migrating from 0.x.x to 1.x.x

Migrating from 1.x.x to 3.x.x

Migration notes going from v3 to v4 of the React runtime

Migrating from v3 to v4

React Native

Props

Rive Ref Methods

How to use Rive files with the Rive React Native runtime. 

Loading in Rive Files

Adding Rive to Expo

Migrating from v4 to v6

Flutter

Techniques and considerations to cache a Rive File in Flutter.

Alternative Widget Setup

Extend RiveRenderObject to perform more advanced operations.

Custom Rive RenderObject

Advance and paint a Rive artboard manually in Flutter.

Custom Painter

iOS/macOS

Migrating from 1.x.x to 2.x.x

Migrating from 2.x.x to 3.x.x

Migrating from 3.x.x to 4.x.x

Migrating from 4.x.x to 5.x.x

Migrating from 5.x.x to 6.x.x

Android

Community maintained C# (UWP) runtime for Rive

A Qt / QtQuick Renderer to draw Rive Graphics in QML.

Qt / QtQuick

Unreal

Fundamentals

Interact with the Rive State Machine in Unreal.

Audio

Runtime Asset Swapping

Common Use Cases

Unity

Components

Control the layout of your Rive animation in Unity

Layouts

Enable listeners on your Rive animation in Unity

Procedurally draw shapes and paths in Unity using Rive

Procedural Rendering

Interact with the Rive State Machine in Bevy. 

Editor

​Explore

Interface Overview

Artboards

Shapes and Paths

Importing Assets

Exporting

Explore