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.
Super components powers for your Jinja templates
From chaos to clarity
Before
{% 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(header="So verbose") %}
{% for product in products %}
{{ another_macro(product) }}
{% endfor %}
{% endcall %}
</div>
</div>
{% with items=products %}
{% include "snippets/pagination.html" %}
{% endwith %}
{%- endblock %}
After
{#def products, msg="World!" #}
<Layout title="My title">
<div>
<h2>Hello, {{ msg }}</h2>
<div>
<Card header="So clean">
{% for product in products %}
<Product product={product} />
{% endfor %}
</Card>
</div>
</div>
<Paginator items={products} />
</Layout>
Better than
include and macros
Encapsulated
css and/or js files and can be copy/pasted to other projects without modifications.
Simple
Modern
Composable
Say goodbye to spaghetti templates
Ready to get going? Engage!
See the Documentation
