Artboards

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.

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

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 />;
}

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

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
  },
);  

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)
    }
}

Compose
Legacy

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
    )
}

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
)

Runtime Fundamentals

App Runtimes

Choosing an Artboard

SwiftUI

UIKit

Compose

Outside of Compose

Using the Artboard

Using XML Layouts

Using Kotlin

Runtime Fundamentals

App Runtimes

​Choosing an Artboard

​SwiftUI

​UIKit

​Compose

​Outside of Compose

​Using the Artboard

​Using XML Layouts

​Using Kotlin

Choosing an Artboard

SwiftUI

UIKit

Compose

Outside of Compose

Using the Artboard

Using XML Layouts

Using Kotlin