Interface Overview
Use Rive in your browser or as a desktop app — both have the same features.
The Rive editor shows only what you need, when you need it. It has six sections.
Toolbar
The Toolbar runs across the top of the editor. It holds tools for creating and editing objects, plus options for file settings and export.
Access all design and animation tools from the toolbar.
Hierarchy
The Hierarchy is a tree view (a structured list showing parent-child relationships) of every object, asset, and animation in your file. It shows both structure and render order — objects lower in the list appear on top.
Learn how the Hierarchy organizes objects and controls render order.
Inspector
The Inspector shows editable properties for your current selection. Select an object on the stage, a key on the timeline, or a state machine node — the Inspector updates to match.
The Inspector changes dynamically based on your current selection.
Stage
The Stage is the main canvas in the center of the editor. Think of it as an infinite whiteboard — place and arrange artboards here to build your designs.
The Stage is an infinite canvas for placing and arranging artboards.
Timeline
The Timeline appears at the bottom of the editor when you enter Animate mode. Use it to create animations, set keyframes (markers that record a property value at a specific point in time), and control playback.
Create and control animations using the Timeline.
State Machine Graph
When a state machine (a system that controls which animation plays based on conditions — like a traffic light switching between red, yellow, and green) is selected, the Timeline is replaced by the State Machine graph. This is where you connect animations and define interaction logic.
Connect animations and define transitions in the State Machine graph.