Skip to main content
The Code tab is the manual editor for writing and editing widget code and data. It is split into two sections: the main editor (top) where you write the widget’s visual layout, and the footer panel (bottom) where you define the schema and manage examples.

​
Main Editor

The main editor is where you write the widget’s visual layout using the built-in component library. It includes:
  • Autocomplete and type hints for all available components and their properties.
  • Syntax highlighting for readable, structured code.
  • A Copy button next to the JSON toggle for quick clipboard access.
Use autocomplete to discover available components and their supported props without leaving the editor.

​
Code Syntax

The code editor uses a JSX-like syntax. Below are the key patterns for working with data in your widget code.

​
Variables

Reference data fields using curly braces. Each variable maps to a field defined in the schema. 
<Title value={title} size="sm" />
<Text value={description} size="sm" color="secondary" />

​
Nested Data

Access nested objects using dot notation. 
<Text value={speaker.name} />
<Text value={speaker.title} />

​
Loops

Repeat elements over an array using .map(). 
{speakers.map((speaker) => (
  <Row key={speaker.id} gap={3}>
    <Image src={speaker.image} />
    <Text value={speaker.name} size="sm" />
  </Row>
))}

​
String Interpolation

Combine static text with data fields using backticks and ${} syntax. 
<Text value={`Tax (${taxPercent})`} />

​
Schema

The Schema editor lives in the footer panel. It defines the data fields the agent needs to provide when rendering the widget. Schemas are written using Zod. The footer panel includes a Zod/JSON toggle:
  • Zod — the editable schema definition.
  • JSON Schema — a read-only, auto-generated view derived from the Zod schema.
The schema is how the agent knows what data to pass into the widget. Each field in the schema maps to a variable you can reference in the code.

​
Default Example

The Default tab in the footer panel contains the initial values for all schema fields. These values are used when the widget first renders in the preview. 
{
  "title": "Hello World",
  "description": "This is a sample widget"
}

​
Named Examples

Named examples let you visualize different data scenarios without changing the default values. Use them to test how the widget looks with varying data — for example, 1 item vs 5 items, or an empty state vs a post-submission state.
1

Create an example

Click the + button in the footer panel to add a new named example.
2

Edit the name and values

Each named example has an editable name and its own set of field values.
3

Switch between examples

Click any example tab to update the preview with that example’s data.
Named examples are for previewing in the builder only. At runtime, data comes from the action. See the Overview page for details on data sources.