syncroState

Bringing Svelte reactivity to the multiplayer level

pnpm add syncroState

Features

Built on top of Yjs, syncroState provides a reactive and type-safe way to build multiplayer experiences. Inspired by Syncedstore, SyncroState modernizes collaborative state management by leveraging new Svelte 5's reactivity system. It provides a natural way to work with synchronized state that feels just like a regular Svelte $state.

🚀 Powered by Yjs

Industry-leading CRDT for conflict-free real-time collaboration

🔒 Type-Safe

Full TypeScript support with rich type inference

💫 Svelte Native

Works like regular Svelte state with fine-grained reactivity

🎯 Rich Data Types

Support for primitives, arrays, objects, dates, enums, and more

🔌 Provider Agnostic

Works with Liveblocks, PartyKit, or any Yjs provider

↩️ Undo/Redo

Built-in support for state history

🎮 Bindable

Use bind:value like you would with any Svelte state

🎨 Optional & Nullable

Flexible schema definition with optional and nullable fields

What's coming

Sets and Maps

Adding support for Set and Map types

Schema-less architecture

Working on making syncrostate schema optional

Recursive Types

Adding support for recursive types

Nested Documents

Planning to add support for nested documents

Usage

			
    <script>
    // Import your Yjs provider
	import { createClient } from '@liveblocks/client';
	import { LiveblocksYjsProvider } from '@liveblocks/yjs';

    // Import syncroState and y (the schema builder)
    import { syncroState, y } from 'syncrostate';

    // Declare the syncroState
    const document = syncroState({
    // Connect to a Yjs provider and then call the synced callback when the document is synced
		sync: async ({ doc, synced }) => {
            // Create a liveblocks client
            const client = createClient({
                publicApiKey: ''
            });
            const { room } = client.enterRoom('room');
			const yProvider = new LiveblocksYjsProvider(room, doc);
			yProvider.on('synced', () => {
				synced();
			});
		},
		// Define the schema of the state
		schema: {
			nodes: y.array(
				y.object({
					type: y.enum('rect', 'circle'),
					x: y.number(),
					y: y.number(),
					fill: y.string()
				})
			)
		}
	});
    </script>

    <button onclick={() => {
        // Mutate the state
        document.nodes.push({
            type: 'rect',
            x: 100,
            y: 100,
            fill: 'red'
        });
    }}>Add node</button>

Demo

Drag and drop shapes to the canvas and see them sync across multiple users.

About syncroState

SyncroState is my contribution to the Svelte Hackathon. Hope you enjoy it!

Documentation is available on the GitHub repository.

Crédits

SyncroState is built upon Yjs ❤️, the powerful CRDT library that makes real-time collaboration possible. We gratefully acknowledge SyncedStore for pioneering collaborative state management concepts, and the Svelte team for their exceptional framework and new reactivity system that serves as our foundation.