<script setup> import ProductsGrid from '../src/components/home/ProductsGrid.vue' </script> <style scoped> .guidance-icon { width: 3rem; display: block; margin-top: 32px; margin-bottom: -12px; } </style> <p class="intro-zap-container"> </p>

Electric products

Composable sync primitives that work with your stack.

<ProductsGrid productPage />

How they fit together {#how-they-fit-together}

The sync primitives in the Electric stack are designed to work together and work with your API and existing infrastructure.

In the diagram below, the white boxes are your components / infra.

<figure> <a href="/img/products/electric-stack-overview.lg.jpg" target="_blank"> </a> </figure>

Postgres Sync connects to your Postgres and syncs data over HTTP.

TanStack DB is the recommended client for application development. You can sync data into TanStack DB from Electric and/or from a Durable Stream. It also provides mutation primitives that work with your backend API.

PGlite is mainly used in dev, test and sandbox environments. You can use it as a standalone embedded database or you can sync data into it using Postgres Sync.

Which product should I use?

Building web, mobile and desktop apps?

There are lots of options here. However, for most apps we recommend using Postgres Sync for data sync and TanStack DB for reactive state-management and optimistic mutations in the client.

See the building super-fast apps on sync post for more info.

::: details App development alternatives

• simple apps can use the TypeScript client directly
• TanStack DB apps can load data from your API instead of using a sync engine
• apps can sync data through Durable Streams when it doesn't make sense to go through Postgres, including using Durable State for structured state sync alongside <span class="no-wrap">real-time streams</span>
• web and desktop apps can use PGlite in the client to access the Postgres query engine, data types and extensions like pgvector (if they can tolerate a slightly heavier WASM dependency)
• Elixir apps can use Phoenix.Sync with both LiveView and TanStack DB

:::

Building AI apps and agentic systems?

Use Durable Streams for core durable transport for resilience and resumeability. Combine with TanStack DB for Durable Sessions with persistence and natural support for multi-user, multi-agent collaboration.

You can also use Postgres Sync to sync message history, metadata and structured elements and then join this up into a single, unified, reactive, client data model that combines structured and unstructured data using TanStack DB.

Building your own database or sync protocol?

You can use the lower-level protocol layers of Durable Streams to craft your own sync protocol. Including passing a Standard Schema to the Durable State layer for an instant, type-safe sync protocol tailored to your data schema.

You can also integrate your own sync engine or data source into TanStack DB.

Building a platform or agent runtime?

Embed PGlite for a full, reactive Postgres in your runtime. Including support for extensions like pgvector. This works in any JavaScript runtime, including WebContainers, avoiding the need for external infra dependencies.

You can also design your own TanStack DB collections, to bake reactive data management and custom actions into your runtime APIs.

Next steps

Dive into the individual product pages and documentation.