Templates & Data Binding
Template variable substitution in markdown using Handlebars. Define variables, write templates with double-brace syntax, see rendered output.
Try it
Edit the template (left) or variables (bottom-left) — the rendered output updates in real-time. Handlebars syntax: double-braces for values, #if for conditionals.
Template + Variables
Handlebars
Markdown
unified
HTML
Markdown Template
Variables (JSON)
Rendered Output
Compiled Markdown (after variable substitution)
How It Works
typescript
import Handlebars from 'handlebars';
// Define template with {{variables}}
const source = `# Hello {{name}}
Today is **{{date}}**.
{{#if premium}}Premium member!{{/if}}`;
// Compile and render
const template = Handlebars.compile(source);
const markdown = template({
name: 'Alice',
date: '2026-02-20',
premium: true
});
// Then process with unified:
// markdown → HTML via remark + rehypeTemplate Engines Comparison
| Engine | Syntax | Logic | Best For |
|---|---|---|---|
| Handlebars | {{var}} | if/each/unless, helpers, partials | Templates with moderate logic |
| Mustache | {{var}} | Minimal (logic-less) | Simple variable substitution |
| Liquid | {{var}} / {% tag %} | Full (loops, filters, assigns) | CMS, Shopify, Jekyll |
| EJS | <%= var %> | Full JavaScript | Server-side rendering |
| Nunjucks | {{var}} / {% tag %} | Full (Jinja2-like) | Complex templates, inheritance |
Use Cases
Email Templates
Markdown templates with user data → rendered HTML emails
Document Generation
Invoices, contracts, reports with dynamic data binding
CMS Content
Content templates with database fields, conditionals, loops
Interactive Docs
Documentation with live variables (API keys, user names, config)