Announce: Svelt-yjs

Show
1

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.

2 Likes
2

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

3

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.

4

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

5

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)

1 Like
6

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. :roll_eyes:

Anyway, thanks for sharing!

7

Hi @danny-andrews,

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:

export const useNodes = (yDoc: Y.Doc): NodeConfig[] => {
  const [nodes, setNodes] = useState<NodeConfig[]>([]);

  useEffect(() => {
    const yNodes = yDoc.getArray('nodes');

    const nodeObserver = () =>
      requestAnimationFrame(() =>
        setNodes(yNodes.toArray())
      );

    yNodes.observe(nodeObserver);
    return () => yNodes.unobserve(nodeObserver);
  }, []);

  return nodes;
};

Maybe it helps :slight_smile:

(Sry @canadaduane for bloating your thread with react stuff :see_no_evil:)

2 Likes
8

Thanks for sharing this! That article is really helpful.