Where Template Components Live
Template components are managed in their own library, separate from your apps and pages. The library lists every custom component your team has built, each as a card you can open, rename, or delete. When the library is empty, it prompts you to add your first one.
Navigate to the Template Components area in the Applications section to access the library.
Creating a New Component
From the Template Components library, click Create template.
Choose the type:
Web template component — reusable UI components designed for seamless integration into any web app
Mobile template component — for mobile apps
Fill in:
Name
Workspace
Tags (optional)
Description (optional)
Base Variant (web only)
Click Create. The component builder opens immediately on a blank canvas.
The Component Builder
The component builder works like the page builder — but everything you do stays inside the component:
| Feature | Description |
| Canvas | Drag blocks, arrange layout, and style exactly as you would on a page. The component is self-contained. |
| Multiple internal pages | A component can have more than one internal page, switched from a page selector in the component's header — useful for a component with distinct states or views. |
| Data and logic | Add data sources, variables, and functions scoped to the component. These travel with the component; a placement doesn't have to wire anything up for the component to work. |
| Navigation and settings | The left navigation gives you the component's pages, blocks, data sources, and settings — the same tools as the app builder, scoped to this component. |
| Canvas dimensions | Width: Fit or Full. Height: Auto or Fixed. Switch device and drag to resize. Preview how the component behaves at different sizes before others place it in their pages. |
Declaring the Configurable Surface
A layout on a canvas becomes a reusable component once you define the surface that placements are allowed to configure. You declare this in the component's settings:
| Surface | What it is | See Also |
| Props (inputs) | Named, typed values a placement can pass in — a title, a record, a color. Each placement can supply different values. | Inputs, Slots & Overrides |
| Slots | Named open areas that each placement fills with its own blocks, so the component frames content it doesn't own. | Inputs, Slots & Overrides |
| Outputs | Named values the component publishes back to the host page, so the page can bind to what the component computed or selected. | Inputs, Slots & Overrides |
| Outbound events | Let the component notify the host when something happens inside it. | — |
| Inbound events | Let the host drive the component from outside — for example, a host button asking the component to refresh. | — |
| Overridable child components | The specific child pieces a placement is allowed to tweak per instance. | Inputs, Slots & Overrides |
Tip: Only the surface you declare is configurable. If you don't declare an input, a placement can't feed that value in. If you don't leave a slot, a placement can't insert content there. A component with nothing declared is a fixed block that every placement renders identically. Decide up front what should vary between placements and expose exactly that.
Adding Props (Inputs)
In the component builder, open Settings.
Navigate to the Props section.
Click Add new prop.
Define:
Key — the prop's stable identifier. Changing a key after the component is used will update usages and could delete the prop's data in some places — confirm carefully.
Type — text, number, boolean, date, dropdown, object, array, and more
Label and help text (optional, shown to placement consumers)
Default value — used when a placement leaves the input empty
Builder value — a stand-in value used only while editing the component, so you can preview realistic content on the canvas
Data Is Scoped to the Component
Data sources, variables, and functions you add belong to the component, not to whatever page later hosts an instance. This is what makes a component drop-in: a placement doesn't wire up the component's data. The flip side is that the component can't reach into a host page's state on its own — anything it needs from the outside must come through a declared input.
Publishing a Template Component
Like apps, template components have their own Overview, Versions, and Localization tabs and are published from their builder. Publishing makes the latest version available to all apps in the workspace.
Trade-offs & Gotchas
Everything is scoped to the component and travels with it. A placement doesn't wire up the component's data — the component brings it. The component can't reach into host page state on its own — use inputs for that.
Only declared surfaces are configurable. Not declaring an input means no placement can pass that value in. Design the configurable surface deliberately before others start using the component.
Changing a prop key after the component is in use is risky. The system will update usages, but it can delete that prop's data in some places. Finalize keys before shipping the component to your team.
Frequently Asked Questions
What makes a template component actually "reusable" vs. just a block layout?
Reusability comes from declaring the configurable surface — props (inputs), slots, outputs, and events. A template component with nothing declared is a fixed block that renders identically everywhere. Declare what should vary per placement, and every instance becomes independently configurable without forking the design.
Can a template component access the host page's data on its own?
No. The component is scoped to its own data sources and cannot reach into the host page's state directly. Anything it needs from the outside must come through a declared input (prop). The host page binds a value to that prop, and the component reads it as {{ pageInputs['propKey'] }}.
Can I rename a prop after people are already using the component?
The system will update usages, but renaming a prop key can delete the prop's data in some instances. Finalize prop keys before shipping the component to your team. Labels (the human-readable name) are always safe to change.
How do I preview the component with realistic data while building it?
Use the Builder value field on each prop. This is a stand-in value shown on the canvas while you're editing the component, so you can see realistic content without a real placement feeding data in.
Related Pages
Template Components Overview — the concept and use cases
Inputs, Slots & Overrides — the complete configurable surface reference