mmamedel/svelt-yjs

A library for your Svelte app that lets you build Svelte stores from Yjs types.

Svelt-yjs

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.

Live Demo

See https://svelt-yjs.dev

Open it up in multiple browsers at the same time!

Note: the source code for the Live Demo is in the example/ folder.

Getting Started

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}

License

MIT