Skip to content

meatflavourdev/svelt-yjs-mousepos

Folders and files

NameName
Last commit message
Last commit date
Oct 16, 2020
Jan 7, 2021
Oct 17, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 16, 2020
Oct 21, 2020
Oct 16, 2020
Nov 18, 2020
Oct 16, 2020
Oct 16, 2020
Apr 1, 2021

Repository files navigation

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 { array, map } 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 = array.readable(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