Handlebars

https://handlebarsjs.com/
Admin
Handlebars is a minimal templating engine that compiles templates into JavaScript functions for fast...
Tokens:38,893
Snippets:496
Trust Score:9.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Embed example input with <Example>

Source: https://handlebarsjs.com/contributing/interactive-examples.html

Embeds the input JSON of the all-features example into the page. The show prop is set to input.

```md
<Example examplePage="/examples/all-features" show="input" />
```

--------------------------------

### Input data for all-features example

Source: https://handlebarsjs.com/contributing/interactive-examples.html

The input data for the all-features example, shown as the result of the <Example> component. It is a JSON-like object with a persons array.

```json
{
  persons: [
    { name: "Nils", age: 20 },
    { name: "Teddy", age: 10 },
    { name: "Nelson", age: 40 },
  ],
}
```

--------------------------------

### Embed example template with <Example>

Source: https://handlebarsjs.com/contributing/interactive-examples.html

Embeds the template part of the example page into the current page. The examplePage prop is the path to the example page below the src folder, and show specifies the part to insert.

```md
<Example examplePage="/examples/builtin-helper-each-block" show="template"/>
```

--------------------------------

### Install Handlebars with yarn

Source: https://handlebarsjs.com/guide/installation

Install Handlebars using yarn, an alternative to npm.

```bash
yarn add handlebars
```

--------------------------------

### Example output of Handlebars.precompile

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Shows the JSON-like output produced by Handlebars.precompile for the example template. This output is what gets transmitted to clients.

```javascript
{"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
    var helper, alias1=container.propertyIsEnumerable;

  return "Handlebars <b>"
    + container.escapeExpression(((helper = (helper = helpers.doesWhat || (depth0 != null ? depth0.doesWhat : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"doesWhat","hash":{},"data":data}) : helper)))
    + "</b> precompiled!";
},"useData":true}
```

--------------------------------

### Preparation script (commented out)

Source: https://handlebarsjs.com/examples/builtin-helper-ifelse-block.html

A commented-out JavaScript snippet showing how to register a custom helper, but it is not used in this example.

```javascript
// Handlebars.registerHelper('loud', function(string) {
// return string.toUpperCase()
// });
```

--------------------------------

### Install Handlebars with npm

Source: https://handlebarsjs.com/guide/installation

Install Handlebars using npm, the recommended package manager for JavaScript projects.

```bash
npm install handlebars
```

--------------------------------

### Preparation script (commented out)

Source: https://handlebarsjs.com/examples/html-escaping.html

A commented-out Handlebars helper registration example. It shows how to register a helper named 'loud' that uppercases a string, but it is not active in this example.

```javascript
// Handlebars.registerHelper('loud', function(string) {
//   return string.toUpperCase()
// });
```

--------------------------------

### Input Data for Partial Example

Source: https://handlebarsjs.com/examples/partials/parent-context.html

Provides the input object with people array and prefix used by the template.

```json
{
people: [
{
firstname: "Nils",
lastname: "Knappmeier",
},
{
firstname: "Yehuda",
lastname: "Katz",
},
],
prefix: "Hello",
}
```

--------------------------------

### Handlebars helper invocation examples

Source: https://handlebarsjs.com/examples/hook-helper-missing-default-param.html

Template examples for the 'foo' helper. The first is a simple invocation, the second is a block form with content 'abc'. The helper is not defined in the preparation script, so execution fails.

```handlebars
{{foo bar}}
```

```handlebars
{{#foo bar}}abc{{/foo}}
```

--------------------------------

### Horizontal layout with <Flex>

Source: https://handlebarsjs.com/contributing/interactive-examples.html

Uses the <Flex> component to lay out two example parts horizontally: the template and input of the builtin-helper-each-block example.

```md
<Flex>
<Example examplePage="/examples/builtin-helper-each-block" show="template"/>
<Example examplePage="/examples/builtin-helper-each-block" show="input"/>
</Flex>
```

--------------------------------

### Template for builtin-helper-each-block example

Source: https://handlebarsjs.com/contributing/interactive-examples.html

The template part of the builtin-helper-each-block example, shown as the result of the <Example> component. It iterates over the people array and outputs list items.

```handlebars
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>
```

--------------------------------

### with helper: input context

Source: https://handlebarsjs.com/guide/builtin-helpers.html

Example context object used with the with helper.

```javascript
{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}
```

--------------------------------

### Install Handlebars npm package

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Installs the Handlebars npm package globally, which includes the precompiler.

```bash
npm install -g handlebars
```

--------------------------------

### Set up a precompiled template with Handlebars.template

Source: https://handlebarsjs.com/api-reference/compilation.html

Sets up a template that was precompiled with Handlebars.precompile. The example takes a precompiled templateSpec and invokes the resulting template with an empty object.

```javascript
var template = Handlebars.template(templateSpec);
template({});
```

--------------------------------

### Block helper example

Source: https://handlebarsjs.com/guide

Registers a block helper 'list' that generates an HTML list from items, and shows its usage in a template.

```javascript
Handlebars.registerHelper("list", function(items, options) {
  const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
  return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
```

```handlebars
{{#list people}}{{firstname}} {{lastname}}{{/list}}
```

--------------------------------

### Input for builtin-helper-each-block (horizontal)

Source: https://handlebarsjs.com/contributing/interactive-examples.html

The input data for the builtin-helper-each-block example, shown in the horizontal layout.

```json
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}
```

--------------------------------

### Rendered output of raw-helper

Source: https://handlebarsjs.com/guide/block-helpers.html

The output of the raw-helper example, showing the literal mustache content.

```handlebars
{{bar}}
```

--------------------------------

### Input for #if template

Source: https://handlebarsjs.com/guide/builtin-helpers.html

Example input object with author set to true, firstName, and lastName. When passed to the #if template, it renders the heading.

```javascript
{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz",
}
```

--------------------------------

### Example JSON data for with helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JSON object with a nested story property that the with helper template can use.

```js
{
  title: "First Post",
  story: {
    intro: "Before the jump",
    body: "After the jump"
  }
}
```

--------------------------------

### Output of raw-loud example

Source: https://handlebarsjs.com/examples/raw-blocks.html

Shows the rendered output of the template when the input is null. The content '{{bar}}' is uppercased to '{{BAR}}'.

```handlebars
{{BAR}}
```

--------------------------------

### Raw block example

Source: https://handlebarsjs.com/guide/block-helpers.html

Shows a raw block that outputs the literal mustache content without processing.

```handlebars
{{{{raw-loud}}}}
  {{bar}}
{{{{/raw-loud}}}}

```

--------------------------------

### Output of lookupOrDefault example

Source: https://handlebarsjs.com/examples/helper-lookup-property.html

The rendered output when the template is executed with the given input. It shows the value 'Yehuda'.

```text
Yehuda
```

--------------------------------

### Error: this.$executeExample is not a function

Source: https://handlebarsjs.com/examples/builtin-helper-if-subexpression.html

Error message displayed when attempting to execute the example, indicating a runtime error in the Handlebars playground.

```text
this.$executeExample is not a function
```

--------------------------------

### Input object for hash arguments example

Source: https://handlebarsjs.com/guide/expressions.html

Input object providing `person.url` for the `{{link "See Website" href=person.url class="person"}}` template.

```javascript
{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
    url: "https://yehudakatz.com/",
  },
}
```

--------------------------------

### Template using {{log}} helper

Source: https://handlebarsjs.com/examples/builtin-helper-log.html

Uses the built-in log helper to output a simple log message. The template is the main example on the page.

```handlebars
{{log 'this is a simple log output'}}
```

--------------------------------

### Input data for lookupOrDefault example

Source: https://handlebarsjs.com/examples/helper-lookup-property.html

Sample input object with a 'firstname' property. When passed to the template, the helper returns 'Yehuda'.

```javascript
{ firstname: "Yehuda" }
```

--------------------------------

### Dynamic partial selection with whichPartial helper

Source: https://handlebarsjs.com/examples/partials/dynamic.html

This example demonstrates dynamic partial selection in Handlebars. The template uses a helper call as the partial name, and the helper returns the name of the partial to render. The output shows the rendered partial content.

```handlebars
{{> (whichPartial) }}
```

```javascript
Handlebars.registerHelper('whichPartial', function(context, options) { return 'dynamicPartial' });
```

```text
Dynamo!
```

--------------------------------

### Compile a template with Handlebars.compile

Source: https://handlebarsjs.com/api-reference/compilation.html

Compiles a template string so it can be executed immediately. The example compiles '{{foo}}' and then invokes the resulting template with an empty object.

```javascript
const template = Handlebars.compile("{{foo}}");
template({});
```

--------------------------------

### Precompile a template with Handlebars.precompile

Source: https://handlebarsjs.com/api-reference/compilation.html

Precompiles a template string so it can be sent to the client and executed without compilation. The example precompiles '{{foo}}' and stores the result in a variable.

```javascript
var templateSpec = Handlebars.precompile("{{foo}}");
```

--------------------------------

### Handlebars lookup helper with dynamic property - input data

Source: https://handlebarsjs.com/examples/builtin-helper-lookup-dynamic-property.html

Input data for the lookup helper example. Provides the people object and the keys array used by the template.

```json
{
  "people": {
    "John": {"age": 24, "sex": "M"},
    "Jane": {"age": 24, "sex": "F"}
  },
  "keys": ["John", "Jane"]
}
```

--------------------------------

### Handlebars helper-literal example

Source: https://handlebarsjs.com/examples/helper-literals.html

Registers a Handlebars helper that renders a progress bar using the block's text as the label. The helper reads the block's text content and returns a string with a filled progress bar based on the provided percentage value.

```handlebars
{{#progress 80}}
  {{this}}
{{/progress}}
```

--------------------------------

### Run precompiler on example.handlebars

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Compiles the template into a JavaScript file using the -f flag.

```bash
handlebars example.handlebars -f example.precompiled.js
```

--------------------------------

### Precompiler CLI usage options

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Full list of command-line options for the handlebars precompiler, including output, module formats, known helpers, and more.

```txt
Precompile handlebar templates.
Usage: handlebars [template|directory]...
Options:
  -f, --output         Output File                                                                              [string]
  --map                Source Map File                                                                          [string]
  -a, --amd            Exports amd style (require.js)                                                          [boolean]
  -c, --commonjs       Exports CommonJS style, path to Handlebars module                        [string] [default: null]
  -h, --handlebarPath  Path to handlebar.js (only valid for amd-style)                            [string] [default: ""]
  -k, --known          Known helpers                                                                            [string]
  -o, --knownOnly      Known helpers only                                                                      [boolean]
  -m, --min            Minimize output                                                                         [boolean]
  -n, --namespace      Template namespace                                     [string] [default: "Handlebars.templates"]
  -s, --simple         Output template function only.                                                          [boolean]
  -N, --name           Name of passed string templates. Optional if running in a simple mode. Required when operating on
                       multiple templates.                                                                      [string]
  -i, --string         Generates a template from the passed CLI argument.
                       "-" is treated as a special value and causes stdin to be read for the template value.    [string]
  -r, --root           Template root. Base value that will be stripped from template names.                     [string]
  -p, --partial        Compiling a partial template                                                            [boolean]
  -d, --data           Include data when compiling                                                             [boolean]
  -e, --extension      Template extension.                                              [string] [default: "handlebars"]
  -b, --bom            Removes the BOM (Byte Order Mark) from the beginning of the templates.                  [boolean]
  -v, --version        Prints the current compiler version                                                     [boolean]
  --help               Outputs this message                                                                    [boolean]
```

--------------------------------

### Preparation Script: Registering the list helper

Source: https://handlebarsjs.com/examples/helper-block.html

This JavaScript registers the 'list' helper. It maps each item to an HTML list item using the block's inner content (options.fn) and wraps them in a <ul> element.

```javascript
Handlebars.registerHelper("list", function(items, options) {
  const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
  return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
```

--------------------------------

### each helper: output

Source: https://handlebarsjs.com/guide/builtin-helpers.html

The resulting HTML when the each helper is used with the provided context.

```html
<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>
```

--------------------------------

### Create example.handlebars template

Source: https://handlebarsjs.com/guide/installation/precompilation.html

A simple Handlebars template that uses the {{doesWhat}} expression.

```handlebars
Handlebars <b>{{doesWhat}}</b> precompiled!
```

--------------------------------

### Deprecated slash path syntax

Source: https://handlebarsjs.com/guide/expressions.html

Deprecated slash syntax for path expressions, equivalent to the dot notation example.

```handlebars
{{person/firstname}} {{person/lastname}}

```

--------------------------------

### Precompile with known helpers

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Specifies known helpers (each, if, unless) to optimize access for performance.

```bash
handlebars <input> -f <output> -k each -k if -k unless
```

--------------------------------

### Register with block helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JavaScript implementation of the with helper. It takes a context parameter and an options hash, and returns options.fn(context) to render the block with the passed context.

```js
Handlebars.registerHelper("with", function (context, options) {
  return options.fn(context);
});
```

--------------------------------

### List helper using SproutCore runtime

Source: https://handlebarsjs.com/guide/block-helpers.html

Alternative implementation of the `list` helper using SproutCore's runtime library for a more concise style.

```js
Handlebars.registerHelper("list", function (context, options) {
  return (
    "<ul>" +
    context
      .map(function (item) {
        return "<li>" + options.fn(item) + "</li>";
      })
      .join("\n") +
    "</ul>"
  );
});
```

--------------------------------

### Handlebars.registerHelper(name, helper)

Source: https://handlebarsjs.com/api-reference/runtime.html

Registers a helper accessible by any template in the environment. The example shows registering a single helper named 'foo'.

```javascript
Handlebars.registerHelper("foo", function () {});
```

--------------------------------

### Handlebars.registerPartial(name, partial)

Source: https://handlebarsjs.com/api-reference/runtime.html

Registers a partial accessible by any template in the environment. The example shows registering a single partial named 'foo'.

```javascript
Handlebars.registerPartial("foo", partial);
```

--------------------------------

### Output of the template

Source: https://handlebarsjs.com/examples/path-expressions-dot-dot.html

The rendered output showing the prefix 'Hello' followed by each first name, with leading spaces as produced by the template.

```text
  Hello Nils 
  Hello Yehuda 

```

--------------------------------

### Include runtime and precompiled template

Source: https://handlebarsjs.com/guide/installation/precompilation.html

HTML and JavaScript to include the Handlebars runtime and the precompiled template, then execute it with data.

```html
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.runtime.js"></script>
<script src="example.precompiled.js"></script>
<script>
  var template = Handlebars.templates.example;
  document.getElementById('output').innerHTML = template({doesWhat: 'rocks!'})
</script>
```

--------------------------------

### Use @key to get object key during iteration

Source: https://handlebarsjs.com/api-reference/data-variables.html

The @key variable is set by the each helper when iterating over objects, providing the key name for the current step.

```handlebars
{{#each array}} {{@key}} {{/each}}
```

--------------------------------

### Expected output

Source: https://handlebarsjs.com/examples/builtin-helper-lookup.html

Shows the rendered output of the template with the given input.

```text
  Nils lives in Darmstadt
  Yehuda lives in San Francisco
```

--------------------------------

### Dynamic parameters helper JavaScript

Source: https://handlebarsjs.com/examples/helper-dynamic-parameters.html

Helper implementation that receives the context object and returns an HTML link using its properties.

```javascript
Handlebars.registerHelper('link', function(object) {
  var url = Handlebars.escapeExpression(object.url),
      text = Handlebars.escapeExpression(object.text);

  return new Handlebars.SafeString(
    "<a href='" + url + "'>" + text + "</a>"
  );
});
```

--------------------------------

### Forbidden prototype method access returns empty result

Source: https://handlebarsjs.com/api-reference/runtime-options.html

Shows that by default, accessing a prototype method like trim is forbidden, resulting in an empty string. This example uses handlebars.compile with a template that calls aString.trim.

```javascript
const template = handlebars.compile("{{aString.trim}}");
const result = template({ aString: "  abc  " });
// result is empty, because trim is defined at String prototype
```

--------------------------------

### Register noop block helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JavaScript implementation of the noop helper. It receives an options hash and returns options.fn(this) to render the block with the current context.

```js
Handlebars.registerHelper("noop", function (options) {
  return options.fn(this);
});
```

--------------------------------

### Include Handlebars from CDN and compile template

Source: https://handlebarsjs.com/guide

Loads Handlebars from a CDN and compiles a template, then executes it and logs the output. Suitable for small pages and testing, not for production.

```html
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
</script>
```

--------------------------------

### Custom blockHelperMissing helper for missing block helpers

Source: https://handlebarsjs.com/examples/hook-block-helper-missing.html

This example demonstrates a custom blockHelperMissing helper that intercepts missing block helpers. The template uses a block helper 'person' which is not registered, so the helper is invoked. The helper returns a string indicating the missing helper name and the rendered block content. The input provides the context object with person data, and the output shows the helper's message followed by the rendered block.

```handlebars
{{#person}}
{{firstname}} {{lastname}}
{{/person}}
```

```javascript
Handlebars.registerHelper('blockHelperMissing', function(context, options) {
return "Helper '"+options.name+"' not found. Printing block: " + options.fn(context); 
});
```

```json
{
person: {
firstname: "Yehuda",
lastname: "Katz",
},
}
```

```text
Helper 'person' not found. Printing block:   Yehuda Katz

```

--------------------------------

### Allow prototype method access with allowedProtoMethods

Source: https://handlebarsjs.com/api-reference/runtime-options.html

Shows how to allow access to a specific prototype method (trim) by passing allowedProtoMethods with trim: true as a runtime option. The result is 'abc'.

```javascript
const template = handlebars.compile("{{aString.trim}}");
const result = template(
  { aString: "  abc  " },
  {
    allowedProtoMethods: {
      trim: true,
    },
  },
);
// result = 'abc'
```

--------------------------------

### Template: Using the log helper with different levels

Source: https://handlebarsjs.com/examples/builtin-helper-log-loglevel.html

Template code that calls the `log` helper with `level` parameter set to 'debug', 'info', 'warn', and 'error'. The default level is 'info' when not specified.

```handlebars
{{log "debug logging" level="debug"}}
{{log "info logging" level="info"}}
{{log "info logging is the default"}}
{{log "logging a warning" level="warn"}}
{{log "logging an error" level="error"}}
```

--------------------------------

### Register list helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JavaScript implementation of the custom `list` helper that wraps each item in an `<li>` and the whole in a `<ul>`.

```js
Handlebars.registerHelper("list", function (context, options) {
  var ret = "<ul>";

  for (var i = 0, j = context.length; i < j; i++) {
    ret = ret + "<li>" + options.fn(context[i]) + "</li>";
  }

  return ret + "</ul>";
});
```

--------------------------------

### Iterate over an array with {{#each}} and output list items

Source: https://handlebarsjs.com/examples/builtin-helper-each-block.html

The template iterates over the 'people' array using the {{#each}} block helper, outputting each item inside an <li>. The preparation script shows a commented-out helper registration. The input object provides the data, and the output shows the rendered HTML with indentation.

```handlebars
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
```

```javascript
// Handlebars.registerHelper('loud', function(string) {
// return string.toUpperCase()
// });
```

```javascript
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley",
],
}
```

```html
<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>
```

--------------------------------

### Basic block template using noop helper

Source: https://handlebarsjs.com/guide/block-helpers.html

Template that invokes the noop block helper to render the body content in the current context.

```handlebars
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{#noop}}{{body}}{{/noop}}
  </div>
</div>
```

--------------------------------

### Handlebars.create()

Source: https://handlebarsjs.com/api-reference/runtime.html

Creates an isolated Handlebars environment with its own helpers and partials.

```APIDOC
## Handlebars.create()

### Description
Creates an isolated Handlebars environment. Each environment has its own helpers and partials. Templates created for a given environment are bound to that environment.

### Method
create

### Parameters
None

### Request Example
```js
var OtherHandlebars = Handlebars.create();
```
```

--------------------------------

### Output: Rendered HTML

Source: https://handlebarsjs.com/examples/helper-block.html

The output shows the HTML generated by the helper: an unordered list with each person's name as a list item.

```html
<ul>
<li>Yehuda Katz</li>
<li>Carl Lerche</li>
<li>Alan Johnson</li>
</ul>
```

--------------------------------

### Input object for dynamic helper parameters

Source: https://handlebarsjs.com/guide/expressions.html

Input object providing `people.text` and `people.url` for the `{{link people.text people.url}}` template.

```javascript
{
  people: {
    firstname: "Yehuda",
    lastname: "Katz",
    url: "https://yehudakatz.com/",
    text: "See Website",
  },
}
```

--------------------------------

### Template using link helper with hash arguments

Source: https://handlebarsjs.com/examples/helper-hash-arguments.html

Template that invokes the 'link' helper with text 'See Website' and hash arguments for href and class.

```handlebars
{{link "See Website" href=person.url class="person"}}
```

--------------------------------

### Render the precompiled partial dynamically

Source: https://handlebarsjs.com/guide/installation/precompilation.html

Calls the precompiled partial with a context object and logs the result. The comment indicates the result can be used as needed.

```javascript
var result = Handlebars.partials["test1"]({ name: "yourname" });
// do whatever you want with the result
```

--------------------------------

### Register link helper in preparation script

Source: https://handlebarsjs.com/examples/helper-multiple-parameters.html

Registers the 'link' helper, escaping both parameters and returning a SafeString.

```javascript
Handlebars.registerHelper("link", function(text, url) {
var url = Handlebars.escapeExpression(url),
text = Handlebars.escapeExpression(text)
return new Handlebars.SafeString("<a href='" + url + "'>" + text +"</a>");
});
```

--------------------------------

### Input data for the template

Source: https://handlebarsjs.com/examples/partials/other-context.html

The input data provides the context object 'myOtherContext' with the property 'information' set to 'Interesting!'.

```json
{
myOtherContext: {
information: "Interesting!",
},
}
```

--------------------------------

### with helper: block parameters

Source: https://handlebarsjs.com/guide/builtin-helpers.html

Use with with block parameters to define known references in the current block.

```handlebars
{{#with city as | city |}}
  {{#with city.location as | loc |}}
    {{city.name}}: {{loc.north}} {{loc.east}}
  {{/with}}
{{/with}}
```

--------------------------------

### Preparation script registering 'loud' helper

Source: https://handlebarsjs.com/examples/all-features.html

JavaScript code that registers a Handlebars helper named 'loud' which uppercases a string.

```javascript
Handlebars.registerHelper('loud', function (aString) {
return aString.toUpperCase()
})
```

--------------------------------

### Input data for link helper

Source: https://handlebarsjs.com/examples/helper-hash-arguments.html

JSON-like input object containing a person with firstname, lastname, and url properties.

```json
{
person: {
firstname: "Yehuda",
lastname: "Katz",
url: "https://yehudakatz.com/",
},
}
```

--------------------------------

### Template using with helper

Source: https://handlebarsjs.com/guide/block-helpers.html

Template that uses the with helper to change context to the story object, allowing direct access to intro and body.

```handlebars
<div class="entry">
  <h1>{{title}}</h1>
  {{#with story}}
    <div class="intro">{{{intro}}}</div>
    <div class="body">{{{body}}}</div>
  {{/with}}
</div>
```

--------------------------------

### Call a partial with {{> myPartial}}

Source: https://handlebarsjs.com/guide/partials.html

Renders the partial named 'myPartial' under the current execution context.

```handlebars
{{> myPartial }}

```

--------------------------------

### Handlebars.template(templateSpec)

Source: https://handlebarsjs.com/api-reference/compilation.html

Sets up a template that was precompiled with Handlebars.precompile. Takes a template specification and returns a executable template function.

```APIDOC
## Handlebars.template(templateSpec)

### Description
Sets up a template that was precompiled with `Handlebars.precompile`. Takes a template specification and returns an executable template function.

### Method
template

### Parameters
- **templateSpec** (object) - Required - The template specification object returned from `Handlebars.precompile`.

### Request Example
```js
var template = Handlebars.template(templateSpec);
template({});
```

### Response
Returns a compiled template function that can be executed with a context object.
```

--------------------------------

### Default whitespace behavior (no ~)

Source: https://handlebarsjs.com/guide/expressions.html

Shows the default behavior without whitespace control: standalone helpers are stripped but other whitespace remains, producing output with extra spaces.

```handlebars
{{#each nav}}
  <a href="{{url}}">
    {{#if test}}
      {{title}}
    {{else}}
      Empty
    {{/if}}
  </a>
{{~/each}}
```

```html
<a href="foo"> bar </a> <a href="bar"> Empty </a>
```

--------------------------------

### JavaScript: registerHelper for list with hash

Source: https://handlebarsjs.com/guide/block-helpers.html

Registers a list helper that uses options.hash to build attributes for the ul element.

```js
Handlebars.registerHelper("list", function (context, options) {
  var attrs = Object.keys(options.hash)
    .map(function (key) {
      return key + '="' + options.hash[key] + '"';
    })
    .join(" ");

  return (
    "<ul " +
    attrs +
    ">" +
    context
      .map(function (item) {
        return "<li>" + options.fn(item) + "</li>";
      })
      .join("\n") +
    "</ul>"
  );
});
```

--------------------------------

### Using block parameters in each loop

Source: https://handlebarsjs.com/guide/block-helpers.html

Shows how to use block parameters in an each helper to access the current context and index, avoiding name conflicts with private variables.

```handlebars
{{#each users as |user userId|}}
  {{#each user.book as |book bookId|}}
    User Id:
    {{userId}}
    Book Id:
    {{bookId}}
  {{/each}}
{{/each}}
```

--------------------------------

### HTML-escaping with triple-stash and input/output

Source: https://handlebarsjs.com/guide/expressions.html

Shows the difference between triple-stash raw output and HTML-escaped output, with the input object and resulting output.

```handlebars
raw: {{{specialChars}}}
html-escaped: {{specialChars}}

```

```javascript
{ specialChars: "& < > \" ' ` =" }

```

```text
raw: & < > " ' ` =
html-escaped: &amp; &lt; &gt; &quot; &#x27; &#x60; &#x3D;

```

--------------------------------

### Registering raw-helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JavaScript code to register the raw-helper that returns the block content without processing.

```js
Handlebars.registerHelper("raw-helper", function (options) {
  return options.fn();
});
```

--------------------------------

### Template: each helper with block parameters

Source: https://handlebarsjs.com/guide/block-helpers.html

Template using the each helper with block parameters user and userId.

```handlebars
{{#each users as |user userId|}}
  Id:
  {{userId}}
  Name:
  {{user.name}}
{{/each}}
```

--------------------------------

### Output HTML from link helper

Source: https://handlebarsjs.com/examples/helper-hash-arguments.html

The HTML output generated by the helper, showing an anchor tag with class and href attributes.

```html
<a class="person" href="https://yehudakatz.com/">See Website</a>
```

--------------------------------

### Handlebars.registerHelper({ foo: function () {}, bar: function () {} })

Source: https://handlebarsjs.com/api-reference/runtime.html

Registers multiple helpers at once using an object map.

```javascript
Handlebars.registerHelper({ foo: function () {}, bar: function () {} });
```

--------------------------------

### Handlebars.create()

Source: https://handlebarsjs.com/api-reference/runtime.html

Creates an isolated Handlebars environment with its own helpers and partials. Templates are bound to the environment they are created for.

```javascript
var OtherHandlebars = Handlebars.create();
```

--------------------------------

### Register each helper

Source: https://handlebarsjs.com/guide/block-helpers.html

JavaScript implementation of the built-in `each` helper, iterating over an array and invoking the block for each item.

```js
Handlebars.registerHelper("each", function (context, options) {
  var ret = "";

  for (var i = 0, j = context.length; i < j; i++) {
    ret = ret + options.fn(context[i]);
  }

  return ret;
});
```

--------------------------------

### Template using bold block helper

Source: https://handlebarsjs.com/guide/block-helpers.html

Template that wraps the body content with the bold helper to add markup.

```handlebars
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{#bold}}{{body}}{{/bold}}
  </div>
</div>
```

--------------------------------

### Preparation script defining link helper

Source: https://handlebarsjs.com/examples/helper-hash-arguments.html

JavaScript code that registers a Handlebars helper named 'link' which processes hash arguments and returns a SafeString.

```javascript
Handlebars.registerHelper("link", function(text, options) {
var attributes = [];
  

Object.keys(options.hash).forEach(key => {
var escapedKey = Handlebars.escapeExpression(key);
var escapedValue = Handlebars.escapeExpression(options.hash[key]);
attributes.push(escapedKey + '="' + escapedValue + '"');
})
var escapedText = Handlebars.escapeExpression(text);
  

var escapedOutput ="<a " + attributes.join(" ") + ">" + escapedText + "</a>";
return new Handlebars.SafeString(escapedOutput);
});
```

--------------------------------

### Output of the template

Source: https://handlebarsjs.com/examples/builtin-helper-unless-block.html

The rendered output when the template is applied to the input `{}`. The warning is shown because `license` is falsy.

```html
<div class="entry">
<h3 class="warning">WARNING: This entry does not have a license!</h3>
</div>
```

--------------------------------

### Input: Context object

Source: https://handlebarsjs.com/examples/partials/variable.html

Provides the input data for the template. The `myVariable` property is set to 'lookupMyPartial', which determines the partial to render.

```javascript
{ myVariable: "lookupMyPartial" }
```

--------------------------------

### Template: log helper with multiple parameters

Source: https://handlebarsjs.com/examples/builtin-helper-log-multiple-params.html

Uses the Handlebars built-in log helper to log the values of 'firstname' and 'lastname' with labels. The output is not shown in the source.

```handlebars
{{log 'firstname' firstname 'lastname' lastname}}
```

--------------------------------

### Template: if helper with else

Source: https://handlebarsjs.com/guide/block-helpers.html

Template using if/else to render different images based on isActive.

```handlebars
{{#if isActive}}
  <img src="star.gif" alt="Active" />
{{else}}
  <img src="cry.gif" alt="Inactive" />
{{/if}}
```

--------------------------------

### Template using {{#each}} and {{lookup}}

Source: https://handlebarsjs.com/examples/builtin-helper-lookup.html

Iterates over the `people` array and for each person outputs their name and the city found by looking up the current index in the `cities` array.

```handlebars
{{#each people}}
{{.}} lives in {{lookup ../cities @index}}
{{/each}}
```

--------------------------------

### Handlebars.compile(template, options)

Source: https://handlebarsjs.com/api-reference/compilation.html

Compiles a template so it can be executed immediately. Supports various options that alter template execution behavior.

```APIDOC
## Handlebars.compile(template, options)

### Description
Compiles a template so it can be executed immediately. Supports a variety of options that alter how the template executes.

### Method
compile

### Parameters
- **template** (string) - Required - The template string to compile.
- **options** (object) - Optional - An object containing compilation options.

#### Options
- **data** (boolean) - Optional - Set to `false` to disable `@data` tracking.
- **compat** (boolean) - Optional - Set to `true` to enable recursive field lookup.
- **knownHelpers** (object) - Optional - Hash containing list of helpers that are known to exist (truthy) at template execution time. Passing this allows the compiler to optimize a number of cases. Builtin helpers are automatically included in this list and may be omitted by setting that value to `false`.
- **knownHelpersOnly** (boolean) - Optional - Set to `true` to allow further optimizations based on the known helpers list.
- **noEscape** (boolean) - Optional - Set to `true` to not HTML escape any content.
- **strict** (boolean) - Optional - Run in strict mode. In this mode, templates will throw rather than silently ignore missing fields. This has the side effect of disabling inverse operations such as `{{^foo}}{{/foo}}` unless fields are explicitly included in the source object.
- **assumeObjects** (boolean) - Optional - Removes object existence checks when traversing paths. This is a subset of `strict` mode that generates optimized templates when the data inputs are known to be safe.
- **preventIndent** (boolean) - Optional - By default, an indented partial-call causes the output of the whole partial being indented by the same amount. This can lead to unexpected behavior when the partial writes `pre`-tags. Setting this option to `true` will disable the auto-indent feature.
- **ignoreStandalone** (boolean) - Optional - Disables standalone tag removal when set to `true`. When set, blocks and partials that are on their own line will not remove the whitespace on that line.
- **explicitPartialContext** (boolean) - Optional - Disables implicit context for partials. When enabled, partials that are not passed a context value will execute against an empty object.

### Request Example
```js
const template = Handlebars.compile("{{foo}}");
template({});
```

### Response
Returns a compiled template function that can be executed with a context object.
```

--------------------------------

### Import Handlebars with ES modules

Source: https://handlebarsjs.com/guide/installation

Import Handlebars in an ES module environment and compile a simple template.

```js
import Handlebars from "handlebars";
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));
```

--------------------------------

### Path expression with dot notation and output

Source: https://handlebarsjs.com/guide/expressions.html

Dot-separated path expression, its input object, and the generated output.

```handlebars
{{person.firstname}} {{person.lastname}}

```

```javascript
{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

```

```text
Yehuda Katz

```

--------------------------------

### Partial block parameters with each loop

Source: https://handlebarsjs.com/examples/partials/partial-block-parameters.html

Shows a Handlebars template that iterates over people and uses a partial block named childEntry to render each person's firstname. The preparation script is commented out, and the input object provides three people. The output shows the rendered names with leading spaces.

```handlebars
{{#each people as |person|}}
{{#> childEntry}}
{{person.firstname}}
{{/childEntry}}
{{/each}}
```

```javascript
// Handlebars.registerHelper('loud', function(string) {
// return string.toUpperCase()
// });
```

```json
{
people: [
{ firstname: "Nils" },
{ firstname: "Yehuda" },
{ firstname: "Carl" },
],
}
```

```text
    Nils
    Yehuda
    Carl
```

--------------------------------

### Partial Output

Source: https://handlebarsjs.com/guide

Rendered output of the partial template, showing each person's name and age.

```text
  Nils is 20 years old.
  Teddy is 10 years old.
  Nelson is 40 years old.
```

--------------------------------

### Output

Source: https://handlebarsjs.com/examples/partials/failover.html

The rendered output when the partial is missing, showing the failover content.

```text
  Failover content

```

--------------------------------

### Input data for link helper

Source: https://handlebarsjs.com/examples/helper-multiple-parameters.html

Provides the url value used by the helper.

```json
{ url: "https://yehudakatz.com/" }
```

--------------------------------

### Handlebars.precompile(template, options)

Source: https://handlebarsjs.com/api-reference/compilation.html

Precompiles a given template so it can be sent to the client and executed without compilation. Supports all options of compile plus additional source map options.

```APIDOC
## Handlebars.precompile(template, options)

### Description
Precompiles a given template so it can be sent to the client and executed without compilation. Supports all of the same options parameters as the `Handlebars.compile` method. Additionally may pass `srcName` and `destName` for source map generation.

### Method
precompile

### Parameters
- **template** (string) - Required - The template string to precompile.
- **options** (object) - Optional - An object containing compilation options.

#### Options
- **srcName** (string) - Optional - Passed to generate the source map for the input file. When run in this manner, the return structure is `{code, map}` with `code` containing the template definition and `map` containing the source map.
- **destName** (string) - Optional - Used in conjunction with `srcName` to provide a destination file name when generating source maps.

### Request Example
```js
var templateSpec = Handlebars.precompile("{{foo}}");
```

### Response
Returns a template specification (or an object with `code` and `map` if `srcName` is provided).
```

--------------------------------

### Output: Rendered HTML

Source: https://handlebarsjs.com/examples/simple-expressions.html

The expected output of the template when rendered with the given input.

```html
<p>Yehuda Katz</p>
```

--------------------------------

### Template using link helper

Source: https://handlebarsjs.com/examples/helper-multiple-parameters.html

Calls the 'link' helper with text and url parameters.

```handlebars
{{link "See Website" url}}
```

--------------------------------

### Template: Render firstname and lastname

Source: https://handlebarsjs.com/examples/simple-expressions.html

A simple Handlebars template that outputs the values of the 'firstname' and 'lastname' variables.

```handlebars
<p>{{firstname}} {{lastname}}</p>
```

--------------------------------

### Template: list helper with hash arguments

Source: https://handlebarsjs.com/guide/block-helpers.html

Template calling the list helper with hash arguments for id and class attributes.

```handlebars
{{#list nav id="nav-bar" class="top"}}
  <a href="{{url}}">{{title}}</a>
{{/list}}
```

--------------------------------

### Register helper using options.hash

Source: https://handlebarsjs.com/guide/expressions.html

Registers a `link` helper that reads hash arguments from `options.hash`, escapes keys and values, and returns a `Handlebars.SafeString` anchor tag.

```javascript
Handlebars.registerHelper("link", function(text, options) {
  var attributes = [];

  Object.keys(options.hash).forEach(key => {
    var escapedKey = Handlebars.escapeExpression(key);
    var escapedValue = Handlebars.escapeExpression(options.hash[key]);
    attributes.push(escapedKey + '="' + escapedValue + '"');
  })
  var escapedText = Handlebars.escapeExpression(text);

  var escapedOutput ="<a " + attributes.join(" ") + ">" + escapedText + "</a>";
  return new Handlebars.SafeString(escapedOutput);
});
```

--------------------------------

### Expose parent context data to partial

Source: https://handlebarsjs.com/guide/partials.html

Inside an each block, passes parent context values (prefix) and current item properties to the partial, demonstrating how to expose data from parent contexts.

```handlebars
{{#each people}}
  {{> myPartial prefix=../prefix firstname=firstname lastname=lastname}}.
{{/each}}

```

--------------------------------

### Input data for the template

Source: https://handlebarsjs.com/examples/path-expressions-dot-dot.html

JSON-like input data providing the `people` array and `prefix` string used by the template.

```json
{
people: [
{ firstname: "Nils" },
{ firstname: "Yehuda" },
],
prefix: "Hello",
}
```

--------------------------------

### Input data for the template

Source: https://handlebarsjs.com/examples/builtin-helper-ifelse-block.html

JSON-like input object with author set to false, firstName 'Yehuda', and lastName 'Katz'.

```json
{
author: false,
firstName: "Yehuda",
lastName: "Katz",
}
```

--------------------------------

### Output: Rendered result

Source: https://handlebarsjs.com/examples/partials/variable.html

The output of the template when rendered with the given input. It shows 'Found!', which is the content of the 'lookupMyPartial' partial.

```text
Found!
```

--------------------------------

### Handlebars Partial: myPartial

Source: https://handlebarsjs.com/examples/partials/parent-context.html

Displays the prefix, firstname, and lastname passed to the partial.

```handlebars
{{prefix}}, {{firstname}} {{lastname}}
```

--------------------------------

### Input data for the template

Source: https://handlebarsjs.com/examples/builtin-helper-if-block.html

The input object provides the 'author', 'firstName', and 'lastName' values used by the template.

```json
{
author: true,
firstName: "Yehuda",
lastName: "Katz",
}
```

--------------------------------

### Basic Handlebars expression with input and output

Source: https://handlebarsjs.com/guide/expressions.html

Basic Handlebars expression with two variables, the input object, and the resulting HTML output.

```handlebars
<p>{{firstname}} {{lastname}}</p>

```

```javascript
{
  firstname: "Yehuda",
  lastname: "Katz",
}

```

```html
<p>Yehuda Katz</p>

```

--------------------------------

### Input data for bold helper

Source: https://handlebarsjs.com/examples/helper-safestring.html

Input object passed to the template, containing the text property.

```json
{ text: "Isn't this great?" }
```

--------------------------------

### Whitespace control with ~

Source: https://handlebarsjs.com/guide/expressions.html

Demonstrates whitespace control with the `~` character. The template removes whitespace around mustaches, and with the given context renders the output without newlines or formatting whitespace.

```handlebars
{{#each nav~}}
  <a href="{{url}}">
    {{~#if test}}
      {{~title}}
    {{~else~}}
      Empty
    {{~/if~}}
  </a>
{{~/each}}
```

```javascript
{
  nav: [{ url: "foo", test: true, title: "bar" }, { url: "bar" }];
}
```

```html
<a href="foo">bar</a><a href="bar">Empty</a>
```

--------------------------------

### Template: Iterate over people and call print_person helper

Source: https://handlebarsjs.com/examples/helper-this-context.html

This template uses the each block helper to iterate over the 'people' array and calls the 'print_person' helper for each item. The helper is expected to use the current context to output the person's name.

```handlebars
{{#each people}}
{{print_person}}
{{/each}}
```
Tokens:
Raw