Text Runs

Name: Rive 101 - Text Runs
Uploaded: 2025-10-22T00:00:00.000Z
Description: This video introduces the core architecture of Text Runs inside Rive's typography engine, illustrating how to segment a live text string into individual interactive run zones to apply distinct styling and execute runtime type animation swaps.

3m 01sPublished Oct 22, 2025Partial+1 changes

▶ Watch on YouTube ↗

SummaryVersion Notes (Draft)

Core Educational Objective: Deeply comprehend and master the operational logic of Text Runs in Rive, gaining the ability to split localized substrings inside a unified typography node for explicit styling and content manipulation.
Background Pain Points: In legacy animation workflows, altering the hex code of a single specific keyword inside a block of body copy required shattering the text layer into distinct layout chunks. This broke typographic reflow and led to clipping or horizontal alignment issues when handling localization strings.
Final Business Benefits: Text Runs provide a native framework to achieve granular inline styling overrides while preserving a centralized, fluid text container. This architecture provides production-ready resilience for localization pipelines and reactive runtime updates (e.g., dynamically altering usernames or hyperlink states), all while natively exposing both copy contents and assigned style indexes to the animation engine for timeline keyframing.

Typographic Layout Safety of Consolidated Container Streams: Because all split text runs reside within a single parent layout container, they naturally share an automatic typographic reflow pipeline. If a variable update at runtime substitutes a short placeholder in Run 2 with a long string (e.g., swapping Joe out for Alexander), the downstream sibling text in Run 3 pushes forward smoothly, preventing text overlap bugs.
Runtime Data Injection (Data Binding): In cross-platform runtime environments (such as Flutter, WebGL, or Mobile SDKs), engineers can tap directly into a specific Text Run by querying its string node identifier. This lets engineers inject application data dynamically into an isolated node without manually managing layout coordinates or losing the predefined design attributes (like the customized name style).
Discrete Property Stepping: Altering a Text Run's raw text content or style assignment mapping inside the animation timeline uses discrete, stepped interpolation curves rather than continuous fluid gradients. For animating fluid transitions (such as smooth opacity fades or floating positional vectors), leverage Text Modifiers over raw style reassignment tracks.

Some content differs from current version1 changes

2024.9Run requires Design mode

Creating Runs requires Design mode.

📌 Key Points

Split text into Runs for different styles. Change text values at runtime.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Introduce Text Runs Architecture:

Text Runs are designated sub-sections layered within a single structural text block. They serve as the baseline architecture when designing layouts that require a variety of distinct Styles or Modifiers across a singular copy element. By default, a fresh text object instantiates with a single global run node.
00:00:30

Demonstrate Global Override Limitations:

Attempting to alter properties (such as swapping the font fill color to red) directly on the parent style layer instantly floods the modification across all existing characters, proving that localized highlights cannot be achieved on a flat, single-run string.
00:00:43

Execute Selection-Based Run Splitting:

Double-click the canvas text bounding box to activate type editing, then highlight the exact character sequence of the name using the cursor. Navigate to the Inspector and click Run from selection. This non-destructively breaks the continuous string into three independent sequential text run blocks.
00:01:10

Instantiate and Map Distinct Run Styles:

Reselect the main text container asset and click the plus (+) icon to declare a new template style layer named "Style 2". Rename it to "name style" and shift its fill color to deep red. Select the newly split middle run node (Run 2) and remap its assigned typography style asset dropdown to target "name style".
00:01:44

Manage Run Strings & Structural Merging:

Select an isolated Text Run to edit its localized text value manually via the inspector. Utilize the advanced inline management controls if structural adjustment is required: click Merge Next to absorb the following segment, Merge Previous to fuse backward, or Delete to instantly eliminate the targeted run and its textual values entirely.
00:02:22

Automate Content Keyframes & Evaluation:

Open a timeline track and toggle into Animate mode. Drop a structural keyframe on the Text attribute track of the run at frame 0. Advance the playhead and rewrite the copy parameter box to "Ross". Playing the timeline displays an instantaneous, clean string swap. The identical automation method can be applied to the Style map track to toggle whole layout presets dynamically.