Elements

The building blocks of the UI tree, identified by type and configured through props.

An element represents a UI component instance. Every element is identified by type and configured through props.

{
  "type": "button",
  "props": { "label": "Click me" }
}

Required

  • type (string): The element type identifier (e.g. "button", "input", "checkbox").

Optional

  • props (object): The element's props. Which props are required or optional, and what values they accept, depend on the dialect's element definition; an element MUST NOT carry undeclared props. Prop values can be expressions, fields, actions, or nested elements, and conditionals and maps can resolve them dynamically.

Nested Elements

Any prop the dialect declares as accepting nested elements acts as a slot: its value is a single element, a string, an expression, or an array mixing them — and array entries may also be conditionals and maps resolving to children.

Single element:

{
  "type": "card",
  "props": { "children": { "type": "button", "props": { "label": "Submit" } } }
}

Array of elements:

{
  "type": "card",
  "props": {
    "children": [
      { "type": "text", "props": { "children": "Card content" } },
      { "type": "button", "props": { "label": "Submit" } }
    ]
  }
}

String content:

{
  "type": "card",
  "props": { "children": "Card content" }
}

On this page