hnq.me
all concepts
web Updated 2026-07-09 Step 4 of 6

Template

A beginner-friendly guide to understanding templates and server rendering.

On this page 2026-07-09
The Simple Idea Why Templates Exist Template vs Blueprint Template Syntax Layouts And Partials Templates And Server Truth Templates And Hydration KitJS And Kitwork Notes My Learning Notes Common Misunderstandings Related Concepts

A beginner-friendly guide to templates: reusable shapes that become output when data is bound to them.

A template is not the final page.

It is the page shape before data fills it.

template + data -> rendered output

Table of Contents

The Simple Idea

A template describes output with placeholders.

Example:

<h1>{{ title }}</h1>

When data is bound:

title = "Runtime"

the rendered result becomes:

<h1>Runtime</h1>

Why Templates Exist

Templates help separate shape from data.

They make repeated output easier:

  • pages,
  • layouts,
  • lists,
  • cards,
  • navbars,
  • emails,
  • documentation.

Without templates, rendering becomes string building.

That becomes hard to read quickly.

Template vs Blueprint

A template usually describes markup shape.

A blueprint describes a plan for an instance, often with state or behavior.

template: what the output looks like
blueprint: how an instance is created and behaves

They can work together.

A blueprint may render using a template.

A template may contain directives that activate behavior.

Template Syntax

Template systems often support:

  • interpolation,
  • conditionals,
  • loops,
  • local variables,
  • includes,
  • layouts,
  • slots.

Example:

{{ if user }}
  <p>Hello {{ user.name }}</p>
{{ end }}

The syntax should stay small enough to read.

Layouts And Partials

Layouts give pages a shared shell.

Partials give pages reusable fragments.

Example:

layout: page frame
partial: navbar, sidebar, footer
page: unique content

This keeps large sites consistent without copying the same markup everywhere.

Templates And Server Truth

Templates are powerful with server rendering.

The server can bind authoritative data into HTML before the browser runs any JavaScript.

That helps with:

  • SEO,
  • first paint,
  • permissions,
  • canonical data,
  • simple pages,
  • cacheable output.

Templates And Hydration

A rendered template can still become interactive.

The template outputs HTML.

Directives inside that HTML tell the client runtime what to hydrate.

template -> rendered HTML -> hydrate -> interactive HTML

The split is clean:

template owns shape
runtime owns behavior

KitJS And Kitwork Notes

Templates became important again when I stopped thinking that every page had to be a frontend app.

In Kitwork, templates are where server data becomes HTML. In KitJS, directives can then make that HTML interactive. The two ideas fit together: render the stable parts on the server, hydrate the moving parts in the browser.

That taught me that templates are not old-fashioned. They are a clean boundary when paired with a small runtime.

My Learning Notes

Kitwork made templates feel important again.

HTML does not need to disappear into a JavaScript component tree for every page.

A server template can render meaningful HTML.

Then hydrate attributes can add just enough behavior.

The lesson:

templates keep the page readable
hydration keeps the page alive

Common Misunderstandings

"Templates are old-fashioned."

No. Templates are still useful when the server owns truth and HTML matters.

"Templates cannot be interactive."

Templates render HTML. Hydration can attach interaction afterward.

"Template and blueprint are the same."

They overlap, but template is usually shape. Blueprint is instance plan.

Previous: render

Next: prewarm

Related: blueprint, hydrate, servertruth

Search