KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

jsjinja

★ 36 Open GitHub ↗

Jinja2 to Javascript template converter. Now you can render your Jinja2 templates on the client side! ;)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

JsJinja: Render Jinja2 Templates in JS
=======================================

JsJinja lets you use your [Jinja2](http://jinja.pocoo.org/) 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 %}`.

## Installing

First, you must do:

```
pip install jsjinja
```

# Nutshell

Here a small example of a Jinja template:

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

And here is the javascript compiled template:

```js
(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] || [];
            context.blocks[name].push(parent_block)
        }
        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;
})()
```

# Installation

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

Example:

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

Or:

```python
jinja_env.add_extension('jsjinja.ext.JsJinjaExtension')
```

# Usage

## Generating js templates

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

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

Or just converting all

```python
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:

```html
<script src="https://raw.github.com/SyrusAkbary/jsjinja/master/jsjinja/lib/jinja2.runtime.min.js"></script>
```

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

```js
html = Jinja2.getTemplate("template.html").render({}})
$('body').html(html)
```

# Examples

Library comes with a lot of examples, you can find them in [examples](https://github.com/SyrusAkbary/jsjinja/tree/master/examples/) directory.

* [Static](https://github.com/SyrusAkbary/jsjinja/tree/master/examples/static)  generation
* [Dynamic](https://github.com/SyrusAkbary/jsjinja/tree/master/examples/dynamic) generation

# Testing

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

```shell
./test.sh
```

# TODOs and BUGS

See: http://github.com/syrusakbary/jsjinja/issues

jsjinja

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README