State that syncs
across every client

Drop-in real-time sync for React. One line of code.
Optimistic updates, offline support, and zero boilerplate.

Get Started Star on GitHub

$npx @better-state/server|

Try it instantly. No config required.

Counter.tsx

1import { BetterStateProvider, useBetterState } from '@better-state/react'

3function Counter() {

4 // 1. Use the hook. It feels like useState.

5 const [count, setCount, updateCount] = useBetterState('counter', 0)

7 return (

8 <div>

9 <h1>{count}</h1>

10 {/* 2. Update it. Changes sync instantly. */}

11 <button onClick={() => updateCount(n => n + 1)}>

12 Increment

13 </button>

14 </div>

15 )

16}

Everything you need

Built for production. Designed for developer experience.

Optimistic Updates

UI updates instantly on the client. Server confirms in the background. Zero loading spinners, zero latency.

Real-Time Sync

WebSocket-powered broadcast. Every connected client sees changes the instant they happen.

Event Log & Replay

Every mutation is recorded with full history. Replay, inspect, and time-travel debug via the Studio.

Server Authoritative

Cloud-first architecture. The server is always the source of truth. No split-brain, no data loss.

Tiny React Hook

useBetterState('key', initial) — that's the whole API. Feels like useState, syncs like magic.

Built-in Studio

Monitor every state key, watch live mutations, browse event history. Ships free with the server.

How it works

Optimistic UI first. Server authority second.

Client A Server Client B │ │ │ │ counter.update(n=>n+1) │ │ │ ── apply locally ── │ │ │ ── send mutation ─────► │ ── append to event log │ │ │ ── replay → new state │ │ ◄── broadcast ───────── │ ── broadcast ──────────► │ │ (update local) │ │ (update local)