ElectricSQL Has a Free API: Sync PostgreSQL to the Browser in Real-Time

ElectricSQL syncs data between PostgreSQL and local-first apps — your frontend reads from a local database that stays in sync with the server automatically.

Why ElectricSQL Matters

Traditional apps fetch data from a server on every interaction. ElectricSQL keeps a local copy of your data that syncs automatically — instant reads, offline capability, and real-time collaboration.

What you get for free:

• Automatic bi-directional sync between PostgreSQL and client
• Local-first: reads are instant (no network latency)
• Offline support: app works without internet, syncs when back online
• Real-time collaboration: changes propagate to all clients
• Works with existing PostgreSQL
• Client libraries for React, Vue, and vanilla JS
• Conflict resolution built in (CRDTs)

React Integration

import { useShape } from "@electric-sql/react";

function TodoList() {
  const { data: todos } = useShape({
    url: "http://localhost:3000/v1/shape",
    params: {
      table: "todos",
      where: "completed = false",
    },
  });

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Shape-based Sync

import { ShapeStream } from "@electric-sql/client";

const stream = new ShapeStream({
  url: "http://localhost:3000/v1/shape",
  params: {
    table: "orders",
    columns: ["id", "total", "status", "created_at"],
  },
});

stream.subscribe((messages) => {
  for (const msg of messages) {
    if (msg.headers.operation === "insert") {
      console.log("New order:", msg.value);
    }
  }
});

Server Setup

services:
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: myapp
      POSTGRES_PASSWORD: secret
    ports: ["5432:5432"]

  electric:
    image: electricsql/electric
    environment:
      DATABASE_URL: postgresql://postgres:secret@postgres:5432/myapp
    ports: ["3000:3000"]

Use Cases

• Collaborative tools (Google Docs-style real-time editing)
• Offline-first mobile apps
• Real-time dashboards without polling
• Local-first apps with data ownership on the client

Useful Links

• GitHub
• Documentation
• Examples

---

Building real-time data applications? Check out my developer tools on Apify for ready-made web scrapers, or email [e-mail] for custom solutions.