PowerSync Now Integrates with TanStack DB

We're excited to announce the release of @tanstack/powersync-db-collection, bringing PowerSync's powerful offline-first and multi-tab capable sync engine to the TanStack DB ecosystem.

Overview

The PowerSync TanStack DB integration bridges PowerSync's SQLite-based sync engine with TanStack DB's reactive query system. This combination enables you to build super fast, offline-capable applications with real-time sync across devices and browser tabs.

What is TanStack DB?

TanStack DB is a reactive client store that provides:

• Blazing fast incremental queries: Live queries update only the parts of the result that changed, enabling extremely fast reads even across multiple collections.

• Automatic reactivity: UI components update automatically when underlying data changes, without manual subscriptions or state wiring.

• Optimistic updates with rollback: Mutations apply instantly for snappy UX, and are safely rolled back if the server request fails.

• Cross-collection queries: Join and query data across multiple collections—including REST endpoint, sync engines (like PowerSync or ElectricSQL), local storage, or in-memory sources—so you can denormalize on the client instead of building bespoke backend endpoints.

What this Integration Adds

This integration brings PowerSync's battle-tested offline and multi-tab capable sync engine to TanStack DB, combining the best of both worlds:

• Offline persistence: Data is stored locally in PowerSync’s SQLite database, enabling fully offline operation with automatic background sync when online again.

• Multi-tab sync: All open tabs stay in sync in real time without any custom coordination.

• Real-time backend sync: Changes sync bi-directionally with your Postgres, MongoDB or MySQL backend, including automatic retries and conflict resolution.

• Plus additional features like type-safe collections, automatic SQLite mirroring, schema validation, rich type mapping, and transaction support.

Learn more about these features in the PowerSync Collection docs.

Get Started

Install the PowerSync collection package along with your preferred framework integration (this example uses PowerSync's Web SDK):

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

Example usage:

import { createCollection, eq, useLiveQuery } from "@tanstack/react-db"
import { powerSyncCollectionOptions } from "@tanstack/powersync-db-collection"
import { Schema, Table, column } from "@powersync/web"

// Define PowerSync schema
const APP_SCHEMA = new Schema({
  documents: new Table({
    name: column.text,
    author: column.text,
    created_at: column.text,
    archived: column.integer,
  }),
})

// Initialize PowerSync database
const db = new PowerSyncDatabase({
  database: { dbFilename: "app.sqlite" },
  schema: APP_SCHEMA,
})

// Create TanStack DB collection
const documentsCollection = createCollection(
  powerSyncCollectionOptions({
    database: db,
    table: APP_SCHEMA.props.documents,
  })
)

// Use in your components with live queries
const { data: documents } = useLiveQuery((q) =>
  q.from({ doc: documentsCollection }).where(({ doc }) => eq(doc.archived, 0))
)

// Mutations apply optimistically and sync automatically (mutations require an implementation of `PowerSyncBackendConnector` for the write path)

documentsCollection.insert({
  id: crypto.randomUUID(),
  name: "New Document",
  author: "John Doe",
  created_at: new Date().toISOString(),
  archived: 0,
})

Visit the docs for more detailed usage instructions.

Framework Support

The PowerSync collection works with all TanStack DB framework adapters:

• React (@tanstack/react-db)

• Vue (@tanstack/vue-db)

• Solid (@tanstack/solid-db)

• Svelte (@tanstack/svelte-db)

• Angular (@tanstack/angular-db)

Learn More

For detailed documentation, examples, and API reference, see:

• PowerSync Collection Documentation

• TanStack DB Overview

• PowerSync Documentation

Feedback and Help

We'd love to learn about your experience with this powerful combination of offline-first sync and reactive queries. Join us on Discord or GitHub to share your feedback and get help.