TanStack DB
Reactive client store
Query your API data like local reactive state.
DB turns synced API data into typed collections, then runs live queries over them so joins, filters, optimistic writes, and derived UI stay fast and consistent without hand-built client state.
00.0 MillionTotal Downloads000,000,000Weekly Downloads0GitHub Stars
The first brownfield, backend-agnostic sync engine for frontend apps.
Collections
typed sets of synced API data
Live queries
joins, filters, aggregates, reactivity
Local writes
optimistic transactions and rollback
Why DB
Server state gets awkward when the UI needs a data graph.
Query is excellent for fetching and caching resources. DB adds the reactive relational layer that product apps eventually need: local collections, cross-collection queries, optimistic transactions, and incremental updates.
Collections make API data queryable.
Load, sync, or persist typed records into collections, then query the data your UI actually needs instead of spreading derived state through components.
Live queries update the result, not the whole app.
DB uses differential dataflow to recompute only the changed parts of joins, filters, and aggregates, so large local graphs still feel instant.
Local writes are first-class.
Optimistic mutations can stage transactions across collections, update the UI immediately, then commit or rollback with lifecycle support.
Sync strategy can evolve with the product.
Start with REST, GraphQL, tRPC, TanStack Query, Electric, PowerSync, Trailbase, or your own collection creator without changing how components query.
1
Collect
API records enter typed collections from sync engines, query functions, persistence, or custom loaders.
2
Query
The UI declares the live query shape: filters, joins, includes, aggregates, ordering, and limits.
3
Increment
When data changes, DB updates only the affected query results instead of recomputing the full graph.
4
Render
Framework adapters subscribe components to the result so the view stays current without manual cache wiring.
Differential dataflow
The view is a query over collections.
DB keeps normalized collections in memory, then updates live query results incrementally as records change. The UI describes the data shape; DB keeps it current.
Query-driven sync
Let the component query become the loading contract.
When sync mode is on demand, DB can pass query predicates, ordering, and limits to your loader. Map that shape to an API precisely, or start broad and let DB filter locally while your API catches up.
useLiveQuery((q) =>
q.from({ issue: issuesCollection })
.join({ project: projectsCollection }, ({ issue, project }) =>
eq(issue.projectId, project.id))
.orderBy(({ issue }) => issue.updatedAt, "desc"))
predicate
where issue.projectId = route.params.id
subset
load only the records this live query can see
dedupe
shared requirements collapse into fewer network calls
fallback
fetch broad, filter client-side, optimize later
Framework adapters
A data model below your renderer.
Use the adapter that fits your app while keeping collections, live queries, transactions, and sync strategy in the same DB model.
ReactVueSolidSvelteVanilla
Product shape
Use DB when a cache starts wanting to be a database.
It is built for apps with real relationships, local writes, subset loading, sync engines, persistence, and UI-shaped derived data. Keep Query for request orchestration; bring in DB when the client needs a reactive data graph.
Open source ecosystem
DB is being shaped with teams building data-heavy products.
Maintainers, examples, sync integrations, partners, and GitHub sponsors keep the reactive data layer close to production app problems.
Maintainers
Partners
DB You?
We're looking for
TanStack DB
Partners to join our mission! Partner with us to push the boundaries of
TanStack DB
and build amazing things together.
Only one thing left to do...