# Web adapter examples

import { Card, CardGrid } from '@astrojs/starlight/components';
import { Image } from 'astro:assets';
import { contribExamplesUrl, webExamples, getExampleDemoLinks } from '../../../data/examples.ts';

# 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} 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={contribExamplesUrl}>View all examples on GitHub →</a>