pyjinhx 0.28.0

UI components for Python using Pydantic and Jinja2 templates

PyJinHx

Type-safe UI components for Python web apps. A component is a Pydantic model plus a Jinja template sitting next to it — nest them with PascalCase tags, and co-located JS/CSS is collected automatically at render.

pip install pyjinhx

Example

A Card that renders a Button — the tag's attributes become validated Pydantic fields:

# components/button.py
from pyjinhx import BaseComponent

class Button(BaseComponent):
    id: str
    text: str
    variant: str = "default"

<!-- components/button.html -->
<button id="{{ id }}" class="btn btn-{{ variant }}">{{ text }}</button>

<!-- components/card.html -->
<div id="{{ id }}" class="card">
  <h2>{{ title }}</h2>
  <Button id="cta" text="{{ button_text }}" variant="primary"/>
</div>

# components/card.py
from pyjinhx import BaseComponent, Renderer

class Card(BaseComponent):
    id: str
    title: str
    button_text: str = "Sign up"

Renderer.set_default_environment("./components")
html = Card(id="hero", title="Get Started").render()

Drop a button.css or card.js next to the component and it's included once, automatically.

Reactivity (HTMX)

Components declare what state they depend on. Return one component from a mutation route — every other mounted region that reacts to the same keys updates via out-of-band swaps, no manual wiring:

from pyjinhx import ReactiveComponent, MutationKey, mutates, setup

class Keys(MutationKey):
    TODOS = "todos"

class Counter(ReactiveComponent, react={Keys.TODOS}):
    remaining: int

    @classmethod
    def load(cls) -> "Counter":
        return cls(remaining=db.remaining())

@mutates(Keys.TODOS)
def toggle_all():
    db.toggle_all()

setup(app)  # FastAPI: lifespan + middleware, done

@app.post("/todos/toggle")
def toggle():
    toggle_all()
    return Counter.render()  # other regions reacting to TODOS update too

Learn more

• Usage tiers — adopt only the layers you need
• Components · PascalCase tags · Assets
• Reactivity guide · full todo example
• Built-in UI kit