# Docs

import { CardGrid, LinkCard } from '@astrojs/starlight/components';
import { officeHours } from '../../data/data.ts'
import { liveStoreVersion } from '@livestore/common'
import NpmLink from '../../components/NpmLink.astro'
import LlmsShort from '../../components/LlmsShort.astro'

<CardGrid>
  <LinkCard
    title="Getting started"
    description="Learn how to get started with LiveStore"
    href="/getting-started/react-web"
  />
    <LinkCard
    title="Introduction"
    description="Introduction to LiveStore"
    href="/overview/introduction"
  />
  <LinkCard
    title="Evaluation"
    description="Evaluate LiveStore for your use case"
    href="/understanding-livestore/design-decisions"
  />
  <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="/sustainable-open-source/contributing/info"
  />
</CardGrid>

## State of the documentation

Please note that the documentation is still work in progress. Please [leave feedback](https://github.com/livestorejs/livestore/issues) if you didn't find the information you were looking for and [consider contributing](/sustainable-open-source/contributing/docs) yourself.

### 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:

- [Docs](/index)

## Getting started

- [Getting started with LiveStore + React](/getting-started/react-web): How to use LiveStore with React on the web.
- [Expo](/getting-started/expo): Learn how to use LiveStore with Expo.
- [Node](/getting-started/node): Learn how to use LiveStore with Node.
- [Solid](/getting-started/solid): Learn how to use LiveStore with Solid.
- [Getting started with LiveStore + Vue](/getting-started/vue): How to use LiveStore with Vue.

## Tutorial

- [Overview and prerequisites](/tutorial/0-welcome)
- [1. Set up starter project with React, Vite & Tailwind](/tutorial/1-setup-starter-project)
- [2. Deploy to Cloudflare Workers](/tutorial/2-deploy-to-cloudflare)
- [3. Read and write todos via LiveStore](/tutorial/3-read-and-write-todos-via-livestore)
- [4. Sync data to Cloudflare](/tutorial/4-sync-data-via-cloudflare)
- [5. Expand business logic with more events](/tutorial/5-expand-business-logic)
- [6. Persist UI state](/tutorial/6-persist-ui-state)
- [Next steps](/tutorial/7-next-steps)

## Overview

- [Introduction](/overview/introduction)
- [Why LiveStore?](/overview/why-livestore)
- [How LiveStore works](/overview/how-livestore-works)
- [Concepts](/overview/concepts): Concepts in LiveStore
- [When to use LiveStore (and when not)](/overview/when-livestore): Considerations when deciding to use LiveStore.
- [Technology comparison](/overview/technology-comparison): How LiveStore compares to other related technologies

## Building with LiveStore

- [Rules for AI agents](/building-with-livestore/rules-for-ai-agents)
- [Events](/building-with-livestore/events)
- [Data modeling](/building-with-livestore/data-modeling)
- [CRUD](/building-with-livestore/crud): CRUD
- [Store](/building-with-livestore/store)
- [Complex UI state](/building-with-livestore/complex-ui-state): How to model complex UI state in LiveStore.
- [Reactivity system](/building-with-livestore/reactivity-system)
- [Syncing](/building-with-livestore/syncing): Syncing
- [Debugging a LiveStore app](/building-with-livestore/debugging)
- [Devtools](/building-with-livestore/devtools)
- [OpenTelemetry](/building-with-livestore/opentelemetry)
- [Production checklist](/building-with-livestore/production-checklist): Checklist for productionizing a LiveStore app

### State

- [SQLite state schema](/building-with-livestore/state/sqlite-schema)
- [SQLite state schema (Effect schema)](/building-with-livestore/state/sqlite-schema-effect)
- [SQL queries](/building-with-livestore/state/sql-queries)
- [Materializers](/building-with-livestore/state/materializers)
- [SQLite in LiveStore](/building-with-livestore/state/sqlite): Notes on how to use SQLite in LiveStore

### Tools

- [LiveStore CLI](/building-with-livestore/tools/cli): Command-line interface for LiveStore project scaffolding and development tools.
- [MCP integration](/building-with-livestore/tools/mcp): Model Context Protocol integration for AI assistants like Claude.

### Examples

- [Todo app with shared workspaces](/building-with-livestore/examples/todo-workspaces): How to model a todo workspace app with shared workspaces in LiveStore.
- [Turn-based game](/building-with-livestore/examples/turnbased-game): How to model a turn-based game in LiveStore.
- [AI agent](/building-with-livestore/examples/ai-agent): How to model an AI agent in LiveStore.

## Framework integrations

- [Custom elements](/framework-integrations/custom-elements): How to integrate LiveStore with Custom Elements aka Web Components.
- [React integration for LiveStore](/framework-integrations/react-integration): How to integrate LiveStore with React.
- [Solid integration](/framework-integrations/solid-integration): How to integrate LiveStore with Solid.
- [Svelte integration](/framework-integrations/svelte-integration): How to integrate LiveStore with Svelte.
- [Vue integration for LiveStore](/framework-integrations/vue-integration): How to integrate LiveStore with Vue.

## Platform adapters

- [Web adapter](/platform-adapters/web-adapter): Information about LiveStore's web adapter
- [Expo Adapter](/platform-adapters/expo-adapter): LiveStore adapter for React Native apps built with Expo
- [Node adapter](/platform-adapters/node-adapter)
- [Cloudflare Durable Object adapter](/platform-adapters/cloudflare-durable-object-adapter)
- [Electron adapter](/platform-adapters/electron-adapter)
- [Tauri adapter](/platform-adapters/tauri-adapter)

## Sync providers

- [Cloudflare Workers](/sync-providers/cloudflare)
- [ElectricSQL](/sync-providers/electricsql)
- [S2](/sync-providers/s2): Use the official S2 backend with LiveStore via @livestore/sync-s2
- [Build your own sync provider](/sync-providers/custom)

## Patterns

- [Encryption](/patterns/encryption)
- [Server-side clients](/patterns/server-side-clients)
- [Auth](/patterns/auth)
- [Effect](/patterns/effect)
- [Rich Text Editing](/patterns/rich-text-editing)
- [External data](/patterns/external-data)
- [List Ordering](/patterns/list-ordering): Implement drag-and-drop list ordering with fractional indexing
- [AI](/patterns/ai): How to use LiveStore to build AI applications
- [Anonymous user transition](/patterns/anonymous-user-transition): How to transition an anonymous user to a logged in user
- [App evolution](/patterns/app-evolution): How to evolve your app and roll out new app versions
- [File management](/patterns/file-management): How to manage files with LiveStore
- [File structure](/patterns/file-structure)
- [Offline support](/patterns/offline)
- [ORM](/patterns/orm): How to use an ORM with LiveStore
- [Presence](/patterns/presence): How to implement presence functionality with LiveStore
- [Side effect](/patterns/side-effects): How to run side-effects for LiveStore events
- [State machines](/patterns/state-machines): How to use state machines with LiveStore
- [Storybook testing (React)](/patterns/storybook): How to set up LiveStore with Storybook for component development and testing in React.
- [Undo/Redo](/patterns/undo-redo): How to implement undo/redo functionality with LiveStore
- [Version control](/patterns/version-control)

## Understanding LiveStore

- [Event sourcing](/understanding-livestore/event-sourcing): Why and how LiveStore uses event sourcing for data flow, syncing and migrations.
- [Design decisions](/understanding-livestore/design-decisions): Design decisions and trade-offs made in the development of LiveStore

## Sustainable open source

- [Sponsoring LiveStore](/sustainable-open-source/sponsoring)

### Contributing

- [Info](/sustainable-open-source/contributing/info): Notes for developers interested in contributing to LiveStore.
- [Docs](/sustainable-open-source/contributing/docs): Notes on contributing to the LiveStore docs
- [Monorepo](/sustainable-open-source/contributing/monorepo): Notes on the monorepo setup of LiveStore.

## Miscellaneous

- [Frequently asked questions](/misc/faq): Frequently asked questions about LiveStore
- [State of the project](/misc/state-of-the-project): A high-level overview of the current state of the project.
- [Performance](/misc/performance)
- [Community](/misc/community)
- [Troubleshooting](/misc/troubleshooting): Common issues in apps using LiveStore and possible solutions.
- [Credits](/misc/credits): Credits and acknowledgements
- [Resources](/misc/resources): Resources, assets, logos, etc about LiveStore
- [Design partners](/misc/design-partners)
- [Code of conduct](/misc/code_of_conduct): Our code of conduct for the LiveStore community.
- [Note on package management](/misc/package-management)


### 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" />