Electric SQL Has a Free API You're Not Using

Electric SQL syncs PostgreSQL data to local SQLite in real-time. Your app works offline, syncs when connected, and resolves conflicts automatically.

The Free APIs You're Missing

1. Shape Streams — Real-Time Partial Replication

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

const stream = new ShapeStream({
  url: "http://localhost:3000/v1/shape",
  params: {
    table: "posts",
    where: "published = true",
    columns: ["id", "title", "content", "author_id"],
  },
});

const shape = new Shape(stream);
shape.subscribe(({ rows }) => {
  console.log("Current data:", rows);
  // Automatically updates when PostgreSQL data changes!
});

2. React Integration — useShape Hook

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

function PostList() {
  const { data: posts, isLoading } = useShape({
    url: "http://localhost:3000/v1/shape",
    params: { table: "posts", where: "published = true" },
  });

  if (isLoading) return <Spinner />;
  return posts.map(post => <PostCard key={post.id} post={post} />);
  // Component re-renders automatically when data changes in PostgreSQL!
}

3. Optimistic Updates — Instant UI

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

function TodoApp() {
  const { data: todos, mutate } = useShape({ url, params: { table: "todos" } });

  const addTodo = async (text: string) => {
    // Optimistic: update UI immediately
    const optimisticTodo = { id: crypto.randomUUID(), text, done: false };
    mutate.insert(optimisticTodo);

    // Then sync to server
    await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify({ text }),
    });
  };
}

4. HTTP API — Language-Agnostic

# Subscribe to changes (Server-Sent Events)
curl -N "http://localhost:3000/v1/shape?table=posts&offset=-1"

# With filtering
curl -N "http://localhost:3000/v1/shape?table=orders&where=status=pending&columns=id,total,customer_id"

Works from any language — not just JavaScript.

5. PGLite Integration — In-Browser PostgreSQL

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

const pg = await PGlite.create({
  extensions: {
    electric: electricSync(),
  },
});

await pg.electric.syncShapeToTable({
  url: "http://localhost:3000/v1/shape",
  params: { table: "posts" },
  table: "posts",
  primaryKey: ["id"],
});

// Now query with full SQL!
const result = await pg.query(`
  SELECT p.title, a.name as author
  FROM posts p JOIN authors a ON p.author_id = a.id
  WHERE p.published = true
  ORDER BY p.created_at DESC
`);

Full PostgreSQL running in the browser, synced with your server.

Getting Started

npm install @electric-sql/client @electric-sql/react

---

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: [e-mail]

Check out my awesome-web-scraping list for the best scraping tools and resources.