> "install this library and text editor integration and boom you have an app", which doesn't give you a good mental model for what's actually happening.

I was interested in working with CRDTs and collaboration in general for a while now and this has been the biggest issue whenever I tried to get into it. Websockets also seem a bit harder to find (free) hosting for.

Btw, your other tutorials on CRDTs were also a great help.

I am just looking at this but quick question. Is there an example for building a local-first app? Also, I working with plain vanilla HTML & JS and Alpine. Can this be used in my apps?

Thank you. Keep going. Very good topic to expand

Woah! Beautifully done! I wonder if I will finally understand CRDT with this. Will go through it over the weekend.

Congratulations!

I agree. In theory you need to just distribute serialized patches but in a real world backend scenario you may need to integrate with knowledge of current document state, user identity, and possibly even some level of access control.

I’ve wanted to use Y.js with a Go backend multiple times but gave up each time due to time constraints as it’s hard to find simple reference implementations.

I’ve been checking back over the years but it still seems hard to do this outside of Node.js.

We wanted to go with the simplest model of latency that would suffice to demonstrate the problems that come up when dealing with state mutated in multiple locations. The advantage of this approach is that we can do it without hiding any state from the reader — the pie chart exposes the only internal state that exists. It’s not meant to be an accurate network simulation, just to build intuition.

Sorry, just did that test - it is 1075, not massive, I would risk saying that may be major issue of this lib.

Here is the code:

let left = 0, right = 1

let rightPrevious = 2

let counter = 0;

while (right > left && right < rightPrevious) {

    rightPrevious = right;

    right /= 2;

    counter++

console.log(counter)

Did look very briefly into repo, but didn't find a place where it is handled and don't have time to dig it, but if that issue is true I may help with resolving it. LMK

You might like Y-Sweet[1], an open-source Rust server that powers the banner on Learn Yjs. It uses S3 or the local filesystem for storage, and it compiles down to a musl-linked binary that weighs a few megabytes.

https://github.com/jamsocket/y-sweet

Thank you! The site as a whole is built with Astro and the demos are “islands of interactivity” built with React.

The demos are really running Yjs under the hood — each “client” has its own document, and when the user clicks I set a timeout to simulate the latency and then manually merge the documents into each other. (There’s a third document too for the timeline in the center.)

Other than that, I’m using dnd kit [1] for the drag and drop functionality in the todos demo, Motion [2] for the animations and CodeMirror [3] for the text editor.

[1] https://dndkit.com

[2] https://motion.dev

[3] https://codemirror.net

Reminds me of the fun reddit used to have with places and such:

Team purple ftw: https://imgur.com/a/Oxc6jUA

You can think of Yjs as a protocol for data synchronization. It gives you a way to describe a JSON-like data structure (i.e. nested lists and maps), and keep them in sync across multiple devices.

Yjs itself doesn't provide a platform, but it's an open protocol so there there are service providers (like ourselves[1]) that offer Yjs backends as a service (other notable providers are TipTap/Hocusocus and Liveblocks).

[1] https://jamsocket.com/y-sweet

You definitely aren’t banned! Maybe people just tapered off for a bit — I see a bunch of cursors now.

There are two more secret emojis, by the way :)