### React Getting Started

Source: https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates

Guides for setting up and starting with TanStack Query in a React project, covering overview, installation, and quick start.

```react
Overview
Installation
Quick Start
Devtools
Videos & Talks
Comparison
TypeScript
GraphQL
React Native
```

--------------------------------

### Getting Started with Electric SQL

Source: https://www.electricsql.com/

Provides essential links and commands for users to begin their journey with Electric SQL. This includes accessing the Quickstart guide, comprehensive documentation, and interactive demos.

```bash
# Get started with the Quickstart guide
/docs/quickstart

# Dive deeper into the documentation
/docs/intro

# Explore interactive examples and use cases
/demos
```

--------------------------------

### TodoMVC Example Setup

Source: https://github.com/livestorejs/livestore/tree/main/examples/standalone/web-todomvc-sync-cf

Instructions for running the TodoMVC example locally. This involves cloning the repository and installing dependencies.

```bash
git clone https://github.com/livestorejs/livestore.git
cd livestore/examples/standalone/web-todomvc-sync-cf
npm install
npm run dev
```

--------------------------------

### Project Setup from Template

Source: https://docs.livestore.dev/getting-started/react-web/

Commands to set up a new project from a Livestore template using different package managers (bun, pnpm, npm). Replace 'livestore-app' with your desired application name.

```bash
bunx tiged github:livestorejs/livestore/examples/standalone/web-todomvc-sync-cf#main livestore-app
```

```bash
pnpm dlx tiged github:livestorejs/livestore/examples/standalone/web-todomvc-sync-cf#main livestore-app
```

```bash
npx tiged github:livestorejs/livestore/examples/standalone/web-todomvc-sync-cf#main livestore-app
```

--------------------------------

### Install Dependencies

Source: https://docs.livestore.dev/getting-started/react-web/

Commands to install project dependencies using bun, pnpm, or npm. It's recommended to use bun or pnpm for dependency management.

```bash
bun install
```

```bash
pnpm install
```

```bash
npm install
```

--------------------------------

### TodoMVC Example - Running Locally

Source: https://github.com/livestorejs/livestore/tree/main/examples/standalone/web-todomvc

Instructions for running the TodoMVC example locally. This involves installing dependencies and starting a development server.

```bash
npm install
npm run dev
```

--------------------------------

### Install LiveStore Dependencies with Bun

Source: https://docs.livestore.dev/getting-started/vue/

Installs the necessary LiveStore packages and their dependencies using the Bun package manager.

```bash
bun install @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/utils @livestore/peer-deps @livestore/devtools-vite slashv/vue-livestore
```

--------------------------------

### Install LiveStore Dependencies

Source: https://docs.livestore.dev/getting-started/react-web/

Installs the core LiveStore packages and necessary adapters for different package managers (bun, pnpm, npm). Ensures all required libraries are available for the project.

```bun
bun install @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/react @livestore/peer-deps @livestore/sync-cf @livestore/devtools-vite
```

```pnpm
pnpm add @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/react @livestore/peer-deps @livestore/sync-cf @livestore/devtools-vite
```

```npm
npm install @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/react @livestore/peer-deps @livestore/sync-cf @livestore/devtools-vite
```

--------------------------------

### TodoMVC Example Setup

Source: https://github.com/livestorejs/livestore/tree/main/examples/src/web-todomvc-sync-electric

This snippet outlines the setup and running instructions for the TodoMVC example within the livestorejs/livestore repository. It includes steps for local execution and references to demo links.

```markdown
# TodoMVC Example

See links to demos in [the examples docs](https://docs.livestore.dev/examples).

## Running locally


```

--------------------------------

### Install LiveStore Dependencies with pnpm

Source: https://docs.livestore.dev/getting-started/vue/

Installs the necessary LiveStore packages and their dependencies using the pnpm package manager.

```bash
pnpm add @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/utils @livestore/peer-deps @livestore/devtools-vite slashv/vue-livestore
```

--------------------------------

### Getting Started Panel Configuration

Source: https://livestore.grafana.net/public-dashboards/4a9a3b7941464bcebbc0fa2cdddc3130

Configuration for the Grafana Getting Started panel, intended to guide new users. Includes links for issue reporting and asset URLs.

```json
{
  "id": "gettingstarted",
  "name": "Getting Started",
  "info": {
    "author": {
      "name": "Grafana Labs",
      "url": "https://grafana.com"
    },
    "description": "",
    "links": [
      {
        "name": "Raise issue",
        "url": "https://github.com/grafana/grafana/issues/new"
      }
    ],
    "logos": {
      "small": "https://grafana-assets.grafana.net/grafana/12.2.0-16890666601.patch1/public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg",
      "large": "https://grafana-assets.grafana.net/grafana/12.2.0-16890666601.patch1/public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg"
    },
    "build": {},
    "screenshots": null,
    "version": "",
    "updated": "",
    "keywords": null
  },
  "hideFromList": true,
  "sort": 100,
  "skipDataQuery": true,
  "state": "",
  "baseUrl": "https://grafana-assets.grafana.net/grafana/12.2.0-16890666601.patch1/public/app/plugins/panel/gettingstarted",
  "signature": "internal",
  "module": "core:plugin/gettingstarted",
  "angular": {
    "detected": false,
    "hideDeprecation": false
  },
  "loadingStrategy": "script"
}
```

--------------------------------

### Run Dev Environment

Source: https://docs.livestore.dev/getting-started/react-web/

Commands to start the Livestore development server using bun, pnpm, or npm.

```bash
bun dev
```

```bash
pnpm dev
```

```bash
npm run dev
```

--------------------------------

### Project Setup and Running

Source: https://github.com/slashv/vue-livestore/tree/main/playground

Instructions for cloning the repository, installing dependencies, and running the Vue LiveStore example project.

```bash
git clone https://github.com/slashv/vue-livestore.git
cd vue-livestore
pnpm install
pnpm dev
```

--------------------------------

### Get Started with Effect TS

Source: https://effect.website/

Initiate your development journey with Effect TS by following the quickstart guide. This section provides the initial steps to set up and begin building applications.

```TypeScript
import { Effect } from 'effect';

const program = Effect.log('Hello, Effect!');

Effect.runPromise(program);

```

--------------------------------

### Install LiveStore Dependencies with npm

Source: https://docs.livestore.dev/getting-started/vue/

Installs the necessary LiveStore packages and their dependencies using the npm package manager.

```bash
npm install @livestore/livestore @livestore/wa-sqlite@1.0.5-dev.2 @livestore/adapter-web @livestore/utils @livestore/peer-deps @livestore/devtools-vite slashv/vue-livestore
```

--------------------------------

### Project Setup with Template (Node.js)

Source: https://context7_llms

Provides commands to set up a new Node.js project using a template, with options for different package managers (bun, pnpm, npm). This is a quick start guide for new projects.

```sh
bunx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```

```sh
pnpm dlx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```

```sh
npx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```

--------------------------------

### Running TodoMVC Locally

Source: https://github.com/livestorejs/livestore/tree/main/examples/standalone/web-todomvc

Commands to install dependencies and start the TodoMVC development server. Assumes Bun is installed.

```shell
bun install
bun dev
```

--------------------------------

### Vite Configuration for LiveStore

Source: https://docs.livestore.dev/getting-started/react-web/

Configures the Vite build process to include the LiveStore devtools plugin and a custom server that runs `wrangler dev`. This setup is crucial for `@livestore/sync-cf` and enables hot module replacement with schema updates.

```javascript
/* eslint-disable unicorn/no-process-exit */import { spawn } from 'node:child_process'
import { livestoreDevtoolsPlugin } from '@livestore/devtools-vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: process.env.PORT ? Number(process.env.PORT) : 60_001,
  },
  worker: { format: 'es' },
  plugins: [
    react(),
    livestoreDevtoolsPlugin({ schemaPath: './src/livestore/schema.ts' }),
    // Running `wrangler dev` as part of `vite dev` needed for `@livestore/sync-cf`
    {
      name: 'wrangler-dev',
      configureServer: async (server) => {
        const wrangler = spawn('./node_modules/.bin/wrangler', ['dev', '--port', '8787'], {
          stdio: ['ignore', 'inherit', 'inherit'],
        })

        const shutdown = () => {
          if (wrangler.killed === false) {
            wrangler.kill()
          }
          process.exit(0)
        }

        server.httpServer?.on('close', shutdown)
        process.on('SIGTERM', shutdown)
        process.on('SIGINT', shutdown)

        wrangler.on('exit', (code) => console.error(`wrangler dev exited with code ${code}`))
      },
    },
  ],
})
```

--------------------------------

### Solid Router Getting Started

Source: https://docs.solidjs.com/concepts/signals

Guides for getting started with Solid Router, covering installation, setup, component usage, configuration, and linking routes.

```markdown
src/routes/solid-router/getting-started/component.mdx?pick=$css
src/routes/solid-router/getting-started/config.mdx?pick=$css
src/routes/solid-router/getting-started/installation-and-setup.mdx?pick=$css
src/routes/solid-router/getting-started/linking-routes.mdx?pick=$css
```

--------------------------------

### Livestore Meta Getting Started

Source: https://docs.solidjs.com/concepts/signals

Guides for setting up and getting started with Livestore's meta-programming features. Covers client-side setup, general installation, and server-side configuration.

```mdx
src/routes/solid-meta/getting-started/client-setup.mdx?pick=$css
```

```mdx
src/routes/solid-meta/getting-started/installation-and-setup.mdx?pick=$css
```

```mdx
src/routes/solid-meta/getting-started/server-setup.mdx?pick=$css
```

--------------------------------

### Getting Started with LiveStore + React

Source: https://docs.livestore.dev/llms.txt

Learn how to integrate and use LiveStore with React applications on the web. This guide covers the initial setup and basic usage patterns.

```React
import { LiveStoreProvider, useLiveStore } from '@livestore/react';

function App() {
  return (
    <LiveStoreProvider>
      <MyComponent />
    </LiveStoreProvider>
  );
}

function MyComponent() {
  const store = useLiveStore();
  // Use store to access and manipulate data
  return <div>{JSON.stringify(store.getState())}</div>;
}
```

--------------------------------

### Prisma Query Example with Constant

Source: https://www.prisma.io/docs/about/style-guide/writing-style

Demonstrates starting query examples with a constant for clarity, as recommended by the style guide.

```javascript
const aggregations = await prisma.user.aggregate({
  ...
})
```

--------------------------------

### Set up Project from Template (bun)

Source: https://docs.livestore.dev/getting-started/expo/

Initializes a new Livestore project using the standalone Expo ToDoMVC sync Cloudflare template with bun.

```bash
bunx tiged github:livestorejs/livestore/examples/standalone/expo-todomvc-sync-cf#main livestore-app
```

--------------------------------

### Livestore Framework Navigation

Source: https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates

This snippet outlines the navigation structure for Livestore documentation across various frontend frameworks. It categorizes documentation into 'Getting Started' and 'Guides & Concepts' for each framework, providing links to specific topics like overview, installation, quick start, devtools, TypeScript support, and advanced concepts such as queries, mutations, and performance.

```javascript
{
  "config": {
    "sections": [
      {
        "label": "Getting Started",
        "frameworks": [
          {
            "label": "react",
            "children": [
              {"label": "Overview", "to": "framework/react/overview"},
              {"label": "Installation", "to": "framework/react/installation"},
              {"label": "Quick Start", "to": "framework/react/quick-start"},
              {"label": "Devtools", "to": "framework/react/devtools"},
              {"label": "Videos & Talks", "to": "framework/react/videos"},
              {"label": "Comparison", "to": "framework/react/comparison"},
              {"label": "TypeScript", "to": "framework/react/typescript"},
              {"label": "GraphQL", "to": "framework/react/graphql"},
              {"label": "React Native", "to": "framework/react/react-native"}
            ]
          },
          {
            "label": "solid",
            "children": [
              {"label": "Overview", "to": "framework/solid/overview"},
              {"label": "Quick Start", "to": "framework/solid/quick-start"},
              {"label": "Installation", "to": "framework/solid/installation"},
              {"label": "Devtools", "to": "framework/solid/devtools"},
              {"label": "TypeScript", "to": "framework/solid/typescript"}
            ]
          },
          {
            "label": "vue",
            "children": [
              {"label": "Overview", "to": "framework/vue/overview"},
              {"label": "Installation", "to": "framework/vue/installation"},
              {"label": "Quick Start", "to": "framework/vue/quick-start"},
              {"label": "Devtools", "to": "framework/vue/devtools"},
              {"label": "TypeScript", "to": "framework/vue/typescript"},
              {"label": "Reactivity", "to": "framework/vue/reactivity"},
              {"label": "GraphQL", "to": "framework/vue/graphql"}
            ]
          },
          {
            "label": "svelte",
            "children": [
              {"label": "Overview", "to": "framework/svelte/overview"},
              {"label": "Installation", "to": "framework/svelte/installation"},
              {"label": "Devtools", "to": "framework/svelte/devtools"},
              {"label": "SSR & SvelteKit", "to": "framework/svelte/ssr"},
              {"label": "Reactivity", "to": "framework/svelte/reactivity"}
            ]
          },
          {
            "label": "angular",
            "children": [
              {"label": "Overview", "to": "framework/angular/overview"},
              {"label": "Installation", "to": "framework/angular/installation"},
              {"label": "Quick Start", "to": "framework/angular/quick-start"},
              {"label": "Angular HttpClient and other data fetching clients", "to": "framework/angular/angular-httpclient-and-other-data-fetching-clients"},
              {"label": "Devtools", "to": "framework/angular/devtools"},
              {"label": "TypeScript", "to": "framework/angular/typescript"},
              {"label": "Zoneless", "to": "framework/angular/zoneless"}
            ]
          }
        ]
      },
      {
        "label": "Guides & Concepts",
        "frameworks": [
          {
            "label": "react",
            "children": [
              {"label": "Important Defaults", "to": "framework/react/guides/important-defaults"},
              {"label": "Queries", "to": "framework/react/guides/queries"},
              {"label": "Query Keys", "to": "framework/react/guides/query-keys"},
              {"label": "Query Functions", "to": "framework/react/guides/query-functions"},
              {"label": "Query Options", "to": "framework/react/guides/query-options"},
              {"label": "Network Mode", "to": "framework/react/guides/network-mode"},
              {"label": "Parallel Queries", "to": "framework/react/guides/parallel-queries"},
              {"label": "Dependent Queries", "to": "framework/react/guides/dependent-queries"},
              {"label": "Background Fetching Indicators", "to": "framework/react/guides/background-fetching-indicators"},
              {"label": "Window Focus Refetching", "to": "framework/react/guides/window-focus-refetching"},
              {"label": "Disabling/Pausing Queries", "to": "framework/react/guides/disabling-queries"},
              {"label": "Query Retries", "to": "framework/react/guides/query-retries"},
              {"label": "Paginated Queries", "to": "framework/react/guides/paginated-queries"},
              {"label": "Infinite Queries", "to": "framework/react/guides/infinite-queries"},
              {"label": "Initial Query Data", "to": "framework/react/guides/initial-query-data"},
              {"label": "Placeholder Query Data", "to": "framework/react/guides/placeholder-query-data"},
              {"label": "Mutations", "to": "framework/react/guides/mutations"},
              {"label": "Query Invalidation", "to": "framework/react/guides/query-invalidation"},
              {"label": "Invalidation from Mutations", "to": "framework/react/guides/invalidations-from-mutations"},
              {"label": "Updates from Mutation Responses", "to": "framework/react/guides/updates-from-mutation-responses"},
              {"label": "Optimistic Updates", "to": "framework/react/guides/optimistic-updates"},
              {"label": "Query Cancellation", "to": "framework/react/guides/query-cancellation"},
              {"label": "Scroll Restoration", "to": "framework/react/guides/scroll-restoration"},
              {"label": "Filters", "to": "framework/react/guides/filters"},
              {"label": "Performance & Request Waterfalls", "to": "framework/react/guides/performance"}
            ]
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### Set up Project from Template (bun)

Source: https://docs.livestore.dev/llms-full.txt

Initializes a new LiveStore project using the 'web-todomvc-sync-cf' template with bun.

```sh
bunx create-livestore web-todomvc-sync-cf
```

--------------------------------

### Set up Project from Template (Node.js)

Source: https://docs.livestore.dev/getting-started/node/

Use `tiged` to clone a Livestore template repository for a Node.js project. Replace `livestore-app` with your desired application name.

```bash
bunx tiged github:livestorejs/livestore/examples/standalone/node-todomvc-sync-cf#main livestore-app
```

```bash
pnpm dlx tiged github:livestorejs/livestore/examples/standalone/node-todomvc-sync-cf#main livestore-app
```

```bash
npx tiged github:livestorejs/livestore/examples/standalone/node-todomvc-sync-cf#main livestore-app
```

--------------------------------

### Start Livestore Project

Source: https://docs.livestore.dev/getting-started/expo/

Commands to start the Livestore project using different package managers.

```bash
bun start
```

```bash
pnpm start
```

```bash
npm run start
```

```bash
yarn start
```

--------------------------------

### Install and Run Vue LiveStore

Source: https://github.com/slashv/vue-livestore/tree/main/playground

Installs project dependencies and starts the development server for the Vue LiveStore example using pnpm.

```shell
pnpm install
pnpm dev
```

--------------------------------

### Set up Project from Template (bun)

Source: https://context7_llms

Initializes a new LiveStore project using the 'web-todomvc-sync-cf' template with bun.

```sh
bunx create-livestore web-todomvc-sync-cf
```

--------------------------------

### Run Example App - Windows PowerShell

Source: https://github.com/grafana/docker-otel-lgtm

Instructions to build and run the example application on Windows using PowerShell.

```powershell
Build and run the example app
Run
Windows (PowerShell)
```

--------------------------------

### Core Concepts and Getting Started

Source: https://docs.solidjs.com/concepts/signals

Fundamental concepts and initial steps for using the project, including an overview, quick start guide, and explanations of reactivity and JSX.

```markdown
file: "index.mdx",
path: "/",
slug: "index",
parent: "root",
title: "Overview",
mainNavExclude: !0,
isTranslated: !0
```

```markdown
file: "quick-start.mdx",
path: "/quick-start",
slug: "quick-start",
parent: "root",
title: "Quick start",
isTranslated: !0
```

```markdown
file: "intro-to-reactivity.mdx",
path: "/concepts/intro-to-reactivity",
slug: "intro-to-reactivity",
parent: "Concepts",
title: "Intro to reactivity",
isTranslated: !0
```

```markdown
file: "understanding-jsx.mdx",
path: "/concepts/understanding-jsx",
slug: "understanding-jsx",
parent: "Concepts",
title: "Understanding JSX",
isTranslated: !0
```

```markdown
file: "basics.mdx",
path: "/concepts/components/basics",
slug: "basics",
parent: "Components",
title: "Basics",
isTranslated: !0
```

```markdown
file: "class-style.mdx",
path: "/concepts/components/class-style",
slug: "class-style",
parent: "Components",
title: "Class style",
isTranslated: !0
```

--------------------------------

### Set up Project from Template (pnpm)

Source: https://docs.livestore.dev/getting-started/expo/

Initializes a new Livestore project using the standalone Expo ToDoMVC sync Cloudflare template with pnpm.

```bash
pnpm dlx tiged github:livestorejs/livestore/examples/standalone/expo-todomvc-sync-cf#main livestore-app
```

--------------------------------

### Run All Example Components with Mise

Source: https://github.com/grafana/docker-otel-lgtm

A shortcut command using mise to build and run all example components.

```shell
mise run all
```

--------------------------------

### LiveStore Documentation Site Navigation

Source: https://docs.livestore.dev/misc/resources/

This section outlines the hierarchical navigation structure of the LiveStore documentation website. It provides links to various topics including getting started guides for different frameworks, evaluation criteria, data modeling examples, and detailed reference material on concepts, store, reactivity, events, debugging, and syncing mechanisms.

```APIDOC
Docs (/)
API (/api/)
Examples (/examples/)
Getting Started:
  React Web (/getting-started/react-web/)
  Expo (/getting-started/expo/)
  Node (/getting-started/node/)
  Solid (/getting-started/solid/)
  Vue (/getting-started/vue/)
Evaluating LiveStore:
  How LiveStore works (/evaluation/how-livestore-works/)
  When to use LiveStore (/evaluation/when-livestore/)
  State of the project (/evaluation/state-of-the-project/)
  Technology comparison (/evaluation/technology-comparison/)
  Performance (/evaluation/performance/)
  Event Sourcing (/evaluation/event-sourcing/)
  Design Decisions (/evaluation/design-decisions/)
Data Modeling:
  Data Modeling (/data-modeling/)
  Todo app with workspaces (/data-modeling/todo-workspaces/)
  Turn-based game (/data-modeling/turnbased-game/)
  AI agent (/data-modeling/ai-agent/)
  Complex UI state (/data-modeling/complex-ui-state/)
Reference:
  Concepts (/reference/concepts/)
  Store (/reference/store/)
  Reactivity System (/reference/reactivity-system/)
  Events (/reference/events/)
  Devtools (/reference/devtools/)
  Debugging (/reference/debugging/)
  OpenTelemetry (/reference/opentelemetry/)
  State:
    SQLite State Schema (/reference/state/sqlite-schema/)
    SQL Queries (/reference/state/sql-queries/)
    Materializers (/reference/state/materializers/)
    SQLite in LiveStore (/reference/state/sqlite/)
  Syncing:
    Syncing (/reference/syncing/)
    Server-side clients (/reference/syncing/server-side-clients/)
    Sync Provider:
      Cloudflare Workers (/reference/syncing/sync-provider/cloudflare/)
```

--------------------------------

### Run Example App - Unix/Linux Using Mise

Source: https://github.com/grafana/docker-otel-lgtm

Instructions to build and run the example application on Unix/Linux systems using Mise.

```shell
Build and run the example app
Run
Unix/Linux Using mise
```

--------------------------------

### ElectricSQL Documentation Structure

Source: https://www.electricsql.com/

Outlines the structure of the ElectricSQL documentation, covering introductory guides, quickstarts, and detailed guides on specific features like authentication, shapes, and writes. It also includes information on installation and troubleshooting.

```APIDOC
Documentation:
  Intro: Introduction to ElectricSQL.
  Quickstart: Get started quickly with ElectricSQL.
  Guides:
    Auth: Authentication methods.
    Shapes: Data modeling and shapes.
    Writes: Handling data writes.
    Installation: Installation instructions.
    Troubleshooting: Common issues and solutions.
```

--------------------------------

### Set up Project from Template (pnpm)

Source: https://docs.livestore.dev/llms-full.txt

Initializes a new LiveStore project using the 'web-todomvc-sync-cf' template with pnpm.

```sh
pnpm dlx create-livestore web-todomvc-sync-cf
```

--------------------------------

### Getting Started with LiveStore + Solid

Source: https://docs.livestore.dev/llms.txt

A guide to integrating LiveStore with SolidJS applications. Explains how to manage state efficiently in Solid projects.

```Solid
import { render } from 'solid-js/web';
import { LiveStoreProvider, useLiveStore } from '@livestore/solid';

function App() {
  return (
    <LiveStoreProvider>
      <MyComponent />
    </LiveStoreProvider>
  );
}

function MyComponent() {
  const store = useLiveStore();
  // Interact with the store
  return <div>{JSON.stringify(store.getState())}</div>;
}

render(() => <App />, document.getElementById('root'));
```

--------------------------------

### LiveStore Steps Component

Source: https://docs.livestore.dev/getting-started/react-web/

Defines the visual styling for a step-by-step guide component. It includes styling for step bullets, numbering, and connecting lines.

```html
.sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}}
```

--------------------------------

### Set up Project from Template (npm)

Source: https://docs.livestore.dev/getting-started/expo/

Initializes a new Livestore project using the standalone Expo ToDoMVC sync Cloudflare template with npm.

```bash
npx tiged github:livestorejs/livestore/examples/standalone/expo-todomvc-sync-cf#main livestore-app
```

--------------------------------

### Improve Example Apps Setup

Source: https://github.com/livestorejs/livestore/issues

This issue tracks the improvement of the example applications setup within the Livestore project. It is labeled as an enhancement and relates to examples and the mono-cli.

```github-issue
Title: Improve Example Apps Setup
Labels: enhancement, example, mono-cli
Status: Open
Opened by: IGassmann on Aug 15, 2025
```

--------------------------------

### LiveStore Configuration and Examples

Source: https://github.com/livestorejs/livestore/tree/main/examples/standalone

Includes a .gitignore file for managing project dependencies and a README.md file providing an overview of the example applications built with LiveStore.

```bash
examples/standalone/.gitignore
examples/standalone/README.md
```

--------------------------------

### Common HTTP Server Usage

Source: https://bun.sh/

This guide covers common patterns and practices for building and running HTTP servers with Bun. It includes examples of basic server setup and request handling.

```javascript
const server = Bun.serve({
  fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === '/') {
      return new Response('Hello Bun!');
    }
    return new Response('Not Found', { status: 404 });
  },
  port: 3000
});

console.log(`Listening on http://localhost:${server.port}`);
```

--------------------------------

### Syncing Examples

Source: https://docs.livestore.dev/contributing/monorepo/

Commands to synchronize example code between source and standalone directories within the monorepo.

```bash
mono examples sync --direction src-to-standalone
```

--------------------------------

### Run Dev Environment (Node.js)

Source: https://docs.livestore.dev/getting-started/node/

Start the Livestore development server using `bun`, `pnpm`, or `npm`. This command initiates the local development workflow.

```bash
bun start
```

```bash
pnpm start
```

```bash
npm run start
```

--------------------------------

### Enhancement: Improve Example Apps Setup

Source: https://github.com/livestorejs/livestore/issues

This enhancement aims to improve the setup process for example applications. It includes changes related to the mono-cli and provides a better user experience for developers working with the examples.

```json
{
  "node": {
    "__typename": "Issue",
    "id": "I_kwDOKWhtJ87GOAoq",
    "number": 560,
    "title": "Improve Example Apps Setup",
    "titleHtml": "Improve Example Apps Setup",
    "__isIssueOrPullRequest": "Issue",
    "labels": {
      "edges": [
        {
          "node": {
            "id": "LA_kwDOKWhtJ88AAAABZRjO8g",
            "nameHTML": "enhancement",
            "color": "a2eeef",
            "name": "enhancement",
            "description": "New feature or request",
            "__typename": "Label"
          },
          "cursor": "MQ"
        },
        {
          "node": {
            "id": "LA_kwDOKWhtJ88AAAABsUTYqw",
            "nameHTML": "example",
            "color": "2484B8",
            "name": "example",
            "description": "",
            "__typename": "Label"
          },
          "cursor": "Mg"
        },
        {
          "node": {
            "id": "LA_kwDOKWhtJ88AAAACEwZ-Rg",
            "nameHTML": "mono-cli",
            "color": "ededed",
            "name": "mono-cli",
            "description": null,
            "__typename": "Label"
          },
          "cursor": "Mw"
        }
      ],
      "pageInfo": {
        "endCursor": "Mw",
        "hasNextPage": false
      }
    },
    "createdAt": "2025-08-15T15:21:21Z",
    "updatedAt": "2025-08-15T15:22:49Z",
    "closed": false,
    "closedAt": null,
    "author": {
      "login": "IGassmann",
      "resourcePath": "/IGassmann",
      "__typename": "User",
      "id": "MDQ6VXNlcjQyOTE3MDc="
    },
    "stateReason": null,
    "milestone": null,
    "state": "OPEN",
    "issueType": null,
    "__isNode": "Issue"
  },
  "cursor": "Y3Vyc29yOjU="
}
```

--------------------------------

### Set up Project from Template (npm)

Source: https://docs.livestore.dev/llms-full.txt

Initializes a new LiveStore project using the 'web-todomvc-sync-cf' template with npm.

```sh
npx create-livestore web-todomvc-sync-cf
```

--------------------------------

### Project Setup with Template (Node.js)

Source: https://docs.livestore.dev/llms-full.txt

Provides commands to set up a new Node.js project using a template, with options for different package managers (bun, pnpm, npm). This is a quick start guide for new projects.

```sh
bunx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```

```sh
pnpm dlx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```

```sh
npx create-livestore-app@latest node-todomvc-sync-cf --template node-todomvc-sync-cf

```