Demos & examples¶
Everything documented here runs, and everything that runs is browser-verified — the e2e suite boots each app under a real uvicorn and drives it in headless Chromium, failing on any console error.
The demo gallery¶
One umbrella app mounts all 17 demos behind a landing gallery. Every demo page doubles as an inspector: below the running app you'll find the authored .py + .html, each signal's site → derived transport, each handler's classification (compiled JS vs. server command, with its route), and the served island itself.
| Demo | Path | What it shows |
|---|---|---|
| Issue tracker | /issues |
The flagship. A 5-component tree in one island: live search + multi-select + detail are Local, filter/sort are Url, mutations are Server commands |
/mail |
The unified idiom: one { } interpolation + a projected :each — message bodies stay server-side until a message is opened |
|
| UI kit gallery | /ui-kit |
All 24 situ_ui components, every interaction compiled from Python |
| Virtual grid | /data-grid |
:virtual — 10,000 rows, only the visible window (~40) in the DOM |
| Live poll | /poll |
live=True — a vote in one browser updates every connected client over SSE |
| Spreadsheet | /spreadsheet |
:cells — user-typed formulas (=B2*C2, =SUM(A1:B3)) recompute client-side |
| Theme | /theme |
Provide/Inject — a hierarchical value channel with zero prop-threading |
| Tree | /tree |
:tree — a self-recursive row template rendering to any depth |
| Thread | /thread |
A recursive <Comment> component (one definition is the whole reply tree) |
| Twins | /twins |
The same stateful <Tally/> placed twice — per-placement Local scoping |
| Scoped | /scoped |
Per-component scoped CSS, no Shadow DOM, no runtime |
| Dialog | /dialog |
Depth-2 composition: props thread down two levels, events up two |
| Nested | /nested |
A stateful child reached through a layout component, placed twice, independent |
| Form | /form |
The <Field> substrate: per-field touched state, validity-gated submit |
| Counter tree | /counter-tree |
A Server-sited tree with rollups, re-rendered per command |
| Counter | /counter |
Pure client: nested counters with a compiled client rollup |
| Todos | /todos |
The three-site walkthrough |
Run any demo standalone with uv run litestar --app demos.<name>.app:app run.
The declui example tour¶
Thirteen examples behind a second landing gallery, ordered simplest → capstone: magic_form (a bare dataclass becomes a form), guestbook / user_form (predicates as client binders), zoned_form (layout), reference_form / combobox_form / nested_form (references & one-to-many), task_list / master_detail (lists & selection), form_actions (client actions), sqlalchemy_form (ORM models), server_tracker (the command seam), and issue_tracker — the capstone that generates a whole server master-detail tracker from one model. See declui.
Serving on Flask¶
situ's mount is framework-neutral, so a compiled component runs on Flask (WSGI) as well as Litestar:
examples/flask/app.py mounts a declui server tracker via situ.mount.flask.mount_flask — a Flask Blueprint, the domain service supplied by a plain resolve callable, with no Dishka and no Litestar on the path. See Server components.
The test suite¶
uv run pytest # ~336 tests: unit + real-browser e2e
uv run pytest tests/a_unit -q # the fast tier (~6 s)
The browser tier (tests/e2e/test_browser.py) self-skips unless Playwright + Chromium are installed (uv run playwright install chromium).