Artboards

Selecting which artboard to render at runtime

For more information on creating artboards in the Rive editor, please refer to Artboards.

Choosing an Artboard

When a Rive object is instantiated or when a Rive file is rendered, you can specify the artboard to use. If no artboard is given, the default artboard, as set in the Rive editor, is used. If no default artboard is set, the first artboard is used.

Only one artboard can be rendered at a time.

Web

new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    artboard: 'Truck',
    autoplay: true
});

React

export const Simple = () => (
  <Rive src="https://cdn.rive.app/animations/vehicles.riv" artboard="Truck" />
);

// With `useRive` Hook:
export default function Simple() {
  const { RiveComponent } = useRive({
      src: 'https://cdn.rive.app/animations/vehicles.riv',
      artboard: 'Truck',
      autoplay: true,
  });

  return <RiveComponent />;
}

React Native

export default function App() {
  return (
    <View>
      <Rive resourceName="my_rive_file" artboardName="My Artboard" autoplay />
    </View>
  );
}

Flutter

Manually create an artboard:

// Default artboard
final artboard = riveFile.defaultArtboard();
// Artboard named
final artboard = riveFile.artboard('My Artboard');
// Artboard at index
final artboard = riveFile.artboardAt(0);

Specify the artboard to use in RiveWidgetController or RiveWidgetBuilder:

// Default artboard
final artboardSelector = ArtboardSelector.byDefault();
// Artboard named
final artboardSelector = ArtboardSelector.byName('My Artboard');
// Artboard at index
final artboardSelector = ArtboardSelector.byIndex(0);

// Pass to RiveWidgetController
final controller = RiveWidgetController(
  riveFile,
  artboardSelector: artboardSelector,
);

// Pass to RiveWidgetBuilder
return RiveWidgetBuilder(
  fileLoader: fileLoader,
  artboardSelector: ArtboardSelector.byName('My Artboard'),
  builder: (context, state) {
    // return a widget
  },
);  

Apple

The following section assumes that you have read through the Apple overview.

Getting an Artboard

Once you have created a File, you can then retrieve information for and create Artboard types.

// Get all artboard names in the file
let artboardNames = try await file.getArtboardNames()
// Get the default artboard for the file
let defaultArtboard = try await file.createArtboard()
// Get an artboard by name from the file
let artboardByName = try await file.createArtboard("Artboard")

Note that these are all async throwing functions marked as @MainActor. Since they are functions called on a File object, any thrown errors will be of type FileError.

An example of when one of these functions will throw is if you call .createArtboard(_:) with a name that is not in the origin File, which will throw a FileError.invalidArtboard(String).

Using an Artboard

Remember that the Rive configuration for a view is the Rive type. In the overview, we show initializing a Rive object with just a file. However, you can initialize a Rive object with a specific artboard:

let worker = Worker()
let file = try await File(source: .local("my_file", Bundle.main))
let artboardByName = try await file.createArtboard("Artboard")
let rive = try await Rive(file: file, artboard: artboardByName)

Artboards then become the source of truth for state machines. See State Machine for more details.

SwiftUI

struct AnimationView: View {
    var body: some View {
        RiveViewModel(
            fileName: "my_rive_file",
            artboardName: "My Artboard"
        ).view()
    }
}

UIKit

class AnimationViewController: UIViewController {
    @IBOutlet weak var riveView: RiveView!

    var bananaVM = RiveViewModel(
        fileName: "my_rive_file",
        artboardName: "My Artboard",
    )

    override func viewDidLoad() {
        bananaVM.setView(riveView)
    }
}

Android

Compose

By default, the Rive composable will select and create the default artboard specified in the Rive editor. To specify a different artboard, you must first create an Artboard object from a loaded RiveFile.

Compose

Artboard objects can be created in Compose using the rememberArtboard function, which takes a Rive file and name of the artboard.

val artboard = rememberArtboard(myRiveFile, "My Artboard")

Outside of Compose

Alternatively, you can create an artboard outside of Compose contexts. Note that with this approach you are responsible for managing the artboard’s lifecycle and must eventually close it with Artboard::close() when no longer needed, or leveraging its AutoClosable interface with a use block.

val artboard = Artboard.fromFile(myRiveFile, "My Artboard")
...
artboard.close()

Using the Artboard

Once you have an artboard, you can pass it to the Rive composable via the artboard parameter.

setContent {
    Rive(
        myRiveFile,
        artboard = artboard
    )
}

Legacy

Using XML Layouts

<app.rive.runtime.kotlin.RiveAnimationView
    app:riveResource="@raw/my_rive_file"
    app:riveArtboard="My Artboard"
    app:riveAutoPlay="true" />

Using Kotlin

animationView.setRiveResource(
    R.raw.my_rive_file,
    artboardName = "My Artboard",
    autoplay = true
)