Announce: Svelt-yjs

I’m pleased to announce the initial release of Sveltyjs:

https://svelt-yjs.dev/

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.

1 Like

@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.

The Svelte project maintainers have asked that I make sveltyjs a little more distinctive in its branding, so I’ve taken the demo page down for now.

See https://github.com/relm-us/svelt-yjs for its future replacement.

And we’re back! “sveltyjs” is now “svelt-yjs”.

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

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)