Dynamic Content

The Dynamic Content component renders UI elements based on JSON. This enables programmatic control over what content appears in an app, making it ideal for displaying AI-generated responses, API results, or data-driven layouts.

Adding a Dynamic Content component

Configuring Dynamic Content

The Descriptions field accepts a column containing JSON that defines which components to render. The JSON can be a single component object or an array of multiple components.

Single component example:

{ "kind": "text", "text": "Hello" }

Multiple components example:

[ { "kind": "text", "text": "Hello" }, { "kind": "image", "image": "https://example.com/photo.png" } ]

Visibility Conditions control when the component appears. Add conditions based on column values or user properties to show the component only when specific criteria are met.

Use the Notes field to add internal documentation about the component’s purpose or the expected JSON format.

Component types

The Dynamic Content component supports six element types, each with specific properties and requirements.

text

text displays plain text with optional styling. The JSON has the following requirements:

1. kind must be text.
2. text content should be a string.
3. Use style to change the text appearance. Valid options are:

• large
• regular
• small
• footnote
• metaText
• headlineXSmall
• headlineSmall
• headlineMedium
• headlineLarge
• headlineXLarge

{ "kind": "text", "text": "Welcome to Glide", "style": "headlineLarge" }

rich-text displays formatted text using HTML or Markdown. The JSON has the following requirements:

1. kind must be rich-text.
2. text should contain your HTML or Markdown content.

{ "kind": "rich-text", "text": "<b>Bold</b> and <i>italic</i>" }

image

image displays an image from a URL. The JSON has the following requirements:

1. kind must be image.
2. image should be the image URL.

There are several optional parameters you can add. style, size , aspectRatio, and imageFill can all be specified as a string. fullWidthOnMobile and zoomable can be specified as a true/false boolean value. Valid values for each option that accepts a string are:

Style

• image-style-rectilinear
• image-style-circle

Size

• size-small
• size-medium
• size-full

Aspet Ratio

• aspect-auto
• aspect-nine-by-sixteen
• aspect-square
• aspect-four-by-three
• aspect-sixteen-by-nine
• aspect-three-by-one

ImageFill

• image-fill-cover
• image-fill-contain

{
  "kind": "image",
  "image": "https://example.com/banner.png",
  "size": "M",
  "aspectRatio": "16:9",
  "zoomable": true
}

hint

hint displays a callout message. The JSON has the following requirements:

1. kind must be hint.
2. text should be a string containing the message content.
3. Optionally, use mood to set the tone style of the hint (Default, neutral, success, warning, or danger).

{ "kind": "hint", "text": "This action cannot be undone.", "mood": "warning" }

big-numbers

big-numbers displays prominent numeric values. The JSON has the following requirements:

1. kind must be big-numbers.
2. items should be an array of objects. Each item can include more detail as a string:
   • name: the label for the value
   • value: the displayed number or value
   • description: additional context
3. Optionally, use title to add a section heading.

{
  "kind": "big-numbers",
  "title": "Monthly Stats",
  "items": [
    { "name": "Users", "value": "1,204", "description": "+12% from last month" },
    { "name": "Revenue", "value": "$45K" }
  ]
}

list

list displays a list of items. The JSON has the following requirements:

1. kind must be list.
2. items should be an array of objects. Each item can include more detail as a string:
   • title: the item title
   • subtitle: the item subtitle
   • image: an image URL
   • emphasis: highlighted text
3. Optionally, use title to add a heading to the list.

{
  "kind": "list",
  "title": "Team Members",
  "items": [
    { "title": "Alice", "subtitle": "Engineering", "image": "https://example.com/alice.png" },
    { "title": "Bob", "subtitle": "Design" }
  ]
}

table

table displays tabular data as rows of key-value records. The JSON has the following requirements:

1. kind must be table.
2. items should be an array of objects where keys are column names and values are strings or numbers.
3. Optionally, use title to add a table heading.

{
  "kind": "table",
  "title": "Inventory",
  "items": [
    { "Product": "Widget", "Price": 9.99, "Stock": 142 },
    { "Product": "Gadget", "Price": 24.99, "Stock": 38 }
  ]
}

Frequently Asked Questions