# Handlebars.js — Minimal Templating with Logic-Less Syntax

> Handlebars.js extends the Mustache templating language with helpers, partials, and block expressions, providing a clean separation between HTML structure and data logic for both browser and server rendering.

## Install

Save as a script file and run:

# Handlebars.js — Minimal Templating with Logic-Less Syntax

## Quick Use
```bash
npm install handlebars
node -e "
const Handlebars = require('handlebars');
const template = Handlebars.compile('<h1>{{title}}</h1><ul>{{#each items}}<li>{{this}}</li>{{/each}}</ul>');
console.log(template({ title: 'Groceries', items: ['Milk', 'Eggs'] }));
"
```

## Introduction
Handlebars.js is a superset of the Mustache template language that adds block helpers, partials, and custom helper functions. It compiles templates into JavaScript functions for fast rendering and enforces a logic-less design that keeps presentation separate from business logic.

## What Handlebars.js Does
- Compiles templates with `{{expression}}` syntax into optimized JavaScript functions
- Supports partials for reusable template fragments
- Provides built-in helpers like `{{#each}}`, `{{#if}}`, `{{#unless}}`, and `{{#with}}`
- Allows custom helpers for formatting, conditional logic, and data transformation
- Runs in browsers and Node.js with identical API and output

## Architecture Overview
Handlebars operates in two phases: compilation and execution. During compilation, the template string is parsed into an AST, optimized, and transformed into a JavaScript function. During execution, the compiled function receives a context object and optional runtime options, walks the AST-derived instructions, and concatenates the output string. Pre-compilation can happen at build time, so the runtime only needs the lightweight Handlebars runtime (not the compiler).

## Self-Hosting & Configuration
- Install via npm: `npm install handlebars`
- Pre-compile templates with the CLI: `npx handlebars templates/ -f templates.js`
- In the browser, include only `handlebars.runtime.js` when using pre-compiled templates
- Register partials with `Handlebars.registerPartial('header', '<header>{{title}}</header>')`
- Register custom helpers with `Handlebars.registerHelper('uppercase', (str) => str.toUpperCase())`

## Key Features
- Logic-less design keeps templates focused on presentation, not application code
- Pre-compilation reduces client-side work to a simple function call
- Compatible with Mustache templates — valid Mustache is valid Handlebars
- Block helpers enable custom iterators, conditionals, and scoping patterns
- Strict mode catches missing variables at compile time for safer templates

## Comparison with Similar Tools
- **Mustache** — Handlebars is a superset adding helpers and pre-compilation; Mustache is simpler but less powerful
- **EJS** — allows arbitrary JavaScript in templates; Handlebars restricts logic to helpers
- **Pug** — uses indentation syntax; Handlebars uses standard HTML with `{{}}` expressions
- **Nunjucks** — Jinja2-inspired with richer built-in filters; Handlebars relies on custom helpers

## FAQ
**Q: Is Handlebars compatible with Mustache templates?**
A: Yes. Any valid Mustache template is a valid Handlebars template with the same output.

**Q: Can I use Handlebars with Express.js?**
A: Yes. Use the `express-handlebars` package as a view engine for server-side rendering.

**Q: What is pre-compilation and why should I use it?**
A: Pre-compilation converts templates to JavaScript functions at build time, so the browser only needs the smaller runtime library instead of the full compiler.

**Q: Are custom helpers safe from XSS?**
A: Handlebars escapes HTML by default with `{{expression}}`. Use `{{{expression}}}` (triple braces) only when you explicitly want unescaped output.

## Sources
- https://github.com/handlebars-lang/handlebars.js
- https://handlebarsjs.com/


---
Source: https://tokrepo.com/en/workflows/asset-96653d22
Author: Script Depot