Skip to main content

Artboards

An artboard is the root of your composition — think of it as the canvas where your animation lives. It defines the scene's dimensions and background color. You can have as many artboards as you like on the Stage, but every file needs at least one.

Artboard

Active Artboard​

Only one artboard is active at a time. The active artboard shows a dot next to its name on the Stage. Click any artboard or its children to make it active.

The Hierarchy, Inspector, and Timeline all show content for the active artboard only.

Active artboard

Default State Machine​

The default state machine (the logic layer that controls which animation plays — you'll learn about this later) runs when you press the play button in the Toolbar. It also sets which artboard a developer sees when loading the file.

To change it, use the dropdown in the Inspector to select the state machine you want as default.

Default state machine

Hold Shift + Space from Design mode to quickly play the default state machine.

Creating an Artboard​

Option 1: In a new file, use the on-screen prompts to set dimensions or pick a preset, then click Create Artboard.

Option 2: Select the Artboard tool (A), then click and drag on the Stage to define the size. Adjust position and size later in the Inspector.

Create artboard

Artboard Properties​

Select an artboard to see its properties in the Inspector.

Position and Size​

The Width and Height fields set the artboard's size. By default, artboards use Fixed sizing. Switch to Hug to automatically resize around children (requires at least one child layout object (an element inside the artboard that uses Rive's layout system)).

Use the link icon to lock the aspect ratio when resizing.

Origin​

The origin is the reference point for all objects on the artboard — like the anchor pin that everything else is measured from. By default it is X: 0%, Y: 0% (top-left).

Set the origin before you start animating. Changing it later can shift objects that have recorded keyframes out of position. If you need to change the origin after adding keyframes, wrap the component in a group to regain control.

Layout Settings​

Artboards can have layout properties that control how children are arranged. These only take effect when layout objects exist inside the artboard.

Fill and Stroke​

Artboards support fills and strokes the same way other objects do.

Render Presets​

Use render presets to export static images (PNG, SVG) or video (MP4, PNG sequence) from a selected artboard.

Selected Colors​

When an artboard is selected, all colors used by every object on that artboard appear together. You can target and adjust them from one place.

Selected colors