Skip to content

Commit 4422fd7

Browse files
thruflothruflo
committed
docs: simplify new primary quickstart flow.
1 parent 24a9f62 commit 4422fd7

File tree

2 files changed

+26
-107
lines changed

2 files changed

+26
-107
lines changed

‎website/docs/quickstart.md‎

Lines changed: 25 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Quickstart
33
description: >-
44
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.
5-
outline: 2
5+
outline: [2,3]
66
---
77

88
<p class="intro-zap-container">
@@ -14,7 +14,7 @@ outline: 2
1414

1515
# Quickstart
1616

17-
Let's make a super-fast, reactive web app <span class="no-wrap-xs">using [Electric](/product/electric) with [TanStack&nbsp;DB](#product/tanstack-db)</span>.
17+
Let's make a super-fast, reactive web app using <span class="no-wrap-xs">[Electric with TanStack&nbsp;DB](/blog/2025/07/29/local-first-sync-with-tanstack-db)</span>.
1818

1919
<div style="max-width: 632px">
2020

@@ -23,153 +23,66 @@ Let's make a super-fast, reactive web app <span class="no-wrap-xs">using [Electr
2323
2424
</div>
2525

26+
## Get started
27+
2628
:::tabs
2729
== Electric Cloud (default)
2830

2931
Run the starter script:
3032

3133
```shell
32-
pnpx @electric-sql/start my-electric-app
34+
npx @electric-sql/start my-electric-app
3335
```
3436

35-
This generates a [TanStack Start](https://tanstack.com/start/latest/docs/framework/react/overview) app in `my-electric-app` and runs a [Postgres database](https://electric-sql.com/docs/guides/deployment#_1-running-postgres) and [Electric sync service](https://electric-sql.com/docs/guides/deployment#_2-running-electric) for you in the [Electric Cloud](/product/cloud).
36-
37-
You can then run the app locally using:
37+
Start the dev server:
3838

3939
```shell
4040
pnpm dev
4141
```
4242

43-
Open in your web browser at [localhost:5173](http://localhost:5173).
44-
45-
### Postgres sync
43+
Open [https://localhost:5173](https://localhost:5173).
4644

47-
Lets change some data in Postgres and see the app instantly react.
45+
## See the real-time sync
4846

49-
Arrange your windows so you can see the app running in your web browser and your terminal at the same time. Open the "Default" project page in the browser.
50-
51-
Then in your terminal, connect to Postgres using `psql`:
47+
In another terminal, connect to Postgres using `psql`:
5248

5349
```shell
5450
pnpm psql
5551
```
5652

57-
This will open the psql shell:
58-
59-
```
60-
psql (17.4, server 17.6)
61-
Type "help" for help.
62-
63-
electric=#
64-
```
65-
6653
Update the project name:
6754

6855
```sql
6956
UPDATE projects SET name = 'Baz bam!';
7057
```
7158

72-
Keep changing the project name. The app updates instantly in real-time &mdash; for all users.
73-
74-
### Develop the app
75-
76-
The starter app is a fully-fledged [TanStack Start](https://tanstack.com/start) application with routing and auth, ready for you to build out into a real app.
77-
78-
#### Changing the code
79-
80-
Let's change the code and see what happens. Open a project page in your browser and add a few todos. Note that new todo items are sorted last, at the bottom of the list.
81-
82-
Open up the code for the project page in `src/routes/_authenticated/project/$projectId.tsx`. You can see the live query for the todo list towards the top of the `ProjectPage` component:
83-
84-
```tsx
85-
const { data: todos } = useLiveQuery(
86-
(q) =>
87-
q
88-
.from({ todoCollection })
89-
.where(({ todoCollection }) =>
90-
eq(todoCollection.project_id, projectId, 10)
91-
)
92-
.orderBy(({ todoCollection }) => todoCollection.created_at),
93-
[projectId]
94-
)
95-
```
96-
97-
This queries the local TanStack DB `todoCollection` for todos that belong to the current project and sorts them by `created_at`. The default sort order is `asc`. Let's update the code to make that explicit.
98-
99-
```tsx
100-
const direction = 'asc'
101-
102-
const { data: todos } = useLiveQuery(
103-
(q) =>
104-
q
105-
.from({ todoCollection })
106-
.where(({ todoCollection }) =>
107-
eq(todoCollection.project_id, parseInt(projectId, 10))
108-
)
109-
.orderBy(({ todoCollection }) => todoCollection.created_at, direction),
110-
[projectId, direction]
111-
)
112-
```
113-
114-
Now, with the browser page open and visible, toggle the direction value between `asc` and `desc`:
115-
116-
```tsx
117-
const direction = 'desc'
118-
```
119-
120-
You'll see the todo list re-ordering live in the page.
59+
The app updates instantly in real-time &mdash; across all users and devices.
12160

122-
See the blog post introducing [developing with Electric and TanStack DB](/blog/2025/07/29/local-first-sync-with-tanstack-db) and the [Interactive Guide to TanStack DB](https://frontendatscale.com/blog/tanstack-db/) for a high level intro on the stack.
61+
## Develop your app
12362

124-
Dive into the [Tutorial](tutorial.md) for a more in-depth walkthrough of how to develop out a production-quality app with Electric and TanStack DB.
63+
The starter is a fully-fledged [TanStack Start](https://tanstack.com/start/latest/docs/framework/react/overview) app with routing and auth.
12564

126-
#### Using coding agents
65+
You can edit the code manually. Or it has an `AGENTS.md` file you can load directly into your AI code editor:
12766

128-
The quickstart template ships with an `AGENTS.md` file. Load this into your LLM and have it make changes for you.
129-
130-
For example:
131-
132-
```
133-
Read AGENTS.md. Sort the todo list on the project page alphabetically.
67+
```sh
68+
claude "Read Agents.md. Sort the project page todo list alphabetically."
13469
```
13570

136-
### Claim the resources
137-
138-
The Postgres database and Electric sync service provisioned when you generated the app are temporary. They'll be scaled down automatically and then deleted in a few days time.
139-
140-
To continue using them, you can claim them. This allows you to create or sign-in to accounts with Electric Cloud (for the sync service) and Neon (for the database hosting) and move the resources into your accounts so you can manage and control them.
71+
## Deploy your app
14172

142-
To claim the resources run:
73+
Claim the [Electric Cloud](/product/cloud) resources:
14374

14475
```shell
14576
pnpm claim
14677
```
14778

148-
Follow the instructions in the your web browser.
149-
150-
### Deploy and share the app
151-
152-
To deploy your local app to [Netlify](https://tanstack.com/start/latest/docs/framework/react/hosting#what-is-netlify), run:
79+
Deploy the app to [Netlify](https://tanstack.com/start/latest/docs/framework/react/hosting#what-is-netlify):
15380

15481
```sh
15582
pnpm deploy
15683
```
15784

158-
TanStack Start is designed to work with any hosting provider. See the [Hosting docs](https://tanstack.com/start/latest/docs/framework/react/hosting) for instructions.
159-
160-
161-
162-
163-
164-
165-
166-
so if you already have a hosting provider in mind, you can deploy your application there using the full-stack APIs provided by TanStack Start.
167-
168-
169-
170-
TanStack Start is a full-stack framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more. Thanks to Vite, it's ready to develop and deploy to any hosting provider or runtime you want!
171-
172-
- [ ] deploy the app
85+
Congratulations! You've shipped a super-fast, reactive web app!
17386

17487
== Docker Compose
17588

@@ -180,3 +93,9 @@ TanStack Start is a full-stack framework powered by TanStack Router. It provides
18093
... manual install flow ...
18194

18295
:::
96+
97+
## Next steps
98+
99+
<!-- - follow the [Tutorial](/docs/tutorial) to evolve your starter into a production-quality app. -->
100+
- learn more about [Local-first sync with Electric and TanStack DB](/blog/2025/07/29/local-first-sync-with-tanstack-db)
101+
- see the [Interactive guide to TanStack DB](https://frontendatscale.com/blog/tanstack-db).

‎website/docs/stacks.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ For example, sync into [LiveStore](https://docs.livestore.dev/reference/syncing/
267267

268268
[Tanstack DB](https://tanstack.com/db) is a reactive client store for [building super fast apps on&nbsp;sync](https://tanstack.com/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query).
269269

270-
Paired with [Electric](/) and [TanStack Start](https://tanstack.com/start), it gives you an end-to-end sync stack that's type-safe, declarative, incrementally adoptable and insanely fast.
270+
[Paired with Electric](/blog/2025/07/29/local-first-sync-with-tanstack-db) and [TanStack Start](https://tanstack.com/start), it gives you an end-to-end sync stack that's type-safe, declarative, incrementally adoptable and insanely fast.
271271

272272
### End-to-end Typescript
273273

0 commit comments

Comments
 (0)