7 ms·

Liveblocks: Add real‑time collaboration to your product in minutes

95 points by mxstbr 5y ago

likecarter 5y ago
Wow. Something I’ve really had a need for recently. It’s a hard technical problem, so I wouldn’t be surprised if this takes off.
stevenfabre 5y ago
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
- rhythmofrest 5y ago
  Hi, thanks for posting! :) It reminds me of https://togetherjs.com/ https://togetherjs.com/ which I guess you looked at? What were the shortfalls/differences that you found you had to address? Is your product React-only?
  - guillaumesalles 5y ago
    Hi! Great questions :) Liveblocks does not come with a specific UI. We're providing APIs to create rooms and share states between users. The state can be volatile (like cursors, focused input, selection) or persisted even when the session is over, like a figma file or a google document (this part is still in private beta). We're using custom CRDTs for the persisted state. We only have a javascript client and react client, but we plan to support more technologies in the future. Even native clients for desktop or mobile if there is an interest. We have guides to install liveblocks with Next.js, Nuxt.js, and vanilla js + express. https://liveblocks.io/docs#installation https://liveblocks.io/docs#installation We also have open source repositories with working examples with these technologies. https://github.com/liveblocks/javascript-examples https://github.com/liveblocks/javascript-examples https://github.com/liveblocks/next-js-examples https://github.com/liveblocks/next-js-examples https://github.com/liveblocks/nuxt-js-examples https://github.com/liveblocks/nuxt-js-examples Hope it helps! Don't hesitate if you have more questions
- nc 5y ago
  This looks great, how do you stack up against something like YJS?
  - guillaumesalles 5y ago
    Like Yjs, our Storage block is CRDTs based, but we're making different trade-offs. For example, our CRDTs are not "pure" so we solve some conflicts on the server. Also, we don't support Text CRDTs yet. But Liveblocks is not just about conflicts resolution! Our vision is to shape our API and guides to help companies transform existing products into collaborative ones. For example, by simply adding live cursors and avatars and refreshing the data with existing REST endpoints, an existing app becomes more collaborative even if the conflict resolution is not perfect. At the same time, we provide analytics on how Liveblocks is used to help product teams prioritize their collaborative features and if they still want to integrate Liveblocks further. We're also hosting the WebSocket infrastructure and make it scale because we know how troublesome it can be to maintain.
Gys 5y ago
I watched the 1 min intro video, but still have no idea what it actually does. Why I should add this to my website. A simple demo video instead of all the marketing might work better?
- guillaumesalles 5y ago
  Hi Gys, co founder of Liveblocks here! Our goal is to help companies create collaborative products like Figma or Google Docs with API and guides. Multiplayer infrastructure and conflicts resolutions can be challenging to build in-house and we think it will become a commodity (like logging or analytics systems). If our marketing video didn't convince you, maybe our examples page and documentation will give you more information. https://liveblocks.io/examples https://liveblocks.io/examples and https://liveblocks.io/docs https://liveblocks.io/docs
- yllus 5y ago
  Congratulations to the founders for the launch, but unfortunately I had the same response. In situations like these - intrigued but with no real understanding of what the product is - I want the video to show me a real-world example in about ten seconds flat. A more glitzy promo video has its place, but not in a post to Hacker News.
sghosh2 5y ago
Solving a tough technical problem that a lot of teams struggle with. Awesome to see!
bamazizi 5y ago
There are a lot of live sharing/working/... coming out these days. FYI: Your cursor examples uses x/y explicit coordinates where as people using different screen sizes and resolutions wouldn't see proper mouse cursor location. Rather it should be x/y relative coordinates. example x: 35%, y:12% (top left corner to bottom right corner)
- guillaumesalles 5y ago
  From our experience, live cursors positioning depends on the use case and the content behind them. For a "canvas app" (like Figma), the positioning will be absolute with an offset depending on the panning. For a responsive website, if it makes sense to add live cursors, it depends on how the content "flows". For example, if your content scrolls vertically and is centered horizontally, you can use percentage on the "x" axis and absolute on the "y" axis. That's what we're doing it in this example: https://liveblocks.io/examples/live-cursors-scrollable-page https://liveblocks.io/examples/live-cursors-scrollable-page Sometimes, cursors are not the best way to show what users are doing on a web page. For a form, displaying an indicator close to the focused input is more valuable. Because there is no perfect solution, we're not shipping any UI with Liveblocks and only provide guides. In the future, if a common abstraction appears, we will create some package to make the integration easier.
selfer564 5y ago
Congratulations on the launch, it looks great! Just from a curiosity standpoint, how does this compare to something like https://replicache.dev/ https://replicache.dev/
- guillaumesalles 5y ago
  Thanks for the kind words :) From what I understand from Replicache, it focuses only on conflicts resolution with CRDTs, and it does not come with a web socket infrastructure nor a hosted backend. You need to have your own servers or use external services to have live cursors. (https://doc.replicache.dev/guide/poke https://doc.replicache.dev/guide/poke) At Liveblocks, we want to bundle all that together because we believe that being tightly integrated is necessary to provide a great experience. For example, if you implement an "undo"/"redo" feature on a collaborative design tool (like Figma), the selection of a user (volatile state) should be in sync with the document state (persisted state). Some people might prefer managing their own backend infrastructure, but we want to provide it because we know how difficult it might be to scale and load balance web sockets rooms. We want to help companies focus on their core product and not spend too much time working on the multiplayer infrastructure and algorithms.
the_arun 5y ago
May be a common question you might have used to - When most of the editors already support collaborations For eg. VSCode (https://visualstudio.microsoft.com/services/live-share/ https://visualstudio.microsoft.com/services/live-share/), IntelliJ(https://www.jetbrains.com/help/idea/code-with-me.html#work_host https://www.jetbrains.com/help/idea/code-with-me.html#work_h...), why someone will use LiveBlocks?
- guillaumesalles 5y ago
  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 https://liveblocks.io/examples/3d-shoe-builder Filling a form can also be a collaborative experience: https://liveblocks.io/examples/collaborative-logo-builder 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/ https://cloverapp.co/ to improve their collaborative features (live cursors on whiteboard and live avatars). I hope it answers your question
toinbis 5y ago
Congrats on launch! Super cool product and I feel like trying it out in the SaaS i'm building. Few initial questions: `Our multiplayer WebSocket servers live on the edge` -> from your Jobs page I realised that you use AWS. Does that mean that it's AWS cloud that you're using? Have you considered using Cloudflare Durable Objects(DO) for infrastructure - what are the thoughts for DO suitability for your use case (besides it currently being in beta phase)? Congrats once again on shipping something world needed badly! Upd: removed the question which was a bit illogical :)
- mcintyre1994 5y ago
  > Does that mean that it's AWS cloud that you're using? Have you considered using Cloudflare Durable Objects(DO) for infrastructure Would love to hear an answer to this, I've read a bit about Durable Objects but not got a chance to play with them yet. I'd be really interested to hear if they evaluated fly.io as well. It seems like a great fit for their model of running full blown app servers in many regions.
  - guillaumesalles 5y ago
    I just answered the Durable Objects question here https://news.ycombinator.com/item?id=27998674 https://news.ycombinator.com/item?id=27998674 I didn't evaluated fly.io but from their website, it definitely looks promising! I will try it for sure!
- guillaumesalles 5y ago
  Thanks for the kind words :) Nice catch! All the examples that you see on our website are using Cloudflare Durable Objects! But because they are limited, we also have a version of our server that works on AWS some of our customers.
jkarneges 5y ago
Congrats on the launch! I work in the "realtime" space too (founder of Fanout, low level push infra). Liveblocks looks like it's somewhere between Firebase and Sendbird, providing live updates and state management, but for specific use-cases and stopping short of the UI. I haven't seen too many products operating at that level of abstraction, so maybe you're on to something. I also like how you solve for more use-cases than chat, the dominant "block" in the market.
FractalHQ 5y ago
I use YJS webrtc with Svelte for my p2p collaborative IDE and it’s awesome. Do you guys do any p2p stuff like that? Also, maybe reach out to Spline founder, he just launched the web version of his “Figma but 3D” app that wraps ThreeJS in a GUI tool and has been gaining traction fast.

95 points by mxstbr 5y ago

Wow. Something I’ve really had a need for recently. It’s a hard technical problem, so I wouldn’t be surprised if this takes off.

stevenfabre 5y ago

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

rhythmofrest 5y ago
Hi, thanks for posting! :) It reminds me of https://togetherjs.com/ https://togetherjs.com/ which I guess you looked at? What were the shortfalls/differences that you found you had to address? Is your product React-only?
- guillaumesalles 5y ago
  Hi! Great questions :) Liveblocks does not come with a specific UI. We're providing APIs to create rooms and share states between users. The state can be volatile (like cursors, focused input, selection) or persisted even when the session is over, like a figma file or a google document (this part is still in private beta). We're using custom CRDTs for the persisted state. We only have a javascript client and react client, but we plan to support more technologies in the future. Even native clients for desktop or mobile if there is an interest. We have guides to install liveblocks with Next.js, Nuxt.js, and vanilla js + express. https://liveblocks.io/docs#installation https://liveblocks.io/docs#installation We also have open source repositories with working examples with these technologies. https://github.com/liveblocks/javascript-examples https://github.com/liveblocks/javascript-examples https://github.com/liveblocks/next-js-examples https://github.com/liveblocks/next-js-examples https://github.com/liveblocks/nuxt-js-examples https://github.com/liveblocks/nuxt-js-examples Hope it helps! Don't hesitate if you have more questions
nc 5y ago
This looks great, how do you stack up against something like YJS?
- guillaumesalles 5y ago
  Like Yjs, our Storage block is CRDTs based, but we're making different trade-offs. For example, our CRDTs are not "pure" so we solve some conflicts on the server. Also, we don't support Text CRDTs yet. But Liveblocks is not just about conflicts resolution! Our vision is to shape our API and guides to help companies transform existing products into collaborative ones. For example, by simply adding live cursors and avatars and refreshing the data with existing REST endpoints, an existing app becomes more collaborative even if the conflict resolution is not perfect. At the same time, we provide analytics on how Liveblocks is used to help product teams prioritize their collaborative features and if they still want to integrate Liveblocks further. We're also hosting the WebSocket infrastructure and make it scale because we know how troublesome it can be to maintain.

Gys 5y ago

I watched the 1 min intro video, but still have no idea what it actually does. Why I should add this to my website. A simple demo video instead of all the marketing might work better?

guillaumesalles 5y ago
Hi Gys, co founder of Liveblocks here! Our goal is to help companies create collaborative products like Figma or Google Docs with API and guides. Multiplayer infrastructure and conflicts resolutions can be challenging to build in-house and we think it will become a commodity (like logging or analytics systems). If our marketing video didn't convince you, maybe our examples page and documentation will give you more information. https://liveblocks.io/examples https://liveblocks.io/examples and https://liveblocks.io/docs https://liveblocks.io/docs
yllus 5y ago
Congratulations to the founders for the launch, but unfortunately I had the same response. In situations like these - intrigued but with no real understanding of what the product is - I want the video to show me a real-world example in about ten seconds flat. A more glitzy promo video has its place, but not in a post to Hacker News.

sghosh2 5y ago

Solving a tough technical problem that a lot of teams struggle with. Awesome to see!

bamazizi 5y ago

There are a lot of live sharing/working/... coming out these days. FYI: Your cursor examples uses x/y explicit coordinates where as people using different screen sizes and resolutions wouldn't see proper mouse cursor location. Rather it should be x/y relative coordinates. example x: 35%, y:12% (top left corner to bottom right corner)

guillaumesalles 5y ago
From our experience, live cursors positioning depends on the use case and the content behind them. For a "canvas app" (like Figma), the positioning will be absolute with an offset depending on the panning. For a responsive website, if it makes sense to add live cursors, it depends on how the content "flows". For example, if your content scrolls vertically and is centered horizontally, you can use percentage on the "x" axis and absolute on the "y" axis. That's what we're doing it in this example: https://liveblocks.io/examples/live-cursors-scrollable-page https://liveblocks.io/examples/live-cursors-scrollable-page Sometimes, cursors are not the best way to show what users are doing on a web page. For a form, displaying an indicator close to the focused input is more valuable. Because there is no perfect solution, we're not shipping any UI with Liveblocks and only provide guides. In the future, if a common abstraction appears, we will create some package to make the integration easier.

selfer564 5y ago

Congratulations on the launch, it looks great! Just from a curiosity standpoint, how does this compare to something like https://replicache.dev/ https://replicache.dev/

guillaumesalles 5y ago
Thanks for the kind words :) From what I understand from Replicache, it focuses only on conflicts resolution with CRDTs, and it does not come with a web socket infrastructure nor a hosted backend. You need to have your own servers or use external services to have live cursors. (https://doc.replicache.dev/guide/poke https://doc.replicache.dev/guide/poke) At Liveblocks, we want to bundle all that together because we believe that being tightly integrated is necessary to provide a great experience. For example, if you implement an "undo"/"redo" feature on a collaborative design tool (like Figma), the selection of a user (volatile state) should be in sync with the document state (persisted state). Some people might prefer managing their own backend infrastructure, but we want to provide it because we know how difficult it might be to scale and load balance web sockets rooms. We want to help companies focus on their core product and not spend too much time working on the multiplayer infrastructure and algorithms.

the_arun 5y ago

May be a common question you might have used to - When most of the editors already support collaborations For eg. VSCode (https://visualstudio.microsoft.com/services/live-share/ https://visualstudio.microsoft.com/services/live-share/), IntelliJ(https://www.jetbrains.com/help/idea/code-with-me.html#work_host https://www.jetbrains.com/help/idea/code-with-me.html#work_h...), why someone will use LiveBlocks?

guillaumesalles 5y ago
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 https://liveblocks.io/examples/3d-shoe-builder Filling a form can also be a collaborative experience: https://liveblocks.io/examples/collaborative-logo-builder 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/ https://cloverapp.co/ to improve their collaborative features (live cursors on whiteboard and live avatars). I hope it answers your question

toinbis 5y ago

Congrats on launch! Super cool product and I feel like trying it out in the SaaS i'm building. Few initial questions: `Our multiplayer WebSocket servers live on the edge` -> from your Jobs page I realised that you use AWS. Does that mean that it's AWS cloud that you're using? Have you considered using Cloudflare Durable Objects(DO) for infrastructure - what are the thoughts for DO suitability for your use case (besides it currently being in beta phase)? Congrats once again on shipping something world needed badly! Upd: removed the question which was a bit illogical :)

mcintyre1994 5y ago
> Does that mean that it's AWS cloud that you're using? Have you considered using Cloudflare Durable Objects(DO) for infrastructure Would love to hear an answer to this, I've read a bit about Durable Objects but not got a chance to play with them yet. I'd be really interested to hear if they evaluated fly.io as well. It seems like a great fit for their model of running full blown app servers in many regions.
- guillaumesalles 5y ago
  I just answered the Durable Objects question here https://news.ycombinator.com/item?id=27998674 https://news.ycombinator.com/item?id=27998674 I didn't evaluated fly.io but from their website, it definitely looks promising! I will try it for sure!
guillaumesalles 5y ago
Thanks for the kind words :) Nice catch! All the examples that you see on our website are using Cloudflare Durable Objects! But because they are limited, we also have a version of our server that works on AWS some of our customers.

jkarneges 5y ago

Congrats on the launch! I work in the "realtime" space too (founder of Fanout, low level push infra). Liveblocks looks like it's somewhere between Firebase and Sendbird, providing live updates and state management, but for specific use-cases and stopping short of the UI. I haven't seen too many products operating at that level of abstraction, so maybe you're on to something. I also like how you solve for more use-cases than chat, the dominant "block" in the market.

FractalHQ 5y ago

I use YJS webrtc with Svelte for my p2p collaborative IDE and it’s awesome. Do you guys do any p2p stuff like that? Also, maybe reach out to Spline founder, he just launched the web version of his “Figma but 3D” app that wraps ThreeJS in a GUI tool and has been gaining traction fast.