Templating 4 min read

Template Engine Syntax

Master Staticraft zero-dependency template engine syntax, layout inheritance, slot injection, component partials, loops, conditionals, and automatic XSS escaping.

1. Layout Inheritance & {{ slot }} Injection

Define a shared master layout in `src/app/layouts/base.html` containing common HTML head elements, headers, and footers. Child pages reference the layout using `{{ layout "layouts/base.html" }}`. Page contents are automatically injected into `{{ slot }}`.

Code Reference Staticraft

<!-- src/app/layouts/base.html -->
<!DOCTYPE html>
<html>
<head><title>&#123;&#123; title &#125;&#125;</title></head>
<body>
    <header>Site Header</header>
    <main>&#123;&#123; slot &#125;&#125;</main>
</body>
</html>

<!-- src/app/page.html -->
&#123;&#123; layout "layouts/base.html" &#125;&#125;
<h1>Welcome to &#123;&#123; title &#125;&#125;</h1>

2. Reusable Components & Partials

Break modular UI components into clean template files and include them using `{{ component "components/navbar.html" }}`.

Code Reference Staticraft

&#123;&#123; component "components/navbar.html" &#125;&#125;
<section>Content Here</section>
&#123;&#123; component "components/footer.html" &#125;&#125;

3. Conditionals ({{#if}})

Evaluate boolean or object presence conditionally with `{{#if variable}}...{{/if}}`.

Code Reference Staticraft

&#123;&#123;#if isFeatured&#125;&#125;
    <span class="badge">Featured Post</span>
&#123;&#123;/if&#125;&#125;

4. Array Loops ({{#each}})

Iterate over lists using `{{#each items}}...{{/each}}`. Object properties inside the array are exposed directly in scope.

Code Reference Staticraft

<ul>
&#123;&#123;#each features&#125;&#125;
    <li>
        <strong>&#123;&#123; title &#125;&#125;</strong> - &#123;&#123; description &#125;&#125;
    </li>
&#123;&#123;/each&#125;&#125;
</ul>

5. Variable Escaping & Asset Fingerprinting

By default, `{{ variable }}` applies contextual XSS HTML escaping. Use `{{{ rawHtml }}}` for unescaped HTML interpolation. All non-HTML static assets (CSS, JS, images) are automatically hashed (e.g., `styles.07eef7b1.css`) and rewritten across templates. To keep specific assets unhashed (such as favicons or Open Graph social images), specify `ignoreHash: ["favicon.png", "og-image.png"]` in `staticraft.config.js`.

Code Reference Staticraft

<link rel="stylesheet" href="/styles.css">
<!-- Transformed automatically into: -->
<link rel="stylesheet" href="/styles.07eef7b1.css">

← Previous Guide

File-Based Routing & Data Hooks

‹ All Documentation Guides