---
title: Helper templates
description: "Every Helper defines an HTML template that renders it on screen, with support for variable binding, conditional blocks, and loops."
type: api-reference
tags: [js-api, helpers, templates]
v3_relevant: true
deprecated: false
---
# Helper templates
Every Helper defines an HTML template that renders it on screen, with support for variable binding, conditional blocks, and loops.
Templates support the following features:
- Binding to variables
- Blocks for conditional visibility
- Loops and iterators for arrays
Take a look at a basic example where a helper is defining a custom template:
```js
Fliplet.Helper({
name: 'welcome',
render: {
template: 'Hi {! firstName !}, how are you?
'
},
data: {
firstName: 'John'
}
});
```
```html
```
---
## Binding to variables
Variables can also be defined via HTML `field` nodes and can be accessed using the `fields` property, e.g. use the `{! fields.name !}` syntax to define dynamic binding to variables from your HTML templates:
```html
John
```
```js
Fliplet.Helper({
name: 'welcome',
render: {
template: 'Hi {! fields.name !}, how are you?
'
}
});
```
Note: The paths are passed to _.get(object, path) (ref) which supports [ ] notations for paths that contain spaces or [ ] characters.
- Use
[ ] to wrap around keys that include a space, e.g. [First name]
"" within [ ] is supported but optional in some cases, e.g. [First name] and ["First name"] are both supported- When referencing nested properties,
. before [ ] is supported but optional, data[First name] and data.[First name] are both supported
-
If the key includes
[ ] characters, use "" within [ ] are required, e.g. ["Location [accuracy]"]
- You can choose to always include
[] and "", e.g. ["Name"], ["First name"], ["Location [accuracy]"]
---
## Blocks for conditional visibility
If you require parts of your HTML to be conditionally visible only when a specific variable is "truthy" we made available the `` block available:
```html
This will only be shown when there is a title. The title is {! fields.title !}
```
Note: A "truthy" value is a value that translates to **true** when evaluated in a Boolean context.
You can also the shorthand syntax as shown below:
```html
{! if title !}
This will only be shown when there is a title. The title is {! fields.title !}
{! endif !}
```
Else blocks are also supported:
```html
{! if title !}
This will only be shown when there is a title.
{! else !}
This will be shown when there is no title.
{! endif !}
```
---
## Loops and iterators for arrays
You can use the `` block to automatically render an array of items based on a sample template to be compiled with each item in the array as the context:
```html
{! person.firstName !}
```
You can also the shorthand syntax as shown below:
```html
{! each person in people !}
{! person.firstName !}
{! endeach !}
```
---
## Further reading