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 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.

Creating a Template Component- UnifyApps

Q: 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'] }}.

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 as a card. Each card's menu offers Open in Builder, Edit Details, Clone, Share and Delete — see Managing Template Components. When the library is empty, it prompts you to add your first one.

unify-applications-creating-a-template-component-01-applications-menu-template-components.png

To open the library, go to Applications → Template components.

Creating a New Component

From the Template components library, click Create template.
Choose the type, then click Next: Web template component — reusable UI components designed for seamless integration into any web appMobile template component — for mobile apps
Fill in: NameWorkspaceTags (optional)Description (optional)Base Variant (web only)
Click Create. The component builder opens immediately on a blank canvas.

unify-applications-creating-a-template-component-02-create-template-type.png

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.	Slots Overview
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. They appear in the instance's Events list.	Inputs, Slots & Overrides
Inbound events	Let the host drive the component from outside — for example, a host button asking the component to refresh.	Inputs, Slots & Overrides
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, click the Template Settings (gear) icon next to the component's name at the top of the Hierarchy panel.
Find the Props section.
Click Add props (or Add Field once the component has props). The Add new prop dialog opens. To describe several props at once, use Use code snippet instead.
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.Label (optional, shown to placement consumers)Type — String, Number, Integer, Boolean, Icon, Date, Date Time, Object, Array, Single Select Dropdown or Multi Select DropdownNest under (optional) — places the prop inside an Object prop you already declaredDefault value — used when a placement leaves the input emptyBuilder value — a stand-in value used only while editing the component, so you can preview realistic content on the canvasHelp Text (optional, shown to placement consumers)

unify-applications-creating-a-template-component-03-edit-prop.png

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

Template components are published from their builder, using the Publish button in the header. Publishing makes the latest version available to all apps in the workspace, and every instance updates with it.

Like apps, each template component also has a details page with Overview, Versions and Localization tabs. Open the template from the library to reach it. See Managing Template Components.

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.

Template Components Overview — the concept and use cases
Inputs, Slots & Overrides — the complete configurable surface reference
Managing Template Components — publishing and managing templates

Creating a Template Component