HTML6 Template Engine

It's just .html

Every HTML6 template is a real .html file. Not .pug, not .hbs, not a .jsx file pretending to be markup. It's HTML with a few extra attributes and {{ }} sprinkled in, so your editor, Prettier, and every linter you already have already understand it.

That's the actual differentiator, more than any single feature below. No plugin to install, no new extension for your tooling to learn, no build step standing between the file you write and the file the browser would recognize as HTML. A UI/UX designer with zero JavaScript experience can open the file and follow exactly what it's doing.

Real JavaScript, not a mini-language

Interpolations and conditionals run real JavaScript expressions against the render scope, not a simplified template language that only looks similar:

<h1>{{title}}</h1>
<div if="user.loggedIn">Welcome back</div>
<div elsif="user.pending">Pending approval</div>
<div else>Please log in</div>

If it's valid JavaScript, it's valid inside {{ }} or an if. There's no mini-language to look up.

Loops with map

map loops over arrays directly on the tag, with an optional index and its own if:

<ul>
  <li map="p, i of projects" if="p.title.length > 0">{{i}}: {{p.title}}</li>
</ul>

Nested loops work the same way, one map attribute per level:

<div map="group of groups">
  <h2>{{group.name}}</h2>
  <ul>
    <li map="item of group.items">{{item}}</li>
  </ul>
</div>

Pipes for safe transforms

Function calls inside {{ }} are disabled for security. |> chains transforms onto a value instead:

{{title |> upper |> truncate 20}}
{{price |> formatCurrency}}
{{date |> formatDate 'YYYY-MM-DD'}}

Pipes are just functions registered by name, so adding a new one is a few lines of JavaScript, not a change to the template language itself:

var pipes = {
  upper: (x) => String(x).toUpperCase(),
  truncate: (x, len) => String(x).slice(0, len)
}

html6.compile(template, { pipes })

Components, slots, and isolated props

<template is="..."> defines a component. <slot> marks where its children get inserted. Props stay isolated to that component, while everything else in the outer scope flows down automatically, without being re-declared at every level:

<template is="card" title="string">
  <div class="card">
    <h2>{{props.title}}</h2>
    <slot></slot>
  </div>
</template>

<card title="Hi {{user.name}}">
  <p>Rendered from the slot.</p>
</card>

Compiles once, runs on every request

compile() takes the template and returns a render function. That's the expensive part, so it only runs once, at startup, and the result gets cached. Every request after that just calls that cached render function with fresh data.

Where it actually runs

HTML6 first shipped in production at Nobo, the workplace this all started at. It also powers Ultimate Learning, a language-learning app I actively maintain. Two real production sites, not a demo that got built once and abandoned.