←back to thread

Learn Yjs Interactively

(learn.yjs.dev)
296 points paulgb | 4 comments | | HN request time: 0.598s | source
1. stopachka ◴[] No.42732336[source]
The interactive demos are beautiful! Is there a library you used to build it?
replies(1): >>42732542 #
2. jakelazaroff ◴[] No.42732542[source]
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

replies(2): >>42734809 #>>42739053 #
3. stopachka ◴[] No.42734809[source]
Thank you Jake! I just played with the motion website and loved it. I am going to try to use it sometime
4. techan_liquid ◴[] No.42739053[source]
Great work Jake! I love the Astro and the “islands of interactivity”. Is it possible to see the repo, if it's public? I couldn't find it anywhere.