stevenfabre

This blog post is a piece of art. Well done!

Genuinely happy for Sunil who built a great community and moved the space forward!

Liveblocks also runs partly on Cloudflare Workers, it’s been great for stateful real-time servers.

Thanks for posting this!

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.

Hi HackerNews,

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.

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-multi... - https://liveblocks.io/blog/how-to-animate-multiplayer-cursor...

Happy to answer any questions you may have!

Couldn’t agree more!

And liveblocks.io is here to make that happen at scale.

Awesome to hear from the Notion team who really gets this deeply.

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?

Thank you. I think you misunderstood me. By extra pluming I meant: extra pluming on the block-based text editor as it is.

Supporting multiplayer collaboration at the character level is much more difficult and we’re very well aware of that :)

Liveblocks does support multiplayer undo/redo. We even wrote an interactive blog post about it: https://liveblocks.io/blog/how-to-build-undo-redo-in-a-multi...

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! :)

True! I would also include https://liveblocks.io to that list of services that help developers make multiplayer experiences.

Interesting to see more players in this space to help more and more developers do this.

We learned so much from Figma at Liveblocks. We spent the last 2 years rebuilding a lot of those core concepts as APIs any developers can use to make their own product multiplayer.

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

Really impressive experience! Great work Next.js!

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!

Hi HN

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 :)

Hi there,

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!

Exactly! With Liveblocks, you can also store anything presence related. You can for instance store a selectedId and use that on the other side to highlight the selected element.

We build our interactive visuals with React and embed those into the mdx file for the blog post.

I made note for us to write a blog post about it. Stay tuned :)

Good point, it's also important to consider this in the context of the application that will use those multiplayer cursors. It's important that the state of the document matches the cursors, so it makes sense to have both presence (cursors, selection) and storage (document data) be perfectly in sync even if that means having a slight 80-200ms delay.

That would be pretty meta! "how to create how to interactive articles" :)

We're hiring at Liveblocks. Come help us make the web more collaborative: - Full Stack Engineers x 3 - Dev Rel Engineer - Tech Writer

https://join.team/liveblocks

REMOTE

Noted. Thanks for the feedback. We do have a light theme version on the dashboard, it would be great to add it to the website too.

We support 20 simultaneous connections per room on the Pro plan. With the organization plan, we’ve been able to increase this to about 50 simultaneous connections per room depending on the use case.

We would technically be able to go beyond that but will likely require bigger servers. Depends on what you’re trying to build.

Thank you! Can’t wait to see what you build with it.

Thank you!

Thank you so much!

Would love to nerd out on the implementation too at some point if you'd like. :)

Hi HN,

We'll be here today to answer any questions you may have. Hope you enjoy the article!

Thanks, Steven

Great article from Steve Ruiz on his experience using Liveblocks to convert Tldraw to multiplayer!

Hi Hacker News,

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!

http://liveblocks.io/storage

Thanks, Steven

Hi Hacker News,

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!

http://liveblocks.io/storage

Thanks, Steven

Hi Hacker News,

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

Easily turn your Sketch layers into high-quality GIFs with Gifmock for Sketch. Also available on Figma and macOS.