This blog post is a piece of art. Well done!
172 karma · joined November 30, 2020
Liveblocks also runs partly on Cloudflare Workers, it’s been great for stateful real-time servers.
We announced Liveblocks 1.0 yesterday and a starter kit for Next.js to help develops kickstart their collaborative apps like Figma, Notion, and more.
We think this can help developers save months of work. Please let us know if you have any questions! We'll be here all day.
We’re excited to launch the Liveblocks Starter Kit to help developers kickstart their Next.js collaborative apps in minutes. With the Starter Kit, you can finally stop wasting weeks rebuilding table-stakes collaborative features—enabling you to focus on your core product: - A workspace to browse and organize documents—including groups and private drafts - The foundation of a customizable Figma-like real-time collaborative editor - A share dialog with groups and user read/write permissions - Real-time updates throughout the app—so your users won’t ever need to refresh again
The Liveblocks Starter Kit is built with the best tools the Typescript ecosystem has to offer: Next.js, NextAuth, Radix, Node, CSS, and SWR. It’s also built with flexibility and customization in mind, so you can easily make it look and feel like your product, not an afterthought.
My co-founder and I have experienced first-hand how difficult and time-consuming building a real-time collaborative product can be, that’s why we created Liveblocks almost 2 years ago. The Starter Kit is the tool we wish we always had, so we hope you’ll like it!
And of course, AMA! The Liveblocks team and I will be around all day to answer questions.
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-multi... - https://liveblocks.io/blog/how-to-animate-multiplayer-cursor...
Happy to answer any questions you may have!
And liveblocks.io is here to make that happen at scale.
Slate definitely has its own limitations, especially when used on non desktop devices. Seems like ProseMirror would be a good open source alternative to Slate, what do you think?
Supporting multiplayer collaboration at the character level is much more difficult and we’re very well aware of that :)
Our open-source block-based text editor could support it too with some extra pluming (which we haven’t got to yet).
We’re planning to add this in as more and more developers are looking to port this experience into their own products.
Is there anything else you’d like this example to support?
Thanks for the feedback! :)
Interesting to see more players in this space to help more and more developers do this.
If you're interested in more technical articles related to the topic, I think you'll enjoy those two:
- https://liveblocks.io/blog/how-to-animate-multiplayer-cursor...
- https://liveblocks.io/blog/how-to-build-undo-redo-in-a-multi...
Love the work 0xcaOa did with Three.js to create this multiplayer light effect. Glad to see https://liveblocks.io was able to help them prototype this out to get a feel for that experience.
And… it’s great to see the web become a place where people can hang out and feel like they’re together in the same space!
Steven here, co-founder at Liveblocks. Happy to answer any question you may have!
In the meantime... Interested in building a multiplayer note-based app? We've built the foundations to make your project a reality. Add multiple types of blocks, and see them shared in real-time.
Along with text elements, we've got a number of more complex blocks & embeds that are ready to go:
◆ To-do list ◆ Image ◆ YouTube ◆ CodeSandbox ◆ Figma
Our collaborative block text editor is powered by Slate—adding a new block is as simple as creating a new Slate Custom Element. We've written the code to automatically sync Slate's state to Liveblocks.
Hope this helps, and can't wait to see what people create with this :)
Im Steven, co-founder of Liveblocks. Thanks for your feedback on pricing. We try to have a fair pricing for everyone and for companies of all sizes.
We’re working on a new pricing that will make this much more affordable, even free in most cases.
Would love to get your feedback on that if you’re up for it?
Thanks!
I made note for us to write a blog post about it. Stay tuned :)
REMOTE
We would technically be able to go beyond that but will likely require bigger servers. Depends on what you’re trying to build.
Would love to nerd out on the implementation too at some point if you'd like. :)
We'll be here today to answer any questions you may have. Hope you enjoy the article!
Thanks, Steven
Storage block was the last missing piece to enable developers to make any product multiplayer. Let’s look at the Liveblocks React, Redux, Zustand integrations in more detail…
With Storage block, you can synchronize your application state between users, while Liveblocks automatically handles all the conflicts behind the scene.
With Presence block, you can make your users feel as if they were together in the same room by adding features like live cursors, live selection, and live avatar stack to your product.
When you combine Presence and Storage together, you can create incredible and performant multiplayer experiences. Our integrations with React, Redux, and Zustand enable you to convert an existing non-collaborative product into one in minutes.
When you’re done making your product multiplayer, you can then use Analytics block to get a real-time understanding on how people are collaborating in your product, helping you make informed product decisions and iterate with confidence.
Most importantly, we’re building this in the open to help create the best real-time collaboration infrastructure the developer community is asking for. We'll be around all day to answer any questions you have about Liveblocks — ask us anything!
Thanks, Steven
Storage block was the last missing piece to enable developers to make any product multiplayer. Let’s look at the Liveblocks React, Redux, Zustand integrations in more detail…
With Storage block, you can synchronize your application state between users, while Liveblocks automatically handles all the conflicts behind the scene.
With Presence block, you can make your users feel as if they were together in the same room by adding features like live cursors, live selection, and live avatar stack to your product.
When you combine Presence and Storage together, you can create incredible and performant multiplayer experiences. Our integrations with React, Redux, and Zustand enable you to convert an existing non-collaborative product into one in minutes.
When you’re done making your product multiplayer, you can then use Analytics block to get a real-time understanding on how people are collaborating in your product, helping you make informed product decisions and iterate with confidence.
Most importantly, we’re building this in the open to help create the best real-time collaboration infrastructure the developer community is asking for. We'll be around all day to answer any questions you have about Liveblocks — ask us anything!
Thanks, Steven
My co-founder (Guillaume Salles) and I started making an online collaborative video presentation software. But instead of focusing on the core mechanics of the tool, we realized pretty quickly that we were spending a majority of our time figuring out how to handle real‑time collaboration.
A lot of questions had to be answered. What should happen when there are many people concurrently editing the same piece of data? Should all data even be handled the same way? What about people on slow connections? The list goes on.
We tried existing solutions, but none really stacked up for what we were trying to do. That’s when we decided to build our own. Liveblocks was born :)
We'll be around all day to answer any questions you have about Liveblocks — ask us anything!
Thanks, Steven