Datastar

SSE LiveRegion, loading indicators, SDK script.

# Datastar SDKScript

Injects the Datastar runtime as an ES module. Load once per page:

# Datastar LiveRegion

SSE-powered region that auto-connects on page load and self-heals across server restarts (retry: 'always'). The server pushes datastar-patch-elements events to patch the content in real-time (no polling). The stream also sends invisible 15s keep-alive comment frames (: ping) so proxies and firewalls keep the connection open — the "streamed at" timestamps below are the visible proof of liveness:

Waiting for SSE stream...

# Datastar Indicator

Shows/hides based on a Datastar indicator signal. Place data-indicator:fetching on any element that triggers a backend action:

# Datastar Action Expressions

Typed helpers for building Datastar action expressions:

datastar actions

datastar.Get("/api/search")       // @get('/api/search')
datastar.Post("/api/save")      // @post('/api/save')
datastar.Delete("/api/items/1") // @delete('/api/items/1')

# Datastar SSE Error Handling

Global listener for Datastar stream failures (datastar-fetch events with type error or retries-failed) that surfaces them as accessible toasts — the Datastar counterpart to HTMX GlobalErrorHandling:

@feedback.ToastContainer("")
@datastar.SSEErrorHandling(datastar.DefaultSSEErrorHandlingConfig())

HTMX vs Datastar

Both work side-by-side. HTMX uses hx-* attributes for hypermedia exchanges. Datastar uses data-* attributes for SSE streaming and reactive signals.

Use HTMX for request-response (forms, navigation, CRUD). Use Datastar for real-time push (dashboards, live feeds, collaborative editing).