fastapi-tags 0.4.0

Adds s-expression HTML tags to FastAPI views. Inspired by FastHTML's use of fastcore's FT components.

FastAPI Tags

Adds s-expression HTML tags to FastAPI views. Inspired by FastHTML's use of fastcore's FT components.

Installation:

uv:

uv add fastapi-tags

pip:

pip install fastapi-tags
uv pip install fastapi-tags

Usage:

from fastapi import FastAPI
import fastapi_tags as tg

app = FastAPI()

@app.get("/", response_class=tg.TagResponse)
async def index():
    return tg.Html(tg.H1("Hello, world!", style="color: blue;"))

If you want to do snippets, just skip the tg.Html tag:

@app.get("/time", response_class=tg.TagResponse)
async def time():
    return tg.P("Time to do code!")

With HTMX

If you want to detect HTMX use dependency injection:

from fastapi import Depends

@app.get("/hello", response_class=tg.TagResponse)
def test_endpoint(is_htmx: bool = Depends(tg.is_htmx_request)):
    if is_htmx:
        return tg.H1("Hello, hx-request! Here's a partial of the page.")
    else:
        return tg.Html(tg.H1("Hello normal request, Here's the full page!"))

Custom Tags

There are several ways to create custom Tags

Subclassing

class AwesomeP(tg.P) -> tg.Tag:
    def render(self) -> str:
        return f"<p{self.attrs}>AWESOME {self.children}!</p>"
AwesomeP('library')

<p>AWESOME library!</p>

Custom tags built as functions

def PicoCard(header: str, body: str, footer: str) -> tg.Tag:
    return tg.Article(
        tg.Header(header),
        body,
        tg.Footer(footer)
    )

@app.get("/card", response_class=tg.TagResponse)
async def card():
    return PicoCard(
        'FastAPI Tags',
        'Adds s-expression HTML tags (Tags) to FastAPI views.',
        'by various contributors'
    )

<article>
    <header>FastAPI Tags</header>
    Adds s-expression HTML tags (Tags) to FastAPI views.
    <footer>by various contributors</footer>
</article>