Datastar Server Simulator

Every request below goes through real Datastar v1.0.2. The script <script> type="module" src="./index.js"></script> intercepts window.fetch for /sim/* URLs and answers locally with the same SSE wire format a server would send. Simply removing that script tag will let those requests through to the real server if any.

Signal patching @post('/sim/increment')

Server reads $count, returns count + 1 as a signal patch.

count:

Element patching @post('/sim/greet')

Server reads $name, validates, and morphs the result HTML into #greeting.

Streamed patches @post('/sim/process')

On each run the handler clears #log, then over a few seconds streams $progress signal patches (driving the <progress> bar) interleaved with <li> appends, and finishes with a complete. marker. View transitions are used for smoother patching.

    Continuous SSE patching @get('/sim/log')

    Opened on page load via data-init; a wall-clock timer prepends a new <li> to #live-log every second. The counter is independent of the SSE — it keeps ticking when the stream dies or is paused, so resuming after a pause shows the gap as skipped entry numbers. The buttons below don't open their own streams — their patches ride the open SSE connection.

      Patch modes @post('/sim/patch/:mode')

      All eight datastar-patch-elements modes against the same #patch-target. Each button uses data-indicator:patching, so $patching is true while a request is in flight — bump the latency slider above to see the indicator. The retry options below are forwarded to @post(url, opts); toggle "server unreachable" to watch Datastar back off and give up eventually.

      retry settings

      ℹ️ always retries on every non-204 response, including successes — meant for polling endpoints, not one-shot actions like these. Picking it here will replay the same patch up to retryMaxCount times even after the server recovers.

      existing child

      ℹ️ Enable "server unreachable" setting to see retry in action.

      Element removal @delete('/sim/items/:id')

      Each button hits a unique URL; the handler reads :id from the path and removes #item-{id} via mode: 'remove'. Each delete button uses its own data-indicator:deleting{id} so an in-flight request shows a per-button spinner.

      item one
      item two
      item three

      Non-SSE responses @post('/sim/non-sse/:type')

      Datastar accepts four response content-types from action plugins. Besides text/event-stream, the server can return text/html (DOM patch via datastar-* headers), application/json (signal patch), or text/javascript (script execution). Each handler below returns one of those shapes instead of streaming SSE.

      • HTML response slot: —
      • JSON-patched signal:
      • Script result: — (also logs to console)