Build an interactive WebAwesome page

In this tutorial, we will serve a WebAwesome card whose button shows and hides a callout entirely in the browser.

Install the packages

pip install "spaday[examples]" spaday-webawesome

Create the page

Save this as webawesome_app.py:

import uvicorn

from spaday import Toggle, by_id
from spaday.backends.starlette import serve
from spaday_webawesome import WaButton, WaCallout, WaCard

page = WaCard(
    WaButton(variant="brand")
    .text("Toggle details")
    .on("click", Toggle(by_id("details"), "hidden")),
    WaCallout(id="details", variant="success").text("WebAwesome is mounted."),
)

app = serve(page, packages=["webawesome"])

if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8000)

Run it:

python webawesome_app.py

Open http://127.0.0.1:8000. You should see a styled card, button, and callout. Click the button; the callout disappears. Click it again; it returns without a Python round-trip.

You now have typed WebAwesome components using spaday’s serializable action model. Continue with Generate a bound form when your controls come from a schema.

For a larger responsive page with server-updated metrics and an order-preview round-trip, run the complete operations-console example.