Overview
When creating templates (for example, HTML templates used in PDF.co or Make.com), you may want to display data in a specific format — such as dates, numbers, currency values, or percentages.
Template engines like Handlebars.js include a powerful feature called helpers, which allow you to create small reusable functions to format data before it’s displayed in your HTML output.
This article explains how to use and define custom helper functions for formatting your template data.
When to Use Helper Functions
Use helper functions whenever you need to:
Format dates (e.g., convert
DD/MM/YYYY→MM/DD/YYYY)Format numbers or money values (e.g.,
10000→10,000.00)Perform calculations or transformations before rendering
Apply consistent styling or text formatting across multiple templates
How to Use Built-In Helpers
Handlebars supports both built-in helpers (like #if, #each, and #unless) and custom helpers, which you can define in your script section.
A helper works by registering a function that transforms or formats data, then calling it inside your template using {{helperName value}}.
Example Use Case: Formatting Dates
Let’s say your input JSON contains a date value like this:
{ "date": "20/03/1980" }
To display it in US date format (MM/DD/YYYY), you can register a custom helper:
<script>
Handlebars.registerHelper("formatDateUS", formatDateUS);
function formatDateUS(dateString) {
if (!dateString) return '';
// Split the input date (DD/MM/YYYY)
var parts = dateString.split('/');
if (parts.length !== 3) return dateString;
var day = parts[0];
var month = parts[1];
var year = parts[2];
// Return in MM/DD/YYYY format
return new Handlebars.SafeString(month + '/' + day + '/' + year);
}
</script>
Then, call it inside your HTML template:
<div>Date: {{formatDateUS date}}</div>Rendered Output:
Date: 03/20/1980
Example: Formatting Numbers or Currency Values
You can also use a helper to format numbers with commas or fixed decimal places.
Example:
<script>
Handlebars.registerHelper('numberFormat', function(value){
var dl = 2; // decimal places
var ts = ','; // thousands separator
var ds = '.'; // decimal separator
value = parseFloat(value);
var num = value.toFixed(dl);
var re = '\\d(?=(\\d{3})+' + (dl > 0 ? '\\D' : '$') + ')';
return (ds ? num.replace('.', ds) : num)
.replace(new RegExp(re, 'g'), '$&' + ts);
});
</script>
Template Example:
<div>Total: ${{numberFormat total}}</div>Input JSON:
{ "total": 16250.45 }Rendered Output:
Total: $16,250.45
Preview and Test Your Templates
You can easily test, preview, and experiment with your helper functions using the PDF.co HTML Template Editor:
For additional guidance, check our documentation here:
🔗 PDF.co HTML to PDF Templates Guide
Summary
Use Case | Helper Name | Example Output |
Date formatting |
|
|
Number formatting |
|
|
Calculations | Custom helpers | e.g. |
Custom helpers make your templates more flexible and professional. Once defined, you can reuse them across different projects to keep formatting consistent and clean.