What a composition's ui tree holds

Every Template and Section is saved as a JSON tree in its ui field. This topic lists every node you can put in that tree, and the JSON each one takes. You need it when you build a layout for the Studio API, or when you read one that Studio saved.

The examples use the Blog project: the Blog post content type, the Post hero and Related posts Sections, and the entry AI 101.

The tree in one minute

• The tree is made of nodes. The root node has the type page, for a Section too.
• A node has a type, props and slots. The type is a built-in node type, or the string you registered a component under.
• A prop gets its value from a binding. See Bind data to a node for the six sources.
• A slot holds child nodes.
• A Repeater shows its children once for each item in a list. A Condition Block shows its children only when a condition passes.
• A Template places a Section with a section-composition node. A Section can leave a Section Slot for the Template to fill.

Find the node you need

You want to	Use	Details
Show a heading, a paragraph, an image or a button	A built-in node such as header, text, image or button	Built-in node types
Show your own component	A node whose type is the string you registered	Registered component node
Show one field	A prop with a binding	Bind one field to a prop
Repeat a card for each item	repeater	Repeater node
Show a node only when a condition holds	condition-block	Condition Block node
Show a different card for each reference or block type	repeater with one condition-block for each type	Reference fields and Modular blocks fields
Leave a gap in a Section for a Template to fill	section-slot	Section Slot node
Place a Section in a Template	section-composition	Binding override on a placed section
Let a Template change one value inside a Section	sectionExposedProps on the Section's root node	Exposed section props

Read in this order

Page	Read it when
Nodes, props and slots	You write or read any node. It covers the keys, slots and the node and prop types.
Bind data to a node	A prop should show a field, a fixed value, a pinned entry, a query or data your app passes in.
Repeaters and condition blocks	A layout shows a list, or shows something only when a condition holds.
Section slots, overrides and exposed props	A Template places a Section, fills a slot in it, or changes a value inside it.
Section and template JSON examples	You want a whole tree to copy and adapt.

To send a layout to the API, see Create a section and a template with the API.