zerotalFlow, live
Flow is Zerotal's server-driven UI layer — each component is a TypeScript class that lives on the server, with decorators exposing state and actions to the browser over a WebSocket. These pages are the real thing, running now. Poke at them, then read how each one works in the docs.
CounterThe one distinction that runs everything: a method reference is a server action (round-trips), an arrow function is a client expression (instant). Same syntax as React.Reactive lists & optimistic collections<For> compiles to a reactive Alpine list, so appendOptimistic/removeOptimistic show a row the instant you click and reconcile when the server confirms.Streaming @taskAn async @task streams a field's writes to the browser as they happen — the AI-answer / live-log primitive — with a loading state and $flow.cancel().AI chatA streaming chat page with zero client JavaScript — no /api/chat route, no EventSource. The tokens are a server-side loop writing a field, and Cancel aborts the generation itself.Forms & real-time validation@validate rules checked on the server as you type; the field's error appears and clears with no action call and no client validation library.ComponentsThe batteries-included kit: modals, drawers, dropdowns, tabbed panels and headless toggles — driven by one bound prop, and instant client-side.Headless primitivesSwitch, Select, Listbox, Combobox, Disclosure, Accordion, Popover, Tooltip — unstyled and accessible, emitting data-* state you paint with Tailwind variants.IslandsNested components, each with its own isolated state and update cycle — bump one and only that island re-renders. Props flow in through setup().Live & pollingA poll directive calls a server action on an interval, so the component re-renders with fresh server state — a live clock with no client timer code.Drag to reorderonSort + sortItem give drag-and-drop reordering that calls a server action with the new index — the ordered list stays server-authoritative.flow-ui component kit20 representative components from @zerotal/flow-ui — buttons, cards, dialogs, tables, form controls — themed by CSS variables and yours to own with flow:add. The catalogue documents all 53.