Rive

https://rive.app/docs/
Admin
Rive is a real-time interactive animation design tool that provides an editor for creating and...
Tokens:103,306
Snippets:871
Trust Score:9.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Data Binding Quick Start (Various)

Source: https://rive.app/docs/runtimes/caching-a-rive-file

A quick start guide for implementing data binding in Rive animations across multiple platforms. This example focuses on a rewards system.

```flutter
https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding.dart
```

```reactNative
https://github.com/rive-app/rive-react-native/blob/main/example/app/(examples)/DataBinding.tsx
```

```unity
https://github.com/rive-app/rive-unity-examples/blob/main/getting-started/Assets/RewardsController.cs
```

```swift
https://github.com/rive-app/rive-ios/blob/main/Example-iOS/Source/Examples/SwiftUI/RewardsView.swift
```

```kotlin
https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeDataBindingActivity.kt
```

--------------------------------

### Rive Runtime Examples: Data Binding Quick Start (Flutter, React Native, Unity, Apple, Android)

Source: https://rive.app/docs/scripting/getting-started

A quick start guide for implementing data binding at runtime. This example is provided for Flutter, React Native, Unity, iOS (Apple), and Android platforms.

```javascript
{
  dataBindingQuickStart: {
    title: "Data Binding",
    description: "Get started with Data Binding at runtime.",
    image: "/images/runtimes/rewards.gif",
    links: {
      flutter: "https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding.dart",
      reactNative: "https://github.com/rive-app/rive-react-native/blob/main/example/app/(examples)/DataBinding.tsx",
      unity: "https://github.com/rive-app/rive-unity-examples/blob/main/getting-started/Assets/RewardsController.cs",
      apple: "https://github.com/rive-app/rive-ios/blob/main/Example-iOS/Source/Examples/SwiftUI/RewardsView.swift",
      android: "https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeDataBindingActivity.kt"
    },
    source: ["https://rive.app/marketplace/25475-47540-data-binding-demo/"]
  }
```

--------------------------------

### Getting Started with Data Binding in Unity

Source: https://rive.app/docs/game-runtimes/unity/unity

A quick start guide for implementing data binding in Unity with Rive. This covers the fundamental steps to connect your Rive animations with dynamic data for interactive experiences.

```csharp
using UnityEngine;

public class RewardsController : MonoBehaviour
{
    public Rive.RiveAnimation riveAnimation;

    void Start()
    {
        // Ensure the Rive animation is loaded
        if (riveAnimation != null && riveAnimation.IsInitialized)
        {
            // Example: Setting a number input for data binding
            riveAnimation.SetNumberState ("progress", 0.5f);
            Debug.Log("Set initial number state for progress.");
        }
    }

    // Example method to update a boolean state
    public void SetBooleanState(string inputName, bool value)
    {
        if (riveAnimation != null && riveAnimation.IsInitialized)
        {
            riveAnimation.SetBooleanState(inputName, value);
            Debug.Log($"Set boolean state '{inputName}' to {value}.");
        }
    }
}
```

--------------------------------

### Runtime Font Swapping Example

Source: https://rive.app/docs/game-runtimes/unity/runtime-asset-swapping

An example demonstrating how to swap a font asset at runtime using a custom asset loader callback.

```APIDOC
## Runtime Font Swapping Example

### Description
This example illustrates how to dynamically change the font used in a Rive animation at runtime. It involves setting up a callback that intercepts font asset requests and provides a new font asset.

### Method
`File.Load(Asset asset, CustomAssetLoaderCallback customAssetLoaderCallback)`

### Endpoint
N/A (Runtime operation)

### Parameters
#### Request Body
- **assetReference** (EmbeddedAssetReference) - The asset reference provided by the Rive runtime.
- **m_fontOobAsset** (FontOutOfBandAsset) - The custom font asset to be used.

### Request Example
```csharp
private FontOutOfBandAsset m_fontOobAsset;
private File m_file;
private FontEmbeddedAssetReference fontEmbeddedAssetReference;

private bool OobAssetLoaderDelegate(EmbeddedAssetReference assetReference)
{
    fontEmbeddedAssetReference = assetReference as FontEmbeddedAssetReference;
    if (fontEmbeddedAssetReference != null)
    {
        fontEmbeddedAssetReference.SetFont(m_fontOobAsset);
        return true;
    }
    return false;
}

private void Start()
{
    m_fontOobAsset.Load();
    m_file = Rive.File.Load(asset, OobAssetLoaderDelegate);
}

private void OnDestroy()
{
    m_fontOobAsset.Unload();
    m_file.Dispose();
}
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Data Binding Quick Start (Flutter, React Native, Unity, Apple, Android)

Source: https://rive.app/docs/scripting/demos

A quick start guide to implementing Data Binding in Rive animations across multiple platforms. This provides a foundational understanding for dynamic Rive content.

```dart
export const Demos = ({examples, runtime, columns = 2, children, childrenIndex = 0}) => {
  const examplesData = {
    dataBindingQuickStart: {
      title: "Data Binding",
      description: "Get started with Data Binding at runtime.",
      image: "/images/runtimes/rewards.gif",
      links: {
        flutter: "https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding.dart",
        reactNative: "https://github.com/rive-app/rive-react-native/blob/main/example/app/(examples)/DataBinding.tsx",
        unity: "https://github.com/rive-app/rive-unity-examples/blob/main/getting-started/Assets/RewardsController.cs",
        apple: "https://github.com/rive-app/rive-ios/blob/main/Example-iOS/Source/Examples/SwiftUI/RewardsView.swift",
        android: "https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeDataBindingActivity.kt"
      },
      source: ["https://rive.app/marketplace/25475-47540-data-binding-demo/"]
    }
  }
}
```

--------------------------------

### Responsive Layouts

Source: https://rive.app/docs/scripting/pointer-events

Create responsive Rive animations that adapt to different screen sizes. This example focuses on building adaptable layouts.

--------------------------------

### C#: Reading and Writing Rive App Properties

Source: https://rive.app/docs/game-runtimes/unity/data-binding

Demonstrates how to get, set, and observe various property types (string, number, boolean, color, enum) and trigger actions in Rive App using C#. It includes setup for event handlers and checks for widget loading status. Changes to properties are applied upon the next state machine or artboard advance.

```csharp
private void OnEnable()
{
    riveWidget.OnWidgetStatusChanged += HandleWidgetStatusChanged;
}

private void OnDisable()
{
    riveWidget.OnWidgetStatusChanged -= HandleWidgetStatusChanged;
}

private void HandleWidgetStatusChanged()
{
    // Check if the widget is loaded before accessing the view model instance
    if (riveWidget.Status == WidgetStatus.Loaded)
    {
        ViewModelInstance viewModelInstance = riveWidget.StateMachine.ViewModelInstance;

        //==========================================================================
    // STRING PROPERTIES
    //==========================================================================
        ViewModelInstanceStringProperty stringProperty = viewModelInstance.GetStringProperty("title");
        Debug.Log($"String value: {stringProperty.Value}");
        stringProperty.Value = "New Text";

    //==========================================================================
    // NUMBER PROPERTIES
    //==========================================================================
        ViewModelInstanceNumberProperty numberProperty = viewModelInstance.GetNumberProperty("count");
        Debug.Log($"Number value: {numberProperty.Value}");
        numberProperty.Value = 42.5f;

    //==========================================================================
    // BOOLEAN PROPERTIES
    //==========================================================================
        ViewModelInstanceBooleanProperty boolProperty = viewModelInstance.GetBooleanProperty("isActive");
        Debug.Log($"Boolean value: {boolProperty.Value}");
        boolProperty.Value = true;

    //==========================================================================
    // COLOR PROPERTIES
    //==========================================================================
        ViewModelInstanceColorProperty colorProperty = viewModelInstance.GetColorProperty("backgroundColor");
        // Using Unity Color (float values 0-1)
        Color currentColor = colorProperty.Value;
        colorProperty.Value = new UnityEngine.Color(1, 0, 0, 1); // Red color
        // Or using Color32 (byte values 0-255)
        Color32 currentColor32 = colorProperty.Value32;
        colorProperty.Value32 = new Color32(0, 255, 0, 255); // Green color

    //==========================================================================
    // ENUM PROPERTIES
    //==========================================================================
        ViewModelInstanceEnumProperty enumProperty = viewModelInstance.GetEnumProperty("category");
        Debug.Log($"Enum current value: {enumProperty.Value}");
        Debug.Log($"Enum available values: {string.Join(", ", enumProperty.EnumValues)}");
        enumProperty.Value = "option_name";

    //==========================================================================
    // TRIGGER PROPERTIES
    //==========================================================================
        ViewModelInstanceTriggerProperty triggerProperty = viewModelInstance.GetTriggerProperty("onSubmit");
        triggerProperty.Trigger(); // Fire the trigger
    }
}
```

--------------------------------

### Rive Widget Setup and Configuration

Source: https://rive.app/docs/game-runtimes/unity/components

Instructions on how to add a RiveWidget to your scene and configure its various properties.

```APIDOC
## Rive Widget Setup and Configuration

### Description
This section describes how to add a RiveWidget to your scene hierarchy and details the configuration options available for it.

### Setup
1. Right-click in the scene hierarchy.
2. Navigate to `Rive` → `Widgets` → `RiveWidget`.
3. Place the `RiveWidget` under a `RivePanel` to ensure it is displayed.

### Configuration Options

| Field               | Description                                                                                                                                                         |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Asset               | The Rive asset (.riv) to load.                                                                                                                                      |
| Artboard Name       | The name of the artboard to load from the Rive file.                                                                                                                |
| State Machine Name  | The name of the state machine to load from the selected artboard.                                                                                                   |
| Hit Test Behaviour  | How pointer events are handled (Opaque, Translucent, Transparent, None).                                                                                            |
| Fit                 | How the artboard should fit within the widget's bounds. See the [Fit docs](/game-runtimes/unity/layouts#the-fit-mode) for more details about the available options. |
| Alignment           | How to align the artboard within the widget's bounds                                                                                                                |
| Layout Scale Factor | Scale multiplier used when in Layout fit mode.                                                                                                                      |
| Layout Scaling Mode | How the widget scales in Layout mode ( `ReferenceArtboardSize` ,  `ConstantPhysicalSize` and `ConstantPixelSize`).                                                  |
| Fallback DPI        | DPI value to use when screen DPI is unavailable                                                                                                                     |
| Reference DPI       | Target DPI for scaling calculations                                                                                                                                 |
| Speed               | Controls the widget's playback speed. A value of 1 is normal speed, 2 is double speed, 0.5 is half speed                                                            |

### Properties

| Name                  | Description                                                                                                                |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| File                  | The currently loaded Rive file instance.                                                                                   |
| Artboard              | The currently loaded artboard instance.                                                                                    |
| State Machine         | The currently loaded state machine instance.                                                                               |
| Status                | Current status of the widget (Uninitialized, Loading, Loaded, Error)                                                       |
| BindingMode           | Determines how the widget should handle binding to a ViewModel instance: Auto Bind Default, Auto Bind Selected, or Manual. |
| ViewModelInstanceName | The name of the ViewModel instance to bind to when BindingMode is set to Auto Bind Selected.                               |

### Events

| Name                  | Description                                                                          |
| --------------------- | ------------------------------------------------------------------------------------ |
| OnRiveEventReported   | Triggered when a Rive event is reported from the Rive graphic.                       |
| OnWidgetStatusChanged | Triggered when the widget's status changes (e.g., from Loading to Loaded, or Error). |

### Public Methods

| Name                                                            | Description                                                                                                                                                                                                          |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

```

--------------------------------

### Font Asset Example with Asset Handler

Source: https://rive.app/docs/runtimes/flutter/loading-assets

This example demonstrates how to use the assetLoader callback to dynamically load font assets that are not embedded within the Rive file. It provides a list of fallback URLs and attempts to load a font using the http package.

```APIDOC
## Instantiate File with Asset Loader

### Description
Instantiate a `File` object and provide an `assetLoader` callback to handle external assets.

### Method
`File.asset()`

### Endpoint
N/A (Client-side implementation)

### Parameters
#### Constructor Parameters
- **assetLoader** (Function) - Required - A callback function that receives `asset` and `bytes` to handle asset loading.
  - `asset` (FileAsset) - Reference to the asset object (e.g., `FontAsset`, `ImageAsset`, `AudioAsset`).
  - `bytes` (Uint8List?) - The embedded bytes of the asset, if available.

### Request Example
```dart
final fontFile = await File.asset(
    'assets/acqua_text_out_of_band.riv',
    riveFactory: Factory.rive,
    assetLoader: (asset, bytes) {
        // Custom asset loading logic here
        if (asset is FontAsset && bytes == null) {
            // Handle font asset loading
            final urls = [
                'https://cdn.rive.app/runtime/flutter/IndieFlower-Regular.ttf',
                // ... other font URLs
            ];
            // Pick a random URL and load the font
            http.get(Uri.parse(urls[Random().nextInt(urls.length)])).then((res) {
                if (mounted) {
                    asset.decode(Uint8List.view(res.bodyBytes.buffer));
                    setState(() {}); // Force rebuild
                }
            });
            return true; // Indicate that the asset is being handled
        } else {
            return false; // Indicate that the runtime should attempt to load the asset
        }
    },
);
```

### Response
#### Success Response
- **File** - The instantiated `File` object with the custom asset loader.

#### Response Example
N/A (This is a constructor call)

### Important Notes
- The `assetLoader` callback must return `true` if you handle the asset loading, and `false` otherwise.
- `FileAsset` objects become invalid once the `File` is disposed.
```

--------------------------------

### GET /StateMachine (Legacy API)

Source: https://rive.app/docs/game-runtimes/unity/state-machines

Instantiating and advancing a StateMachine using the legacy Artboard-based API.

```APIDOC
## GET /StateMachine (Legacy API)

### Description
Instantiates a StateMachine from an Artboard instance and manually advances it using delta time. Note: This is deprecated in favor of the Component API.

### Method
GET

### Endpoint
Artboard.StateMachine()

### Parameters
#### Query Parameters
- **index/name** (int/string) - Optional - The index or name of the state machine to retrieve.

### Request Example
```csharp
m_stateMachine = m_artboard?.StateMachine("Name");
```

### Response
#### Success Response (200)
- **StateMachine** (Object) - The state machine instance.

#### Response Example
```csharp
private void Update()
{
    m_stateMachine?.Advance(Time.deltaTime);
}
```

--------------------------------

### Reading and Setting View Model Properties

Source: https://rive.app/docs/scripting/data-binding

Provides examples of retrieving specific property types like numbers and triggers from a View Model, and how to update their values or fire them.

```lua
local vmi = context:viewModel()

if vmi then
  -- Get a reference to the score property from the view model
  local score = vmi:getNumber('score')
  if score then
    -- Read the score
    print(score.value)

    -- Set the score
    score.value = 100
  end

  -- Get a reference to the myTrigger property from the view model
  local myTrigger = vmi:getTrigger('myTrigger')
  if myTrigger then
    -- Fire the trigger
    mytrigger:fire()
  end
end
```

--------------------------------

### Responsive Layouts (Web)

Source: https://rive.app/docs/runtimes/caching-a-rive-file

This entry indicates an example related to responsive layouts, likely demonstrating how Rive animations adapt to different screen sizes or orientations.

```web
export const Demos = ({examples, runtime, columns = 2, children, childrenIndex = 0}) => {
  const examplesData = {
    layouts: {
      title: "Responsive Layouts",
      description: "Responsive Layouts",
      image: "/images/runtimes/responsive-layouts.webp",
      links: {
        web: "https://codesandbox.io/p/sandbox/rive-js-responsive-layouts-j4394x?file=%2Fsrc%2Findex.ts",
        react: "https://codesandbox.io/p/sandbox/rive-react-responsive-layouts-494z2f?file=%2Fsrc%2FApp.tsx",
        flutter: "https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/responsive_layouts.dart",
        android: "https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeResponsiveLayoutActivity.kt"
      },
      source: ["https://rive.app/marketplace/24640-46041-responsive-layouts/"]
    }
  }
}
```

--------------------------------

### Google App Ads (Mobile)

Source: https://rive.app/docs/runtimes/caching-a-rive-file

A guide on how to create an interactive Google App Ad using Rive. This example is targeted towards mobile development.

```mobile
https://github.com/rive-app/rive-use-cases/tree/main/rive-google-ads
```

--------------------------------

### Instantiating and Advancing State Machines (Legacy API)

Source: https://rive.app/docs/game-runtimes/unity/state-machines

Shows how to manually instantiate a StateMachine from an Artboard and advance it within the Unity Update loop. This approach is considered legacy and is provided for reference only.

```csharp
private StateMachine m_stateMachine;

m_stateMachine = m_artboard?.StateMachine();
m_stateMachine = m_artboard?.StateMachine(0);
m_stateMachine = m_artboard?.StateMachine("Name");

private void Update()
{
    m_stateMachine?.Advance(Time.deltaTime);
}
```

--------------------------------

### YouTube Embed Component (React)

Source: https://rive.app/docs/editor/events/overview

A React component to embed YouTube videos. It dynamically constructs the video source URL, optionally including a start timestamp. This component is provided as an example within the documentation.

```javascript
export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

```

--------------------------------

### Legacy API: Manual Data Binding

Source: https://rive.app/docs/game-runtimes/unity/data-binding

For users employing a custom render loop with the low-level API, manual data binding setup in scripts is required. Refer to the provided example for implementation guidance.

```APIDOC
## Legacy API: Manual Data Binding

### Description
If you choose to use the low-level API to control the render loop, you will need to manually set up data binding in your scripts. This approach requires additional implementation effort and a deeper understanding of the Rive runtime. It is recommended to use the Component API unless a custom render loop is specifically required.

### Method
Manual implementation in custom scripts.

### Endpoint
N/A (Legacy API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
Refer to the [RiveScreen example](https://github.com/rive-app/rive-unity/blob/main/examples/basic/Assets/GameRuntime/RiveScreen.cs) for an implementation of manual auto binding in a custom render loop.

### Response
#### Success Response (200)
N/A (Manual implementation)

#### Response Example
N/A
```

--------------------------------

### Swap Artboards at Runtime with C#

Source: https://rive.app/docs/game-runtimes/unity/data-binding

Demonstrates how to use ViewModelInstanceArtboardProperty to bind and swap artboards in a Unity environment. It includes lifecycle management for event listeners and external file loading.

```csharp
[SerializeField] private Asset m_externalRiveAsset;

private ViewModelInstanceArtboardProperty artboardProperty;
private File externalFile;

private void OnEnable()
{
    riveWidget.OnWidgetStatusChanged += HandleWidgetStatusChanged;
}

private void OnDisable()
{
    riveWidget.OnWidgetStatusChanged -= HandleWidgetStatusChanged;
}

private void HandleWidgetStatusChanged()
{
    if (riveWidget.Status == WidgetStatus.Loaded)
    {
        ViewModelInstance viewModelInstance = riveWidget.StateMachine.ViewModelInstance;
        artboardProperty = viewModelInstance.GetArtboardProperty("artboard_1");
        artboardProperty.OnValueChanged += OnArtboardChanged;

        var blueArtboard = riveWidget.File.BindableArtboard("ArtboardBlue");
        artboardProperty.Value = blueArtboard;

        if (m_externalRiveAsset != null)
        {
            externalFile = File.Load(m_externalRiveAsset);
        }
    }
}

private void OnArtboardChanged()
{
    Debug.Log("Artboard changed");
}

public void SwitchToRedArtboard()
{
    if (artboardProperty != null)
    {
        var redArtboard = riveWidget.File.BindableArtboard("ArtboardRed");
        artboardProperty.Value = redArtboard;
    }
}

public void SwitchToExternalArtboard()
{
    if (artboardProperty != null && externalFile != null)
    {
        var externalArtboard = externalFile.BindableArtboard("SomeArtboard");
        artboardProperty.Value = externalArtboard;
    }
}

private void OnDestroy()
{
    externalFile?.Dispose();
    if (artboardProperty != null)
    {
        artboardProperty.OnValueChanged -= OnArtboardChanged;
    }
}
```

--------------------------------

### Create Bindable Artboard with Custom ViewModel Instance

Source: https://rive.app/docs/game-runtimes/unity/data-binding

Demonstrates how to create a bindable artboard by linking a custom ViewModelInstance. This provides direct control over the data used by the artboard. It involves getting a ViewModel by name, creating an instance, and then binding it to an artboard.

```csharp
var file = riveWidget.File;
var viewModelInstance = file.GetViewModelByName("CharacterData").CreateInstance();
var bindableArtboard = file.BindableArtboard("FeaturedCharacterCard", viewModelInstance);
```

--------------------------------

### Dynamic Content Switching with Bindable Artboards

Source: https://rive.app/docs/game-runtimes/unity/data-binding

Shows how to manage and switch between different types of content (character, event, offer) displayed in a featured content slot. Each content type uses a separate artboard with its own unique data structure, managed by custom ViewModelInstances. This allows for dynamic updates and transitions between various UI elements.

```csharp
private ViewModelInstanceArtboardProperty featuredContentSlot;

private ViewModelInstance characterData;
private ViewModelInstance eventData;
private ViewModelInstance offerData;

private BindableArtboard featuredCharacter;
private BindableArtboard limitedEvent;
private BindableArtboard specialOffer;

private void HandleWidgetStatusChanged()
{
    if (riveWidget.Status == WidgetStatus.Loaded)
    {
        ViewModelInstance viewModelInstance = riveWidget.StateMachine.ViewModelInstance;

        // Get the featured content slot from your main UI
        featuredContentSlot = viewModelInstance.GetArtboardProperty("featuredContentSlot");

        // Featured Character has its own unique data structure
        var characterViewModel = riveWidget.File.GetViewModelByName("CharacterData");
        characterData = characterViewModel.CreateInstance();
        var charName = characterData.GetStringProperty("name");
        var charClass = characterData.GetStringProperty("class");
        var attackPower = characterData.GetNumberProperty("attackPower");
        var specialAbility = characterData.GetStringProperty("specialAbility");
        var isUnlocked = characterData.GetBoolProperty("unlocked");
        charName.Value = "Shadowblade";
        charClass.Value = "Assassin";
        attackPower.Value = 92;
        specialAbility.Value = "Phantom Strike";
        isUnlocked.Value = false;

        // Limited-Time Event has its own unique data structure
        var eventViewModel = riveWidget.File.GetViewModelByName("EventData");
        eventData = eventViewModel.CreateInstance();
        var eventTitle = eventData.GetStringProperty("title");
        var eventDescription = eventData.GetStringProperty("description");
        var hoursRemaining = eventData.GetNumberProperty("hoursRemaining");
        var participantCount = eventData.GetNumberProperty("participants");
        var isActive = eventData.GetBoolProperty("active");
        eventTitle.Value = "Dragon Raid Weekend";
        eventDescription.Value = "Team up to defeat the ancient dragon";
        hoursRemaining.Value = 36;
        participantCount.Value = 1247;
        isActive.Value = true;

        // Special Offer has its own unique data structure
        var offerViewModel = riveWidget.File.GetViewModelByName("OfferData");
        offerData = offerViewModel.CreateInstance();
        var offerName = offerData.GetStringProperty("itemName");
        var originalPrice = offerData.GetNumberProperty("originalPrice");
        var discountPercent = offerData.GetNumberProperty("discount");
        var currency = offerData.GetStringProperty("currencyType");
        var timeLeftHours = offerData.GetNumberProperty("expiresInHours");
        offerName.Value = "Legendary Weapon Pack";
        originalPrice.Value = 2999;
        discountPercent.Value = 50;
        currency.Value = "Gems";
        timeLeftHours.Value = 12;

        // Create bindable artboards. Each uses a DIFFERENT artboard with unique design
        featuredCharacter = riveWidget.File.BindableArtboard("FeaturedCharacterCard", characterData);
        limitedEvent = riveWidget.File.BindableArtboard("EventBanner", eventData);
        specialOffer = riveWidget.File.BindableArtboard("OfferCard", offerData);

        // Start by showing the featured character
        featuredContentSlot.Value = featuredCharacter;
    }
}

// Switch to showing the limited-time event
public void ShowLimitedEvent()
{
    if (featuredContentSlot != null && limitedEvent != null)
    {
        featuredContentSlot.Value = limitedEvent;
    }
}

// Switch to showing the special offer
public void ShowSpecialOffer()
{
    if (featuredContentSlot != null && specialOffer != null)
    {
        featuredContentSlot.Value = specialOffer;
    }
}

// Update event countdown timer
public void UpdateEventTimer(float deltaTime)
{
    if (eventData != null)
    {
        var hoursRemaining = eventData.GetNumberProperty("hoursRemaining");
        hoursRemaining.Value -= (deltaTime / 3600f); // Convert seconds to hours
    }
}
```

--------------------------------

### Setting Image CDN Headers

Source: https://rive.app/docs/runtimes/flutter/loading-assets

This example shows how to set the 'Accept' header for image CDNs to specify supported image formats like PNG, WebP, and JPEG. This is crucial for CDNs that perform on-the-fly image transformations.

```javascript
... headers: { Accept: 'image/png,image/webp,image/jpeg,*/*', } ...
```

--------------------------------

### Rive Demo Component Usage

Source: https://rive.app/docs/runtimes/demos

Example of how to use the Demos and RiveCard components to display specific Rive animation examples within the application grid.

```jsx
<Demos
  examples={["quickStart", "dataBindingQuickStart", "layouts"]}
  columns={3}
  childrenIndex={4}
>
  <RiveCard
    title="Follow the Cursor"
    description="Track the cursor, even if it's outside the bounds of the Rive instance."
    links={{ web: "https://codesandbox.io/p/sandbox/rive-web-track-your-mouse-n38gdd" }}
    source={["https://rive.app/marketplace/24639-46040-cat-follow-cursor-demo/"]}
  >
    <ExampleEyeFollow />
  </RiveCard>
</Demos>
```

--------------------------------

### Memory Management Best Practices

Source: https://rive.app/docs/game-runtimes/unity/runtime-asset-swapping

Provides recommendations for managing memory when using runtime asset swapping.

```APIDOC
## Memory Management Best Practices

### Description
Proper memory management is crucial when implementing runtime asset swapping to prevent leaks and ensure smooth performance. Follow these guidelines for loading and unloading assets and disposing of Rive files.

### Best Practices
1.  **Load Assets Before Use**: Always call `Load()` on your Out-Of-Band asset before attempting to use it within the asset loader callback.
2.  **Dispose Resources**: Ensure that all Rive-related resources are properly released when no longer needed:
    *   Call `Unload()` on your assets when they are no longer required.
    *   Call `Dispose()` on the `Rive.File` object when you are finished with it.
```

--------------------------------

### Rive Runtime Examples: Data Binding Solos (React)

Source: https://rive.app/docs/scripting/getting-started

Demonstrates controlling solos at runtime using strings, numbers, or enums in a React environment. This example focuses on the React implementation.

```javascript
{
  dataBindingSolos: {
    title: "Data Binding Solos",
    description: "Control solos at runtime using strings, numbers, or enums.",
    image: '/images/runtimes/data-binding-solos.gif',
    links: {
      react: "https://codesandbox.io/p/sandbox/rive-react-controlling-solos-at-runtime-ctcnlx?file=%2Fsrc%2FApp.tsx"
    }
  }
```

--------------------------------

### Accessing View Models via Context

Source: https://rive.app/docs/scripting/data-binding

Demonstrates how to access view models (immediate, root, and parent) within the `init` lifecycle function using the `context` parameter.

```APIDOC
## Accessing View Models via Context

### Description
This section shows how to access view models using the `context` parameter available in the `init` lifecycle function. You can retrieve the immediate view model, the root view model, or a view model from a parent node.

### Method
`init(self: MyNode, context: Context)`

### Endpoint
N/A (Scripting API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```lua
type MyNode = {}

function init(self: MyNode, context: Context): boolean
  -- Get the view model from the node's immediate context.
  local vmi = context:viewModel()

  -- Get the root view model
  local rootVmi = context:rootViewModel()

  -- Get the view model from the parent node.
  local parentDC = dc:parent()
  local parentVmi = dc:viewModel()
end

return function(): Node<MyNode>
  return {
    init = init,
  }
end
```

### Response
#### Success Response (200)
N/A (This is a scripting function)

#### Response Example
N/A
```

--------------------------------

### Rive Runtime Examples: Data Binding Images (Web, Flutter, Android)

Source: https://rive.app/docs/scripting/getting-started

Shows how to replace images at runtime using data binding with JavaScript. This example is available for web, Flutter, and Android platforms.

```javascript
{
  dataBindingImages: {
    title: 'Data Binding Images',
    description: 'Replace images at runtime using data binding images with javascript.',
    image: '/images/runtimes/rive-db-images.webp',
    links: {
      web: 'https://codesandbox.io/p/sandbox/objective-cohen-sqwh9q?file=%2Fsrc%2Findex.ts',
      flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_images.dart',
      android: "https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeImageBindingActivity.kt"
    },
    source: ["https://rive.app/marketplace/25472-47537-data-binding-images/"]
  }
```

--------------------------------

### Render Rive Example Cards

Source: https://rive.app/docs/runtimes/caching-a-rive-file

A React component that maps through example data to render cards containing images or Rive canvas elements, including dynamic links to source files and runtime documentation.

```jsx
{examples.map((example, index) => {
	const {title, image, links, description, source, riv} = examplesData[example];
	const canvasId = `rive-canvas-${example}`;
	return <>
		{index === childrenIndex && children}
		<CardContainer key={canvasId}>
			<div className="w-full h-0 relative pb-[75%]">
				<div className="absolute inset-0">
					{image && <img alt={title} className="w-full object-cover object-center" src={getSrc(image)} />}
					{riv && !image && <canvas id={canvasId} style={{width: "100%", height: "100%"}} />}
				</div>
			</div>
		</CardContainer>
	</>;
})}
```

--------------------------------

### Initialize Rive File with Custom Asset Loader

Source: https://rive.app/docs/game-runtimes/unity/runtime-asset-swapping

Demonstrates the method signatures for loading a Rive file with a custom asset loader callback to enable runtime asset swapping.

```csharp
File.Load(Asset asset, CustomAssetLoaderCallback customAssetLoaderCallback);
File.Load(TextAsset asset, CustomAssetLoaderCallback customAssetLoaderCallback);
File.Load(byte[] riveFileByteContents, CustomAssetLoaderCallback customAssetLoaderCallback);
```

--------------------------------

### Rive Runtime Examples: Caching a Rive File (Web)

Source: https://rive.app/docs/scripting/getting-started

Demonstrates how to cache a Rive file into memory for multiple uses, improving performance. This example is intended for web environments and requires the Rive runtime library.

```javascript
{
  cachingARiveFile: {
    title: 'Caching a Rive File',
    description: 'Load the .riv into memory once, use it multiple times.',
    riv: 'https://static.rive.app/rivs/rives_animated_emojis.riv',
    stateMachines: "State Machine 1",
    artboard: "Emoji_package",
    links: {
      web: "https://codesandbox.io/p/sandbox/rive-js-caching-a-rive-file-g675my?file=%2Fsrc%2Findex.ts%3A9%2C1",
      react: "https://codesandbox.io/p/sandbox/rive-react-caching-a-rive-file-53gmdf?file=%2Fsrc%2FApp.tsx"
    },
    source: ["https://rive.app/marketplace/24644-46045-caching-a-rive-file-at-runtime/"]
  }
```

--------------------------------

### Manage State Machines via Legacy API

Source: https://rive.app/docs/game-runtimes/unity/fundamentals

Explains how to instantiate a State Machine from an Artboard and advance its animation state within the Unity update loop.

```csharp
private StateMachine m_stateMachine;
m_stateMachine = m_artboard?.StateMachine();
m_stateMachine = m_artboard?.StateMachine(0);
m_stateMachine = m_artboard?.StateMachine("Name");
private void Update()
{
    m_stateMachine?.Advance(Time.deltaTime);
}
```

--------------------------------

### Rive Runtime Examples: Data Binding Lists (Web, React, Flutter, Android)

Source: https://rive.app/docs/scripting/getting-started

Demonstrates data binding for lists, enabling the addition, removal, and swapping of items at runtime. This example is available for web, React, Flutter, and Android.

```javascript
{
  dataBindingLists: {
    title: 'Data Binding Lists',
    description: 'Add, remove, edit, and swap items in your data binding list.',
    image: '/images/runtimes/rive-db-lists.webp',
    links: {
      web: 'https://codesandbox.io/p/sandbox/suspicious-hertz-2lg4m8?file=%2Fsrc%2Findex.ts',
      react: 'https://codesandbox.io/p/sandbox/rive-react-data-binding-lists-4msh9z?file=%2Fsrc%2FApp.tsx',
      flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_lists.dart',
      android: "https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeListActivity.kt"
    },
    source: ["https://rive.app/marketplace/25474-47539-data-binding-lists/"]
  }
```

--------------------------------

### Install Rive Unity Package from GitHub (Bash)

Source: https://rive.app/docs/game-runtimes/unity/getting-started

Instructions to install the Rive Unity package directly from GitHub using a git URL in the Unity Package Manager. This method allows access to the latest releases and canary tags.

```bash
https://github.com/rive-app/rive-unity.git?path=package#v0.0.0
```

--------------------------------

### Implement Font Asset Swapping Logic

Source: https://rive.app/docs/game-runtimes/unity/runtime-asset-swapping

Shows how to implement a delegate to swap a font asset at runtime, including keeping a reference for future updates and proper lifecycle management.

```csharp
private FontOutOfBandAsset m_fontOobAsset;
private File m_file;
FontEmbeddedAssetReference fontEmbeddedAssetReference

private bool OobAssetLoaderDelegate(EmbeddedAssetReference assetReference)
{
    fontEmbeddedAssetReference = assetReference as FontEmbeddedAssetReference;
    if (fontEmbeddedAssetReference != null)
    {
        fontEmbeddedAssetReference.SetFont(m_fontOobAsset);
        return true;
    }
    return false;
}

private void Start()
{    
    m_fontOobAsset.Load();  
    m_file = Rive.File.Load(asset, OobAssetLoaderDelegate);
}

private void OnDestroy()
{  
    m_fontOobAsset.Unload();  
    m_file.Dispose();
}
```

--------------------------------

### Render Rive Example Cards with React

Source: https://rive.app/docs/scripting/getting-started

This React component dynamically renders a grid of Rive example cards. It handles image path resolution, conditional rendering of Rive canvases, and displays metadata like titles, descriptions, and runtime links.

```javascript
const getSrc = (imageSrc) => {
  if (imageSrc.startsWith('https:')) {
    return imageSrc;
  }
  return `https://rive.app/docs${imageSrc}`;
};

return <div className={`card-group not-prose grid gap-x-4 grid-cols-1 ${columns >= 2 && "md:grid-cols-2"} ${columns >= 3 && "xl:grid-cols-3 xl:w-[67rem] xl:max-w-[calc(100vw-25rem)]"}`}>
  {examples.map((example, index) => {
    const {title, image, links, description, source, riv} = examplesData[example];
    const canvasId = `rive-canvas-${example}`;
    return (
      <CardContainer key={canvasId}>
        <div className="w-full h-0 relative pb-[75%]">
          <div className="absolute inset-0">
            {image && <img alt={title} className="w-full object-cover object-center" src={getSrc(image)} />}
            {riv && !image && <canvas id={canvasId} style={{width: "100%", height: "100%"}} />}
          </div>
        </div>
        <div className="flex flex-grow flex-col px-6 py-5 relative">
          <h2 className="font-semibold text-base">{title}</h2>
          <p>{description}</p>
        </div>
      </CardContainer>
    );
  })}
</div>;
```

--------------------------------

### View Models as Inputs

Source: https://rive.app/docs/scripting/data-binding

Illustrates how to create a script input that can be bound to a view model, allowing read/write access and subscription to changes.

```APIDOC
## View Models as Inputs

### Description
This section explains how to define a script input that can be bound to a view model. This allows the script to interact with the view model's properties, including reading, setting, firing, listening, and subscribing to changes.

### Method
`init(self: MyNode, context: Context)`

### Endpoint
N/A (Scripting API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```lua
type MyNode = {
  -- This input expects a view model instance of type Character
  character: Input<Data.Character>
}

function init(self: MyNode, context: Context): boolean
  local vmi = self.character
end

return function(): Node<MyNode>
  return {
    init = init,
    -- Initialize with `late()` so the value
    -- can be provided by the editor at runtime.
    character = late(),
  }
end
```

### Response
#### Success Response (200)
N/A (This is a scripting function)

#### Response Example
N/A
```
Tokens:
Raw