> ## Documentation Index
> Fetch the complete documentation index at: https://iii.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a real-time todo app

> End-to-end reactive todo app over a single browser-to-engine WebSocket.

A full-stack reactive todo app over a single browser-to-engine WebSocket. Function calls and live
change notifications flow over the same connection. The app follows the stored records pattern from
[Recipe 2: stored records with live updates](https://iii.dev/docs/next/upgrading/migrate-from-streams.md#recipe-2-stored-records-with-live-updates):
the todo worker owns the data, serves queries, and announces each change by calling
`todos::on-changed`, a function that each browser observes.

## Engine configuration

The workers needed to support a browser-driven reactive app: `state` for storage and an RBAC
listener (`rbac-proxy` or `iii-worker-manager`) for browser connections. No streaming worker is
required.

## Backend

The worker, auth, storage, change notifications, and CRUD functions that power the app server-side.

### Worker setup

Connect a worker and register the functions the app needs.

### Auth function (RBAC)

An auth function runs on each new browser WebSocket connection, issues a session ID, and namespaces
the session's registered functions to prevent collisions. The listener exposes `todos::on-changed`
to the session so the browser can observe it.

### Storage

Todos live in the `state` worker under one scope, one key per todo, each with a revision number that
every write increments.

### Change notifications

The todo worker registers `todos::on-changed` as a private function whose handler returns the change
`{ id, revision, op }`, and calls it after every committed write. When it runs, the target of each
browser's observer runs. Its `onObserverAdded` hook caps the number of browsers that observe it,
rejecting the observer past the cap.

### Functions

The CRUD functions the browser calls (create, toggle, delete) write to storage and then call
`todos::on-changed`. `todos::get` and a paginated `todos::list` serve reads.

## Frontend

The browser-side WebSocket connection and reactive hook that render live updates.

### Connection

Connect the browser to the engine over a single WebSocket using `iii-browser-sdk`.

### Real-time hook

A hook that observes `todos::on-changed` with a browser function as the target, then loads the list
with `todos::list`. Each notification re-reads one todo unless the hook already has that revision,
and the hook reloads the list after a reconnect.

## Key concepts

The reactive primitives this app relies on: single-WebSocket transport, per-session RBAC
namespacing, an observable function for change notifications, and a query for the initial state and
recovery.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.