Installation

Each supported framework comes with its own package. Each framework package re-exports everything from the core @tanstack/db package.

React#

npm install @tanstack/react-db

TanStack DB is compatible with React v18+

Solid#

npm install @tanstack/solid-db

Svelte#

npm install @tanstack/svelte-db

Vue#

npm install @tanstack/vue-db

TanStack DB is compatible with Vue v3.3.0+

Angular#

npm install @tanstack/angular-db

TanStack DB is compatible with Angular v16.0.0+

Vanilla JS#

npm install @tanstack/db

Install the the core @tanstack/db package to use DB without a framework.

Collection Packages#

TanStack DB also provides specialized collection packages for different data sources and storage needs:

Query Collection#

For loading data using TanStack Query:

npm install @tanstack/query-db-collection

Use queryCollectionOptions to fetch data into collections using TanStack Query. This is perfect for REST APIs and existing TanStack Query setups.

Local Collections#

Local storage and in-memory collections are included with the framework packages:

• LocalStorageCollection - For persistent local data that syncs across browser tabs
• LocalOnlyCollection - For temporary in-memory data and UI state

Both use localStorageCollectionOptions and localOnlyCollectionOptions respectively, available from your framework package (e.g., @tanstack/react-db).

SQLite Persistence#

Use a runtime package to save Collection rows in SQLite and load them after an app restart. For a browser app, install the OPFS wrapper and its SQLite engine:

npm install @tanstack/browser-db-sqlite-persistence @journeyapps/wa-sqlite

The SQLite Persistence guide shows the browser setup and lists the mobile, desktop, server, and Durable Object packages. It also explains how to wrap an existing sync adapter.

Offline Transactions#

Use @tanstack/offline-transactions to retain pending mutations and retry them when the server is available:

npm install @tanstack/offline-transactions

The Offline Transactions guide covers web and React Native setup. It also shows how to use the outbox with a SQLite-persisted Collection.

Sync Engines#

Electric Collection#

For real-time sync with ElectricSQL:

npm install @tanstack/electric-db-collection

Use electricCollectionOptions to sync data from Postgres databases through ElectricSQL shapes. Ideal for real-time, local-first applications.

TrailBase Collection#

For syncing with TrailBase backends:

npm install @tanstack/trailbase-db-collection

Use trailBaseCollectionOptions to sync records from TrailBase's Record APIs with built-in subscription support.

PowerSync Collection#

For offline-first sync with PowerSync:

Use powerSyncCollectionOptions to sync data via PowerSync's SQLite-based database with real-time synchronization to PostgreSQL, MongoDB, and MySQL backends. Install the collection package plus the platform-specific PowerSync SDK and SQLite adapter:

Web

npm install @tanstack/powersync-db-collection @powersync/web @journeyapps/wa-sqlite

React Native

npm install @tanstack/powersync-db-collection @powersync/react-native @powersync/op-sqlite @op-engineering/op-sqlite

Or use @journeyapps/react-native-quick-sqlite as an alternative SQLite adapter.

See the PowerSync Collection documentation for setup details.

RxDB Collection#

For offline-first apps and local persistence with RxDB:

npm install @tanstack/rxdb-db-collection

Use rxdbCollectionOptions to bridge an RxDB collection into TanStack DB. This gives you reactive TanStack DB collections backed by RxDB's powerful local-first database, replication, and conflict handling features.