@livestore/livestore 0.4.0-dev.18 → 0.4.0-dev.19

package/docs/getting-started/vue/index.md

@@ -0,0 +1,286 @@
+# Getting started with LiveStore + Vue
+
+{/* We're adjusting the package to use the dev version on the dev branch */}
+export const manualInstallDepsStr = [
+  '@livestore/livestore' + versionNpmSuffix,
+  '@livestore/wa-sqlite' + versionNpmSuffix,
+  '@livestore/adapter-web' + versionNpmSuffix,
+  '@livestore/utils' + versionNpmSuffix,
+  '@livestore/peer-deps' + versionNpmSuffix,
+  '@livestore/devtools-vite' + versionNpmSuffix,
+  'slashv/vue-livestore' + versionNpmSuffix,
+].join(' ')
+
+## Prerequisites
+
+- Recommended: Bun 1.2 or higher
+- Node.js {MIN_NODE_VERSION} or higher
+
+## About Vue integration
+
+Vue integration is still in beta and being incubated as a separate repository. Please direct any issues or contributions to [Vue LiveStore](https://github.com/slashv/vue-livestore)
+
+## Option A: Quick start
+
+For a quick start, we recommend referencing the [playground](https://github.com/slashv/vue-livestore/tree/main/playground) folder in the Vue LiveStore repository.
+
+## Option B: Existing project setup \{#existing-project-setup\}
+
+<Steps>
+
+1. **Install dependencies**
+
+   It's strongly recommended to use `bun` or `pnpm` for the simplest and most reliable dependency setup (see [note on package management](/misc/package-management) for more details).
+
+   <Tabs syncKey="package-manager">
+     <TabItem label="bun">
+       <Code code={'bun install ' + manualInstallDepsStr} lang="sh" />
+     </TabItem>
+     <TabItem label="pnpm">
+       <Code code={'pnpm add ' + manualInstallDepsStr} lang="sh" />
+     </TabItem>
+     <TabItem label="npm">
+       <Code code={'npm install ' + manualInstallDepsStr} lang="sh" />
+     </TabItem>
+   </Tabs>
+
+2. **Update Vite config**
+
+   Add the following code to your `vite.config.js` file:
+
+    ```ts
+
+    export default defineConfig({
+      plugins: [
+        vue(),
+        vueDevTools(),
+        livestoreDevtoolsPlugin({ schemaPath: './src/livestore/schema.ts' }),
+      ],
+      worker: { format: 'es' },
+    })
+    ```
+
+</Steps>
+
+### Define Your Schema
+
+Create a file named `schema.ts` inside the `src/livestore` folder. This file defines your LiveStore schema consisting of your app's event definitions (describing how data changes), derived state (i.e. SQLite tables), and materializers (how state is derived from events).
+
+Here's an example schema:
+
+## `getting-started/vue/livestore/schema.ts`
+
+```ts filename="getting-started/vue/livestore/schema.ts"
+
+export const tables = {
+  todos: State.SQLite.table({
+    name: 'todos',
+    columns: {
+      id: State.SQLite.text({ primaryKey: true }),
+      text: State.SQLite.text({ default: '' }),
+      completed: State.SQLite.boolean({ default: false }),
+      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
+    },
+  }),
+  uiState: State.SQLite.clientDocument({
+    name: 'uiState',
+    schema: Schema.Struct({ newTodoText: Schema.String, filter: Schema.Literal('all', 'active', 'completed') }),
+    default: { id: SessionIdSymbol, value: { newTodoText: '', filter: 'all' } },
+  }),
+}
+
+export const events = {
+  todoCreated: Events.synced({
+    name: 'v1.TodoCreated',
+    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
+  }),
+  todoCompleted: Events.synced({
+    name: 'v1.TodoCompleted',
+    schema: Schema.Struct({ id: Schema.String }),
+  }),
+  todoUncompleted: Events.synced({
+    name: 'v1.TodoUncompleted',
+    schema: Schema.Struct({ id: Schema.String }),
+  }),
+  todoDeleted: Events.synced({
+    name: 'v1.TodoDeleted',
+    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
+  }),
+  todoClearedCompleted: Events.synced({
+    name: 'v1.TodoClearedCompleted',
+    schema: Schema.Struct({ deletedAt: Schema.Date }),
+  }),
+  uiStateSet: tables.uiState.set,
+}
+
+const materializers = State.SQLite.materializers(events, {
+  'v1.TodoCreated': ({ id, text }) => tables.todos.insert({ id, text, completed: false }),
+  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
+  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
+  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
+  'v1.TodoClearedCompleted': ({ deletedAt }) => tables.todos.update({ deletedAt }).where({ completed: true }),
+})
+
+const state = State.SQLite.makeState({ tables, materializers })
+
+export const schema = makeSchema({ events, state })
+```
+
+### Create the LiveStore Worker
+
+Create a file named `livestore.worker.ts` inside the `src/livestore` folder. This file will contain the LiveStore web worker. When importing this file, make sure to add the `?worker` extension to the import path to ensure that Vite treats it as a worker file.
+
+## `getting-started/vue/livestore/livestore.worker.ts`
+
+```ts filename="getting-started/vue/livestore/livestore.worker.ts"
+
+makeWorker({ schema })
+```
+
+### `getting-started/vue/livestore/schema.ts`
+
+```ts filename="getting-started/vue/livestore/schema.ts"
+
+export const tables = {
+  todos: State.SQLite.table({
+    name: 'todos',
+    columns: {
+      id: State.SQLite.text({ primaryKey: true }),
+      text: State.SQLite.text({ default: '' }),
+      completed: State.SQLite.boolean({ default: false }),
+      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
+    },
+  }),
+  uiState: State.SQLite.clientDocument({
+    name: 'uiState',
+    schema: Schema.Struct({ newTodoText: Schema.String, filter: Schema.Literal('all', 'active', 'completed') }),
+    default: { id: SessionIdSymbol, value: { newTodoText: '', filter: 'all' } },
+  }),
+}
+
+export const events = {
+  todoCreated: Events.synced({
+    name: 'v1.TodoCreated',
+    schema: Schema.Struct({ id: Schema.String, text: Schema.String }),
+  }),
+  todoCompleted: Events.synced({
+    name: 'v1.TodoCompleted',
+    schema: Schema.Struct({ id: Schema.String }),
+  }),
+  todoUncompleted: Events.synced({
+    name: 'v1.TodoUncompleted',
+    schema: Schema.Struct({ id: Schema.String }),
+  }),
+  todoDeleted: Events.synced({
+    name: 'v1.TodoDeleted',
+    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
+  }),
+  todoClearedCompleted: Events.synced({
+    name: 'v1.TodoClearedCompleted',
+    schema: Schema.Struct({ deletedAt: Schema.Date }),
+  }),
+  uiStateSet: tables.uiState.set,
+}
+
+const materializers = State.SQLite.materializers(events, {
+  'v1.TodoCreated': ({ id, text }) => tables.todos.insert({ id, text, completed: false }),
+  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
+  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
+  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
+  'v1.TodoClearedCompleted': ({ deletedAt }) => tables.todos.update({ deletedAt }).where({ completed: true }),
+})
+
+const state = State.SQLite.makeState({ tables, materializers })
+
+export const schema = makeSchema({ events, state })
+```
+
+### Add the LiveStore Provider
+
+To make the LiveStore available throughout your app, wrap your app's root component with the `LiveStoreProvider` component from `vue-livestore`. This provider manages your app's data store, loading, and error states.
+
+Here's an example:
+
+```vue
+<script setup lang="ts">
+
+const adapter = makePersistedAdapter({
+  storage: { type: 'opfs' },
+  worker: LiveStoreWorker,
+  sharedWorker: LiveStoreSharedWorker,
+})
+
+const storeOptions = {
+  schema,
+  adapter,
+  storeId: 'test_store',
+}
+</script>
+
+<template>
+  <LiveStoreProvider :options="storeOptions">
+    <template #loading>
+      <div>Loading LiveStore...</div>
+    </template>
+    <ToDos />
+  </LiveStoreProvider>
+</template>
+```
+
+### Commit events
+
+After wrapping your app with the `LiveStoreProvider`, you can use the `useStore` hook from any component to commit events.
+
+Here's an example:
+
+```vue
+<script setup lang="ts">
+
+const { store } = useStore()
+
+const newTodoText = ref('')
+
+// Events
+const createTodo = () => {
+  store.commit(events.todoCreated({ id: crypto.randomUUID(), text: newTodoText.value }))
+  newTodoText.value = ''
+}
+</script>
+
+<template>
+  <div>
+    <input v-model="newTodoText" />
+    <button @click="createTodo">Create</button>
+  </div>
+</template>
+```
+
+### Queries
+
+To retrieve data from the database, first define a query using `queryDb` from `@livestore/livestore`. Then, execute the query with the `useQuery` hook from `@livestore/react`.
+
+Consider abstracting queries into a separate file to keep your code organized, though you can also define them directly within components if preferred.
+
+Here's an example:
+
+```vue
+<script setup lang="ts">
+
+const visibleTodos$ = queryDb(
+  () => tables.todos.where({ deletedAt: null }),
+  { label: 'visibleTodos' },
+)
+
+const todos = useQuery(visibleTodos$)
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li v-for="todo in todos" :key="todo.id">
+        {{ todo.text }}
+      </li>
+    </ul>
+  </div>
+</template>
+```

package/docs/index.md

@@ -0,0 +1,163 @@
+# Docs
+
+<CardGrid>
+  <LinkCard
+    title="Getting Started"
+    description="Learn how to get started with LiveStore"
+    href="/getting-started/react-web"
+  />
+  <LinkCard
+    title="Evaluation"
+    description="Evaluate LiveStore for your use case"
+    href="/evaluation/design-decisions"
+  />
+  <LinkCard
+    title="Reference"
+    description="Reference documentation for LiveStore"
+    href="/reference/concepts"
+  />
+  <LinkCard
+    title="Patterns"
+    description="A collection of patterns for using LiveStore in different scenarios"
+    href="/patterns/anonymous-user-transition/"
+  />
+  <LinkCard
+    title="Community"
+    description="Community resources for LiveStore"
+    href="/misc/community"
+  />
+  <LinkCard
+    title="Contributing"
+    description="Contributing to LiveStore"
+    href="/contributing/contributing"
+  />
+</CardGrid>
+
+## State of the documentation
+
+Please note that the documentation is still work in progress with many parts missing and often only containing notes/bullet points.
+
+### Docs for LLMs
+
+We support the [llms.txt](https://llmstxt.org/) convention for making documentation available to large language models and the applications that make use of them.
+
+Currently, we have the following root-level files:
+
+- [Code of Conduct](/misc/CODE_OF_CONDUCT/): Our code of conduct for the LiveStore community.
+- [Community](/misc/community/)
+- [Troubleshooting](/misc/troubleshooting/): Common issues in apps using LiveStore and possible solutions.
+- [Credits](/misc/credits/): Credits and acknowledgements
+- [Frequently Asked Questions](/misc/FAQ/): Frequently asked questions about LiveStore
+- [Note on Package Management](/misc/package-management/)
+- [Sponsoring LiveStore](/misc/sponsoring/)
+- [Design Partners](/misc/design-partners/)
+- [Resources](/misc/resources/): Resources, assets, logos, etc about LiveStore
+- [Overview and prerequisites](/tutorial/0-welcome/)
+- [1. Set up starter project with React, Vite & Tailwind](/tutorial/1-setup-starter-project/)
+- [4. Sync data to Cloudflare](/tutorial/4-sync-data-via-cloudflare/)
+- [6. Persist UI state](/tutorial/6-persist-ui-state/)
+- [5. Expand business logic with more events](/tutorial/5-expand-business-logic/)
+- [2. Deploy to Cloudflare Workers](/tutorial/2-deploy-to-cloudflare/)
+- [Next steps](/tutorial/7-next-steps/)
+- [3. Read and write todos via LiveStore](/tutorial/3-read-and-write-todos-via-livestore/)
+- [Offline Support](/patterns/offline/)
+- [Side effect](/patterns/side-effects/): How to run side-effects for LiveStore events
+- [List Ordering](/patterns/list-ordering/): Implement drag-and-drop list ordering with fractional indexing
+- [Effect](/patterns/effect/)
+- [Version control](/patterns/version-control/)
+- [Anonymous user transition](/patterns/anonymous-user-transition/): How to transition an anonymous user to a logged in user
+- [File Management](/patterns/file-management/): How to manage files with LiveStore
+- [Rich Text Editing](/patterns/rich-text-editing/)
+- [Auth](/patterns/auth/)
+- [Encryption](/patterns/encryption/)
+- [State Machines](/patterns/state-machines/): How to use state machines with LiveStore
+- [App Evolution](/patterns/app-evolution/): How to evolve your app and roll out new app versions
+- [Storybook Testing (React)](/patterns/storybook/): How to set up LiveStore with Storybook for component development and testing in React.
+- [External Data](/patterns/external-data/)
+- [Undo/Redo](/patterns/undo-redo/): How to implement undo/redo functionality with LiveStore
+- [File Structure](/patterns/file-structure/)
+- [Presence](/patterns/presence/): How to implement presence functionality with LiveStore
+- [ORM](/patterns/orm/): How to use an ORM with LiveStore
+- [AI](/patterns/ai/): How to use LiveStore to build AI applications
+- [Monorepo](/contributing/monorepo/): Notes on the monorepo setup of LiveStore.
+- [Contributing](/contributing/contributing/): Notes for developers interested in contributing to LiveStore.
+- [Docs](/contributing/docs/): Notes on contributing to the LiveStore docs
+- [Docs](//)
+- [Getting started with LiveStore + Vue](/getting-started/vue/): How to use LiveStore with Vue.
+- [Expo](/getting-started/expo/): Learn how to use LiveStore with Expo.
+- [Solid](/getting-started/solid/): Learn how to use LiveStore with Solid.
+- [Node](/getting-started/node/): Learn how to use LiveStore with Node.
+- [Getting started with LiveStore + React](/getting-started/react-web/): How to use LiveStore with React on the web.
+- [Expo Adapter Examples](/examples/expo-adapter/): LiveStore examples built with the Expo adapter for React Native mobile applications
+- [Web Adapter Examples](/examples/web-adapter/): LiveStore examples built with the Web adapter for browser environments
+- [Examples](/examples/): Explore LiveStore example applications across different platforms and use cases
+- [Node Adapter Examples](/examples/node-adapter/): LiveStore examples built with the Node adapter for server-side environments
+- [Cloudflare Durable Objects Examples](/examples/cloudflare-adapter/): LiveStore examples built with the Cloudflare adapter for edge computing and Durable Objects
+- [API Reference](/api/)
+- [Technology comparison](/evaluation/technology-comparison/): How LiveStore compares to other related technologies
+- [Event Sourcing](/evaluation/event-sourcing/): Why and how LiveStore uses event sourcing for data flow, syncing and migrations.
+- [How LiveStore works](/evaluation/how-livestore-works/)
+- [Performance](/evaluation/performance/)
+- [When to use LiveStore (and when not)](/evaluation/when-livestore/): Considerations when deciding to use LiveStore.
+- [Design Decisions](/evaluation/design-decisions/): Design decisions and trade-offs made in the development of LiveStore
+- [State of the project](/evaluation/state-of-the-project/): A high-level overview of the current state of the project.
+- [Complex UI state](/data-modeling/complex-ui-state/): How to model complex UI state in LiveStore.
+- [Data Modeling](/data-modeling/): How to model data in LiveStore.
+- [Todo app with shared workspaces](/data-modeling/todo-workspaces/): How to model a todo workspace app with shared workspaces in LiveStore.
+- [AI agent](/data-modeling/ai-agent/): How to model an AI agent in LiveStore.
+- [Turn-based game](/data-modeling/turnbased-game/): How to model a turn-based game in LiveStore.
+- [Expo Adapter](/reference/platform-adapters/expo-adapter/)
+- [Web Adapter](/reference/platform-adapters/web-adapter/): Information about LiveStore's web adapter
+- [Cloudflare Durable Object Adapter](/reference/platform-adapters/cloudflare-durable-object-adapter/)
+- [Tauri Adapter](/reference/platform-adapters/tauri-adapter/)
+- [Node Adapter](/reference/platform-adapters/node-adapter/)
+- [Electron Adapter](/reference/platform-adapters/electron-adapter/)
+- [LiveStore CLI](/reference/cli/): Command-line interface for LiveStore project scaffolding and development tools.
+- [Devtools](/reference/devtools/)
+- [Events](/reference/events/)
+- [Concepts](/reference/concepts/): Concepts in LiveStore
+- [Store](/reference/store/)
+- [React integration for LiveStore](/reference/framework-integrations/react-integration/): How to integrate LiveStore with React.
+- [Custom Elements](/reference/framework-integrations/custom-elements/): How to integrate LiveStore with Custom Elements aka Web Components.
+- [Vue integration for LiveStore](/reference/framework-integrations/vue-integration/): How to integrate LiveStore with Vue.
+- [Solid integration](/reference/framework-integrations/solid-integration/): How to integrate LiveStore with Solid.
+- [SQL Queries](/reference/state/sql-queries/)
+- [Materializers](/reference/state/materializers/)
+- [SQLite State Schema](/reference/state/sqlite-schema/)
+- [SQLite in LiveStore](/reference/state/sqlite/): Notes on how to use SQLite in LiveStore
+- [SQLite State Schema (Effect Schema)](/reference/state/sqlite-schema-effect/)
+- [Reactivity System](/reference/reactivity-system/)
+- [Debugging a LiveStore app](/reference/debugging/)
+- [OpenTelemetry](/reference/opentelemetry/)
+- [MCP Integration](/reference/mcp/): Model Context Protocol integration for AI assistants like Claude.
+- [Syncing](/reference/syncing/)
+- [Server-side clients](/reference/syncing/server-side-clients/)
+- [S2](/reference/syncing/sync-provider/s2/): Use the official S2 backend with LiveStore via @livestore/sync-s2
+- [Cloudflare Workers](/reference/syncing/sync-provider/cloudflare/)
+- [Build your own sync provider](/reference/syncing/sync-provider/custom/)
+- [ElectricSQL](/reference/syncing/sync-provider/electricsql/)
+
+
+### NPM packages
+
+- Main package: <NpmLink packageName="livestore" />
+- Framework integrations:
+  - React: <NpmLink packageName="react" />
+  - Solid: <NpmLink packageName="solid" />
+- Platform adapters:
+  - Web: <NpmLink packageName="adapter-web" />
+  - Expo: <NpmLink packageName="adapter-expo" />
+  - Node: <NpmLink packageName="adapter-node" />
+- Sync provider:
+  - Cloudflare: <NpmLink packageName="sync-cf" />
+  - Electric: <NpmLink packageName="sync-electric" />
+- Devtools:
+  - Vite: <NpmLink packageName="devtools-vite" />
+  - Expo: <NpmLink packageName="devtools-expo" />
+- SQLite packages:
+  - sqlite-wasm (wrapper around wa-sqlite): <NpmLink packageName="sqlite-wasm" />
+  - wa-sqlite fork: <NpmLink packageName="wa-sqlite" />
+- Internal packages:
+  - <NpmLink packageName="peer-deps" />
+  - <NpmLink packageName="utils" />
+  - <NpmLink packageName="common" />

package/docs/llms.txt

@@ -0,0 +1,103 @@
+# LiveStore Documentation for LLMs
+
+> LiveStore is a client-centric local-first data layer for high-performance apps based on SQLite and event-sourcing.
+
+## Notes
+
+- Most LiveStore APIs are synchronous and don't need `await`
+
+## Docs
+
+- [Code of Conduct](/misc/CODE_OF_CONDUCT/): Our code of conduct for the LiveStore community.
+- [Community](/misc/community/)
+- [Troubleshooting](/misc/troubleshooting/): Common issues in apps using LiveStore and possible solutions.
+- [Credits](/misc/credits/): Credits and acknowledgements
+- [Frequently Asked Questions](/misc/FAQ/): Frequently asked questions about LiveStore
+- [Note on Package Management](/misc/package-management/)
+- [Sponsoring LiveStore](/misc/sponsoring/)
+- [Design Partners](/misc/design-partners/)
+- [Resources](/misc/resources/): Resources, assets, logos, etc about LiveStore
+- [Overview and prerequisites](/tutorial/0-welcome/)
+- [1. Set up starter project with React, Vite & Tailwind](/tutorial/1-setup-starter-project/)
+- [4. Sync data to Cloudflare](/tutorial/4-sync-data-via-cloudflare/)
+- [6. Persist UI state](/tutorial/6-persist-ui-state/)
+- [5. Expand business logic with more events](/tutorial/5-expand-business-logic/)
+- [2. Deploy to Cloudflare Workers](/tutorial/2-deploy-to-cloudflare/)
+- [Next steps](/tutorial/7-next-steps/)
+- [3. Read and write todos via LiveStore](/tutorial/3-read-and-write-todos-via-livestore/)
+- [Offline Support](/patterns/offline/)
+- [Side effect](/patterns/side-effects/): How to run side-effects for LiveStore events
+- [List Ordering](/patterns/list-ordering/): Implement drag-and-drop list ordering with fractional indexing
+- [Effect](/patterns/effect/)
+- [Version control](/patterns/version-control/)
+- [Anonymous user transition](/patterns/anonymous-user-transition/): How to transition an anonymous user to a logged in user
+- [File Management](/patterns/file-management/): How to manage files with LiveStore
+- [Rich Text Editing](/patterns/rich-text-editing/)
+- [Auth](/patterns/auth/)
+- [Encryption](/patterns/encryption/)
+- [State Machines](/patterns/state-machines/): How to use state machines with LiveStore
+- [App Evolution](/patterns/app-evolution/): How to evolve your app and roll out new app versions
+- [Storybook Testing (React)](/patterns/storybook/): How to set up LiveStore with Storybook for component development and testing in React.
+- [External Data](/patterns/external-data/)
+- [Undo/Redo](/patterns/undo-redo/): How to implement undo/redo functionality with LiveStore
+- [File Structure](/patterns/file-structure/)
+- [Presence](/patterns/presence/): How to implement presence functionality with LiveStore
+- [ORM](/patterns/orm/): How to use an ORM with LiveStore
+- [AI](/patterns/ai/): How to use LiveStore to build AI applications
+- [Monorepo](/contributing/monorepo/): Notes on the monorepo setup of LiveStore.
+- [Contributing](/contributing/contributing/): Notes for developers interested in contributing to LiveStore.
+- [Docs](/contributing/docs/): Notes on contributing to the LiveStore docs
+- [Docs](//)
+- [Getting started with LiveStore + Vue](/getting-started/vue/): How to use LiveStore with Vue.
+- [Expo](/getting-started/expo/): Learn how to use LiveStore with Expo.
+- [Solid](/getting-started/solid/): Learn how to use LiveStore with Solid.
+- [Node](/getting-started/node/): Learn how to use LiveStore with Node.
+- [Getting started with LiveStore + React](/getting-started/react-web/): How to use LiveStore with React on the web.
+- [Expo Adapter Examples](/examples/expo-adapter/): LiveStore examples built with the Expo adapter for React Native mobile applications
+- [Web Adapter Examples](/examples/web-adapter/): LiveStore examples built with the Web adapter for browser environments
+- [Examples](/examples/): Explore LiveStore example applications across different platforms and use cases
+- [Node Adapter Examples](/examples/node-adapter/): LiveStore examples built with the Node adapter for server-side environments
+- [Cloudflare Durable Objects Examples](/examples/cloudflare-adapter/): LiveStore examples built with the Cloudflare adapter for edge computing and Durable Objects
+- [API Reference](/api/)
+- [Technology comparison](/evaluation/technology-comparison/): How LiveStore compares to other related technologies
+- [Event Sourcing](/evaluation/event-sourcing/): Why and how LiveStore uses event sourcing for data flow, syncing and migrations.
+- [How LiveStore works](/evaluation/how-livestore-works/)
+- [Performance](/evaluation/performance/)
+- [When to use LiveStore (and when not)](/evaluation/when-livestore/): Considerations when deciding to use LiveStore.
+- [Design Decisions](/evaluation/design-decisions/): Design decisions and trade-offs made in the development of LiveStore
+- [State of the project](/evaluation/state-of-the-project/): A high-level overview of the current state of the project.
+- [Complex UI state](/data-modeling/complex-ui-state/): How to model complex UI state in LiveStore.
+- [Data Modeling](/data-modeling/): How to model data in LiveStore.
+- [Todo app with shared workspaces](/data-modeling/todo-workspaces/): How to model a todo workspace app with shared workspaces in LiveStore.
+- [AI agent](/data-modeling/ai-agent/): How to model an AI agent in LiveStore.
+- [Turn-based game](/data-modeling/turnbased-game/): How to model a turn-based game in LiveStore.
+- [Expo Adapter](/reference/platform-adapters/expo-adapter/)
+- [Web Adapter](/reference/platform-adapters/web-adapter/): Information about LiveStore's web adapter
+- [Cloudflare Durable Object Adapter](/reference/platform-adapters/cloudflare-durable-object-adapter/)
+- [Tauri Adapter](/reference/platform-adapters/tauri-adapter/)
+- [Node Adapter](/reference/platform-adapters/node-adapter/)
+- [Electron Adapter](/reference/platform-adapters/electron-adapter/)
+- [LiveStore CLI](/reference/cli/): Command-line interface for LiveStore project scaffolding and development tools.
+- [Devtools](/reference/devtools/)
+- [Events](/reference/events/)
+- [Concepts](/reference/concepts/): Concepts in LiveStore
+- [Store](/reference/store/)
+- [React integration for LiveStore](/reference/framework-integrations/react-integration/): How to integrate LiveStore with React.
+- [Custom Elements](/reference/framework-integrations/custom-elements/): How to integrate LiveStore with Custom Elements aka Web Components.
+- [Vue integration for LiveStore](/reference/framework-integrations/vue-integration/): How to integrate LiveStore with Vue.
+- [Solid integration](/reference/framework-integrations/solid-integration/): How to integrate LiveStore with Solid.
+- [SQL Queries](/reference/state/sql-queries/)
+- [Materializers](/reference/state/materializers/)
+- [SQLite State Schema](/reference/state/sqlite-schema/)
+- [SQLite in LiveStore](/reference/state/sqlite/): Notes on how to use SQLite in LiveStore
+- [SQLite State Schema (Effect Schema)](/reference/state/sqlite-schema-effect/)
+- [Reactivity System](/reference/reactivity-system/)
+- [Debugging a LiveStore app](/reference/debugging/)
+- [OpenTelemetry](/reference/opentelemetry/)
+- [MCP Integration](/reference/mcp/): Model Context Protocol integration for AI assistants like Claude.
+- [Syncing](/reference/syncing/)
+- [Server-side clients](/reference/syncing/server-side-clients/)
+- [S2](/reference/syncing/sync-provider/s2/): Use the official S2 backend with LiveStore via @livestore/sync-s2
+- [Cloudflare Workers](/reference/syncing/sync-provider/cloudflare/)
+- [Build your own sync provider](/reference/syncing/sync-provider/custom/)
+- [ElectricSQL](/reference/syncing/sync-provider/electricsql/)