{"id":19736,"date":"2019-04-09T21:19:22","date_gmt":"2019-04-09T13:19:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19736"},"modified":"2025-04-24T17:14:24","modified_gmt":"2025-04-24T09:14:24","slug":"a-look-into-handlebarsjs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/","title":{"rendered":"Beginner’s Guide to Using Handlebars.js"},"content":{"rendered":"

In this post, we are going to look into Handlebars<\/a>, a JavaScript templating engine based on Mustache<\/a>. It shares the same functionalities with Mustache but sports several new features. Handlebars is a handy templating tool, particularly for displaying data series in JSON format<\/strong>, which today is a common data-formatting form used in web application APIs. Check out this introductory post<\/a>, which explains JSON really well.<\/p>\n

In this article, we are going to walk you through some of Handlebars\u2019 basic functionalities, and we will also work on a real example at the end. If this is something you want to get to know, then let\u2019s get started.<\/p>\n

Getting Started<\/h2>\n

To start off, let\u2019s go to the Handlebars<\/a> website and download the source code file, handlebars.js<\/code>. Put the file in an appropriate folder within your project. Link the file from your HTML documents. You can add the link inside the <head><\/code> tag or before the closing <\/body><\/code> tag.<\/p>\n

\n  <script src=\"js\/handlebars.js\"><\/script>\n<\/pre>\n
Alternatively, you can also link to the Handlebars source from a CDN.<\/p>\n
\n  <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/1.3.0\/handlebars.js\"><\/script>\n<\/pre>\n
Once that\u2019s done, we can start creating a template.<\/p>\n
Basic Template<\/h2>\n
Let\u2019s add our data: a name, age, and where the person comes from.<\/p>\n
\n  var dataSource = {\n    \"name\": \"Joe Bloggs\",\n    \"age\": \"19\",\n    \"from\": \"United Kingdom\"\n  }\n<\/pre>\n
This data serves as an example. As mentioned, you can retrieve similar forms of data from most web applications that provide an open API, such as Twitter<\/a>, Instagram<\/a>, Flickr<\/a>, and Dribbble<\/a> \u2013 though you\u2019ll likely get more lines of data than shown above. Alternatively, you can try JSON Generator<\/a> to generate some random data.<\/p>\n
The Template<\/h2>\n
Once we have the data, we can create the template to place these data. Let\u2019s look at the following code.<\/p>\n
\n  <div id=\"content\" class=\"content-wrap\">\n    <script id=\"template\" type=\"text\/x-handlebars-template\">\n      <p>Hi, I'm {{name}}. I'm {{age}}, and I'm from {{from}}<\/p>\n    <\/script>\n  <\/div>\n<\/pre>\n
A Handlebars template is set within a <script><\/code> tag with a special type: text\/x-handlebars-template<\/code>, and preferably also with an ID, because selecting an element<\/strong> by ID<\/em> in JavaScript is technically more straightforward and faster than using a class<\/em>.<\/p>\n
Each piece of data is declared within double curly braces, {{...}}<\/code>; this is also known as a Handlebars expression<\/strong>.<\/p>\n
However, before we can see the result in the browser, we have to compile<\/em> these codes, merging the data into the template.<\/p>\n
Compiling<\/h2>\n
Let\u2019s store the template in a JavaScript variable, like so.<\/p>\n
\n  var template = $('#template').html();\n<\/pre>\n
We then pass the template<\/code> variable into Handlebars.compile()<\/code> to compile the template.<\/p>\n
\n  var compile = Handlebars.compile(template);\n<\/pre>\n
The most important part of the above code is the variable\u2019s name, compile<\/code>. We will use it along with our data to generate the final result, like so:<\/p>\n
\n  var result = compile(dataSource);\n<\/pre>\n
Lastly, we put it into the #content<\/code> element using the jQuery .html()<\/code> method this way.<\/p>\n
\n  $('#content').html(result);\n<\/pre>\n
This will give us the following result in the browser:<\/p>\n
\"Handlebars<\/figure>\n<\/p>\n
HTML Escaping<\/h2>\n
Sometimes our data might contain HTML tags, for example:<\/p>\n
\n  var dataSource = {\n    \"name\": \"<em>Joe Bloggs<\/em>\",\n    \"age\": \"19\",\n    \"from\": \"United Kingdom\"\n  }\n<\/pre>\n
By default, Handlebars will escape these tags. It will turn the tags into their HTML entities: <<\/code> becomes <<\/code> and ><\/code> becomes ><\/code>. This will result in an unexpected output in the browser, as shown below:<\/p>\n
\"Handlebars<\/figure>\n<\/p>\n
To prevent Handlebars from converting HTML tags into entities and instead treat them as actual HTML, use triple curly braces {{{...}}}<\/code> to declare the data, like so:<\/p>\n
\n  Hi, My name is {{{name}}}. ...\n<\/pre>\n
There you go! The heading tag is now rendered correctly, and the name is displayed in italics.<\/p>\n
\"Handlebars<\/figure>\n<\/p>\n
Conditional Helper<\/h2>\n
Handlebars supports conditional helpers<\/em> (also known as conditional functions). This feature is an exclusive addition to Handlebars, not available in Mustache. A conditional helper<\/em> is useful for preventing data rendering if the value is empty. As an example, let\u2019s remove the value from our age<\/code> data.<\/p>\n
\n  var dataSource = {\n    \"name\": \"Joe Bloggs\",\n    \"age\": \"\",\n    \"from\": \"United Kingdom\"\n  }\n<\/pre>\n
We use the conditional helper like this. Since the age value is not present, the line `I\u2019m {{age}},` will not be displayed.<\/p>\n
\n  {{#if age}}I'm {{age}},{{\/if}}\n<\/pre>\n
In the browser, the line mentioned above will not be rendered.<\/p>\n
\"Handlebars<\/figure>\n<\/p>\n
Additionally, Handlebars will treat the data as empty if the value is explicitly set to undefined<\/code> or false<\/code>.<\/p>\n
Loop<\/h2>\n
Handlebars also supports loops. As in other programming languages, loops are used to iterate over a series of objects. Currently, we only have one object containing three lines of data. Let\u2019s extend our example with two more objects, like so:<\/p>\n
\n  var data = [{\n    \"name\" : \"Joe Bloggs\",\n    \"age\"  : \"19\",\n    \"from\" : \"United Kingdom\"\n  }, {\n    \"name\" : \"Jane Doe\",\n    \"age\"  : \"21\",\n    \"from\" : \"United State\"\n  }, {\n    \"name\" : \"John Doe\",\n    \"age\"  : \"20\",\n    \"from\" : \"United Nation\"\n  }];\n<\/pre>\n
Since we now have more than one object, our current template will no longer work to render these data correctly. In this case, we must use the Handlebars loop, wrapping our template within {{#each}} ... {{\/each}}<\/code>. We may also need to change the template structure.<\/p>\n
In this example, we will display these data in a list.<\/p>\n
\n  <script id=\"template\" type=\"text\/x-handlebars-template\">\n    <ul>\n      {{#each this}}\n        <li>Hi, My name is {{{name}}}. {{#if age}}I'm {{age}},{{\/if}} and I'm from {{from}}<\/li>\n      {{\/each}}\n    <\/ul>\n  <\/script>\n<\/pre>\n
Here is the result that we will see in the browser:<\/p>\n
\"Handlebars<\/figure>\n<\/p>\n
Example<\/h2>\n
Now let\u2019s implement this in a real example. This time, we want to display a profile from Forrst, a hub for designers and developers. Forrst provides a simple method to retrieve data. In our case, we can use https:\/\/forrst.com\/api\/v2\/users\/info?username={username}<\/code> to retrieve a user profile. We will get data similar to this (Note: the actual data is very long, so I have truncated it):<\/p>\n
\n  var forrstProfile = {\n    \"id\": 24606,\n    \"username\": \"jimmyliu\",\n    \"name\": \"Jimmy Liu\",\n    \"url\": \"http:\\\/\\\/forrst.com\\\/people\\\/jimmyliu\",\n    \"likes\": \"11\",\n    \"followers\": \"10\",\n    \"following\": \"2\",\n    \"photos\": {\n      \"medium_url\": \"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3151a9294608c3143551aa265f00bf71.jpg?s=75&d=https:\\\/\\\/forrst.com\\\/assets\\\/images\\\/default_75.jpg\",\n      \"small_url\": \"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3151a9294608c3143551aa265f00bf71.jpg?s=45&d=https:\\\/\\\/forrst.com\\\/assets\\\/images\\\/default_45.jpg\",\n      \"thumb_url\": \"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3151a9294608c3143551aa265f00bf71.jpg?s=25&d=https:\\\/\\\/forrst.com\\\/assets\\\/images\\\/default_25.jpg\"\n    },\n    \"bio\": \"<p>A graphic and web designer based in Cupertino, California. Follow me on Twitter <a href=\\\"http:\\\/\\\/twitter.com\\\/jimmyliu\\\"><\\\/a><a href=\\\"\\\/people\\\/jimmyliu\\\">@jimmyliu<\\\/a><\\\/p>\\\\n\",\n    \"is_a\": \"developer & designer\"\n  };\n<\/pre>\n
We will put this data into the following template:<\/p>\n
\n  <div id=\"forrst\" class=\"forrst-profile\">\n    <script id=\"forrst-profile-template\" type=\"text\/x-handlebars-template\">\n      <div class=\"profile\">\n        <figure class=\"avatar\">\n          <img src=\"{{photos.medium_url}}\" alt=\"\">\n        <\/figure>\n        <div class=\"person\">\n          <h4 class=\"person-name\"><a href=\"{{url}}\">{{name}}<\/a><\/h4>\n          <div class=\"person-bio\">{{{bio}}}<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"social-count\">\n        <div class=\"social-item social-posts\">\n          <div class=\"heading\">Posts<\/div>\n          <div class=\"counts\">{{posts}}<\/div>\n        <\/div>\n        <div class=\"social-item social-followers\">\n          <div class=\"heading\">Followers<\/div>\n          <div class=\"counts\">{{followers}}<\/div>\n        <\/div>\n        <div class=\"social-item social-following\">\n          <div class=\"heading\">Following<\/div>\n          <div class=\"counts\">{{following}}<\/div>\n        <\/div>\n      <\/div>\n    <\/script>\n  <\/div>\n<\/pre>\n
Let\u2019s compile them together, like so:<\/p>\n
\n  var template = $('#forrst-profile-template').html();\n  var compile  = Handlebars.compile(template);\n  var result   = compile(forrstProfile);\n  $('#forrst').html(result);\n<\/pre>\n
With a couple of lines of CSS, we can achieve a nicer result.<\/p>\n
You can download the source and see the demo from these links:<\/p>\n
\n    View Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
Final Thought<\/h2>\n
I previously used jQuery for templating, which I think was the wrong approach, as my code turned out messy. When dealing with a large chunk of data, it is far better and neater to use Handlebars for templating and displaying it. I hope this serves as a good reference for you to get started with Handlebars.<\/p>","protected":false},"excerpt":{"rendered":"
In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but sports several new features. Handlebars is a handy templating tool, particularly for displaying data series in JSON format, which today is a common data-formatting form used in web application APIs.…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBeginner's Guide to Using Handlebars.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner's Guide to Using Handlebars.js\" \/>\n<meta property=\"og:description\" content=\"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-09T13:19:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:14:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Beginner’s Guide to Using Handlebars.js\",\"datePublished\":\"2019-04-09T13:19:22+00:00\",\"dateModified\":\"2025-04-24T09:14:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/\"},\"wordCount\":883,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/a-look-into-handlebarsjs\\\/result.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/\",\"name\":\"Beginner's Guide to Using Handlebars.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/a-look-into-handlebarsjs\\\/result.jpg\",\"datePublished\":\"2019-04-09T13:19:22+00:00\",\"dateModified\":\"2025-04-24T09:14:24+00:00\",\"description\":\"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/a-look-into-handlebarsjs\\\/result.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/a-look-into-handlebarsjs\\\/result.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-handlebarsjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner’s Guide to Using Handlebars.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner's Guide to Using Handlebars.js - Hongkiat","description":"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/","og_locale":"en_US","og_type":"article","og_title":"Beginner's Guide to Using Handlebars.js","og_description":"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but","og_url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-09T13:19:22+00:00","article_modified_time":"2025-04-24T09:14:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Beginner’s Guide to Using Handlebars.js","datePublished":"2019-04-09T13:19:22+00:00","dateModified":"2025-04-24T09:14:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/"},"wordCount":883,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg","keywords":["Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/","url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/","name":"Beginner's Guide to Using Handlebars.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg","datePublished":"2019-04-09T13:19:22+00:00","dateModified":"2025-04-24T09:14:24+00:00","description":"In this post, we are going to look into Handlebars, a JavaScript templating engine based on Mustache. It shares the same functionalities with Mustache but","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/a-look-into-handlebarsjs\/result.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-handlebarsjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner’s Guide to Using Handlebars.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-58k","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19736"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19736\/revisions"}],"predecessor-version":[{"id":74108,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19736\/revisions\/74108"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19736"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}