Includes & Partials

Share HTML fragments across pages with includes, and load content dynamically with partials.

Include Tag

The <include> tag inserts the contents of another HTML file at that position. Paths are relative to the project root:

<include src="partials/header.html">
<include src="partials/sidebar.html">

<main>
  <h1>My Page</h1>
</main>

<include src="partials/footer.html">

Includes resolve before all other template processing. This means loops, conditionals, and variables inside included files work as if they were written directly in the page.

Tip: Includes are processed first in the template pipeline. This is important — an included file can contain <loop> or <if> blocks and they will work correctly.

Passing Attributes

You can pass attributes to an included file. Inside the included file, these become template variables:

partials/page-header.html

<header class="p-6">
  <h1>#title#</h1>
  <p class="text-muted">#description#</p>
</header>

<include src="partials/page-header.html"
         title="About Us"
         description="Learn more about our team">

This renders as:

<header class="p-6">
  <h1>About Us</h1>
  <p class="text-muted">Learn more about our team</p>
</header>

Partials Directory

Files placed in the partials/ directory are automatically served via the /w-partial/* route. This makes them available for dynamic loading without additional configuration.

File	URL
`partials/sidebar.html`	`/w-partial/sidebar`
`partials/notifications.html`	`/w-partial/notifications`
`partials/dashboard/stats.html`	`/w-partial/dashboard/stats`

Partials are rendered through the full template engine, so they have access to session variables, user context, and data fetching.

Dynamic Loading

Load partials into the page dynamically using w-get. The response replaces the element's content:

<!-- Load on page load -->
<div w-get="/w-partial/sidebar" w-trigger="load">
  Loading...
</div>

<!-- Load on click -->
<button w-get="/w-partial/notifications" w-target="#inbox">
  Check Messages
</button>
<div id="inbox"></div>

<!-- Load on reveal (scroll into view) -->
<div w-get="/w-partial/comments" w-trigger="revealed">
  Loading comments...
</div>

This is the primary pattern for adding dynamic content without full page reloads. The partial is rendered server-side with full template processing, then swapped into the DOM.

Tip: Combine w-get with w-trigger="load" for content that should load immediately but doesn't block initial page render. This is useful for slow data sources or personalized content.

Includes vs Components

Both includes and components insert reusable HTML, but they serve different purposes:

	Include	Component
Use for	Shared page fragments	Reusable UI elements
Location	Anywhere (usually `partials/`)	`components/` directory
Syntax	`<include src="...">`	`<what-name>`
Children	No slot support	`<slot/>` for children
Props	Attributes become variables	Declared with defaults
Dynamic load	Via `/w-partial/*`	Not directly

Rule of thumb: Use components for self-contained UI pieces that take props and render children (cards, alerts, modals). Use includes for shared page structure (headers, footers, sidebars) and for content loaded dynamically via w-get.

Processing order matters. Includes resolve before components in the template pipeline. An included file can contain component tags, and they will render correctly. But a component cannot use <include> — use nested components instead.