Electric zap with halo

Quickstart

Let's make a super-fast, reactive web app using Electric with TanStack DB.

Setup

You'll need Node, pnpm and Caddy installed. If you haven't used Caddy before, you'll need to install it's root certificate using:

caddy trust # may require sudo

Why Caddy? Electric uses HTTP/2. Caddy enables HTTP/2 in local development.

A quick way to get started is to run the starter template with local backend services in Docker:

npx gitpick electric-sql/electric/tree/main/examples/tanstack-db-web-starter my-electric-app
cd my-electric-app

Copy the .env.example file to .env:

cp .env.example .env

Install the dependencies:

pnpm install

Start Postgres and Electric running as background services using Docker Compose:

pnpm backend:up

Apply the database migrations:

pnpm migrate

Start the dev server:

pnpm dev

Open the application on https://localhost:5173.

In another terminal, connect to Postgres using psql:

shell

pnpm psql

Update the project name:

sql

UPDATE projects SET name = 'Baz bam!';

The app updates instantly in real-time — across all users and devices.

The starter is a fully-fledged TanStack Start app with routing and auth.

You can edit the code manually. Or it has an AGENTS.md file you can load directly into your AI code editor:

claude "Read Agents.md. Sort the project page todo list alphabetically."

See the starter template README for more details.