The blog of Liveblocks, a company selling tools for real-time collaboration, with posts on multiplayer cursors, undo/redo, CRDTs, and editors.
HN commenters recommend Liveblocks for adding multiplayer features in React apps, though one admits bias, and link it for collaboration and conflict resolution topics.
Hey, author here! Glad folks are enjoying this.
A few notes:
- I post a _lot_ about tldraw on Twitter. If you're curious about how this came together, or want to follow along as we ship new features, check out my timeline (https://twitter.com/steveruizok).
- The whole tldraw project is MIT licensed and open source (https://github.com/tldraw). And it's still in development! If you'd like to contribute, join the Discord channel (https://discord.gg/SBBEVCA4PG) or drop by the repo (https://github.com/tldraw/tldraw).
- The multiplayer is using a pre-release version of Liveblocks (https://liveblocks.io/)—and honestly isn't using it in a very clever way—and so can have some desync issues. Consider this part of the app an early beta.
- We also ship a Visual Studio Code extension that lets you use tldraw inside of VS Code! (https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode)
A little more about the project itself:
The tldraw project has a few different layers.
At the bottom, there is a renderer named @tldraw/core (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a data model along with a set of utilities to interpret that data model. Simple but very fast, very flexible, and packed with helpers for building these kinds of apps. It's already being used for some pretty ambitious projects apart from tldraw itself.
The main library, @tldraw/tldraw (https://github.com/tldraw/core), exports the…
Yjs is nice. Easy to get p2p results.
Yjs backend, its persistence, eventual conflict resolution (one of editors stayed too long offline), history rewind seems like a tough engineering challenge to crack.
Always wanted to have a nice experience with block editor like Platejs https://platejs.org/
There are nice attempts simplify dev experience with solutions like Liveblocks https://liveblocks.io/text-editor However most options come at the expense of controlling your data.
CRDT keyword search on HN bring consistently good results and interest in the topic, but no good options on open source backend side. Checked it many times in the past. Please correct me if I missed something.
https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=true&query=CRDT&sort=byPopularity&type=story
Most people expectations it should work at least as in Google Docs or Notion, and on the dev side it should be store privately in Postgres JSONB like format without going deep into details.
Wow, Sacha! 10 years already. Meteor was one of the first Javascript frameworks which gave me joy. Maybe the closest to that today is Imba. Realtime all the time was performance heavy for sure but so much fun. I recently saw https://liveblocks.io/ which is trying to do realtime primitives for the current wave. Discover Meteor was one of the first "modern" programming framework books I bought and I still remember the book built around an example, something which was missing from a lot of books in that era. Modern JS is a complicated mess. I would love to go back to that era where people were trying to do magical things with one api call. Hooks in React is more complicated than a whole library from that era. That is not a good thing. In 10 years we should have had far more higher level tools. Wish you all the best. Meteor gave me a lot of joy. Maybe I will try building something with it again to see where it's at.
Good question!
There are still a lot of specialized editors that are not text-based nor collaborative yet.
In the creative space, we can imagine 3D collaborative editors (think Figma but for 3D). Here is an example built with liveblocks: https://liveblocks.io/examples/3d-shoe-builder
Filling a form can also be a collaborative experience: https://liveblocks.io/examples/collaborative-logo-builder
Building a form can also be a collaborative experience! Think Typeform editor with multi-player features.
All the no-code tools could benefit from multi-players feature. Any "data entry" could be collaborative.
For example, we're working with https://cloverapp.co/ to improve their collaborative features (live cursors on whiteboard and live avatars).
I hope it answers your question
I personally enjoy any sort of interactivity in tech articles. Things like sliders, inputs and buttons are great at keeping attention and can help make the subject easier to understand or illustrate things that can't easily be described in text.
Some examples:
https://liveblocks.io/blog/how-to-animate-multiplayer-cursors
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox
https://ciechanow.ski/bicycle/
Although it's all very content dependent of course - FE development tends to lend itself a bit better to this sort of format.
Hi Tim,
I'm a bit biased but https://liveblocks.io is great for that :)
If you know how to use React, that's pretty much all you need to know. It also includes some nice hooks to enable things like multiplayer undo/redo and live cursors.
The team even put a couple of interactive blog posts about that that you might find interesting:
- https://liveblocks.io/blog/how-to-build-undo-redo-in-a-multiplayer-environment
- https://liveblocks.io/blog/how-to-animate-multiplayer-cursors
Happy to answer any questions you may have!