Easily embed Handlebars.js templates in your django templates
Switch branches/tags
Clone or download


django-templatetag-handlebars allows you to embed Handlebars.js templates in your django templates.

Most of the template tag code comes from Miguel Araujo's verbatim snippet.


pip install django-templatetag-handlebars


  • Add templatetag_handlebars to your INSTALLED_APPS
  • Add the HTML header :
{% load templatetag_handlebars %}

{% handlebars_js %}
  • Call the template tag, and write your Handlebars template :
{% tplhandlebars "tpl-infos" %}
    {{total}} {% trans "result(s)." %}
    <p>{% trans "Min" %}: {{min}}</p>
    <p>{% trans "Max" %}: {{max}}</p>
{% endtplhandlebars %}
  • The following block with end-up in your page :
<script type="text/x-handlebars" id="tpl-infos">

    {{total}} result(s).
    <p>Min: {{min}}</p>
    <p>Max: {{max}}</p>
  • Render it, client-side, as usual using Handlebars.js API :
var properties = {
    total: 10,
    min: 4,
    max: 5

var template = Handlebars.compile($('#tpl-infos').html()),
    rendered = template(properties);
  • Your rendered string is ready, and waiting to be inserted in your DOM :)
10 result(s).
<p>Min: 4</p>
<p>Max: 5</p>


A {% verbatim %} tag is available to escape a specific part. For example, you may want a subpart of your Handlebars template to be rendered by Django :

<script type="text/x-handlebars" id="tpl-django-form">

        {% verbatim %}
            {{#if id}}<h1>{{first}} {{last}}</h1>{{/if}}

            {% trans "Your id is" %} {{ id }}
        {% endverbatim %}
        {{ yourform.as_p }}

Using Ember.js

In settings.py ensure to set the following attribute to True. This is due to Ember.js expecting a slightly different script id declaration


The script block will be rendered like `<script type="text/x-handlebars" data-template-name="%s">`.



Similar tools


  • Lesser GNU Public License
  • Handlebars.js is released under the MIT license - Copyright 2011 Yehuda Katz