What Is a Slot?

A slot is a named insertion point: a spot inside a block or a template that is reserved for child blocks you — or someone reusing your work — drop in later. The block owns its layout; the slot is the hole in that layout deliberately left open.

Slots are what make a reusable piece configurable — the template author decides where outside content may go, and each person who uses it decides what goes there.

Two Flavors of Slots

1. Built-in slots on blocks

Some blocks reserve fixed regions for your content. These slots are part of using the block — no template involved:

• Card — has a header area and a body area you fill with any blocks

• Form fields — every form field carries a header and a footer region where you can add blocks around the input

You fill these directly on the canvas by adding blocks into the designated area.

2. The Slot block (in the block picker)

In the block picker's Layout category there is a block literally named Slot. You place it inside a template component while designing the template, to declare "content from whoever uses this template appears here." When someone later drops your template onto their page, each Slot you placed becomes a fillable area they populate with their own blocks.

Declaring a Slot in a Template (Author Side)

While editing a template component, drag a Slot block to the spot where consumer content should appear. Each slot carries:

While editing the template, the slot shows a single add-block placeholder. It accepts exactly one block — once you pick one, the placeholder is gone. To stage a richer arrangement, make that one block a layout container and build inside it.

Filling a Slot (Consumer Side)

When a template component with slots sits on a page, each slot is a fillable area of that instance. You add blocks into it the same way you add blocks anywhere — the builder labels the destination with the slot's name so you always know which insertion point you're filling.

The blocks you put into a slot belong to your page — they keep your page's data bindings and can carry their own interactions. The template component doesn't own them.

How Slots Render

At runtime the slot is a pure pass-through:

• If the consumer filled it → their blocks render at that spot, inside the template's layout

• If they left it empty → the slot renders nothing — no placeholder, no empty frame, no reserved space

Note: A layout that looks balanced in the template editor can look different in an instance whose slots were left empty. Design the surrounding layout so it still reads well with the slot absent.

Passing Values into Slot Content

A slot can publish values to whatever gets placed inside it. The template author defines:

• Context schema — a set of named, typed fields the slot exposes (text, number, boolean, date, object, array, dropdown, and more)

• Context value — the actual values supplied from the template's own data, bound as expressions

Blocks dropped into the slot can then bind to those context values, so a template can hand each slot exactly the piece of data it needs — without the filler knowing anything about the template's internals.

Slots Inside Repeated Content

When a template instance sits inside a repeating block (Repeat, table, stepper), the content you placed into its slots is rendered once per item — and each copy sees its own item's context values. You fill the slot once; the repetition and per-item scoping happen automatically.

The Slot Outlet Block

The Slot Outlet is the block that marks where slot content renders inside a template component. It appears in the block picker under Layout simply as Slot. Key properties:

The Slot Outlet has no events, no callable methods, and carries no styling of its own — it is a render-transparent placeholder.

Constraints and Rules

• A slot outside a template renders nothing in the published app. Drop a Slot on a plain page and it only shows an editing area in the builder. In the live app outside a template, it is completely invisible.

• You can't place a slot directly inside another slot. The builder hides the Slot block when you're already inside one.

• A slot accepts exactly one default child. Once you place one block, the placeholder disappears. Use a layout container as the one block to stage a richer arrangement inside it.

• Deeply nested templates hit a depth cap of 16. Past this level the deepest instance shows an error placeholder — the guard against circular component nesting.

Frequently Asked Questions

Can I have multiple slots in one template component?

Yes. You can place as many Slot blocks as you need in a template. Each slot has its own key, label, and optional context. When the component is placed, consumers see one fillable area per slot in the Slots panel.

If I leave a slot empty, will it leave a gap in the layout?

No. An unfilled slot renders nothing — no gap, no placeholder. The surrounding layout closes around the absent slot. Design the layout to look right both with and without the slot filled.

Can blocks placed into a slot access the template's data?

Only through the slot's context. The slot explicitly publishes named values via its context schema, and filled blocks bind to those. Filled blocks belong to the consuming page and cannot reach into the template's data sources directly.

Can I use the Slot block on a regular page (not inside a template)?

You can place it, and it shows an editing area in the builder. But in the published app outside a template component, it renders nothing. Slots only function inside template components.

When does the slot key get set?

The key is generated automatically when you drop the Slot block. You never type or manage it — it's set to slot_<blockId>. Lock this key in before others use the component; renaming it after consumers fill the slot breaks their slot content.

Related Pages

• Template Components Overview — where slots are most commonly used

• Inputs, Slots & Overrides — declaring and filling slots on template components

• Creating a Template Component — the author's workflow