> This page is for Glide Classic.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://www.glideapps.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/docs/_mcp/server.

# Dynamic Content

> Render UI components dynamically from JSON data stored in a column.

> **Feature in preview mode**
>
> This feature is in [preview mode](/docs/reference/account/preview-features). To enable it, you must turn it on in the **Previews** menu on your team settings. Features in preview mode are experimental and may be volatile. Proceed with caution when using experimental features in apps with users.

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

#### Dynamic Content: Adding and configuring the component.

In the [Layout Editor](/docs/getting-started/intro-to-layout#layout-editor), select the screen where the component should appear.

Click the plus symbol in the [Components](/docs/essentials/components) panel.

Select **Dynamic Content** from the **Custom** section.

Configure the **Descriptions** field to point to a column containing JSON, or enter JSON manually.

## 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](/docs/reference/user-experience/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

#### Which plans include Dynamic Content?

Dynamic Content is available on business and enterprise plans. [Check out our pricing to find the right plan for you.](https://www.glideapps.com/pricing)

#### What happens if the JSON is invalid?

The component displays an error message: "Could not parse Glide components from your descriptions." Verify the JSON syntax and ensure all required fields are present.

#### Can I nest components inside each other?

No, the Dynamic Content component renders a flat list of components. Each element in the JSON array is rendered sequentially.