Skip to main content
Donate to the Python Software Foundation or Purchase a PyCharm License to Benefit the PSF! Donate Now

Jinja2 to Javascript compiler

Project description

JsJinja: Render Jinja2 Templates in JS

JsJinja lets you use your Jinja2 templates in Javascript. It compile the Jinja2 templates to Javascript with no restrictions.

The js can be generated via command line jsjinja <template file> or through the {% jsjinja %} tag in the templates.

You can use:

  • Template inheritance (Include, Extends, Blocks, super, …)
  • Import
  • Macros
  • Tests
  • Filters
  • Tags

The only exception is that you cannot use custom tags like {% customtag %}{% endcustomtag %}.


First, you must do:

pip install jsjinja


Here a small example of a Jinja template:

{% extends 'base.html' %}
{% block title %}Memberlist{% endblock %}
{% block content %}
  {% for user in users %}
    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
{% endblock %}

And here is the javascript compiled template:

(function() {
    Jinja2.extends(Template, Jinja2.Template);
    Jinja2.registerTemplate("readme_template.tmpl", Template);
    function Template() {return Template.__super__.constructor.apply(this, arguments);};
    Template.prototype.root = function (context) {
        var buf = "";
        var parent_template = Jinja2.getTemplate("base.html", "readme_template.tmpl");
        for (name in parent_template.blocks) {
            var parent_block = parent_template.blocks[name];
            context.blocks[name] = context.blocks[name] || [];
        buf += parent_template.root(context);
        return buf;
    Template.prototype.block_content = function (context) {
        var buf = "";
        var l_users = context.resolve("users");
        buf += "\n  <ul>\n  ";
        var l_user = undefined;
        var t_1 = l_users;
        for (var t_2= 0, t_3 = t_1.length; t_2<t_3; t_2++) {
            l_user = t_1[t_2];
            buf += '\n    <li><a href="';
            buf += l_user['url'];
            buf += '">';
            buf += l_user['username'];
            buf += '</a></li>\n  ';
        l_user = undefined;
        buf += "\n  </ul>\n";
        return buf;
    Template.prototype.block_title = function (context) {
        var buf = "";
        buf += "Memberlist";
        return buf;
    return Template;


For begin using JsJinja just add jsjinja.ext.JsJinjaExtension to your Jinja2 Environment.


import jinja2
env = jinja2.Environment(extensions=['jsjinja.ext.JsJinjaExtension',])




Generating js templates

Once you have the JsJinja extension installed, you have to generate the js templates:

print jinja_env.jsjinja.generate('your_template.jinja2')

Or just converting all

print jinja_env.jsjinja.generate_all()

Or using the command line utility

jsjinja <templates>

Rendering the js templates

For start using the templates you must include the jinja2.runtime.js script:

<script src=""></script>

After you have included jinja2.runtime.js and the generated js templates, then

html = Jinja2.getTemplate("template.html").render({}})


Library comes with a lot of examples, you can find them in examples directory.


You must have pyv8 and nose python packages installed. You can do the tests with


Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
jsjinja-0.3.1.tar.gz (30.4 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page