Skip to main content
Artboards are the foundation of your composition across both Design and Animate mode. Each artboard defines a scene with its own dimensions, background, hierarchy, animations, and state machines. Every Rive file contains at least one artboard, but you can create any number of artboards on the Stage. Artboards can also be converted to components, allowing you to create and control multiple instances of an artboard within your composition.

Creating Artboards

From a new Rive file

When you create a new Rive file, you’ll be prompted to create an artboard. Choose a size from one of the presets, or enter a custom width and height. You can resize the artboard at any time. New artboard size options The width and height define the artboard’s dimensions in the editor. At runtime, the artboard is drawn at whatever size its container is, so its displayed size and aspect ratio can differ. See Artboard size at runtime.

Creating additional Artboards

A Rive file can contain multiple artboards.
1
Select the Artboard Tool or press A.
2
Click and drag anywhere on the stage to create an artboard.
Artboards can’t be nested directly inside other artboards. To nest an artboard, first convert it to a component.

Copying Artboards

Select an artboard and press Cmd/Ctrl + D to duplicate the artboard and all of its contents. Copying an artboard

Artboard size at runtime

The artboard’s width and height don’t set its size in your app or game. At runtime, Rive draws the artboard into a container, such as a canvas or a view, and the container’s size comes from your app. The fit mode, which you set in the runtime, decides how the artboard fills that container. Artboard dimensions are measured in units rather than pixels. If a 500-unit-wide artboard is displayed 1000 pixels wide, each unit covers 2 pixels. While you work in the editor, you can usually treat units like pixels.

Responsive graphics: use Layout

If your graphic should adapt to different screen sizes, orientations, or container sizes, build it with Layouts and set the fit mode to Layout at runtime. With Layout, the runtime doesn’t scale the artboard. It resizes the artboard to match the container, and the artboard’s Layouts decide how the content moves and resizes, the same way they do when you resize the artboard in the editor. To make the content larger or smaller within the container, set a layout scale factor at runtime.
The Layout fit mode only works well if the artboard is built with Layouts. Content that isn’t inside a Layout won’t respond to the new size.

Fixed-size graphics: scaling fit modes

The other fit modes scale the whole artboard as a single image. Use them for graphics that should keep the same composition at any size, such as an illustration or a logo animation:
  • Contain (the default) scales the artboard until it fits inside the container while keeping its aspect ratio. If the aspect ratios don’t match, empty space is left on one axis.
  • Cover scales the artboard until it fills the container while keeping its aspect ratio. If the aspect ratios don’t match, content is cropped on one axis.
  • Fill stretches the artboard to the container’s width and height, distorting it if the aspect ratios don’t match.
  • None draws the artboard at its original size without scaling.
Because Contain is the default, a responsive artboard won’t respond to the container until you change the fit mode to Layout. When a scaling fit mode leaves empty space, the runtime’s alignment setting decides where the artboard sits in the container, such as centered or top-left. For every fit mode and how to set it on each platform, see Runtime layout.

Managing Artboards

Each artboard has its own hierarchy, animations, state machines, and properties.

Hierarchy

Each artboard has its own hierarchy containing the objects that belong to that artboard. Select an artboard to view its hierarchy in the Hierarchy panel. See Hierarchy for more information about organizing and navigating objects.

Animations & State Machines

Animations and state machines belong to individual artboards. Select an artboard to view and edit its animations and state machines. See Animations and State Machines to learn more.

Artboard properties

Select an artboard to view and edit its properties in the Inspector. Inspector with an artboard selected
  • Transform - Set the artboard’s position, size, scale, rotation, and origin.
  • Layout - Control how the artboard responds when its size changes. See Layout.
  • Fill - Set the artboard’s background color.
  • Model - Choose the view model associated with the artboard.
  • Clip - Control whether content outside the artboard’s bounds is visible.

Clip

Enabling the Clip toggle hides content that extends beyond the bounds of the artboard.
Clipping can be expensive to render, so only enable it when needed.
In most cases, you don’t need to enable Clip on a top-level artboard because content outside its bounds isn’t rendered at runtime. Toggling Clip on an artboard

Default Artboard & State Machine

The default artboard and state machine are used at runtime when an artboard or state machine isn’t explicitly specified. To change the default, use the dropdown to select the artboard and state machine you want to use. Selecting a default artboard