Pages and Components
Pages and components use the same template system in Lediv. The difference is scope. Pages define routes, components define reusable blocks.
One model, two roles
Both support the same template capabilities: elements, styles, expressions, logic directives, and scripts. The practical difference is role. A page is a route entry (URL and page metadata), while a component is a reusable block without its own route.
| 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. |
As a mental model, every route has one root page component, and that page composes the rest of the interface through reusable components.
Component anatomy
A component file can include structure, data, styles, and runtime behavior in one place. Each block has a clear responsibility.
No block is mandatory. Components can be as small as plain markup, and extra blocks are added only when needed.
| Block | Purpose |
|---|---|
| Template markup | Defines the HTML structure rendered by the component, including expressions and logic directives. |
<slot> | Placeholder for children passed from the parent usage. If no children are provided, slot fallback content is rendered. |
<style> | Contains component CSS rules. One style definition is shared across all instances of that component in the page output. |
<style editor> | Editor-only CSS, excluded from the exported project. See Editable Components. |
<script> |
Declares variables used by the template. In components, this is where
$props and $context are typically read.
|
<script mount> | Adds browser-side interactivity after render. Useful for DOM events and integrations that require runtime code. |
Block order is flexible, but a consistent pattern helps readability and maintainability.
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
Use the Pages panel to add and edit routes. Each page includes URL, Title, and Description.
- Click Add page (
+) in the Pages panel. - Set URL and metadata values.
- Open the edit action from a page item to update existing values.
Page expressions can access $context (for example $context.page), and
that same page context is available inside components rendered in that route.
Manage components
Components are usually created in code, and can also be created from the Components panel. In daily work, the panel is mainly used for organization: rename, copy/paste, delete, and quick insertion into structure.
Components can be inserted from Add element or directly from the Components panel into canvas or the Elements tree.
- Component names start with a capital letter.
-
Use multi-word names (e.g.
SiteHeader,FeatureCard) to avoid collisions with native HTML elements like<header>,<footer>, or<nav>. - Duplicate component names are blocked.
Reuse with props and shared context
In component scope, $props carries instance-specific values and
$context carries page-related data shared across the current route.
<Hero title="Build faster" ctaLabel="{primaryCta}" />
<!-- Hero.html -->
<script>
const { title, ctaLabel } = $props;
</script>Practical workflow
Start in page context to build route-specific content and structure. When a section starts repeating across pages, extract it into a component and pass values through props.
From the Elements tree, opening a component instance switches editing into that component context. This makes it possible to update one reusable block once and keep all usages consistent, while pages stay focused on route-level composition.