Template Helpers
oJo templates use Handlebars syntax, not Liquid: {{name}}, {{#if paid}}…{{/if}} and {{#each items}}…{{/each}}, and helpers take their arguments after the name, as in {{uppercase name}} rather than {{ name | upcase }}. The helpers below are built in.
The formatting and text helpers (formatCurrency, formatNumber, formatDate, uppercase, lowercase, capitalize, substring) print nothing for a value the request did not send. math, round, inc and dec print NaN.
Data Manipulation
JSON Conversion
- json: Writes a value as JSON. The output is safe inside a
<script>block:<,>and&are escaped, so a value containing</script>cannot end the script.
<script>
const chart = {{json chart}};
</script>- array: Same as
json, for an array value
const labels = {{array labels}}; <!-- labels: ["Q1", "Q2"] → ["Q1","Q2"] -->String Operations
- concat: Concatenates multiple strings
{{concat 'Hello' ' ' 'World'}} <!-- Output: Hello World -->- lowercase: Converts string to lowercase
{{lowercase 'HELLO'}} <!-- Output: hello -->- uppercase: Converts string to uppercase
{{uppercase 'hello'}} <!-- Output: HELLO -->- capitalize: Capitalizes first letter of string
{{capitalize 'hello'}} <!-- Output: Hello -->- substring: Extracts part of a string
{{substring 'Hello World' 0 5}} <!-- Output: Hello -->Numeric Operations
Math Operations
- math: Performs basic mathematical operations
{{math value1 '+' value2}}
<!-- Addition -->
{{math value1 '-' value2}}
<!-- Subtraction -->
{{math value1 '*' value2}}
<!-- Multiplication -->
{{math value1 '/' value2}}
<!-- Division -->
{{math value1 '%' value2}}
<!-- Modulo -->Number Manipulation
- round: Rounds a number to specified decimals
{{round 3.14159 2}} <!-- Output: 3.14 -->- inc: Increments a number by 1
{{inc 5}} <!-- Output: 6 -->- dec: Decrements a number by 1
{{dec 5}} <!-- Output: 4 -->Number Formatting
Number and currency formats use US English separators (1,234.50).
- formatNumber: Formats a number with commas. Options of
Intl.NumberFormatgo after it asname=value.
{{formatNumber 1000}} <!-- Output: 1,000 -->
{{formatNumber 1234.5 minimumFractionDigits=2}} <!-- Output: 1,234.50 -->
{{formatNumber 0.92 style='percent'}} <!-- Output: 92% -->- formatCurrency: Formats a number as currency, with the currency’s usual decimals
{{formatCurrency 1000 'USD'}} <!-- Output: $1,000.00 -->
{{formatCurrency 1000 'JPY'}} <!-- Output: ¥1,000 -->- formatCurrency: Optional minimum and maximum decimals
{{formatCurrency 1000 'EUR' 0}} <!-- Output: €1,000 -->
{{formatCurrency 1000 'USD' 0 1}} <!-- Output: $1,000 -->Comparison Helpers
Basic Comparisons
- eq: Equality comparison
{{#if (eq value1 value2)}}
Values are equal
{{/if}}- gt: Greater than comparison
{{#if (gt value1 value2)}}
Value1 is greater than Value2
{{/if}}- lt: Less than comparison
{{#if (lt value1 value2)}}
Value1 is less than Value2
{{/if}}- gte, lte: Greater than or equal, less than or equal
{{#if (gte score 90)}}
With distinction
{{/if}}eq does not convert text to numbers: (eq "90" 90) is false. Two text values compare as text: (gt "100" "90") is false. Send numbers as JSON numbers.
Logic
- and, or: True when all, or any, of two or more values are truthy
- not: Negates a value
{{#if (and paid (not refunded))}}
Paid
{{/if}}Conditional Operations
- ternary: Conditional (ternary) operator
{{ternary condition 'Yes' 'No'}}Date and Time
Date Formatting
- formatDate: Formats a date using dayjs format tokens . Send dates as ISO 8601 (
2024-11-06): a date like07/10/2026is read month first, as July 10. A date with a time and offset is shown in UTC.
{{formatDate date 'YYYY-MM-DD'}}
<!-- Output: 2024-11-06 -->
{{formatDate date 'MMM DD, YYYY'}}
<!-- Output: Nov 06, 2024 -->Date Comparisons
- isBefore: Checks if one date is before another
{{#if (isBefore date1 date2)}}
Date1 is before Date2
{{/if}}- isAfter: Checks if one date is after another
{{#if (isAfter date1 date2)}}
Date1 is after Date2
{{/if}}Array Operations
- len: Gets array length
{{len array}} <!-- Output: number of items in array -->Loop Operations
- times: Repeats a block n times.
@indexcounts from 0.
{{#times 3}}
Iteration {{inc @index}}
{{/times}}
<!-- Output: Iteration 1 Iteration 2 Iteration 3 -->Best Practices
- Always validate input data before using helpers that perform calculations
- Use date formatting helpers with valid date strings
- Handle potential undefined values when using array operations
- Consider performance impact when using complex helpers in loops
- Test helper output with various input types to ensure proper handling