Symphony State / Open source
Every state source,in concert.
Compose server data, local UI, URL state, persistence, and optimistic updates with one predictable React hook.
React 19 · TypeScript · Apache-2.0
Architecture / 01
Four sources. One score.
Keep each store independent. Symphony State stages their updates, resolves dependencies, and commits one consistent view.
- 01Server cacheTanStack Query / SWR
- 02UI stateLocal component state
- 03URL paramsSearch params / routing
- 04PersistencelocalStorage / IndexedDB
Conductor
Symphony State
Stage → reconcile → derive → commit
Deterministic / observable
Live score / 03
Hear the state change.
Four short moves show URL, server, local, and derived state resolving through one conductor.
Type 'usb' in the filter field
This updates URL state → derived list recomputes instantly. In a typical app, this would be two separate setState calls. Here it's one atomic transaction.
Score
0 eventsThis panel shows the event log — every state transaction, every source change, every derived recomputation. In a real app, this is what you'd see in the Symphony DevTools.
Principles / 04
Clear rules. Fewer surprises.
- 01
Orchestration, not ownership
Each source keeps its store. Symphony State coordinates reads, writes, and conflict resolution across all of them.
- 02
Single-wave commits
Updates are staged, dependency-ordered, and committed atomically. No cascading re-renders or stale intermediate states.
- 03
Observable state
Every value carries its provenance. The Score shows which source is driving, what was reconciled, and why.
- 04
Composable adapters
Atom, Zustand, Redux, TanStack Query, and URL params plug into the stores you already use. No migration required.
- 05
Explicit precedence
Priority, freshness, staleness, and custom rules resolve conflicts between server, optimistic, and persisted state.
- 06
Quiet rendering
Subscribers are notified only for touched sections. Components whose state did not change stay untouched.
Open by default / 05