Elevate Web Development with Handlebars.js

2 min readMay 29, 2023

About

Handlebars is a templating language that allows you to write HTML with placeholders for data. It is a superset of Mustache, so any valid Mustache template is a valid Handlebars template. Also, it can be used on the server or the client.

Installation

To install Handlebars, use npm:

npm install handlebars

Usage

To use Handlebars, you need to compile a template. You can do this with the Handlebars.compile function:

import Handlebars from "handlebars";
const template = Handlebars.compile("Hello {{name}}!");
const context = {name: "World"};
const html = template(context);
console.log(html); // Hello World!

Read the template from a file

compile.ts file would look like this:

import Handlebars from "handlebars";
const template = Handlebars.compile(await fs.readFile("template.hbs", "utf8"));
const context = {name: "World"};
const html = template(context);

template.hbs file would look like this:

<!-- Path: template.hbs -->
Hello {{name}}!

Partials

Partials are templates that are included in other templates. They are useful for reusing the same HTML in multiple places.

To register a partial, use the Handlebars.registerPartial function:

import Handlebars from "handlebars";
Handlebars.registerPartial("helloPartial", "Hello {{name}}!");

Then, you can use the partial in a template:

<!-- Path: template.hbs -->
{{> helloPartial}}

Send parameters to partials

<!-- Path: template.hbs -->
{{> helloPartial name="World"}}

Helpers

Helpers are functions that can be used in templates. They are useful for adding logic to templates. Also, there are some built-in helpers.

Built-in helpers

if

The if helper conditionally renders a block. It can be used with else and else if:

<!-- Path: template.hbs -->
{{#if name}}
    Hello {{name}}!
{{else}}
    Hello World!
{{/if}}

unless

The unless helper conditionally renders a block if the expression is false. It can be used with else:

<!-- Path: template.hbs -->
{{#unless name}}
    Hello World!
{{else}}
    Hello {{name}}!
{{/unless}}

each

The each helper iterates over an array and renders a block for each item:

import Handlebars from "handlebars";
const template = Handlebars.compile(await fs.readFile("template.hbs", "utf8"));
const context = {items: ["one", "two", "three"]};
const html = template(context);
console.log(html);

with

The with helper changes the context for a block:

<!-- Path: template.hbs -->
{{#with user}}
    Hello {{name}}!
{{/with}}

Custom helpers

You can create your own helpers. To register a helper, you can use the Handlebars.registerHelper function:

import Handlebars from "handlebars";
Handlebars.registerHelper("isEquals", (arg1, arg2, options) => {
    return arg1 === arg2 ? options.fn(this) : options.inverse(this);
});

Then, you can use the helper in a template:

<!-- Path: template.hbs -->
{{#isEquals name "World"}}
    Hello World!
{{else}}
    Hello {{name}}!
{{/isEquals}}

Partials with parameters

<!-- Path: template.hbs -->
{{> helloPartial name="World"}}

Conclusion

Resources

Handlebars