Pages and Components
Pages and components share one template system. Pages define routes, and components define reusable blocks.
One model, two roles
Both support elements, styles, expressions, logic directives and scripts. A page is a route, with a URL and page metadata. A component is a reusable block with no route of its own.
| Type | Role in the project |
|---|---|
| Page | Route entry with URL, title, and description (for example /about). |
| Component | Reusable section inserted into pages or other components. |
Each route has one page, and that page builds the rest of the interface from components.
Component anatomy
A component file can hold structure, data, styles and runtime behavior, each in its own block. No block is mandatory, so a component can be plain markup and grow blocks only when needed.
| Block | Purpose |
|---|---|
| Template markup | Defines the HTML structure rendered by the component, including expressions and logic directives. |
<slot> | Where the children passed by the parent go. With no children, the slot's fallback content renders. |
<style> | The component's CSS. It is output once per page, shared by every instance of the component. |
<style editor> | Editor-only CSS, excluded from the exported project. See Editable Components. |
<script> |
Declares the variables the template uses. Components usually read $props and
$context here.
|
<script mount> | Browser-side behavior that runs after render, for DOM events and integrations that need runtime code. See Mount Scripts. |
Blocks can go in any order, but a consistent order is easier to read.
Complete component example
<!-- SimpleCard.html -->
<div class="card">
<h3>{title}</h3>
<slot>Default content</slot>
<button type="button">Toggle</button>
</div>
<style>
.card {
padding: 12px;
border: 1px solid #ddd;
}
</style>
<style editor>
.card {
outline: 1px dashed #4d8aff;
}
</style>
<script>
const { title = 'Card' } = $props;
</script>
<script mount>
const button = this.querySelector('button');
button.addEventListener('click', () => this.classList.toggle('is-active'));
</script>Manage pages
The Pages panel adds and edits routes. Each page has a URL, a Title and a Description.
- Click Add page (
+) in the Pages panel. - Set the URL, title and description.
- To change them later, use the edit action on the page item.
A page reads $context, for example $context.page, and every component
rendered on that page sees the same context.
Manage components
Components are usually created in code, and the Components panel can create them too. Day to day, the panel renames, copies, pastes and deletes them. Insert a component from Add element, or drag it from the Components panel onto the canvas or the Elements tree.
- Component names start with a capital letter.
-
Use multi-word names, like
SiteHeaderorFeatureCard, to avoid clashing with native elements like<header>,<footer>or<nav>. - Duplicate component names are blocked.
Reuse with props and shared context
Inside a component, $props carries the values of one instance and
$context carries the page data shared across the route.
<Hero title="Build faster" ctaLabel="{primaryCta}" />
<!-- Hero.html -->
<script>
const { title, ctaLabel } = $props;
</script>Practical workflow
Build route-specific content in the page. When a section starts repeating across pages, extract it into a component and pass values through props. Opening a component instance from the Elements tree edits the component itself, so one change updates every use.