Skip to main content
Rive lets you design, animate, and make interactive graphics in a single tool, then control them with data or code at runtime. This quick start walks through the core workflow at a high level. You don’t need to learn every feature before you begin. Use this page to understand how the major parts of Rive fit together, then follow the links to explore each area in more detail.

​
Build it

Start by creating the visual structure of your Rive file. An artboard is the main container for your design. Artboards can contain shapes, text, images, components, and other objects. Use Rive’s design tools to create and arrange content directly in the editor. You can draw vector paths, create procedural shapes, add text, align and distribute objects, and organize your file with groups and components. Components let you create reusable pieces of a design. When you update the source component, its instances update with it. Rive also supports responsive design. Use Layouts to control how content sizes, positions, and responds when its available space changes. You can also bring external assets into your file, including fonts, vector graphics, raster images, and audio. Learn more:

​
Animate it

Once you’ve built your design, bring it to life with animation. Animations in Rive are created on a timeline. Add keys to properties such as position, rotation, scale, color, opacity, and other values, then control how Rive interpolates between them. A single file can contain multiple animations, from simple transitions to complex character animation. Learn more:

​
Make it interactive

Animations play in a predetermined sequence. State machines let your animation respond to input and change over time. A state machine connects animations and other states with transitions. Conditions determine when Rive moves from one state to another. Use multiple layers when different parts of an interaction need to operate independently or at the same time. You can also use listeners to respond to pointer interactions, Rive events, and other changes inside your file. Learn more:

​
Control it with data

Use data binding when your Rive content needs to display or respond to dynamic information. A view model defines the data your Rive file can work with. Its properties can store values such as numbers, strings, booleans, colors, images, enums, and other data. Bind those properties to objects and behavior throughout your file. For example, data can control text, colors, transforms, animation speeds, state machine behavior, or which content is displayed. At runtime, your application can update the same data without needing to know how the underlying animation is constructed. Learn more:

​
Script it

For behavior that goes beyond the built-in editor tools, you can extend Rive with scripting. Scripts can create custom behavior, generate graphics, transform data, define transition logic, and interact with other parts of a Rive file. You don’t need scripting for most Rive projects. Add it when the behavior you need is easier to express with code. Learn more:

​
Publish it anywhere

When your Rive file is ready, publish it for use outside the editor. Rive runtimes let you render and control your content in applications across web, mobile, game engines, and other platforms. At runtime, you can play animations, control state machines, update bound data, respond to events, and integrate Rive with the rest of your application. Learn more:

​
Where to go next

You now have the basic Rive workflow: Build it → Animate it → Make it interactive → Control it with data → Script it → Publish it anywhere You don’t need to follow that sequence for every project. Once you’re familiar with the workflow, use the Editor documentation as a reference and jump directly to the feature you need.