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 across networks (e.g. y-webrtc, y-websocket, etc.) 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.
@dmonad I’m curious–would it be ok to use your hosted y-websocket server for the sveltyjs demo page? If so I can make it a github page and not worry about added complexity of hosting a server side just for a demo.
Today I had a look at svelt-yjs and it is really fun to use! It works naturally well with svelte and I’m really happy that this module exists - thanks for writing it!
It’s just magical how things sync across tabs without setting up a backend
Aside from creating real-time, local-first apps I imagine this being useful in other areas as well:
For forms that automatically sync with your phone and other computers connected to your account. Ever filled out a complicated form and wanted to continue on a different device?
Replacement for Firebase / FireSvelte with a open-source backend.
Sync uncommitted changes to forms, textareas, or other application logic to indexeddb. The data can still be submitted via a submit button, but it is locally preserved so that you will never loose changes again.
Feedback so far:
The API seems to be pretty simple, but it would be helpful to have an API documentation.
Why is it called svelt-yjs and not svelte-yjs? (I have no clue about the Svelte ecosystem so I might miss something)
This looks really cool! Svelte’s reactive nature seems like a perfect fit for CRDT’s. I’m trying to integrate yjs with an existing React application, and it’s a bit of a bear. React’s data model just doesn’t vibe well with observables, despite its name.
I also use yjs in a react application. And yes, native support for reactive state would be great (like angular does it).
But I think with react there are quite some handy solutions, as well.
In some prior frontend applications, I used akita as a reactive state store for react. Here I learned about the streaming architecture in combination with react state and hooks which I think works really well.
This is a great article explaining solutions:
To show a little snippet with yjs or lib0/oberserverables. It could look like the following: