Content Creation & Design
Handlebars & Helpers
Content Creation & Design
Handlebars & Helpers
Handlebars
The Novu notification content editor relies on Handlebars.js to establish the logic and control flow of our workflows. For a deeper comprehension of Handlebars.js, you can refer to its documentation.
This resource offers comprehensive insights into the utilization of Handlebars.js in crafting dynamic and adaptable notification content within the Novu platform.
| Helper | Description | Example | Output |
|---|---|---|---|
| if | Conditionally renders a block. Falsy values won’t be rendered. | {{#if author}}<h1>{{firstName}} {{lastName}}</h1>{{/if}} | Renders <h1>Yehuda Katz</h1> if author is truthy. |
| includeZero | includeZero=true treats the conditional as not empty, handling 0 differently. | {{#if 0 includeZero=true}}<h1>Does render</h1>{{/if}} | Renders <h1>Does render</h1> for 0. |
| Sub-Expressions | Create custom logic helpers and use them in sub-expressions. | {{#if (isdefined value1)}}true{{else}}false{{/if}} | Renders true or false based on custom helper. |
| unless | Inverse of if helper. Renders a block if the expression is falsy. | {{#unless license}}<h3 class="warning">WARNING</h3>{{/unless}} | Renders warning if license is falsy. |
| each | Iterate over a list. Use this to reference the iterated element. | {{#each people}}<li>{{this}}</li>{{/each}} | Renders list items. |
| with | Change context for template parts. | {{#with person}}{{firstname}} {{lastname}}{{/with}} | Renders firstname and lastname from the context. |
| Nested each | Access iteration variables in nested each blocks. | {{#each array}}{{@index}}: {{this}}{{/each}} | Renders index and item in each iteration. |
| Nested with | Use with block parameters for clear code. | See above example with nested with and complex template. | Renders nested context values. |
| You can use else section to handle empty values. | {{#with city}}...{{else}}No city found{{/with}} | Handles empty context case. |
Novu-specific helpers
| Handlebar Expression | Description |
|---|---|
{{dateFormat date 'EEEE, MMMM Do yyyy'}} | You can format the date using the dateFormat function. Here, date: '2020-01-01' has been formatted into Wednesday, January 1st 2020. |
{{lowercase key}} | This helps you use the lowercase handlebar helper function and turns the value of the specified key to its lowercase value. So, for message: 'hEllo WORLD', if we write {{lowercase message}}, we’ll end up with hello world. |
{{uppercase key}} | This helps you use the uppercase handlebar helper function and turns the value of the specified key to its uppercase value. So, for message: 'hello woRld', if we write {{uppercase message}}, we’ll end up with HELLO WORLD. |
{{titlecase key}} | This helps you use the titlecase handlebar helper function and turns the value of the specified key to its titlecase value. So, for message: 'hEllo wOrLD', if we write {{titlecase message}}, we’ll end up with Hello World. |