@groundstate/svelte

Svelte stores for building local-first apps with @groundstate.

Installation

# npm
npm install @groundstate/svelte @groundstate/crdt

# yarn
yarn add @groundstate/svelte @groundstate/crdt

# pnpm
pnpm add @groundstate/svelte @groundstate/crdt

Peer dependency: Svelte 4+

Quick Start

<script lang="ts">
  import { docStore, fieldStore, presenceStore } from '@groundstate/svelte';
  import { Doc, Field, List } from '@groundstate/crdt';

  const schema = { title: Field(''), tags: List<string>() };
  const doc = docStore(Doc(schema), { sync: syncEngine });
  const title = fieldStore(doc, 'title');
  const presence = presenceStore(doc);
</script>

<div>
  <input bind:value={$title} />
  <p>{$presence.peers.length} peer(s) online</p>
</div>

API Highlights

Stores

• docStore(doc, options?) -- Writable Svelte store for the full document
• fieldStore(doc, path) -- Writable store bound to a single field
• presenceStore(doc) -- Readable store tracking peer presence (cursors, selections, names)
• syncStatusStore(doc) -- Readable store monitoring sync connection state and progress
• conflictsStore(doc) -- Readable store exposing detected conflicts for manual resolution

Types

• PeerPresence -- Shape of a single peer's presence data
• SyncState / SyncStatus -- Sync connection and progress metadata
• ConflictEntry -- Individual conflict descriptor

All stores follow Svelte's standard store contract, so they work with $-prefix auto-subscriptions and bind:value.

Usage with SvelteKit

Works in both client and server contexts. For SSR, initialize stores in +page.ts or +layout.ts loaders and pass them to components:

// +page.ts
import { docStore } from '@groundstate/svelte';
import { Doc, Field } from '@groundstate/crdt';

export function load() {
  return { doc: docStore(Doc({ title: Field('') })) };
}

Documentation

See the full documentation for complete API reference.

License

MIT