https://github.com/relm-us/svelt-yjs

A library for your Svelte app that lets you build Svelte stores from Yjs types.
https://github.com/relm-us/svelt-yjs

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/relm-us/svelt-yjs
• Owner: relm-us
• License: mit
• Created: 2020-10-16T14:45:14.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-12T16:59:50.000Z (10 months ago)
• Last Synced: 2024-09-26T21:55:34.280Z (about 1 month ago)
• Language: Svelte
• Homepage:
• Size: 425 KB
• Stars: 88
• Watchers: 3
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - relm-us/svelt-yjs - A library for your Svelte app that lets you build Svelte stores from Yjs types. (others)

README

        
# Svelt-yjs

[Svelt-yjs](https://github.com/relm-us/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](https://github.com/yjs/y-webrtc),

[y-websocket](https://github.com/yjs/y-websocket) ) across networks and

undo/redo management basically for free.

[Yjs](https://yjs.dev) 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](https://svelte.dev) and Yjs are

positioned to make collaborative,

[local-first](https://www.inkandswitch.com/local-first.html) apps much easier to

build.

At [Relm](https://github.com/relm-us), for example, we've been using it as the

synchronization layer between participants in a [collaborative 3D

world](https://www.relm.us). 

## 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:

```svelte

  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'])

{#each $list as item, i}

  


    {item}

     list.y.delete(i)}>remove

  

{/each}

```


## License

MIT