/Documents/SQLite/app.db`
To open the database in Finder, run the following command in your terminal:
```bash
open $(xcrun simctl get_app_container booted [APP_BUNDLE_ID] data)/Documents/SQLite
```
Replace `[APP_BUNDLE_ID]` with your app's bundle ID. e.g. `dev.livestore.livestore-expo`.
## Further notes
- LiveStore doesn't yet support Expo Web (see [#130](https://github.com/livestorejs/livestore/issues/130))
# [Node](https://livestore.dev/docs/getting-started/node/)
## Overview
TODO
# [React Web](https://livestore.dev/docs/getting-started/react-web/)
## Overview
import { Steps, Tabs, TabItem, Code } from '@astrojs/starlight/components';
import viteConfigCode from '../../../../../../examples/standalone/web-todomvc/vite.config.js?raw'
import eventsCode from '../../../../../../examples/standalone/web-todomvc/src/livestore/events.ts?raw'
import schemaCode from '../../../../../../examples/standalone/web-todomvc/src/livestore/schema.ts?raw'
import workerCode from '../../../../../../examples/standalone/web-todomvc/src/livestore/livestore.worker.ts?raw'
import rootCode from '../../../../../../examples/standalone/web-todomvc/src/Root.tsx?raw'
import headerCode from '../../../../../../examples/standalone/web-todomvc/src/components/Header.tsx?raw'
import mainSectionCode from '../../../../../../examples/standalone/web-todomvc/src/components/MainSection.tsx?raw'
export const CODE = {
viteConfig: viteConfigCode,
events: eventsCode,
schema: schemaCode,
worker: workerCode,
root: rootCode,
header: headerCode,
mainSection: mainSectionCode,
}
### Option A: Quick start
For a quick start, we recommend using our template app following the steps below.
For existing projects, see [Existing project setup](#existing-project-setup).
1. **Set up project from template**
```shell
bunx tiged --mode=git git@github.com:livestorejs/livestore/examples/standalone/web-linearlite my-app
```
Replace `my-app` with your desired app name.
2. **Install dependencies**
It's strongly recommended to use `bun` or `pnpm` for the simplest and most reliable dependency setup (see [note on package management](/docs/misc/package-management) for more details).
```bash
bun install
```
```bash
pnpm install
```
```bash
npm install
```
Pro tip: You can use [direnv](https://direnv.net/) to manage environment variables.
3. **Run dev environment**
```shell
bun dev
```
```shell
pnpm dev
```
```shell
npm run dev
```
4. **Open browser**
Open `http://localhost:60000` in your browser.
You can also open the devtools by going to `http://localhost:60000/_livestore`.
### Option B: Existing project setup \{#existing-project-setup\}
1. **Install dependencies**
```shell
bun add @livestore/livestore @livestore/wa-sqlite @livestore/adapter-web @livestore/react @livestore/utils @livestore/peer-deps @livestore/devtools-vite
```
```shell
pnpm add @livestore/livestore @livestore/wa-sqlite @livestore/adapter-web @livestore/react @livestore/utils @livestore/peer-deps @livestore/devtools-vite
```
```shell
npm install @livestore/livestore @livestore/wa-sqlite @livestore/adapter-web @livestore/react @livestore/utils @livestore/peer-deps @livestore/devtools-vite
```
2. **Update Vite config**
Add the following code to your `vite.config.js` file:
...
}
```
### useQuery
```tsx
import { useStore } from '@livestore/react'
const query$ = tables.todos.query.where({ completed: true }).orderBy('createdAt', 'desc')
const CompletedTodos = () => {
const { store } = useStore()
const todos = store.useQuery(query$)
return {todos.map((todo) =>
{todo.text}
)}
updateTodo({ text: 'Hello, world!' })}>{todo.text}
}
```
## Usage with ...
### Vite
LiveStore works with Vite out of the box.
### Tanstack Start
LiveStore works with Tanstack Start out of the box.
### Expo / React Native
LiveStore has a first-class integration with Expo / React Native via `@livestore/adapter-expo`.
### Next.js
Given various Next.js limitations, LiveStore doesn't yet work with Next.js out of the box.
## Technical notes
- `@livestore/react` uses `React.useState` under the hood for `useQuery` / `useClientDocument` to bind LiveStore's reactivity to React's reactivity. Some libraries are using `React.useExternalSyncStore` for similar purposes but using `React.useState` in this case is more efficient and all that's needed for LiveStore.
- `@livestore/react` supports React Strict Mode.
# [Electron Adapter](https://livestore.dev/docs/reference/Platform%20Adapters/electron-adapter/)
## Overview
LiveStore doesn't yet support Electron (see [this issue](https://github.com/livestorejs/livestore/issues/296) for more details).
# [Solid integration](https://livestore.dev/docs/reference/Framework%20Integrations/solid-integration/)
## Overview
import { Code } from '@astrojs/starlight/components';
import solidStoreCode from '../../../../../../../examples/standalone/web-todomvc-solid/src/livestore/store.tsx?raw'
import solidMainSectionCode from '../../../../../../../examples/standalone/web-todomvc-solid/src/components/MainSection.tsx?raw'
## Example
See [examples](/examples) for a complete example.