Infinite Scroll FastHTML / HTMX - Python

main.py

from fasthtml import FastHTML
from fasthtml.common import *

app = FastHTML(hdrs=(picolink,))

def create_card(number):
    return Div(Small(f"Item {number}"))

@app.get("/")
def home():
    initial_cards = [create_card(i) for i in range(1, 21)]
    return Title("Infinite Scroll"), Main(
        H1("Infinite Scroll"),
        Div(*initial_cards, id="card-container"),
        Div(
            hx_get="/more",
            hx_trigger="intersect once",
            hx_swap="afterend",
            hx_target="#card-container"
        )
    )

@app.get("/more")
def more(request):
    start = int(request.query_params.get("start", 21))
    end = start + 20
    new_cards = [create_card(i) for i in range(start, end)]
    return *new_cards, Div(
            hx_get=f"/more?start={end}",
            hx_trigger="intersect once",
            hx_swap="afterend",
            hx_target="this"
        )

serve()