---
url: /docs/quickstart.md
description: >-
  Get up-and-running with Electric and TanStack DB. Install, develop and deploy
  a super-fast, reactive web app, based on real-time sync of your Postgres data.
---

# Quickstart

Let's make a super-fast, reactive web app using [Electric with TanStack DB](/blog/2025/07/29/super-fast-apps-on-sync-with-tanstack-db).

> \[!Warning] ✨ Just want to see it in action?
> See the [app running here](https://quickstart.examples.electric-sql.com) or [fork it on StackBlitz](https://stackblitz.com/fork/github/electric-sql/electric/tree/main/examples/tanstack-db-web-starter).

## Setup

You'll need [Node](https://nodejs.org/en), [pnpm](https://pnpm.io) and [Caddy](https://caddyserver.com) installed. If you haven't used Caddy before, you'll need to install it's [root certificate](https://caddyserver.com/docs/command-line#caddy-trust) using:

```sh
caddy trust # may require sudo
```

Why Caddy? Electric [uses HTTP/2](/docs/guides/troubleshooting#slow-shapes-mdash-why-are-my-shapes-slow-in-the-browser-in-local-development). Caddy enables HTTP/2 in local development.

## Get started

:::tabs
\== Cloud (default)

Run the starter script:

```shell
npx @electric-sql/start my-electric-app
```

Start the dev server:

```shell
pnpm dev
```

Open <https://localhost:5173>.

### See the real-time sync

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.

### Develop your app

The starter is a fully-fledged [TanStack Start](https://tanstack.com/start/latest/docs/framework/react/overview) 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:

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

See the [starter template README](https://github.com/electric-sql/electric/blob/main/examples/tanstack-db-web-starter/README.md#developing-your-app) for more details.

### Deploy your app

Claim the [Electric Cloud](/cloud) resources:

```shell
pnpm claim
```

Deploy the app, for example to [Netlify](https://tanstack.com/start/latest/docs/framework/react/hosting#what-is-netlify):

```sh
pnpm deploy
```

Congratulations! You've shipped a super-fast, reactive web app based on real-time sync!

\== Docker

You can also run the [starter template](https://github.com/electric-sql/electric/tree/main/examples/tanstack-db-web-starter) with local backend services in Docker:

```sh
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`:

```sh
cp .env.example .env
```

Install the dependencies:

```sh
pnpm install
```

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

```sh
pnpm backend:up
```

Apply the database migrations:

```sh
pnpm migrate
```

Start the dev server:

```sh
pnpm dev
```

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

## See the real-time sync

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.

## Develop your app

The starter is a fully-fledged [TanStack Start](https://tanstack.com/start/latest/docs/framework/react/overview) 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:

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

See the [starter template README](https://github.com/electric-sql/electric/blob/main/examples/tanstack-db-web-starter/README.md#developing-your-app) for more details.

:::

## Next steps

* learn more about [Super-fast apps on sync with Electric and TanStack DB](/blog/2025/07/29/super-fast-apps-on-sync-with-tanstack-db)
* see the [Interactive guide to TanStack DB](https://frontendatscale.com/blog/tanstack-db).