Template Syntax

Cheatsheet

Output (escaped)

<%= it.name %>

Output (raw HTML)

<%~ it.htmlContent %>

Execute JavaScript

<% let x = 1 + 2 %>

Comments

<% /* this is a comment */ %>

Conditionals

<% if (it.show) { %>
  Visible!
<% } else { %>
  Hidden
<% } %>

Looping over arrays

<% it.users.forEach(function(user) { %>
  <%= user.first %> <%= user.last %>
<% }) %>

Looping over objects

<% Object.keys(it.obj).forEach(function(key) { %>
  <%= it.obj[key] %>
<% }) %>

Partials

<%~ include("./header") %>
<%~ include("./header", { title: "Home" }) %>

Async partials

<%~ await includeAsync("./header") %>

Layout

<% layout("./base") %>
<% layout("./base", { title: "Home" }) %>

Blocks

<% /* In child template: define a block */ %>
<% block("sidebar", () => { %>
  <nav>My sidebar</nav>
<% }) %>

<% /* In layout: render a block with optional fallback */ %>
<%~ block("sidebar", () => { %>
  <nav>Default sidebar</nav>
<% }) %>

Capture

<% const fragment = capture(() => { %>
  <p>Reusable content</p>
<% }) %>
<%= fragment %>

Custom tags

// Config: customTags: { "#": () => "", "*": (key, data) => data[key.trim()] }

<%# comment %>
<%* name %>

Logging

<% console.log("Debug: " + it.value) %>

On this page