Quickstart

Install Jx¶

Run the following command:

Using "pip"Using "uv"

pip install jx

uv add jx

Create a catalog¶

app.py

from jx import Catalog

catalog = Catalog("components/")

Create a component¶

Create a new folder for your components. Inside this folder create a new file called card.jinja with the following content:

components/card.jinja

{#def title, url #}

<div class="bg-white shadow rounded border p-4">
  <h2 class="m-0 text-gray-800">{{ title }}</h2>
  <p>{{ content }}</p>
  <a href="{{ url_for(url) }}" class="text-teal-600">Read more</a>
</div>

Use the component¶

views.py

from .app import catalog

def dashboard_view():
    return catalog.render("dashboard.jinja")

components/dashboard.jinja

{#import "card.jinja" as Card #}

<Card title="Trees" url="trees">
  We have the best trees
</Card>

<Card title="Spades" url="spades">
  The best spades in the land
</Card>

PreviewHTML

Trees

We have the best trees

Spades

The best spades in the land

<div class="bg-white shadow rounded border p-4 mb-3">
  <h2 class="m-0 text-gray-800">Trees</h2>
  <p>We have the best trees</p>
  <a href="/trees" class="text-teal-600">Read more</a>
</div>
<div class="bg-white shadow rounded border p-4 mb-3">
  <h2 class="m-0 text-gray-800">Spades</h2>
  <p>The best spades in the land</p>
  <a href="/spades" class="text-teal-600">Read more</a>
</div>