Learn Yjs Interactively
19 comments
·January 16, 2025jakelazaroff
santa_boy
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?
paulgb
Y-sweet (which this is built with) allows you to make a Yjs app local-first by passing “offlineSupport” to the provider when constructing.
There’s a demo of this here: https://demos.y-sweet.dev/color-grid
The source for that demo is here: https://github.com/jamsocket/y-sweet/blob/5fa6941cf5568f4a3f...
That demo uses react, but there is a vanilla js version of the same demo here: https://github.com/jamsocket/y-sweet/tree/main/examples/vani...
(The vanilla js version is not local first, but it would just be a matter of passing the same offlineSupport flag to make it so.)
santa_boy
Thank you. This is the direction I needed. Will try out
null
nhatcher
Woah! Beautifully done! I wonder if I will finally understand CRDT with this. Will go through it over the weekend.
Congratulations!
oefrha
I used Yjs in a small side project a while ago. The client side was fairly easy to learn and use. On the server side though, I wanted to deploy a single binary, but examples in languages other than Node (e.g. for the Rust port Yrs) seemed close to nonexistent, so I ended up slightly adapting https://github.com/yjs/y-websocket (Node) with persistence based on LevelDB. That's suboptimal for me. I wonder if there are good resources for implementing the server-side with persistence in, say, Rust.
Btw, IIRC existing resources for the client side are heavily focused on text editor integrations, so this is really helpful. I had to fumble a bit myself because I wasn't using a text editor integration.
paulgb
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.
oefrha
Thanks, I'll look into it. It's pretty low on the list of search results for Yjs server, I somehow missed it the last time.
__MatrixMan__
I finally got a four leaf clover and somebody ruined it after like 2m.
Edit: Wait, where did everybody go? I think we broke it, or maybe I got banned. Kudos to the creator just the same. Neat stuff.
jakelazaroff
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 :)
stopachka
The interactive demos are beautiful! Is there a library you used to build it?
jakelazaroff
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.
downrightmike
The banner image game is silly but fun
dangoodmanUT
another banger from the jamsocket team
sergiotapia
is Yjs a platform like Convex? are they competing? would love a comparison page potentially! :pray:
paulgb
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).
showdown
what's the main differences in your opinion between y-sweet and Hocuspocus?
paulgb
The biggest difference is that Y-Sweet is built around object storage (i.e. S3 and friends) rather than a database.
This allows writes to scale horizontally without a central database being the bottleneck. It’s also a much cheaper way to store lots of documents accumulating over time on S3 than in a database. This is because compute scales with how much data you actually access, not how much data you store.
I wrote about why object storage is a good fit for this here: https://digest.browsertech.com/archive/browsertech-digest-fi....
Hey HN! I'm the developer at Jamsocket who made this. In case you're not familiar with Yjs, it's a CRDT library for building collaborative and local-first apps.
The thing is, if you're not used to working with distributed state there's definitely a learning curve. Even simple things like incrementing a counter — the "hello world" of JavaScript framework demos — get tricky when dealing with multiple clients. Worse, a lot of tutorials are just like "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.
So we made Learn Yjs! It's an interactive Yjs tutorial. I wanted it to be really intuitive for people just getting their feet wet with local-first development, so there are lots of explorable demos and coding exercises. The idea is to use interactive examples to build an understanding from the ground up.
Hope you like it :)