LogoLogo
API DocsTemplate GalleryProduct UpdatesContact Us
  • 📬Print & Mail
    • Ready to get started?
      • Pricing details
      • Fast Track Guide
    • Integrations
      • API integrations
        • Action IQ
        • Adobe Marketo Engage
        • Blueshift
        • Braze
        • Customer.io
        • Hubspot
        • Iterable
        • Jotform
        • Klayvio
        • Listrak
        • Make
        • Optimove
        • Salesforce
        • Salesforce Marketing Cloud
        • Segment
        • Simon Data
        • Zapier
      • No-code integrations
        • Agile CRM
        • Freshsales Suite
        • HubSpot
        • Microsoft Dynamics 365
        • Pipedrive
        • Salesforce
        • Salesforce Marketing Cloud
        • Zoho
      • Creative conversion tools
        • Figma plugin
    • Reaching your audience
      • Lob Audience
        • Target Audiences
        • Lookalike Audiences
        • Purchasing Audiences
      • All about addresses
      • Campaign audience guide
      • Additional Lob NCOA functionality
    • Designing mail creatives
      • Artboard layout
      • Creative formatting
        • PDF preflight checklist
        • Exporting PDFs from InDesign
        • Rendering errors
      • Mail piece design specs
        • Postcards
        • Self-Mailers
        • Letters
        • Letter envelopes
        • Letter add-ons
        • Checks
        • Snap packs
        • Booklets
        • Custom mail
      • Maximizing engagement
        • Dynamic personalization
          • Advanced templating (Handlebars)
            • Dynamic table tutorial
        • Adding QR codes
        • Short URLs
        • Informed Delivery
    • Building a mail strategy
      • One-time campaigns or triggered sends?
      • Choosing a delivery strategy
      • Managing mail settings
        • Using metadata
        • Declaring mail use type
      • USPS Promotions Through Lob
        • Tactile, Sensory & Interactive Promotion
        • Integrated Technology Promotion
        • First Class Mail Advertising Promotion
        • Add-Ons
      • Mailing class and postage
        • Certified Mail or Registered Mail
      • International mail
    • Send mail!
      • Launch your first campaign
      • Send mail via Print & Mail API
      • Send campaigns via the Campaigns API
      • USPS Secure Destruction
    • Getting data & results
      • Tracking your mail
      • Mail analytics
      • Measuring attribution
      • Using webhooks
      • Exporting mail data
  • 🏠Address Verification
    • Ready to start AV?
      • US AV product suite
      • International AV suite
      • AV pricing
    • AV best practices
    • AV integrations & libraries
      • AV Elements
      • Shopify App: Address Cleanser
    • AV FAQs
  • 💻Developer Docs
    • API quickstart guide
    • SDKs & libraries
    • Postman & similar tools
    • Error reference
    • Upgrading API version
    • Technical use case guides
      • Mass deletion setup
      • NCOA responses
      • Override cancellation window
      • Visibility of address changes
      • Ingesting tracking events with webhooks
  • 🔑Account Management
    • Signing into Lob
    • API keys
    • Account settings
      • Account-level data logs
    • User settings
    • Billing
      • Lob Credits
      • Lob Payment Methods
      • Sales Tax FAQ
        • Applicable sales tax by state
          • ​Subscriptions and Services
          • Lob Audience
          • Delivery Location for Operational Mail
          • Customer Billing Address for Operational Mail
          • Delivery Location for Marketing Mail
          • Postage Exemption
          • Professional Services
        • Tax exemption guide
  • 📞Resources
    • Getting support
    • Security & privacy
    • Data retention
    • Sustainability
    • Private labeling Lob
    • Direct mail glossary
Powered by GitBook
On this page
  • Personalizing templates with Handlebars
  • Creating a template
  • Template compilation API
  • Create a mailpiece using Handlebars
  • Helpers
  • Built in helpers
  • Custom helpers

Was this helpful?

Export as PDF
  1. Print & Mail
  2. Designing mail creatives
  3. Maximizing engagement
  4. Dynamic personalization

Advanced templating (Handlebars)

Using the Handlebar templating engine to create advanced templates

PreviousDynamic personalizationNextDynamic table tutorial

Last updated 1 year ago

Was this helpful?

Personalizing templates with Handlebars

By default, Lob uses a based on Mustache. If you would like to render complex personalizations, use the alternate Handlebars templating engine route through Lob API. allows you to populate, evaluate, and iterate using templates and API requests. The biggest advantage of this approach is quickly creating dynamic personalization without making any changes to your codebase. We can use advanced templating to make dynamic tables.

Creating a template

  1. Start with any Handlebars-friendly template. Dynamic variables should be wrapped in double curly braces {{like_this}} . To the right is an example of a simple handlebars template.

<html>
Name is: {{user.name}}
Location is: {{user.location}} 
</html>
  1. To push your template to a Lob environment, use the API. Creating Handlebars templates via the Dashboard UI is not supported at this time. To specify that our service should use the Handlebars templating engine, you will need pass handlebars in the template request engine field as shown on the right.

POST 
	[/v1/templates](<https://api.lob.com/v1/templates>)/ 

{
"description":"Test Template",
"html":"<html>Name is: {{user.name}} <br> 
Location is: {{user.location}} </html>",
"engine":"handlebars",
"required_vars": ["user"] //optional
}

Response

{
    "id": "tmpl_81ff8f64ce61285",
....
}

Note the optional field, required_vars. Any request to create a mailpiece using this template will require the variables listed there in order to complete successfully.

Template compilation API

You can use this newly created endpoint to test that your Handlebars template compiles as expected. To do that, use the /v1/templates/ endpoint and add your merge variable(s) as a dynamic URL query parameter. You can use this to inspect how your template will display with the merge variables passed in. The response is the same format that Lob will use to render your mailpiece.

GET
/v1/templates/:id/compile
  ?merge_vars={"someVar":"someVal"}

Returns HTML

Create a mailpiece using Handlebars

Now that your template has been created in a Lob environment, the templating engine has been set to handlebars, and you've tested out your template using the Template Compilation API, you can send a mailpiece request to the /v1/checks/, /v1/postcards/, /v1/letters/ or /v1/self_mailers/ endpoint as you normally would. In the request message body, use the merge_variables field to pass in dynamic values.

Helpers

Built in helpers

The below helpers can be used for many dynamic use cases. Helpers like if blocks can include nested built-in and customer helper conditionals (like if, and, or, eq, etc).

#if

You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.


<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>

When you pass the following input to the above template:


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

This will produce the result as below:


<div class="entry">
<h1>Yehuda Katz</h1>
</div>

If the input is an empty JSONObject {}, then author will become undefined and if condition fails, resulting in the output as follow:

<div class="entry"></div>

When using a block expression, you can specify a template section to run if the expression returns a falsey value. The section, marked by else is called an "else section".


<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>

#unless

You can use the unless helper as the inverse of the if helper. Its block will be rendered if the expression returns a falsy value.


<div class="entry">
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>

If looking up license under the current context returns a falsy value, Handlebars will render the warning. Otherwise, it will render nothing.

#each

You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over.


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

when used with this context:


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

will result in:


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

You can use the this expression in any context to reference the current context.

You can optionally provide an else section which will display only when the list is empty.


{{#each paragraphs}}
<p>{{this}}</p>
{{else}}
<p class="empty">No content</p>
{{/each}}

When looping through items in each, you can optionally reference the current loop index via {{@index}}.

{{#each array}} {{@index}}: {{this}} {{/each}}

Additionally for object iteration, {{@key}} references the current key name:

{{#each object}} {{@key}}: {{this}} {{/each}}

The first and last steps of iteration are noted via the @first and @last variables when iterating over an array. When iterating over an object only the @first is available. Nested each blocks may access the iteration variables via depth based paths. To access the parent index, for example, {{@../index}} can be used.

#with

The with-helper allows you to change the evaluation context of template-part.


{{#with person}}
{{firstname}} {{lastname}}
{{/with}}

when used with this context:


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

will result in:

Yehuda Katz

with can also be used with block parameters to define known references in the current block. The example above can be converted to


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

Which allows for complex templates to potentially provide clearer code than ../ depthed references allow for.

You can optionally provide an {{else}} section which will display only when the passed value is empty.


{{#with city}}
{{city.name}} (not shown because there is no city)
{{else}}
No city found
{{/with}}

#lookup

The lookup helper allows for dynamic parameter resolution using Handlebars variables.

This is useful for resolving values for array indexes.


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

It can also be used to lookup properties of object based on data from the input. The following is a more complex example that uses lookup in a sub-expression to change the evaluation contextto another object based on a property-value.


{{#each persons as | person |}}
    {{name}} lives in {{#with (lookup ../cities [resident-in])~}}
      {{name}} ({{country}})
    {{/with}}

Custom helpers

For uniformity with Handlebars' terminology, we use the wordfalsey instead of the more commonly used falsy.

Array helpers

Params

  • array {Array}: Collection

  • n {Number}: Starting index (number of items to exclude)

  • returns {Array}: Array exluding n items.

Example

<!-- array: ['a', 'b', 'c'] -->

{{after array 1}}

<!-- results in: '["c"]' -->

Cast the given value to an array.

Params

  • value {any}

  • returns {Array}

Example

 {{arrayify "foo"}}

<!-- results in: [ "foo" ] -->

Params

  • array {Array}

  • n {Number}

  • returns {Array}: Array excluding items after the given number.

Example

<!-- array: ['a', 'b', 'c'] -->

{{before array 2}}

<!-- results in: '["a", "b"]' -->

Implementation of the default Handlebars loop helper {{#each}} adding index (0-based index) to the loop content

Params

  • array {Array}

  • options {Object}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->

{{#eachIndex array}}  
{{item}} is {{index}}
{{/eachIndex}}

<!-- results in 'a is 0, b is 1, c is 2' -->

Block helper that filters the given array and renders the block for values that evaluate to true, otherwise the inverse block is returned.

Params

  • array {Array}

  • value {any}

  • options {Object}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->

{{#filter array "foo"}}AAA
{{else}}BBB
{{/filter}}

<!-- results in: 'BBB' -->

Returns the first item, or first n items of an array.

Params

  • array {Array}

  • n {Number}: Number of items to return, starting at 0.

  • returns {Array}

Example

{{first "['a', 'b', 'c', 'd', 'e']" 2}}

<!-- results in: '["a", "b"]' -->

Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block:

  • index

  • total

  • isFirst

  • isLast Also, @index is exposed as a private variable, and additional private variables may be defined as hash arguments.

Params

  • array {Array}

  • returns {String}

Example

<!-- accounts = [
{'name': 'John', 'email': 'john@example.com'},
{'name': 'Malcolm', 'email': 'malcolm@example.com'},
{'name': 'David', 'email': 'david@example.com'}
] -->

{{#forEach accounts}}
  <a href="mailto:{{ email }}" title="Send an email to {{ name }}">
    {{ name }}
  </a>{{#unless isLast}}, {{/unless}}
{{/forEach}}

Block helper that renders the block if an array has the given value. Optionally specify an inverse block to render when the array does not have the given value.

Params

  • array {Array}

  • value {any}

  • options {Object}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->

{{#inArray array "d"}}  foo{{else}}  bar{{/inArray}}

<!-- results in: 'bar' -->

Returns true if value is an es5 array.

Params

  • value {any}: The value to test.

  • returns {Boolean}

Example

{{isArray "abc"}}
<!-- results in: false --> 

<!-- array: [1, 2, 3] -->

{{isArray array}}

<!-- results in: true -->

Returns the item from array at index idx.

Params

  • array {Array}

  • idx {Number}

  • returns {any} value

Example

<!-- array: ['a', 'b', 'c'] -->

{{itemAt array 1}}

<!-- results in: 'b' -->

Join all elements of array into a string, optionally using a given separator.

Params

  • array {Array}

  • separator {String}: The separator to use. Defaults to ,.

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->

{{join array}}

<!-- results in: 'a, b, c' --> 

{{join array '-'}}

<!-- results in: 'a-b-c' -->

Returns true if the the length of the given value is equal to the given length. Can be used as a block or inline helper.

Params

  • value {Array|String}

  • length {Number}

  • options {Object}

  • returns {String}

<!-- var value = "example" -->

{{equalsLength value 7}}

<!-- results in: true -->

<!-- var value = "example" -->

{{equalsLength value 5}}

<!-- results in: false -->

Params

  • value {Array|String}: Array or string.

  • n {Number}: Number of items to return from the end of the array.

  • returns {Array}

Example

<!-- var value = ['a', 'b', 'c', 'd', 'e'] --> 

{{last value}}

<!-- results in: ['e'] --> 

{{last value 2}}

<!-- results in: ['d', 'e'] --> 

{{last value 3}}

<!-- results in: ['c', 'd', 'e'] -->

Returns the length of the given string or array.

Params

  • value {Array|Object|String}

  • returns {Number}: The length of the value.

Example

{{length '["a", "b", "c"]'}}

<!-- results in: 3 --> 

<! myArray = ['a', 'b', 'c', 'd', 'e']; -->

{{length myArray}}

<!-- results in: 5 --> 

<!-- myObject = {'a': 'a', 'b': 'b'}; -->

{{length myObject}}

<!-- results in: 2 -->

Returns a new array, created by calling function on each element of the given array. For example,

Params

  • array {Array}

  • fn {Function}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'], and "double" is afictitious function that duplicates letters -->

{{map array double}}

<!-- results in: '["aa", "bb", "cc"]' -->

Map over the given object or array or objects and create an array of values from the given prop. Dot-notation may be used (as a string) to get nested properties.

Params

  • collection {Array|Object}

  • prop {Function}

  • returns {String}

Example

// {{pluck items "data.title"}}

<!-- results in: '["aa", "bb", "cc"]' -->

Reverse the elements in an array, or the characters in a string.

Params

  • value {Array|String}

  • returns {Array|String}: Returns the reversed string or array.

Example

<!-- value: 'abcd' -->

{{reverse value}}

<!-- results in: 'dcba' -->

<!-- value: ['a', 'b', 'c', 'd'] -->

{{reverse value}}

<!-- results in: ['d', 'c', 'b', 'a'] -->

Block helper that returns the block if the callback returns true for some value in the given array.

Params

  • array {Array}

  • iter {Function}: Iteratee

  • {Options}: Handlebars provided options object

  • returns {String}

Example

<!-- array: [1, 'b', 3] -->

{{#some array isString}}  
Render me if the array has a string.{{else}} Render me if it doesn't.
{{/some}}

<!-- results in: 'Render me if the array has a string.' -->

Sort the given array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

Params

  • array {Array}: the array to sort.

  • key {String|Function}: The object key to sort by, or sorting function.

Example

<!-- array: ['b', 'a', 'c'] -->

{{sort array}}

<!-- results in: '["a", "b", "c"]' -->

Sort an array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

Params

  • array {Array}: the array to sort.

  • props {String|Function}: One or more properties to sort by, or sorting functions to use.

Example

<!-- array: [{a: 'zzz'}, {a: 'aaa'}] -->

{{sortBy array "a"}}

<!-- results in: '[{"a":"aaa"}, {"a":"zzz"}]' -->

Params

  • array {Array}

  • idx {Number}

  • options {Object}

  • returns {Array}

Example

<!-- array: ['a', 'b', 'c', 'd', 'e'] -->

{{#withAfter array 3}}  {{this}}{{/withAfter}}

<!-- results in: "de" -->

Params

  • array {Array}

  • idx {Number}

  • options {Object}

  • returns {Array}

Example

<!-- array: ['a', 'b', 'c', 'd', 'e'] -->

{{#withBefore array 3}}  {{this}}{{/withBefore}}

<!-- results in: 'ab' -->

Params

  • array {Array}

  • idx {Number}

  • options {Object}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->

{{#withFirst array}}  {{this}}{{/withFirst}}

<!-- results in: 'a' -->

Block helper that groups array elements by given group size.

Params

  • array {Array}: The array to iterate over

  • size {Number}: The desired length of each array "group"

  • options {Object}: Handlebars options

  • returns {String}

Example

<!-- array: ['a','b','c','d','e','f','g','h'] -->

{{#withGroup array 4}}  
{{#each this}} {{.}}  {{each}}  <br>{{/withGroup}}

<!-- results in: -->
<!-- 'a','b','c','d'<br> -->
<!-- 'e','f','g','h'<br> -->

Params

  • array {Array}

  • idx {Number}: The starting index.

  • options {Object}

  • returns {String}

Example

<!-- array: ['a', 'b', 'c'] -->
{{#withLast array}}  {{this}}{{/withLast}}
<!-- results in: 'c' -->

Block helper that sorts a collection and exposes the sorted collection as context inside the block.

Params

  • array {Array}

  • prop {String}

  • options {Object}: Specify reverse="true" to reverse the array.

  • returns {String}

Example

<!-- array: ['b', 'a', 'c'] -->

{{#withSort array}}{{this}}{{/withSort}}

<!-- results in: 'abc' -->

Params

  • array {Array}

  • options {Object}

  • returns {Array}

Example

<!-- array: ['a', 'a', 'c', 'b', 'e', 'e'] -->

{{#each (unique array)}}{{.}}{{/each}}

<!-- results in: 'acbe' -->
Comparison helpers

Helper that renders the block if both of the given values are truthy. If an inverse block is specified it will be rendered when falsey. Works as a block helper, inline helper or subexpression.

Params

  • a {any}

  • b {any}

  • options {Object}: Handlebars provided options object

  • returns {String}

Example

<!-- {great: true, magnificent: true} -->

{{#and great magnificent}}A{{else}}B{{/and}}

<!-- results in: 'A' -->

Params

  • a {}

  • operator {}: The operator to use. Operators must be enclosed in quotes: ">", "=", "<=", and so on.

  • b {}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or if specified the inverse block is rendered if falsey.

Block helper that renders the block if collection has the given value, using strict equality (===) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex is specified and is negative, it is used as the offset from the end of the collection.

Params

  • collection {Array|Object|String}: The collection to iterate over.

  • value {any}: The value to check for.

  • [startIndex=0] {Number}: Optionally define the starting index.

  • options {Object}: Handlebars provided options object.

Example

<!-- array = ['a', 'b', 'c'] -->

{{#contains array "d"}}  This will not be rendered.{{else}}  This will be rendered.{{/contains}}

Returns the first value that is not undefined, otherwise the "default" value is returned.

Params

  • value {any}

  • defaultValue {any}

  • returns {String}

Block helper that renders a block if a is equal to b. If an inverse block is specified it will be rendered when falsey. You may optionally use the compare="" hash argument for the second value.

Params

  • a {String}

  • b {String}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Example

{
"state":"California"
}

<html>

	{{#if (eq state "California")}} 
	<p>Welcome to Cali</p>
	{{else}}
	<p>You\\'re not in California</p>
	{{/if}}

</html>;
<!-- Results in 'Welcome to Cali' →

Block helper that renders a block if a is greater than b.

If an inverse block is specified it will be rendered when falsey. You may optionally use the compare="" hash argument for the second value.

Params

  • a {String}

  • b {String}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that renders a block if a is greater than or equal to b.

If an inverse block is specified it will be rendered when falsey. You may optionally use the compare="" hash argument for the second value.

Params

  • a {String}

  • b {String}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that renders a block if value has pattern. If an inverse block is specified it will be rendered when falsey.

Params

  • val {any}: The value to check.

  • pattern {any}: The pattern to check for.

  • options {Object}: Handlebars provided options object

  • returns {String}

Params

  • val {any}

  • options {Options}

  • returns {Boolean}

Params

  • val {any}

  • options {Options}

  • returns {Boolean}

Return true if the given value is an even number.

Params

  • number {Number}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Example

{{#ifEven value}}  render A{{else}}  render B{{/ifEven}}

Conditionally renders a block if the remainder is zero when a operand is divided by b. If an inverse block is specified it will be rendered when the remainder is not zero.

Params

  • {}: {Number}

  • {}: {Number}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that renders a block if value is an odd number. If an inverse block is specified it will be rendered when falsey.

Params

  • value {Object}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Example

{{#ifOdd value}}  render A{{else}}  render B{{/ifOdd}}

Params

  • a {any}

  • b {any}

  • options {Object}: Handlebars provided options object

  • returns {String}

Params

  • a {String}

  • b {String}

  • options {Object}: Handlebars provided options object

  • returns {String}

Block helper that renders a block if a is less than b.

If an inverse block is specified it will be rendered when falsey. You may optionally use the compare="" hash argument for the second value.

Params

  • context {Object}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that renders a block if a is less than or equal to b.

If an inverse block is specified it will be rendered when falsey. You may optionally use the compare="" hash argument for the second value.

Params

  • a {Sring}

  • b {Sring}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that renders a block if neither of the given values are truthy. If an inverse block is specified it will be rendered when falsey.

Params

  • a {any}

  • b {any}

  • options {}: Handlebars options object

  • returns {String}: Block, or inverse block if specified and falsey.

Returns true if val is falsey. Works as a block or inline helper.

Params

  • val {String}

  • options {Object}: Handlebars provided options object

  • returns {String}

Block helper that renders a block if any of the given values is truthy. If an inverse block is specified it will be rendered when falsey.

Params

  • arguments {...any}: Variable number of arguments

  • options {Object}: Handlebars options object

  • returns {String}: Block, or inverse block if specified and falsey.

Example

{{#or a b c}}  If any value is true this will be rendered.{{/or}}

Block helper that always renders the inverse block unless a is equal to b.

Params

  • a {String}

  • b {String}

  • options {Object}: Handlebars provided options object

  • returns {String}: Inverse block by default, or block if falsey.

Block helper that always renders the inverse block unless a is greater than b.

Params

  • a {Object}: The default value

  • b {Object}: The value to compare

  • options {Object}: Handlebars provided options object

  • returns {String}: Inverse block by default, or block if falsey.

Block helper that always renders the inverse block unless a is less than b.

Params

  • a {Object}: The default value

  • b {Object}: The value to compare

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that always renders the inverse block unless a is greater than or equal to b.

Params

  • a {any}

  • b {any}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

Block helper that always renders the inverse block unless a is less than or equal to b.

Params

  • a {any}

  • b {any}

  • options {Object}: Handlebars provided options object

  • returns {String}: Block, or inverse block if specified and falsey.

String helpers

Append the specified suffix to the given string.

Params

  • str {String}

  • suffix {String}

  • returns {String}

Example

<!-- given that "item.stem" is "foo" -->

{{append item.stem ".html"}}

<!-- results in:  'foo.html' -->

camelCase the characters in the given string.

Params

  • string {String}: The string to camelcase.

  • returns {String}

Example

{{camelcase "foo bar baz"}};<!-- results in:  'fooBarBaz' -->

Capitalize the first word in a sentence.

Params

  • str {String}

  • returns {String}

Example

{{capitalize "foo bar baz"}}

<!-- results in:  "Foo bar baz" -->

Capitalize all words in a string.

Params

  • str {String}

  • returns {String}

Example

{{capitalizeAll "foo bar baz"}}

<!-- results in:  "Foo Bar Baz" -->

Center a string using non-breaking spaces

Params

  • str {String}

  • spaces {String}

  • returns {String}

Like trim, but removes both extraneous whitespace and non-word characters from the beginning and end of a string.

Params

  • string {String}: The string to chop.

  • returns {String}

Example

{{chop "_ABC_"}}

<!-- results in:  'ABC' --> 

{{chop "-ABC-"}}

<!-- results in:  'ABC' --> 

{{chop " ABC "}}

<!-- results in:  'ABC' -->

dash-case the characters in string. Replaces non-word characters and periods with hyphens.

Params

  • string {String}

  • returns {String}

Example

{{dashcase "a-b-c d_e"}}

<!-- results in:  'a-b-c-d-e' -->

dot.case the characters in string.

Params

  • string {String}

  • returns {String}

Example

{{dotcase "a-b-c d_e"}}

<!-- results in:  'a.b.c.d.e' -->

Params

  • string {String}

  • returns {String}

Example

{{downcase "aBcDeF"}}

<!-- results in:  'abcdef' -->

Truncates a string to the specified length, and appends it with an elipsis, ….

Params

  • str {String}

  • length {Number}: The desired length of the returned string.

  • returns {String}: The truncated string.

Example

{{ellipsis (sanitize "<span>foo bar baz</span>"), 7}}

<!-- results in:  'foo bar…' -->{{ellipsis "foo bar baz", 7}}

<!-- results in:  'foo bar…' -->

Replace spaces in a string with hyphens.

Params

  • str {String}

  • returns {String}

Example

{{hyphenate "foo bar baz qux"}}

<!-- results in:  "foo-bar-baz-qux" -->

Return true if value is a string.

Params

  • value {String}

  • returns {Boolean}

Example

{{isString "foo"}}

<!-- results in:  'true' -->

Lowercase all characters in the given string.

Params

  • str {String}

  • returns {String}

Example

{{lowercase "Foo BAR baZ"}}

<!-- results in:  'foo bar baz' -->

Return the number of occurrences of substring within the given string.

Params

  • str {String}

  • substring {String}

  • returns {Number}: Number of occurrences

Example

{{occurrences "foo bar foo bar baz" "foo"}}

<!-- results in:  2 -->

PascalCase the characters in string.

Params

  • string {String}

  • returns {String}

Example

{{pascalcase "foo bar baz"}}

<!-- results in:  'FooBarBaz' -->

path/case the characters in string.

Params

  • string {String}

  • returns {String}

Example

{{pathcase "a-b-c d_e"}}

<!-- results in:  'a/b/c/d/e' -->

Replace spaces in the given string with pluses.

Params

  • str {String}: The input string

  • returns {String}: Input string with spaces replaced by plus signs

Example

{{plusify "foo bar baz"}}

<!-- results in:  'foo+bar+baz' -->

Prepends the given string with the specified prefix.

Params

  • str {String}

  • prefix {String}

  • returns {String}

Example

<!-- given that "val" is "bar" -->

{{prepend val "foo-"}}

<!-- results in:  'foo-bar' -->

Render a block without processing mustache templates inside the block.

Params

  • options {Object}

  • returns {String}

Example

{{{{#raw}}}}{{foo}}{{{{/raw}}}}

<!-- results in:  '{{foo}}' -->

Remove all occurrences of substring from the given str.

Params

  • str {String}

  • substring {String}

  • returns {String}

Example

{{remove "a b a b a b" "a "}}

<!-- results in:  'b b b' -->

Remove the first occurrence of substring from the given str.

Params

  • str {String}

  • substring {String}

  • returns {String}

Example

{{remove "a b a b a b" "a"}}

<!-- results in:  ' b a b a b' -->

Replace all occurrences of substring a with substring b.

Params

  • str {String}

  • a {String}

  • b {String}

  • returns {String}

Example

{{replace "a b a b a b" "a" "z"}}

<!-- results in:  'z b z b z b' -->

Replace the first occurrence of substring a with substring b.

Params

  • str {String}

  • a {String}

  • b {String}

  • returns {String}

Example

{{replace "a b a b a b" "a" "z"}}

<!-- results in:  'z b a b a b' -->

Reverse a string.

Params

  • str {String}

  • returns {String}

Example

{{reverse "abcde"}}

<!-- results in:  'edcba' -->

Sentence case the given string

Params

  • str {String}

  • returns {String}

Example

{{sentence "hello world. goodbye world."}}

<!-- results in:  'Hello world. Goodbye world.' -->

snake_case the characters in the given string.

Params

  • string {String}

  • returns {String}

Example

{{snakecase "a-b-c d_e"}}

<!-- results in:  'a_b_c_d_e' -->

Split string by the given character.

Params

  • string {String}: The string to split.

  • returns {String} character: Default is an empty string.

Example

{{split "a,b,c" ","}}

<!-- results in:  ['a', 'b', 'c'] -->

Tests whether a string begins with the given prefix.

Params

  • prefix {String}

  • testString {String}

  • options {String}

  • returns {String}

Example

{{#startsWith "Goodbye" "Hello, world!"}}  
Whoops{{else}}  Do you even hello world?
{{/startsWith}}

Title case the given string.

Params

  • str {String}

  • returns {String}

Example

{{titleize "this is title case"}}

<!-- results in:  'This Is Title Case' -->

Removes extraneous whitespace from the beginning and end of a string.

Params

  • string {String}: The string to trim.

  • returns {String}

Example

{{trim " ABC "}}

<!-- results in:  'ABC' -->

Removes extraneous whitespace from the beginning of a string.

Params

  • string {String}: The string to trim.

  • returns {String}

Example

{{trim " ABC "}}

<!-- results in:  'ABC ' -->

Removes extraneous whitespace from the end of a string.

Params

  • string {String}: The string to trim.

  • returns {String}

Example

{{trimRight " ABC "}}

<!-- results in:  ' ABC' -->

Params

  • str {String}

  • limit {Number}: The desired length of the returned string.

  • suffix {String}: Optionally supply a string to use as a suffix to denote when the string has been truncated. Otherwise an ellipsis (…) will be used.

  • returns {String}: The truncated string.

Example

truncate("foo bar baz", 7);

<!-- results in:  'foo bar' -->

truncate(sanitize("<span>foo bar baz</span>", 7));

<!-- results in:  'foo bar' -->

Params

  • str {String}

  • limit {Number}: The desired length of the returned string.

  • suffix {String}: Optionally supply a string to use as a suffix to denote when the string has been truncated.

  • returns {String}: The truncated string.

Example

truncateWords("foo bar baz", 1);

<!-- results in:  'foo…' -->truncateWords("foo bar baz", 2);

<!-- results in:  'foo bar…' -->truncateWords("foo bar baz", 3);

<!-- results in:  'foo bar baz' -->

Params

  • string {String}

  • returns {String}

Example

{{upcase "aBcDeF"}}

<!-- results in:  'ABCDEF' -->

Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.

Params

  • str {String}: The string to uppercase

  • options {Object}: Handlebars options object

  • returns {String}

Example

{{uppercase "aBcDeF"}}

<!-- results in:  'ABCDEF' -->
  • array {Array}: The array to iterate over

  • size {Number}: The desired length of each array "group"

  • options {Object}: Handlebars options

  • returns {String}

Custom helpers are additional functions that can assist in the formatting of your document. The documentation here is directly pulled from the associated third-party . The helpers below are supported.

Returns all of the items in an array after the specified index. Opposite of .

Return all of the items in the collection before the specified count. Opposite of .

Returns the last item, or last n items of an array or string. Opposite of .

Use the items in the array after the specified index as context inside a block. Opposite of .

Use the items in the array before the specified index as context inside a block. Opposite of .

Use the first item in a collection inside a handlebars block expression. Opposite of .

Use the last item or n items in an array as context inside a block. Opposite of .

Block helper that return an array with all duplicate values removed. Best used along with a helper.

Render a block when a comparison of the first and third arguments returns true. The second argument is the to use. You may also optionally specify an inverse block to render when falsey.

Returns true if the given value is falsey. Uses the library for comparisons. Please see that library for more information or to report bugs with this helper.

Returns true if the given value is truthy. Uses the library for comparisons. Please see that library for more information or to report bugs with this helper.

Block helper that renders a block if a is equal to b. If an inverse block is specified it will be rendered when falsey. Similar to but does not do strict equality.

Block helper that renders a block if a is not equal to b. If an inverse block is specified it will be rendered when falsey. Similar to but does not use strict equality for comparisons.

Lowercase all of the characters in the given string. Alias for .

Truncate a string to the specified length. Also see .

Truncate a string to have the specified number of words. Also see .

Uppercase all of the characters in the given string. Alias for .

📬
basic templating engine
Handlebars syntax
/v1/templates
github repo
{{after}}
before
{{arrayify}}
{{before}}
after
{{eachIndex}}
{{filter}}
{{first}}
{{forEach}}
{{inArray}}
{{isArray}}
{{itemAt}}
{{join}}
{{equalsLength}}
{{last}}
first
{{length}}
{{map}}
{{pluck}}
{{reverse}}
{{some}}
{{sort}}
{{sortBy}}
{{withAfter}}
withBefore
{{withBefore}}
withAfter
{{withFirst}}
withLast
{{withGroup}}
{{withLast}}
withFirst
{{withSort}}
{{unique}}
each
{{and}}
{{compare}}
arithemetic operator
{{contains}}
{{default}}
{{eq}}
{{gt}}
{{gte}}
{{has}}
{{isFalsey}}
falsey
{{isTruthy}}
falsey
{{ifEven}}
{{ifNth}}
{{ifOdd}}
{{is}}
eq
{{isnt}}
unlessEq
{{lt}}
{{lte}}
{{neither}}
{{not}}
{{or}}
{{unlessEq}}
{{unlessGt}}
{{unlessLt}}
{{unlessGteq}}
{{unlessLteq}}
{{append}}
{{camelcase}}
{{capitalize}}
{{capitalizeAll}}
{{center}}
{{chop}}
{{dashcase}}
{{dotcase}}
{{downcase}}
lowercase
{{ellipsis}}
{{hyphenate}}
{{isString}}
{{lowercase}}
{{occurrences}}
{{pascalcase}}
{{pathcase}}
{{plusify}}
{{prepend}}
{{raw}}
{{remove}}
{{removeFirst}}
{{replace}}
{{replaceFirst}}
{{reverse}}
{{sentence}}
{{snakecase}}
{{split}}
{{startsWith}}
{{titleize}}
{{trim}}
{{trimLeft}}
{{trimRight}}
{{truncate}}
ellipsis
{{truncateWords}}
truncate
{{upcase}}
uppercase
{{uppercase}}