Loading LiveStore...
- {{ todo.text }}
{value}
}
```
#### Solid
```ts
import { query } from '@livestore/solid'
const MyComponent = () => {
const value = query(state$)
return {value}
}
```
## Further reading
- [Riffle](https://riffle.systems/essays/prelude/): Building data-centric apps with a reactive relational database
- [Adapton](http://adapton.org/) / [miniAdapton](https://arxiv.org/pdf/1609.05337)
## Related technologies
- [Signia](https://signia.tldraw.dev/): Signia is a minimal, fast, and scalable signals library for TypeScript developed by TLDraw.
# [Store](https://docs.livestore.dev/reference/store/)
## Overview
The `Store` is the most common way to interact with LiveStore from your application code. It provides a way to query data, commit events, and subscribe to data changes.
## Creating a store
For how to create a store in React, see the [React integration docs](/reference/framework-integrations/react-integration). The following example shows how to create a store manually:
```ts
import { createStorePromise } from '@livestore/livestore'
import { schema } from './livestore/schema.js'
const adapter = // ...
const store = await createStorePromise({
schema,
adapter,
storeId: 'some-store-id',
})
```
## Using a store
### Querying data
```ts
const todos = store.query(tables.todos)
```
### Subscribing to data
```ts
const unsubscribe = store.subscribe(tables.todos, (todos) => {
console.log(todos)
})
```
### Committing events
```ts
store.commit(events.todoCreated({ id: '1', text: 'Buy milk' }))
```
### Shutting down a store
```ts
await store.shutdown()
```
## Multiple Stores
You can create and use multiple stores in the same app. This can be useful when breaking up your data model into smaller pieces.
## Development/debugging helpers
A store instance also exposes a `_dev` property that contains some helpful methods for development. For convenience you can access a store on `globalThis`/`window` like via `__debugLiveStore.default._dev` (`default` is the store id):
```ts
// Download the SQLite database
__debugLiveStore.default._dev.downloadDb()
// Download the eventlog database
__debugLiveStore.default._dev.downloadEventlogDb()
// Reset the store
__debugLiveStore.default._dev.hardReset()
// See the current sync state
__debugLiveStore.default._dev.syncStates()
```
# [Custom Elements](https://docs.livestore.dev/reference/framework-integrations/custom-elements/)
## Overview
import { Code } from '@astrojs/starlight/components';
import customElementsCode from '../../../../../../examples/standalone/web-todomvc-custom-elements/src/main.ts?raw'
LiveStore can be used with custom elements/web components.
## Example
See [examples](/examples) for a complete example.
...
}
```
### 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) =>
}
```
### useClientDocument
```tsx
import { useStore } from '@livestore/react'
const TodoItem = ({ id }: { id: string }) => {
const { store } = useStore()
const [todo, updateTodo] = store.useClientDocument(tables.todos, id)
return {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.
# [SQLite State Schema](https://docs.livestore.dev/reference/state/sqlite-schema/)
## Overview
import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
import schemaCode from '../../../../../../examples/standalone/web-todomvc/src/livestore/schema.ts?raw'
LiveStore provides a schema definition language for defining your database tables and mutation definitions. LiveStore automatically migrates your database schema when you change your schema definitions.
### Example
Loading LiveStore...
- {{ todo.text }}
| Dark PNG | Dark SVG | Light PNG | Light SVG |
|---|---|---|---|
|
|
|
|