Runtimes Text

Text

Reading and modifying text at runtime.

For more information on designing and animating Text, please refer to the editor's text section:

Please ensure you're on the correct runtime version with support for Rive Text; see .

Read/Update Text Runs at Runtime

If you intend to update a text run at runtime it's important to manually enter a unique name for the run in the editor:

This makes it possible for the run to be "discoverable" at runtime by its name.

If the name is not set manually in the editor the name will not be part of the exported .riv (to reduce file size).

High-level API usage

Reading Text

To read a given text run text value at any given time, reference the .getTextRunValue() API on the Rive instance:

public getTextRunValue(textRunName: string): string | undefined

Supply the text run name, and you'll have the Rive text run value returned, or undefined if the text run could not be queried.

Setting Text

To set a given text run value at any given time, reference the .setTextRunValue() API on the Rive instance:

public setTextRunValue(textRunName: string, textRunValue: string): void

Supply the text run name and a second parameter, textValue, with a String value that you want to set the new text value for if the text run can be successfully queried on the active artboard.

Example Usage

import {Rive} from '@rive-app/canvas'

const r = new Rive({
  src: "my-rive-file.riv"
  artboard: "my-artboard-name",
  autoplay: true,
  stateMachines: "State Machine 1",
  onLoad: () => {
    console.log("My design-time text is, ", r.getTextRunValue("MyRun"));
    r.setTextRunValue("MyRun", "New text value");
  },
})

Low-level API usage

Get a reference to the Rive Artboard, find a text run by a given name, and get/update the text value property.

import RiveCanvas from '@rive-app/canvas-advanced';


const bytes = await (
  await fetch(new Request('./my-rive-file.riv'))
).arrayBuffer();
const myRiveFile = await rive.load(new Uint8Array(bytes));

const artboard = myRiveFile.defaultArtboard();
const textRun = artboard.textRun("MyRun"); // Query by the text run name
console.log(`My design-time text is ${textRun.text}`);
textRun.text = "Hello JS Runtime!";

...

Semantics for Accessibility

As Rive Text does not make use of the underlying platform text APIs, additional steps need to be taken to ensure it can be read by screen readers.

The following code snippets provide guidance on how to add semantic labels to your Rive animations. Please see the respective platform/SDKs developer documentation for additional information regarding accessibility concerns.

See Flutter's documentation on Accessibility for more information. In this example you'll use the Semantics widget to provide a label that reflects the current value of the Rive Text component.

...

String semanticLabel = '';

...

Semantics(
  label: semanticLabel,
  child: RiveAnimation.asset(
    'assets/hello_world_text.riv',
    animations: const ['Timeline 1'],
    onInit: (artboard) {
      final run = artboard.component<TextValueRun>("MyRun");
      setState(() {
        // Calling setState is needed to ensure the Semantics widget
        // rebuilds with the new value.
        semanticLabel = run?.text ?? "";
      });
    },
  ),
),
```

Or you can read the .riv file yourself and instance the artboard, see Alternative Widget Setup.

Additional Resources:

  • Accesible web animations: ARIA live regions