Rich Text

The Rich Text widget allows you to display text with multiple styles within a single block. Unlike the basic Text widget, Rich Text is perfect for scenarios where you need to mix formatting, such as bolding a keyword, coloring a specific phrase, or making a portion of the text clickable.

An example of a Rich Text widget with multiple styles in a single block.

Adding a Rich Text Widget

The Rich Text widget is located in the Base Elements section of the Widget Palette. Once added, you can configure its properties from the Widget Properties Panel.

Core Concept: Text Spans

The Rich Text widget is composed of a list of Text Spans. Think of each span as an individual, mini-Text widget that has its own content, styling, and optional onClick action. By combining these spans, you can create a single, seamless block of text with varied formatting.

---

Properties

The properties are divided into two main groups: properties for the entire widget and properties for each individual text span.

Global Properties

These properties control the layout and behavior of the entire Rich Text block.

Property	Description
Alignment	Aligns the entire text block horizontally (left, center, right, justify).
Max Lines	Limits the number of lines for the entire Rich Text widget. If empty, the text will expand as needed.
Overflow	Controls how text overflows when it exceeds the available space. Options include clip, fade, ellipsis, visible, marquee.
Text Style	A base text style applied to all spans. This can be overridden by the styling of an individual span.

Text Spans

This section in the properties panel is where you manage the list of individual text segments. Each span in the list has its own set of controls:

Each span has an input for its value and an icon to edit its style.

• Value Input: Directly edit the text content for each span in its input field. This can be static text or a dynamic expression (e.g., Hello, ${appState.user.name}).

• Styling (Pencil Icon): Click the pencil icon to open a modal where you can customize the Text Style for that specific span. You can link it to a theme style or create a custom one.

• Reordering & Deleting: Hover over a span to reveal controls for dragging to reorder or deleting it.

• Add New Span: Click the "Add New" button at the bottom to add another segment to your Rich Text.

• Interaction (On Click): Inside the styling modal (opened via the pencil icon), you can also add an On Click action. This makes a specific span interactive, which is perfect for creating inline links like "Terms of Service" or "Privacy Policy" within a sentence.

---

Default Properties

The Rich Text widget supports all Default Properties.

---

Best Practices

• When to Use: Use Rich Text only when you need multiple styles in one block. For single-styled text, the standard Text widget is more efficient.

• Performance: Keep the number of spans reasonable. A large number of spans can impact performance.

• Consistency: Use the global Text Style property to define the base style for all spans, and only override specific properties on individual spans.

• Interactivity: Leverage the On Click action on individual spans to create interactive text, like "Terms of Service" links.

---

Text vs. Rich Text

Choose the right widget for the job to keep your app efficient and easy to maintain.

Feature	Text Widget	Rich Text Widget
Styling	One style for the entire block	Multiple styles in one block
Interactivity	The entire widget is clickable	Each text span can be clickable
Use Case	Headings, paragraphs, labels	"By signing up, you agree to our Terms"
Complexity	Simple	More complex, composed of spans