<!--
Sitemap:
- [rxfy](/index): Typed, normalized, reactive state — built on RxJS
- [Comparison](/comparison): rxfy versus Redux Toolkit, MobX, Jotai, TanStack Query, and TanStack DB
- [Inspired by](/inspired-by): the libraries and ideas rxfy grew out of
- [Agent Skills](/agent-skills): Accurate rxfy context for AI coding assistants
- [Examples](/examples): Runnable apps, from client-only to fully synced
- [Changelog](/changelog)
- [Getting Started](/getting-started)
- [Create Store](/getting-started/create-store): Normalized reactive state in a client-only app
- [Add SSR](/getting-started/add-ssr): Render the first paint on the server, hydrate with no refetch
- [Add Sync Client](/getting-started/add-sync-client): The full stack: the server publishes, the client syncs
- [Core Concepts](/core-concepts): The ideas rxfy is built on
- [Observables](/core-concepts/observables): A value that changes over time, that you can subscribe to
- [Normalization](/core-concepts/normalization): Store each entity once, reference it by id
- [Late Unwrapping](/core-concepts/late-unwrapping): Unwrap async state at the leaf, not the trunk
- [Server-Side Rendering](/core-concepts/ssr): Dehydrate on the server, hydrate with no refetch
- [rxfy](/rxfy): The core package: atoms, lenses, models, and states
- [createModel](/rxfy/create-model): Typed entities in normalized storage
- [defineState](/rxfy/define-state): Typed, normalized state shapes with fetching and mutations
- [createAtom](/rxfy/create-atom): A reactive cell with synchronous get, set, and modify
- [createLens](/rxfy/create-lens): A two-way view into part of an Atom
- [React Bindings](/react): Hooks and helpers for using rxfy in React
- [useStateData](/react/use-state-data): Fetch, normalize, and subscribe to a query
- [useStatePagedData](/react/use-state-paged-data): Paginated and infinite-scroll lists
- [useModelStore](/react/use-model-store): Subscribe to one normalized entity by id
- [useAtom](/react/use-atom): Two-way binding for any IAtom
- [Pending](/react/pending): Render pending, rejected, and fulfilled UI for any observable
- [usePending](/react/use-pending): The status value behind Pending
- [useObservable](/react/use-observable): Bind a raw Observable to React
- [Sync Client in React](/react/sync-client): StoreProvider, useSyncClient, and update handles
- [rxfy-client](/framework/client): The framework-agnostic browser sync runtime
- [createSyncClient](/framework/client/create-sync-client): Connect a transport and drive the sync loop
- [readSsrGrants](/framework/client/read-ssr-grants): Lift SSR-embedded channel grants
- [rxfy-server](/framework/server): Bind Drizzle tables, write, and publish sync updates
- [defineResource](/framework/server/define-resource): Tie a Drizzle table to an rxfy model
- [createSync](/framework/server/create-server): Wire a storage adapter, hub, and secret into a Live object
- [createInMemoryHub](/framework/server/hub): The socket-keyed pub/sub backbone
- [Writes](/framework/server/writes): sync.create / sync.update / sync.delete and touch
- [Storage adapters](/framework/server/storage-adapters): Persist writes with Drizzle or in memory
- [Sync messages](/framework/server/messages): What travels between server and client
- [Grants](/framework/server/grants): The server signs what it serves; the client subscribes with the token
- [rxfy-ws](/framework/ws): The default WebSocket transport
- [createWsServer](/framework/ws/server): Attach a Hub to WebSocket connections
- [createWsClient](/framework/ws/client): The browser transport with reconnect and replay
- [Custom transports](/framework/ws/custom-transport): Bring your own ClientTransport
- [Guides](/guides): Task-focused walkthroughs of common rxfy patterns
- [Pagination and infinite scroll](/guides/pagination): Load and append pages into one normalized list
-->

# Getting Started

rxfy is one store that scales with you. Start client-only, then go as far as
your app needs: **Create Store → Add SSR → Add Sync Client**. Each level is additive — the
store you build in the first guide is the same store SSR renders and the Sync Client keeps
in sync. Pick where you are:

## Path A — Add rxfy to an existing app

You already have a React app. Adopt rxfy incrementally and stop at any level:

1. **[Create Store](/getting-started/create-store)** — typed models, normalized entities, and
   reactive subscriptions on the client. Two packages (`rxfy`, `rxfy-react`), no server.
2. **[Add SSR](/getting-started/add-ssr)** — render the first paint on the server and hydrate
   it with no refetch. Still no server push.
3. **[Add Sync Client](/getting-started/add-sync-client)** — a server that writes and
   publishes, and a browser Sync Client that subscribes and applies real-time updates.

## Path B — Start fresh with `create-rxfy-app`

Scaffold a standalone app from an official template. Each template lands you on one level,
wired end to end:

:::code-group

```bash [npm]
npm create rxfy-app@latest my-app
```

```bash [pnpm]
pnpm create rxfy-app my-app
```

```bash [yarn]
yarn create rxfy-app my-app
```

:::

Then:

```bash
cd my-app
pnpm install
pnpm dev
```

Pass `--template` (`-t`) to skip the interactive picker:

```bash
npm create rxfy-app@latest my-app -- --template vite-spa
```

### Templates

| Template (`-t`) | Stack                                                                                         |
| --------------- | --------------------------------------------------------------------------------------------- |
| `vite-spa`      | Vite (client-only SPA) — one model, one state, `useStateData`, no server                      |
| `next`          | Next.js (App Router) — SSR store via RSC prefetch + hydrate, isomorphic fetch, server actions |
| `vite`          | Vite + Hono — full sync stack: Vite SSR, React Router, Hono, Drizzle + PGlite, WebSocket sync |

The `vite` template scaffolds the whole loop the [Add Sync Client](/getting-started/add-sync-client)
guide builds by hand — open http://localhost:3000 in two tabs and toggle a todo; the other
tab updates instantly.