Liveblocks Blog

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-env… - https://liveblocks.io/blog/how-to-animate-multiplayer-cursors Happy to answer any questions you may have!

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.

Absolutely! The real complexity comes from conflict resolution. If someone edits the top, and someone else edits the bottom, which version do you go with? What if they're editing the same area? Entire companies exist to provide elegant solutions to this[0], so it's no simple task. 0: https://liveblocks.io/

I can imagine, browser extensions are a pain in the butt. Are you planning to open source the code? Did you build everything by yourself or on top of https://liveblocks.io/?

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.

among my favorite apps/websites that support dark mode: - https://around.co/ - https://fig.io/ - https://linear.app/ - https://liveblocks.io/ - https://raycast.com/ - https://supabase.com/ - https://volta.net/ hope it inspires :)

Very cool use case for CRDTs! I've seen a bunch of different use cases from other products like https://liveblocks.io/ and https://electric-sql.com/. It's interesting how CRDTs are now taking hold so much for all these collaborative syncing scenarios. Wonder what's driving the proliferation now given they've been around for awhile?

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 know Liveblocks.io has been making this very easy and accessible over the last few years. They recently introduced AI, and are promoting that of course, but as I understand it multiplayer collaboration (https://liveblocks.io/multiplayer-editing) is their meat and potatoes. Not affiliated with Liveblocks, just aware of its existence.

Yes there is! You can use @liveblocks/client: https://liveblocks.io/docs/api-reference/liveblocks-client There's also a tutorial for getting started here: https://liveblocks.io/docs/get-started/javascript Enjoy :)

Some people have already solved that, like Liveblocks.io Here's an example of Notion-like text editor with multiplayer: https://liveblocks.io/examples/block-text-editor-advanced/nextjs (and yes, it is very complex lol)

Thanks for the explanation! Ok, I see, so the focus is more on the technology than the end-product. How does it handle concurrency in interactions? https://liveblocks.io/blog/how-to-build-undo-redo-in-a-multiplayer-env…

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&… 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.

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-… 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…