JinjaX

Super components powers for your Jinja templates

Before: chaos!

{% filter markdown %}{% raw %} ```html+jinja {% extends "layout.html" %} {% block title %}My title{% endblock %} {% from "bunch_of_macros.html" import card_macro, another_macro %} {% block content -%}

Hello {{ mistery or "World?" }}

{% call card_macro(div="So verbose") %} {% for product in products %} {{ another_macro(product) }} {% endfor %} {% endcall %}
{% with items=products %} {% include "snippets/pagination.html" %} {% endwith %} {%- endblock %} ``` {% endraw %}{% endfilter %}

After: ✨ clarity ✨

{% filter markdown %}{% raw %} ```html+jinja {#def products, msg="World!" #}

Hello, {{ msg }}

{% for product in products %} {% endfor %}
``` {% endraw %}{% endfilter %}

Better than include and macros

Encapsulated

Link to their own css and/or js files and can be copy/pasted to other projects without modifications.

Simple

Just regular Jinja files and no need to import them. Easier to use and easier to read.

Composable

Can wrap content (HTML, other components, etc.) in a natural way.

Say goodbye to spaghetti templates

Spaguetti code

Your Python code should be easy to understand and test.

Template code, however, often fails even basic code standards: long methods, deep conditional nesting,and mystery variables everywhere.

But when it's built with components, you see where everything is, understand what are the possible statesof every piece of UI, and know exactly what data need to have.

You can replace all your templates with components, or start with one section.

Ready to get going? Engage!

Get started →
Millions of people clicked a button in the last week alone!