JinjaX

Super components powers for your Jinja templates

Before: chaos!

{% extends "layout.html" %}
{% block title %}My title{% endblock %}

{% from "bunch_of_macros.html"
  import card_macro, another_macro %}

{% block content -%}
  <div>
    <h2>Hello {{ mistery or "World?" }}</h2>
    <div>
      {% call card_macro(div="So verbose") %}
        {% for product in products %}
          {{ another_macro(product) }}
        {% endfor %}
      {% endcall %}
    </div>
  </div>
  {% with items=products %}
    {% include "snippets/pagination.html" %}
  {% endwith %}
{%- endblock %}

After: ✨ clarity ✨

{#def products, msg="World!" #}

<Layout title="My title">
  <div>
    <h2>Hello, {{ msg }}</h2>
    <div>
      <Card div="So clean">
        {% for product in products %}
          <Product product={{ product }} />
        {% endfor %}
      </Card>
    </div>
  </div>
  <Paginator items={{ products }} />
</Layout>

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

Spaghetti 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 states of 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!