From chaos to clarity: The power of components in your server-side-rendered Python web app.

Jx is a Python library for creating reusable template components with Jinja2. It works by pre-parsing the template source and replacing TitleCased HTML tags with Jinja calls that render the component.

Components are defined as regular Jinja2 templates (.jinja files) with special metadata comments:

• {# def parameter1 parameter2=default_value #} - Defines required and optional parameters
• {# import "path/to/component.jinja" as ComponentName #} - Imports other components
• {# css "/path/to/style.css" #} - Includes CSS files
• {# js "/path/to/script.js" #} - Includes JavaScript files

Example component:

{# def message #}
{# import "button.jinja" as Button #}

<div class="greeting">{{ message }}</div>
<Button text="OK" />

from jx import Catalog

# Create a catalog and add a components folder
catalog = Catalog("templates/components")

# Render a component with parameters
html = catalog.render("card.jinja", title="Hello", content="This is a card")