Preview

Table of Content

Animation Preview

Control how your animation displays - fit modes, artboards, state machines, and display settings.

Fit Modes

All Rive fit modes are supported:


Fit Mode

Behavior

Contain

Fits entirely within bounds, preserves aspect ratio

Cover

Fills bounds completely, may crop

Fill

Stretches to fill, may distort

Fit Width

Matches container width

Fit Height

Matches container height

None

Original size, no scaling

Scale Down

Like Contain, but never scales up

Access: Settings → Animation → Fit Mode

Artboards

Switch between artboards in multi-artboard files.

  • Searchable picker for files with many artboards

  • Shows dimensions (width × height) for each

  • Changes apply instantly

Access: Settings → Animation → Artboard

State Machines

Switch between state machines without reloading.

  • Defaults to first available state machine

  • Swap to test different logic paths

Access: Settings → Animation → State Machine

Display Options

Customize the preview environment:

Background Color

Native iOS color picker. Test your animation against any background.

Transparency Grid

Checkerboard pattern to visualize alpha/transparent areas.

Artboard Bounds

Overlay showing exact artboard dimensions. Useful for debugging alignment.

Event Toasts

On-screen notifications when Rive events fire.

  • On: Toast appears for each event

  • Off: Events only in console

Ignore Safe Area

Extend animation to screen edges, ignoring notch and home indicator.

  • On: Full bleed, edge-to-edge

  • Off: Respects safe areas

Access All Settings

Settings → Display for all options.

Next