Text

public getTextRunValue(textRunName: string): string | undefined

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

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

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!";

...

public getTextRunValueAtPath(textRunName: string, path: string): string | undefined

public setTextRunValueAtPath(textRunName: string, textRunValue: string, path: string): void

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.getTextRunValueAtPath("MyRun", "path/to/run"));
    r.setTextRunValueAtPath("MyRun", "New text value", "path/to/run");
},
})

<canvas
    id="rive-canvas"
    width={500}
    height={500}
    role="img"
    aria-label="Hello friend, welcome to my page"
></canvas>

<canvas
role="img"
tabindex="0"
aria-describedby="rating-animation-live"
id="canvas"
></canvas>
<p id="rating-animation-live" class="sr-only" aria-live="assertive">
An interactive rating simulation. Use the left and right arrow keys to
select a rating
</p>

const rive = require("@rive-app/canvas");
const dynamicTextEl = document.getElementById("rating-animation-live");

const r = new rive.Rive({
src: "rating.riv",
canvas: document.getElementById("canvas"),
stateMachines: "State Machine 1",
autoplay: true,
onLoad: () => {
    r.setTextRunValue("RatingRun", "0");
    r.resizeDrawingSurfaceToCanvas();
    // See CodeSandbox link above for further functionality
},
onStateChange: (e) => {
    const name = e.data[0];
    const ratingStr = name.charAt(0);
    const ratingNum = parseInt(ratingStr);
    if (!isNaN(ratingNum)) {
    const ratingString = name
        .split("_")
        .reduce((acc, temp) => {
        return (acc += ` ${temp}`);
        }, "")
        .trim();
    r.setTextRunValue("RatingRun", ratingStr);

    dynamicTextEl.innerHTML = `Rating: ${ratingString}`;
    }
}
});