Take inspiration from FastHTML to make implementing HTMX easier

[chuck-alt-delete]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

from fasthtml.common import *

app,rt = fast_app()

@rt('/')
def get(): return Div(P('Hello World!'), hx_get="/change")

serve()

Description

I’ve been loving the experience working with FastHTML lately to create fully interactive apps using only Python, with the help of HTMX for the interactive bits.

When it’s time to make a serious API, though, FastAPI is much better, and in fact the FastHTML docs encourage its use:

Behaviour in FastHTML apps is defined by routes. The syntax is largely the same as the wonderful FastAPI (which is what you should be using instead of this if you’re creating a JSON service. FastHTML is mainly for making HTML web apps, not APIs).

However, incorporating HTMX into a FastAPI app isn’t as nice an experience. You have to render jinja templates for html files (see this tutorial or a couple of the other questions asked in this discussion forum when you search for “HTMX”). This is much more complicated than simply returning HTML directly using FastHTML’s so-called ft components, eg

from fasthtml.common import *

app,rt = fast_app()

@rt('/')
def get(): return Div(P('Hello World!'), hx_get="/change")

What does the community think about offering functionality similar to FastHTML’s ft components to make it easier to turn Python objects into HTML and return that rendered html with HTMX requests?

Operating System

Linux

Operating System Details

No response

FastAPI Version

n/a

Pydantic Version

n/a

Python Version

n/a

Additional Context

No response

[n8sty]

I think you can already achieve this by mounting a FastHTML app as a sub-app (https://fastapi.tiangolo.com/advanced/sub-applications/#sub-application) or vice-versa and then using the FastHTML functionality as you normally would.

[chuck-alt-delete]

Interesting, I’ll look into it!

[TheRealBecks]

Since today I'm trying out FastHX: That integrates HTMX into FastAPI with Jinja.

[jsoques]

You can also use htpy https://htpy.dev/ or seamless https://github.com/xpodev/seamless which are similar to the ft components of FastHTML. I like FastHTML's implementation of the ft components. I think they use fastcore https://github.com/fastai/fastcore (same guys basically that did FastHTML).

[jsoques]

Ok, here is a simple FastAPI project with FastHTML just using the ft components of FastHTML.

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fasthtml.common import Html, Head, Title, Script, Link, Body, Div, to_xml
import httpx
import json

app = FastAPI()


@app.get("/", response_class=HTMLResponse)
def default():

    content = Html(
        Head(
            Title("Some page"),
            Script(
                src="https://unpkg.com/htmx.org@2.0.1",
                integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/",
                crossorigin="anonymous",
            ),
            Link(
                rel="stylesheet",
                href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css",
            ),
        ),
        Body(
            Div(
                "Click for a joke",
                cls="myclass",
                hx_get="random_joke",
            )
        ),
    )

    return to_xml(content)


@app.get("/random_joke")
def get_random_joke():
    # https://official-joke-api.appspot.com/random_joke
    resp = httpx.get("https://official-joke-api.appspot.com/random_joke")

    if resp.status_code != 200:
        return f"Error: {resp.content}"

    joke = json.loads(resp.content.decode("UTF-8"))

    page = f"{joke["setup"]} <br><br> {joke["punchline"]} <br><br><hr> Click for more jokes..."

    return page