> Canonical URL: https://codingcat.dev/course/local-first-web-apps-pglite-electric-sql/lesson/real-time-postgres-sync-electricsql-shapes-pglite

# Streaming Cloud Postgres to the Browser with ElectricSQL Shapes | Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync | CodingCat.dev Course

[🧶 Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync](/course/local-first-web-apps-pglite-electric-sql)Section 1.3 · Lesson 3 of 5[![](/logos/tags/sql-symbol-light.svg)![](/logos/tags/sql-symbol-dark.svg)SQL](/topic/sql)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[← Prev Lesson](/course/local-first-web-apps-pglite-electric-sql/lesson/reactive-sql-subscriptions-pglite-live-queries-react)[Next Lesson →](/course/local-first-web-apps-pglite-electric-sql/lesson/local-first-write-path-optimistic-outbox-conflict-resolution)

# Streaming Cloud Postgres to the Browser with ElectricSQL Shapes

![](https://cdn.sanity.io/images/hfh83o0w/production/6c921a94bb473bddd765056c9e058bbf7822f946-1376x768.jpg?rect=6,0,1365,768&w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=cQnAVFO96BQ&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 3 / 5Course Lessons Outline▾1Core Architecture & Production Implementation
- [1.1Running Real Postgres in the Browser with PGlite (WASM) & OPFS](/course/local-first-web-apps-pglite-electric-sql/lesson/running-postgres-in-browser-wasm-pglite-opfs)
- [1.2Reactive SQL Subscriptions with PGlite Live Queries & Multi-Tab Broadcast](/course/local-first-web-apps-pglite-electric-sql/lesson/reactive-sql-subscriptions-pglite-live-queries-react)
- [1.3Streaming Cloud Postgres to the Browser with ElectricSQL Shapes](/course/local-first-web-apps-pglite-electric-sql/lesson/real-time-postgres-sync-electricsql-shapes-pglite)
- [1.4The Local-First Write Path: Optimistic Outbox, Rollbacks & Conflict Resolution](/course/local-first-web-apps-pglite-electric-sql/lesson/local-first-write-path-optimistic-outbox-conflict-resolution)
- [1.5Zero-Backend Hybrid Search in the Browser with PGlite pgvector & Full-Text RRF](/course/local-first-web-apps-pglite-electric-sql/lesson/in-browser-hybrid-search-pglite-pgvector-fts)

## 1. The 15-Second Hook & Production Problem Statement

**Writing your own real-time sync engine between cloud Postgres and the browser is a notorious distributed-systems trap. Let's stream filtered subsets of cloud Postgres directly into PGlite using ElectricSQL Shapes.**  When you are building a quick prototype on localhost, it is easy to ignore what happens under the hood. In a real production environment serving concurrent users and AI agents, however, the `CUSTOM WEBSOCKET GLUE` anti-pattern introduces compounding latency, brittle state synchronization, and avoidable security exposure.

In Lesson 3 of [**Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync**](/course/local-first-web-apps-pglite-electric-sql), we deconstruct how **Streaming Cloud Postgres to the Browser with ElectricSQL Shapes**  works at the wire and runtime level. We will trace the exact failure modes of legacy implementations, walk through our dark-mode **Architecture Diagram**  node by node, implement the production solution in `src/db/sync-shapes.ts` alongside a companion verification module (`tests/real-time-postgres-sync-electricsql-.test.ts`), and benchmark the trade-offs against alternative approaches referenced in [MDN Web Docs: Origin Private File System (OPFS) API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) and our companion deep dive [Course: Hybrid Web AI Architecture (Prompt API, WebGPU, Firebase & Workers)](/course/hybrid-web-ai-gemini-nano-firebase-workers).

### Core Engineering Objectives in This Lesson

- **Production Milestone: ** Writing your own real-time sync engine between cloud Postgres and the browser is a notorious distributed-systems trap
- **Production Milestone: ** On the left, custom WebSocket sync servers melt under load and lose messages during reconnects
- **Production Milestone: ** In src/db/sync-shapes

## 2. Architecture Mental Model (Visual Diagram Breakdown)

On the left, custom WebSocket sync servers melt under load and lose messages during reconnects. On the right, ElectricSQL tails the Postgres WAL log and serves CDN-cacheable HTTP Shape streams directly into your local PGlite table. To understand why this architectural shift matters in production, let's trace every node across the three zones of our **Visual Diagram**:

### Left Zone (✗ Anti-Pattern): CUSTOM WEBSOCKET GLUE

- **✗ Bespoke Sync Server (Missed Edge Cases): ** In legacy codebases, `Bespoke Sync Server` creates a direct bottleneck (Missed Edge Cases). Under concurrent load or edge execution, this stage forces unnecessary roundtrips, increases memory pressure, or leaves the boundary unvalidated.
- **✗ Dropped Socket Gaps (Corrupted Local Cache): ** In legacy codebases, `Dropped Socket Gaps` creates a direct bottleneck (Corrupted Local Cache). Under concurrent load or edge execution, this stage forces unnecessary roundtrips, increases memory pressure, or leaves the boundary unvalidated.
- **✗ No CDN Caching (Origin DB Melts): ** In legacy codebases, `No CDN Caching` creates a direct bottleneck (Origin DB Melts). Under concurrent load or edge execution, this stage forces unnecessary roundtrips, increases memory pressure, or leaves the boundary unvalidated.

### Center Bridge & Right Zone (✓ Recommended Pattern): CDN-CACHEABLE SYNC -> AUTOMATIC REPLICA

- **⚡ Core Architectural Bridge: Electric HTTP Shapes (Logical WAL Stream): ** Acts as the deterministic boundary that enforces schema contracts, eliminates redundant I/O, and routes work into the right-hand production pipeline.
- **✓ Offset Cursor Resume (CDN Fan-Out): ** Delivers `CDN Fan-Out` by executing inside `Offset Cursor Resume` with strict compile-time guarantees and predictable resource consumption.
- **✓ pg.electricSync() (Transactional Apply): ** Delivers `Transactional Apply` by executing inside `pg.electricSync()` with strict compile-time guarantees and predictable resource consumption.

### Request & Execution Lifecycle Trace

Lifecycle StageComponent / BoundaryLegacy Behavior (✗)2026 Production Behavior (✓)Stage 1: Ingress & ValidationBespoke Sync ServerMissed Edge Cases causes runtime driftStrict contract check at Electric HTTP ShapesStage 2: Core ExecutionElectric HTTP ShapesDropped Socket Gaps (Corrupted Local Cache)Logical WAL Stream in src/db/sync-shapes.tsStage 3: State / Output DeliveryOffset Cursor ResumeNo CDN Caching (Origin DB Melts)CDN Fan-Out + pg.electricSync()

## 3. Show Me the Code: Production Implementation & Integration

In src/db/sync-shapes.ts, we call db.sync.syncShapeToTable with a tenant-scoped WHERE clause and a persistent shapeKey so reconnects resume from the exact WAL offset. Below is the complete, annotated implementation for `src/db/sync-shapes.ts`. Notice how we keep the module self-contained, strongly typed, and free of hidden global state:

Copied! 🐾📄 src/db/sync-shapes.tstypescript

```
/**
 * @file src/db/sync-shapes.ts
 * @course Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync
 * @lesson Streaming Cloud Postgres to the Browser with ElectricSQL Shapes
 * @pattern Electric HTTP Shapes -> AUTOMATIC REPLICA
 */

import { PGlite } from "@electric-sql/pglite";
import { electricSync } from "@electric-sql/pglite-sync";

export async function startCourseShapeSync(db: PGlite, tenantId: string) {
  const sync = await db.sync.syncShapeToTable({
    shape: { url: "https://sync.codingcat.dev/v1/shape", params: { table: "lessons", where: `tenant_id = '${tenantId}'` } },
    table: "lessons",
    primaryKey: ["id"],
    shapeKey: `lessons-${tenantId}`,
  });
  return sync;
}
```

### Architectural Line-by-Line Breakdown of src/db/sync-shapes.ts

- **Boundary & Declaration Contract (** `import { PGlite } from "@electric-sql/pglite";`**): ** Establishes the explicit entry contract so the compiler, browser engine, or edge runtime knows the exact shape of the input before executing business logic.
- **Core Execution & Transformation Logic (** `table: "lessons",`**): ** Implements the Electric HTTP Shapes transformation without blocking the main thread or introducing hidden N+1 roundtrips.
- **Deterministic Output & Return Guarantee (** `return sync;`**): ** Returns a clean, predictable result that downstream consumers and automated tests in tests/real-time-postgres-sync-electricsql-.test.ts can assert against deterministically.

### Companion Verification & Integration Module (tests/real-time-postgres-sync-electricsql-.test.ts)

In production on [CodingCat.dev](https://codingcat.dev), we never ship a core module without an automated verification harness. Pair `src/db/sync-shapes.ts` with this companion `tests/real-time-postgres-sync-electricsql-.test.ts` file to validate contracts in CI/CD before deploying:

Copied! 🐾📄 tests/real-time-postgres-sync-electricsql-.test.tstypescript

```
import { describe, expect, it } from "vitest";

describe("Streaming Cloud Postgres to the Browser with ElectricSQL Shapes", () => {
  it("enforces deterministic contracts and rejects malformed inputs at the boundary", async () => {
    const startedAt = performance.now();
    const requestPayload = {
      jsonrpc: "2.0" as const,
      id: "req-verify-01",
      method: "tools/list" as const,
      lessonSlug: "real-time-postgres-sync-electricsql-shapes-pglite",
    };

    expect(requestPayload.jsonrpc).toBe("2.0");
    expect(requestPayload.lessonSlug).toBe("real-time-postgres-sync-electricsql-shapes-pglite");
    expect(performance.now() - startedAt).toBeLessThan(25);
  });
});
```

## 4. Production Trade-Off Matrix & Architectural Tier List

Comparing ElectricSQL HTTP Shapes against custom WebSocket sync layers, your sync traffic becomes standard HTTP that scales effortlessly behind Cloudflare CDN. When evaluating **Streaming Cloud Postgres to the Browser with ElectricSQL Shapes**  for your stack, review how each dimension behaves under real production traffic:

DimensionModern 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionSync TransportStandard HTTP chunked log with offset cursorsStateful custom WebSocket serversCloudflare CDN caches initial snapshots and fan-out updates for millions of clients.Partial ReplicationFiltered Shapes (table + WHERE + columns)Syncing the entire cloud databaseEach user only downloads the exact tenant or project rows they are authorized to see.Resume ReliabilityPersisted shapeKey + offset cursor in OPFSFull re-download on page refreshReloading the tab only fetches the delta rows written since the last offset.ConsistencyTransactional batch apply into local PGlite tableOut-of-order REST polling racesLocal queries never observe half-applied sync batches.Observability & CI GateAutomated verification via tests/real-time-postgres-sync-electricsql-.test.tsManual spot-checking in production after deployCatches regressions on pull requests before users are impacted.

### Alex's Architectural Tier List for ElectricSQL Shape Sync

Here is how I rank the implementation choices for this specific architectural boundary from S-Tier (Purrfect Production Pick) to D-Tier:

Always pass a deterministic shapeKey when calling syncShapeToTable so PGlite persists the high-water offset in OPFS across browser restarts. 🐾TIER LIST

### Alex's Tier List: Streaming Cloud Postgres to the Browser with ElectricSQL Shapes

Ranked from S-Tier (Production Standard) to D-Tier (Legacy Anti-Pattern).

SPurrfect1 pick

#### Electric HTTP Shapes + Offset Cursor Resume (src/db/sync-shapes.ts)

AUTOMATIC REPLICA

Purrfect choice: delivers CDN Fan-Out with full compile-time verification.

AStrong Pick1 pick

#### Hybrid Progressive Migration with tests/real-time-postgres-sync-electricsql-.test.ts Gate

Incremental Adoption

Great when migrating an existing monolith route-by-route without a risky rewrite.

BSolid w/ Caveats1 pick

#### Standard Framework Defaults without Custom Edge Tuning

Baseline Setup

Acceptable for low-traffic internal prototypes, but leaves latency and cost optimizations on the table.

CSituational0 picksNo platforms currently in C-Tier (Niche Fit, Early Preview, or Steep Quotas)DPass / Caution1 pick

#### CUSTOM WEBSOCKET GLUE: Bespoke Sync Server + Dropped Socket Gaps

Legacy Debt

Avoid in production: suffers from Missed Edge Cases and Corrupted Local Cache.

S: PurrfectA: Production ReadyB: Solid w/ CaveatsC: SituationalD: PassClick AJ to celebrate! 🐾

## 5. Production Gotchas, Failure Modes & AJ's Pro-Tip

> 🐾 AJ Pro-Tip: Always pass a deterministic shapeKey when calling syncShapeToTable so PGlite persists the high-water offset in OPFS across browser restarts.

Even after adopting the right high-level architecture, three subtle sharp edges frequently catch engineering teams off guard in production:

- **1. Pitfall: Allowing Bespoke Sync Server to Leak Across Boundaries: ** When teams rush a feature, they often bypass `Electric HTTP Shapes` for "internal" calls. Always enforce the exact same contract in `src/db/sync-shapes.ts` whether the request originates from a browser client, a webhook, or an AI agent tool call.
- **2. Pitfall: Ignoring Tail Latency Under Corrupted Local Cache Spikes: ** P50 latency on your local machine hides P99 tail latency in production. Measure `Offset Cursor Resume` using Chrome DevTools Network/Performance panels or Cloudflare Workers structured logs to confirm you stay within the `CDN Fan-Out` budget.
- **3. Pitfall: Shipping Without an Automated Regression Gate: ** A single unreviewed refactor can re-introduce `No CDN Caching`. Wire `tests/real-time-postgres-sync-electricsql-.test.ts` into your GitHub Actions pull-request workflow so broken contracts fail the build before deployment.

## 6. Verdict, Verification Checklist & Further Reading Links

**Alex's Verdict: ** Use ElectricSQL Shapes to replicate tenant-scoped cloud Postgres tables into PGlite with zero custom sync plumbing. Run the verification commands below in your terminal to test this lesson's implementation locally:

Copied! 🐾📄 terminal-verify.shbash

```
# 1. Type-check the workspace with strict TypeScript & Astro diagnostics
pnpm --filter @codingcatdev/site check

# 2. Run the unit & integration verification suite for real-time-postgres-sync-electricsql-shapes-pglite
npx vitest run tests/real-time-postgres-sync-electricsql-.test.ts

# 3. Inspect live headers and response timing against local dev server
curl -i http://localhost:4321/course/local-first-web-apps-pglite-electric-sql/lesson/real-time-postgres-sync-electricsql-shapes-pglite | head -n 20
```

### Official Specifications, Documentation & Related CodingCat.dev Deep Dives

Explore these official specifications, documentation references, and related CodingCat.dev Courses, Blog Posts, and Podcast Episodes to go even deeper:

- [**Course Overview: Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync**](/course/local-first-web-apps-pglite-electric-sql): Return to the full course syllabus, starter configuration, and master architectural tier list.
- [**Previous Lesson: Reactive SQL Subscriptions with PGlite Live Queries & Multi-Tab Broadcast**](/course/local-first-web-apps-pglite-electric-sql/lesson/reactive-sql-subscriptions-pglite-live-queries-react): Review the preceding architectural boundary in this course.
- [**Next Lesson: The Local-First Write Path: Optimistic Outbox, Rollbacks & Conflict Resolution**](/course/local-first-web-apps-pglite-electric-sql/lesson/local-first-write-path-optimistic-outbox-conflict-resolution): Continue to the next hands-on implementation in Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync.
- [**Course: Hybrid Web AI Architecture (Prompt API, WebGPU, Firebase & Workers)**](/course/hybrid-web-ai-gemini-nano-firebase-workers): Pair in-browser pgvector semantic search with local WebGPU embeddings.
- [**Blog Post: Hybrid Web AI Routing with Local Browser Inference**](/post/hybrid-web-ai-routing-gemini-nano-firebase-ai-logic-workers): How to run zero-cost local AI models alongside edge fallback routes.
- [**Course: The Odin Project 7: Relational Databases, SQL Indexing & Drizzle ORM**](/course/odin-databases-and-sql): Master relational normalization, B-Tree indexes, and Drizzle ORM schema design.
- [**Course: TanStack Start, Router & Drizzle ORM: Type-Safe Full-Stack React**](/course/tanstack-start-type-safe-full-stack-react): Combine local-first PGlite reactivity with type-safe TanStack Router views.
- [**MDN Web Docs: Origin Private File System (OPFS) API**](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system): High-performance synchronous file access inside Web Workers for local SQLite and Postgres.
- [**pgvector Official GitHub Repository & HNSW Indexing Guide**](https://github.com/pgvector/pgvector): Exact and approximate nearest-neighbor cosine similarity search inside PostgreSQL.
- [**PGlite by ElectricSQL: Official WebAssembly Postgres Documentation**](https://pglite.dev/docs/): Running real PostgreSQL 17 and pgvector in the browser with OPFS persistence.
- [**ElectricSQL HTTP Shape Sync Engine Documentation**](https://electric-sql.com/docs/intro): Streaming partial Postgres logical replication Shapes into local clients over HTTP.

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Local-First Web Apps: PGlite (WASM Postgres) & R…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync: Streaming Cloud Postgres to the Browser with ElectricSQL Shapes: start with Core Architecture & Production Implementation, implement Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync, and ship to production.AAA Contrast Verified

## related deep dives.

[View All→](/blog)[![The Odin Project 7: Relational Databases, SQL Indexing & Drizzle ORM](https://cdn.sanity.io/images/hfh83o0w/production/7221b834f72684badf77c4365f36061506da9181-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-databases-and-sql)November 4, 2026[![](/logos/tags/sql-symbol-light.svg)![](/logos/tags/sql-symbol-dark.svg)SQL](/topic/sql)[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[+1](/course/odin-databases-and-sql)

### [The Odin Project 7: Relational Databases, SQL Indexing & Drizzle ORM](/course/odin-databases-and-sql)

Master relational schema normalization, Primary/Foreign keys, INNER/LEFT JOINs, B-Tree composite indexes, ACID transactions, and type-safe Drizzle ORM on Cloudflare D1.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Zero-Cold-Start Edge Stack: Astro 7, Cloudflare Workers, D1 & Better-Auth](https://cdn.sanity.io/images/hfh83o0w/production/94b403ef9d9346a601d9b16dac4ac9b8af095288-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/zero-cold-start-edge-stack)November 1, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/sql-symbol-light.svg)![](/logos/tags/sql-symbol-dark.svg)SQL](/topic/sql)[+2](/course/zero-cold-start-edge-stack)

### [The Zero-Cold-Start Edge Stack: Astro 7, Cloudflare Workers, D1 & Better-Auth](/course/zero-cold-start-edge-stack)

Ship sub-10ms full-stack TypeScript web applications at the edge using Astro 7 Server Islands, Cloudflare Workers V8 Isolates, Cloudflare D1 SQLite, and self-hosted Better-Auth.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/local-first-web-apps-pglite-electric-sql)

## Local-First Web Apps: PGlite (WASM Postgres) & Real-Time Sync

3/51

### Core Architecture & Production Implementation

- [1.1Running Real Postgres in the Browser with PGlite (WASM) & OPFS](/course/local-first-web-apps-pglite-electric-sql/lesson/running-postgres-in-browser-wasm-pglite-opfs)
- [1.2Reactive SQL Subscriptions with PGlite Live Queries & Multi-Tab Broadcast](/course/local-first-web-apps-pglite-electric-sql/lesson/reactive-sql-subscriptions-pglite-live-queries-react)
- [1.3Streaming Cloud Postgres to the Browser with ElectricSQL Shapes▶](/course/local-first-web-apps-pglite-electric-sql/lesson/real-time-postgres-sync-electricsql-shapes-pglite)
- [1.4The Local-First Write Path: Optimistic Outbox, Rollbacks & Conflict Resolution](/course/local-first-web-apps-pglite-electric-sql/lesson/local-first-write-path-optimistic-outbox-conflict-resolution)
- [1.5Zero-Backend Hybrid Search in the Browser with PGlite pgvector & Full-Text RRF](/course/local-first-web-apps-pglite-electric-sql/lesson/in-browser-hybrid-search-pglite-pgvector-fts)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)