Svelt-yjs is a library for your Svelte app that lets you build Svelte stores from Yjs types. When built on the client-side Yjs library, your Svelte app gets transport-agnostic synchronization (e.g. y-webrtc, y-websocket ) across networks and undo/redo management basically for free.
Yjs is often thought of as a way to make collaborative text editing work in a browser, but its underlying technology is amenable to a variety of web use cases. We think Svelte and Yjs are positioned to make collaborative, local-first apps much easier to build.
At Relm, for example, we've been using it as the synchronization layer between participants in a collaborative 3D world.
Open it up in multiple browsers at the same time!
Note: the source code for the Live Demo is in the example/ folder.
Starting with a Svelte component:
<script lang="ts">
import { readableArray } from 'svelt-yjs'
import * as Y from 'yjs'
// All Yjs types must be embedded in a Y.Doc
const ydoc: Y.Doc = new Y.Doc()
// Create a Y.Array in the Y.Doc
const yarray: Y.Array<string> = ydoc.getArray('list')
// Generate a Svelte readable store from the Y.Array
const list = readableArray(yarray)
// The store has a `y` object that references `yarray`
// Note: The following is identical to `yarray.push(['one', 'two', 'three'])`
// See Yjs docs for other methods on Y.Array.
list.y.push(['one', 'two', 'three'])
</script>
{#each $list as item, i}
<div>
{item}
<button on:click={() => list.y.delete(i)}>remove</button>
</div>
{/each}MIT