> ## Documentation Index
> Fetch the complete documentation index at: https://agentheya.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# json_render block

> Author custom UI as a static RenderSpec JSON object — the same format the agent emits at runtime.

# `json_render` block

An escape hatch for custom UI that none of the other block types can express. The `spec` field is a `RenderSpec` — the same shape your tools emit at runtime via the `_render` directive, rendered by the same renderer that draws agent-emitted UI.

## When to use it

* The dashboard editor doesn't have a knob for the layout you want (a bespoke card grid, a tabbed module, an interactive chart).
* You want a static, owner-authored version of UI the agent could also emit dynamically — useful for "always show this on the page" vs "emit it conditionally during chat".
* You've prototyped a `RenderSpec` shape in chat and want to pin it to the page.

For most needs you should reach for [suggested\_prompts](/sections/page-layout/suggested-prompts), [input\_capture](/sections/page-layout/input-capture), [hero](/sections/page-layout/hero), or [faq](/sections/page-layout/faq) first — they're purpose-built and friendlier to edit.

## Shape

```json theme={null}
{
  "id": "panel-1",
  "type": "json_render",
  "position": "sidebar",
  "spec": {
    "root": "panel",
    "components": {
      "panel": { "type": "card", "children": ["title", "body"] }
    }
  }
}
```

| Field      | Required | Type            | Notes                                                                                           |
| ---------- | -------- | --------------- | ----------------------------------------------------------------------------------------------- |
| `id`       | yes      | string          | Stable slug, unique.                                                                            |
| `type`     | yes      | `"json_render"` | Fixed.                                                                                          |
| `position` | no       | enum            | Default `above_chat`.                                                                           |
| `spec`     | no       | object          | A `RenderSpec` (see [Generative UI](/generative-ui) for the catalogue of components and props). |

## Tips

* The dashboard editor's `spec` input is a raw JSON textarea — there's no visual builder. Test specs in chat first using the `/render` slash command in the preview, then copy the working spec into the block.
* The platform only checks that `spec` is an object, not that its contents are valid — invalid specs render an "Invalid json-render spec" placeholder client-side.
* The renderer is the source of truth for what props each component accepts. See [Generative UI](/generative-ui) for the full catalogue.