Here is a demo of a server side incremented counter. Note the use of htmx
from fasthtml.common import *
app, rt = fast_app(hdrs=(picolink), live=True, live_reload=True)
@rt("/inc")
def get (session):
session['sum'] = session.get('sum') + 1
return session["sum"]
@rt("/")
def get(session):
session.setdefault('sum', 0)
return (
Div (
Div (
Button("inc", hx_get="/inc", hx_target="#counter"),
Div(session["sum"], id="counter", cls="sum"),
cls="counter"
),
StyleX("style.css"),
cls = "wrap-counter"
)
)
serve()
.wrap-counter {
background-color: white;
display: flex;
justify-content: space-around;
margin-top: 4rem;
}
.counter {
display:flex;
align-items:center;
gap:2rem;
}
.sum {
font-size: 2rem;
}
FastHTML integrates HTMX and make updating any part of a web page a breeeze, without making Ajax request.
Here is the same app as it it figures in the documentation. It does not use session variable:
from fasthtml.common import *
app, rt = fast_app(hdrs=(picolink), live=True, live_reload=True)
count = 0
@app.get("/")
def home():
return Title("Count Demo"), Main(
H1("Count Demo"),
P(f"Count is set to {count}", id="count"),
Button("Increment", hx_post="/increment", hx_target="#count", hx_swap="innerHTML")
)
@app.post("/increment")
def increment():
print("incrementing")
global count
count += 1
return f"Count is set to {count}"
serve()
Top comments (0)