@livestore/livestore 0.4.0-dev.2 → 0.4.0-dev.20

package/docs/data-modeling/turnbased-game/index.md

@@ -0,0 +1,7 @@
+# Turn-based game
+
+LiveStore is a great fit for turn-based games. In this guide we'll look at a simple turn-based game and how to model it in LiveStore.
+
+General idea: Let server enforce the logic that each player only commits one action per turn.
+
+TODO: write rest of guide

package/docs/evaluation/design-decisions/index.md

@@ -0,0 +1,33 @@
+# Design Decisions
+
+## Goals
+
+- Fast, synchronous, transactional, and reactive state management
+- Global state is eventually consistent
+- Persistent storage
+- Syncing
+- Convenient schema migrations
+- Great devtools
+
+## Major Design Decisions
+
+- Based on [event-sourcing](/evaluation/event-sourcing) (implying a read/write model separation)
+- Using SQLite for state management over JavaScript implementations
+  - There are many benefits to using SQLite for state management, including performance, reliability, and ease of use.
+- Run in-memory SQLite in main-thread to enable synchronous queries
+  - Usually LiveStore is used with a second SQLite database for persistence running in a separate thread (e.g. web worker)
+  - Running SQLite additionally in the main-thread however also means each tab uses extra memory.
+- The current implementation of LiveStore assumes that the data is small enough to fit in memory. However, SQLite is very efficient so this should work for many use cases and apps.
+- LiveStore implements a Signals-based reactivity system based on the ideas of Adapton for incremental computation
+- The goal is to keep LiveStore syncing provider agnostic so you can use the right syncing provider for your use case.
+- LiveStore intentionally stays focused on core data management and syncing, leaving concerns like authentication, file uploads, and business logic to application code. This minimalist approach keeps the library maintainable by limiting surface area, flexible as a composable Unix-like building block, and unopinionated enough to adapt to diverse usage scenarios.
+
+## Implementation decisions
+
+- Build most of the library in TypeScript. We might move more parts to Rust in the future.
+- Embrace and build on top of [Effect](https://effect.website) as a library of powerful primitives, particularly for IO/concurrency heavy parts of the library.
+
+## Original motivation
+
+- Frustration with database schema migrations -> event sourcing to separate read and write model (avoid schema migrations for read model)
+- Applying the "Make the right thing easy" principle to app data management

package/docs/evaluation/event-sourcing/index.md

@@ -0,0 +1,40 @@
+# Event Sourcing
+
+- Similar to Redux but persisted and synced across devices
+- Provides a more principled way to handle data instead of relying on mutable state
+- Core idea: Separate read vs write model
+  - Read model: App database (i.e. SQLite)
+  - Write model: Ordered log of all mutation events
+- Related topics
+  - Domain driven design
+- Benefits
+  - Simple mental model
+  - Preserves user intent
+  - Scalable
+  - Flexible
+    - You can easily evolve the read model based on your query patterns as your app requirements change over time
+  - Flexible merge conflicts resolution
+	- Automatic migrations of the read model (i.e. app database)
+    - Write model can also be evolved (e.g. via versioned mutations and optionally mapping old mutations to new ones)
+  - History of all state changes is captured (e.g. for auditing and debugging)
+	- Foundation for syncing
+- Downsides
+  - Slightly more boilerplate to manually define mutations
+  - Need to be careful so eventlog doesn't grow too much
+
+## LiveStore as an event-sourcing framework
+
+While the benefits of event sourcing are compelling, building a robust system from scratch is complex and time-consuming. Developers often encounter pitfalls related to data consistency, schema migrations, and efficient state reconstruction.
+
+LiveStore provides an off-the-shelf event sourcing solution designed for ease of use and correctness. It simplifies development by:
+
+- Providing clear APIs for defining mutations (events).
+- Automatically managing the event log persistence and ordering.
+- Efficiently recomputing the state (e.g. SQLite database) from the eventlog via materializers.
+- Handling complexities like automatic data migrations and offering strategies for conflict resolution during synchronization.
+
+This allows you to leverage the power of event sourcing without needing to implement the underlying infrastructure and tackle common edge cases yourself.
+
+## Further reading
+
+- [The Log: What every software engineer should know about real-time data's unifying abstraction](https://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying)

package/docs/evaluation/how-livestore-works/index.md

@@ -0,0 +1,56 @@
+# How LiveStore works
+
+### TLDR
+
+LiveStore uses event sourcing to sync events across clients and materialize state into a local, reactive SQLite database.
+
+<HowItWorksDiagram class="my-8" />
+
+## How LiveStore Works Client-Side
+
+On the client, LiveStore provides a reactive SQLite database for application state, which is kept consistent through an underlying event sourcing mechanism.
+
+#### Local Reactive SQLite
+
+Application state is materialized into a local SQLite database, offering high-performance, offline-capable data access. This SQLite database is reactive: UI components subscribe to data changes and update automatically when the state changes. LiveStore uses in-memory SQLite for sub-millisecond queries and persistent SQLite for durable storage across application sessions.
+
+#### Event Sourcing
+
+Underpinning the reactive state, LiveStore implements the event sourcing pattern. All data modifications are captured as an immutable, ordered sequence of events. This eventlog serves as the canonical history, enabling reliable state reconstruction and providing inherent auditability, which aids in debugging. The reactive SQLite state is a projection of this eventlog.
+
+#### Client-Side Event Flow
+
+1.  **Event Committing:** User interactions within the application generate events detailing the specific action (e.g., `TodoCreated`, `TaskCompleted`).
+2.  **Local Persistence & Materialization:** The committed event is atomically persisted to the local eventlog and immediately materialized as state into the SQLite database.
+3.  **UI Reactivity:** Changes to the SQLite database trigger the reactivity system, causing subscribed UI components (e.g. React components) to automatically update and reflect the new state.
+
+## How LiveStore Syncing Works
+
+LiveStore extends its local event-sourcing model globally by synchronizing events across all clients, typically through a central sync backend. This ensures that the eventlog, serving as the single source of truth, is consistently replicated, leading to an eventually consistent state for all participants.
+
+#### Push/Pull Event Synchronization
+
+Inspired by Git, LiveStore employs a push/pull model for event synchronization. Clients must first pull the latest events from the sync backend to ensure their local eventlog is up-to-date before they can push their own newly committed local events. This model helps maintain a global total order of events. Local pending events that haven't been pushed are rebased on top of the latest upstream events before being pushed.
+
+#### Sync Provider Integration
+
+LiveStore supports various sync backend implementations, and it's straightforward for developers to create their own. The sync backend is responsible for storing events, enforcing the total event order, and notifying clients of new events.
+
+#### Conflict Resolution
+
+When concurrent operations from different clients lead to conflicting events, LiveStore defaults to a "last-write-wins" strategy. However, it also provides the capability for developers to implement custom merge conflict resolution logic tailored to their application's specific needs.
+
+#### Overall Syncing Data Flow
+
+After a local event is committed and materialized (as per the client-side flow), LiveStore attempts to push this event to the sync backend. Simultaneously, LiveStore is pulling events from the sync backend in the background.
+
+Two main scenarios can occur during a push attempt:
+
+1.  **Client In Sync:** If the client's local eventlog is already up-to-date with the sync backend (i.e., no new remote events have arrived since the last pull/push), the local event is pushed directly.
+2.  **Concurrent Incoming Events:** If new remote events have been pulled in the background, or are discovered during the push attempt, the client first processes these incoming remote events. Any local, unpushed events are then rebased on top of these new remote events before being pushed to the sync backend.
+
+In both scenarios, once remote events are received (either through background pulling or during a push cycle), they are persisted to the local eventlog, materialized into the local SQLite database, and the UI reacts to the new state, ensuring eventual consistency.
+
+## Platform Adapters
+
+LiveStore includes platform adapters to integrate with various environments, such as web browsers, mobile applications (iOS/Android), desktop applications, and Node.js.

package/docs/evaluation/performance/index.md

@@ -0,0 +1,25 @@
+# Performance
+
+LiveStore is designed with performance in mind. To ensure consistent speed and minimal resource consumption, we maintain a suite of performance tests that run automatically on every commit to `main` and every pull request. These tests help us detect regressions early and identify performance bottlenecks for implementing optimizations.
+
+## Performance tests
+
+Our current test suite focuses on two key metrics: **latency** and **memory usage**.
+
+We measure these two metrics across various user interaction scenarios on a minimal LiveStore+React test app.
+
+We select scenarios that help stress-test LiveStore’s ability to handle common underlying tasks that are part of common user interactions.
+
+To learn more about our testing methodology, check out the [README](https://github.com/livestorejs/livestore/blob/main/tests/perf/README.md) of our performance tests.
+
+> **Future expansions:** We [plan](https://github.com/livestorejs/livestore/blob/main/tests/perf/README.md#future-improvements) to measure throughput and bundle size, as well as expand the selection of scenarios and dimensions for the tests.
+
+## Latest test results
+
+You can view the latest performance test results on our [public dashboard](https://livestore.grafana.net/public-dashboards/4a9a3b7941464bcebbc0fa2cdddc3130).
+
+Otherwise, you can view the latest test results by inspecting the logs of the `perf-test` job in our [GitHub Actions workflow](https://github.com/livestorejs/livestore/actions/workflows/ci.yml).
+
+## Reporting a performance issue
+
+We’re committed to transparency and continuous improvement. If you find performance gaps or regressions in your own usage, please [file an issue](https://github.com/livestorejs/livestore/issues/new)

package/docs/evaluation/state-of-the-project/index.md

@@ -0,0 +1,37 @@
+# State of the project
+
+LiveStore is based on years of research (see [Riffle](https://riffle.systems/essays/prelude/)) and is used as the foundation for ambitious apps such as [Overtone](https://overtone.pro). LiveStore has been in development since 2021 and is making good progress towards a stable release. LiveStore is not yet ready for all production scenarios.
+
+## Current state
+
+LiveStore is currently in **beta** with most APIs being fairly stable (there might still be some breaking changes in coming releases). Most work is currently focussed on reliability and performance improvements.
+
+There is currently no specific timeline for a 1.0 release but we are making good progress in that direction.
+
+### On breaking changes
+
+While LiveStore is in beta there can be three kinds of breaking changes:
+
+- Breaking API changes
+- Client storage format changes (whenever `liveStoreStorageFormatVersion` is updated)
+- Sync backend storage format changes (e.g. when a sync backend implementation changes the way how it stores data)
+
+We try our best to minimize breaking changes and to provide a migration path whenever possible.
+
+## Roadmap
+
+See [GitHub issues](https://github.com/livestorejs/livestore/issues) for more details. Get in touch if you have any questions or feedback.
+
+### 2025 Q3
+
+- Adapter bug fixes & stability improvements
+- Performance improvements
+  - Syncing latency & throughput
+- More testing
+
+### Long-term
+
+- Eventlog compaction [#136](https://github.com/livestorejs/livestore/issues/136)
+- Support more syncing providers
+- Support more framework integrations
+- Support more platforms (e.g. Electron, Tauri)

package/docs/evaluation/technology-comparison/index.md

@@ -0,0 +1,40 @@
+# Technology comparison
+
+## TLDR of what sets LiveStore apart
+
+- Uses combination of reactive, in-memory + synced, persisted SQLite for instant, synchronous queries
+- Based on event-sourcing methodologies
+- Client-centric (with great devtools)
+
+## Other local-first/syncing technologies
+
+To compare LiveStore with other local-first/syncing technologies, please see the [Local-First Landscape](https://www.localfirst.fm/landscape) resource.
+
+## LiveStore vs Redux
+
+LiveStore shares a lot of similarities with Redux in that sense that both are based on event-sourcing methodologies. Let's compare some of the core concepts:
+
+- Redux actions are similar to LiveStore events: Both are used to describe "things that have happened"
+- Redux views are similar to LiveStore's state (e.g. SQLite tables): Both are derived from the history of events/actions.
+  - A major difference here is that LiveStore's state materialized as a SQLite database allows for a lot more flexibility via dynamic queries and aggregations vs Redux's static views.
+- Redux reducers are similar to LiveStore's materializers: Both are used to transform events/actions into a final state.
+- Both Redux and LiveStore are client-centric.
+- Both Redux and LiveStore provide powerful [devtools](/reference/devtools).
+
+While LiveStore can be used for the same use cases as Redux, LiveStore goes far beyond Redux in the following ways:
+
+- LiveStore leverages SQLite for a more powerful state model allowing for flexible queries and aggregations with much simpler materialization logic.
+- LiveStore supports client-persistence out of the box.
+- LiveStore comes with a built-in [sync engine](/reference/syncing) syncing events between clients.
+
+As a downside compared to Redux, LiveStore has a slightly larger bundle size.
+
+## Other state management libraries
+
+- Zustand
+- Redux Toolkit (RTK)
+- MobX
+- Jotai
+- Xstate
+- Recoil
+- TanStack Query

package/docs/evaluation/when-livestore/index.md

@@ -0,0 +1,81 @@
+# When to use LiveStore (and when not)
+
+Choosing a data layer for a local-first app is a big decision and should be considered carefully.  On a high level, LiveStore can be a good fit if ...
+- you are looking for a principled data layer that works across platforms
+- you want to use SQLite for your queries
+- you like [event sourcing](/evaluation/event-sourcing) to model data changes
+- you are working on a new app as LiveStore doesn't yet provide a way to [re-use an existing database](/misc/faq#existing-database)
+- the current [state of the project](/evaluation/state-of-the-project) aligns with your own timeline and requirements
+
+## Evaluation exercise
+
+A great way to evaluate whether LiveStore is a good fit for your application, is by trying to model your application events (and optionally state) schema. This exercise can be done in a few minutes and can give you a good indication of whether LiveStore is a good fit for your application.
+
+### Example: Calendar/scheduling app
+
+Let's say you are building a calendar/scheduling app, your events might include:
+
+- `AppointmentScheduled`
+- `AppointmentRescheduled`
+- `AppointmentCancelled`
+- `ParticipantInvitedToAppointment`
+- `ParticipantRespondedToInvite`
+
+From this you might want to derive the following state (modeled as SQLite tables):
+
+- `Appointment`
+  - `id`
+  - `title`
+  - `description`
+  - `participants`
+- `Participant`
+  - `id`
+  - `name`
+  - `email`
+
+## Great use cases for LiveStore
+
+- High-performance desktop/web/mobile apps
+  - e.g. productivity apps like 
+- AI agents
+- Apps that need ...
+  - solid offline support
+  - audit logs
+
+## Benefits of LiveStore
+
+- Unified data layer combining local reactive state with globally synced data
+- Easy to ...
+  - reason about
+  - debug
+  - test
+  - evolve
+  - operate
+
+## Reasons when not to use LiveStore
+
+- You have an existing database which is the source of truth of your data. (Better use [Zero](https://zero.rocicorp.dev) or [ElectricSQL](https://www.electricsql.com) for this.)
+- Your app data is highly connected across users (like a social network / marketplace / etc.) or modeling your data via read-write model separation/event sourcing doesn't seem feasible.
+- You want to build a more traditional client-server application with your primary data source being a remote server.
+- You want a full-stack batteries-included solution (e.g. auth, storage, etc.). (Technologies like [Jazz](https://jazz.tools) or [Instant](https://instantdb.com) might be a better fit.)
+- You don't like to model your data via read-write model separation/event sourcing or the trade-offs it involves.
+- You're a new developer and are just getting started. LiveStore is a relatively advanced technology with many design trade-offs that might make most sense after you have already experienced some of the problems LiveStore is trying to solve.
+- You want to keep your app bundle size as small as possible. LiveStore adds a few hundred kB to your app bundle size (mostly due to bundling SQLite).
+
+## Considerations
+
+### Database constraints
+
+- All the client app data should fit into a in-memory SQLite database
+  - Depending on the target device having databases up to 1GB in size should be okay.
+  - If you you have more data, you can consider segmenting your database into multiple SQLite database (e.g. segmented per project, workspace, document, ...).
+  - You can either use the `storeId` option for the segmentation or there could also be a way to use the [SQLite attach feature](https://www.sqlite.org/lang_attach.html) to dynamically attach/detach databases.
+
+### Syncing
+
+LiveStore's syncing system is designed for small/medium-level concurrency scenarios (e.g. 10s / low 100s of users collaborating on the same thing for a given eventlog).
+  - Collaboration on multiple different eventlogs concurrently is supported and should be used to "scale horizontally".
+
+### Other considerations
+
+- How data flows / what's the source of truth?

package/docs/examples/cloudflare-adapter/index.md

@@ -0,0 +1,44 @@
+# Cloudflare Durable Objects Examples
+
+# Cloudflare Durable Objects Examples
+
+Examples using `@livestore/adapter-cloudflare` for Cloudflare Workers and Durable Objects.
+
+<CardGrid>
+{cloudflareExamples.map((example) => {
+  const { url, label } = getExampleDemoLinks(example);
+
+  return (
+    <Card title={example.title} key={example.title}>
+    {example.image ? (
+      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
+    ) : (
+      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
+        Screenshot coming soon
+      </div>
+    )}
+    <p>{example.description}</p>
+    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
+    {example.syncProvider && (
+      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
+    )}
+    <div style="margin-top: auto; padding-top: 1rem;">
+      {url && (
+        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
+      )}
+      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
+    </div>
+    </Card>
+  );
+})}
+</CardGrid>
+
+## Cloudflare Adapter
+
+- Runs LiveStore inside Cloudflare Durable Objects
+- Uses Durable Object Storage API (not traditional databases)
+- SQLite WASM with Cloudflare-specific VFS
+- No WebSocket support - uses Durable Objects' distributed consistency
+
+---
+<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/examples/expo-adapter/index.md

@@ -0,0 +1,44 @@
+# Expo Adapter Examples
+
+# Expo Adapter Examples
+
+Examples using `@livestore/adapter-expo` for React Native mobile applications.
+
+<CardGrid>
+{expoExamples.map((example) => {
+  const { url, label } = getExampleDemoLinks(example);
+
+  return (
+    <Card title={example.title} key={example.title}>
+    {example.image ? (
+      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
+    ) : (
+      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
+        Screenshot coming soon
+      </div>
+    )}
+    <p>{example.description}</p>
+    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
+    {example.syncProvider && (
+      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
+    )}
+    <div style="margin-top: auto; padding-top: 1rem;">
+      {url && (
+        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
+      )}
+      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
+    </div>
+    </Card>
+  );
+})}
+</CardGrid>
+
+## Expo Adapter
+
+- Uses native Expo SQLite stored in device's SQLite directory
+- Requires New Architecture (Fabric) - incompatible with old architecture
+- Single-threaded operation in main thread
+- WebSocket connections for sync via React Native dev server
+
+---
+<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/examples/index.md

@@ -0,0 +1,55 @@
+# Examples
+
+# Example Applications
+
+Discover how to build local-first applications with LiveStore through our comprehensive collection of example apps. Each example demonstrates different features, patterns, and platform integrations to help you get started quickly.
+
+## Browse by Platform Adapter
+
+LiveStore supports multiple platform adapters, each optimized for different environments. Choose the adapter that matches your target platform:
+
+<CardGrid>
+  <LinkCard 
+    title="Web Adapter" 
+    href="/examples/web-adapter/"
+    description={`Browser-based applications with SQLite WASM, Web Workers, and framework integrations. ${webExamples.length} examples • React, SolidJS, Svelte, Web Components`}
+  />
+
+  <LinkCard 
+    title="Node Adapter" 
+    href="/examples/node-adapter/"
+    description={`Server-side applications, CLI tools, and backend services with native SQLite performance. ${nodeExamples.length} examples • Effect, CLI applications`}
+  />
+
+  <LinkCard 
+    title="Expo Adapter" 
+    href="/examples/expo-adapter/"
+    description={`React Native mobile applications with offline-first architecture and cross-platform sync. ${expoExamples.length} examples • iOS, Android, React Native`}
+  />
+
+  <LinkCard 
+    title="Cloudflare Durable Objects" 
+    href="/examples/cloudflare-adapter/"
+    description={`Edge computing with Durable Objects, global distribution, and serverless scaling. ${cloudflareExamples.length} examples • Workers, Durable Objects, Edge`}
+  />
+</CardGrid>
+
+## Getting Started
+
+1. **Choose your platform** from the adapter categories above
+2. **Browse examples** that match your use case and framework preference  
+3. **Clone and run** the examples locally to see LiveStore in action
+4. **Study the source code** to understand patterns and best practices
+
+## Multi-Adapter Examples
+
+Some examples demonstrate **cross-platform synchronization** by using multiple adapters:
+- **CF Chat** uses both Web and Cloudflare adapters for hybrid client-server architecture
+- **Sync-enabled examples** show how to connect different platforms seamlessly
+
+## About LiveStore
+
+LiveStore is a local-first data layer that runs everywhere - from browsers to mobile apps to edge computing. Each adapter provides platform-optimized features while maintaining a consistent API across all environments.
+
+---
+<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/examples/node-adapter/index.md

@@ -0,0 +1,44 @@
+# Node Adapter Examples
+
+# Node Adapter Examples
+
+Examples using `@livestore/adapter-node` for Node.js server-side applications.
+
+<CardGrid>
+{nodeExamples.map((example) => {
+  const { url, label } = getExampleDemoLinks(example);
+
+  return (
+    <Card title={example.title} key={example.title}>
+    {example.image ? (
+      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
+    ) : (
+      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
+        Screenshot coming soon
+      </div>
+    )}
+    <p>{example.description}</p>
+    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
+    {example.syncProvider && (
+      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
+    )}
+    <div style="margin-top: auto; padding-top: 1rem;">
+      {url && (
+        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
+      )}
+      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
+    </div>
+    </Card>
+  );
+})}
+</CardGrid>
+
+## Node Adapter
+
+- Uses native Node.js SQLite with file system storage
+- Stores SQLite files directly on disk (default: current directory)
+- Supports single-threaded or worker thread modes
+- WebSocket connections for sync and devtools integration
+
+---
+<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>

package/docs/examples/web-adapter/index.md

@@ -0,0 +1,52 @@
+# Web Adapter Examples
+
+# Web Adapter Examples
+
+Examples using `@livestore/adapter-web` for browser environments.
+
+<CardGrid>
+{webExamples.map((example) => {
+  const { url, label } = getExampleDemoLinks(example);
+
+  return (
+    <Card title={example.title} key={example.title}>
+    {example.image ? (
+      <Image src={example.image.url} width={example.image.width} height={example.image.height} alt={`${example.title} application interface`} />
+    ) : (
+      <div style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; border-radius: 8px;">
+        Screenshot coming soon
+      </div>
+    )}
+    <p>{example.description}</p>
+    <p><strong>Technologies:</strong> {example.technologies.join(' • ')}</p>
+    {example.syncProvider && (
+      <p><strong>Sync Provider:</strong> {example.syncProvider}</p>
+    )}
+    <div style="margin-top: auto; padding-top: 1rem;">
+      {url && (
+        <p style="margin: 0 0 0.5rem 0;"><a href={url} target="_blank" rel="noopener noreferrer">{label}</a></p>
+      )}
+      <p style="margin: 0;"><a href={example.sourceUrl} target="_blank" rel="noopener noreferrer">View Source →</a></p>
+    </div>
+    </Card>
+  );
+})}
+</CardGrid>
+
+## Web Adapter
+
+- Uses SQLite WASM with OPFS (Origin Private File System) for browser storage
+- Runs in Web Workers and SharedWorkers for multi-tab coordination
+- Persists data via OPFS Access Handle Pool VFS
+- Supports WebSocket connections for sync and devtools
+
+## Frameworks
+
+- React (`@livestore/react`)
+- SolidJS (`@livestore/solid`) 
+- Svelte (`@livestore/svelte`)
+- Web Components
+- Vanilla JavaScript
+
+---
+<a href={`https://github.com/livestorejs/livestore/tree/${getBranchName()}/examples`}>View all examples on GitHub →</a>