5 ms·

So I'm just at the tail end of a project where I'm attempting to build a collaborative text editor, and it's been absolute hell. I figured it would be a tricky

So I'm just at the tail end of a project where I'm attempting to build a collaborative text editor, and it's been absolute hell. I figured it would be a tricky problem, but I had no idea how far down the rabbit hole goes. I kept thinking, gosh, there's gotta be a backend service that bakes this in, if there isn't it would be a great business opportunity. I almost want to scrap all of my code and move it to Supabase. Congrats to the team on this launch, very cool. edit: actually, after thinking it through, I'm not clear on what Supabase is calling multiplayer. Presence is one thing, but when I think multiplayer, I'm thinking conflict resolution. Is this an OT/CRDT implementation? Or is it just presence?

samwillis 4y ago
It’s broadcast and presence they have released, both building blocks for multiplayer. It’s unfortunate that HN rules meant a mods changed the title to the blog posts title. I had gone with a slightly edited (for length) sentence from the second paragraph as I thought it was clearer: … general availability of Realtime's multiplayer features, Broadcast and Presence.
- upupandup 4y ago
  how does the pricing compare to liveblocks? was really offput by their pricing (charging $0.01 for every time a client connects)
  - chasers 4y ago
    Pricing is still tbd unfortunately. Currently every project gets these features with some limitations: - 25 concurrent channels - 25 channel joins per second - 200 concurrent connections - 100 broadcast messages per second avg over 60 seconds (not including db changes) (aka 6,000 per minute rolling) I think these are probably pretty close to where we'll land for free projects. They can be changed per project so if you (or anyone) needs a limit increased in the short term we can do that.
  - stevenfabre 4y ago
    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!
ZeroCool2u 4y ago
I think what you want is probably https://replicache.dev/ https://replicache.dev/
- kiwicopple 4y ago
  replicache has a great "Linear" example using Supabase: https://doc.replicache.dev/examples/repliear https://doc.replicache.dev/examples/repliear
- wahnfrieden 4y ago
  They take rent
  - aboodman 4y ago
    We'd like to ensure that Replicache continues to exist and that we can continue to support it. So yeah, we proudly charge for it.
    - wahnfrieden 4y ago
      It’s just a fact to consider in tradeoffs. There are several economic models that support tool businesses, or returns for investors. Please don’t take offense at noting which of those several valid approaches
      - aboodman 4y ago
        Not offended. Our team has a long history in open source and have seen both the triumphs and challenges over the years. It's very difficult to build a sustainable client-side open source tool without some other business off to the side that supports it (example: nextjs/vercel). I like the simplicity and clarity of just directly charging for the valuable thing. Nothing wrong with the other models, they just aren't for us.
- chimen 4y ago
  do you have to load third party scripts with replicache?
btown 4y ago
For a collaborative text editor, you need two things: (1) a full-stack system that maintains a running list of data events such that everyone sees everyone else's events eventually, and (2) frontend code that adapts that set of events, along with your text cursor position and current changes, into a cohesive view of a document at any moment in time. Supabase and Replicache can absolutely help with (1). But for (2) you will need OT or CRDT. https://docs.yjs.dev/getting-started/a-collaborative-editor https://docs.yjs.dev/getting-started/a-collaborative-editor is a good place to start - it uses Quill and CRDTs for (2) and can have a persistence layer built in (or custom written, to work on top of Supabase etc.) for (1).
- eduardosalaz 4y ago
  Quill Deltas are a very interesting concept, I used Quill myself along with Supabase for realtime sharing (not collaboration) of text and it was almost a breeze.
- aboodman 4y ago
  Several teams use yjs on top of Replicache, it's a real easy match.
tekacs 4y ago
One thing that... might be useful depending on what exactly you're building here is https://hocuspocus.dev https://hocuspocus.dev, which is an incredibly easy to use server for Y.js. It's written by the team behind https://tiptap.dev https://tiptap.dev, which is an amazing WYSIWYG text editor, but HocusPocus does a great job of syncing state of a variety of WYSIWYG editors out of the box. Getting the server running is a couple of minutes worth of work and scaling it is quite easy. In addition to editor state, it also has built-in support for 'Awareness' (info on current users), as well as any other Y.js datatype, including other things with a bridge into Y.js.
- danielvaughn 4y ago
  I'm using TipTap actually, but decided not to go with hocuspocus since it's in beta (at least that's how they position it). edit: also, I couldn't get a good look at their documentation outside of the paywall, so I have no idea how they implement the backend. It's important, because I need to persist my documents as html strings, not as y docs.
  - tekacs 4y ago
    Just so you know, I've used it since the early part of this year and found it to be robust and fully-featured (most functionality comes from Y.js after all), but definitely defer to them on how ready they consider it. :)
- TranquilMarmot 4y ago
  We use tiptap/hocuspocus at Vowel (https://www.vowel.com/ https://www.vowel.com/) for our collaborative notes editor. It's really slick!
  - tekacs 4y ago
    Ha, that's good to know -- I've been enjoying using Vowel and was wondering what the in-call notes editor was powered by. Vowel is really slick too -- nice job! :)
  - 4y ago
sureglymop 4y ago
How are you currently building the collaborative features? Using web sockets i imagine, right?
- danielvaughn 4y ago
  yeah, websockets + yjs + y-prosemirror
  - kabes 4y ago
    That sounds like a stack that should be up for the job. Used these myself and found making a collaborative editer with those quite a breeze actually. What issues do you have with them? Or did it just take a long time before arriving at that combination?
    - danielvaughn 4y ago
      That combination kinda came by default, since I opted to use TipTap: https://tiptap.dev/ https://tiptap.dev/ My real trouble is the fact that this is an existing application, with hundreds of thousands of pre-existing documents, all stored as html strings. I've been trying to extract the html on the server, but it's incredibly difficult. I've actually given up for the time being, and using a hacky workaround.
mathgladiator 4y ago
I haven't documented it yet, but my serverless board game platform supports collaborative text editing. I'm using Codemirror 6 which has a very simple operational transform scheme, and I baked Codemirror's OT scheme into my back-end. It works great, but this was because I had all the realtime stuff sorted out (connection management, multiplexing, etc...) https://www.adama-platform.com/ https://www.adama-platform.com/
cpursley 4y ago
This is where Erlang/Elixir really shines. https://elixir-lang.org/blog/2020/11/17/real-time-collaboration-with-elixir-at-slab/ https://elixir-lang.org/blog/2020/11/17/real-time-collaborat... https://www.youtube.com/watch?v=HTB4mQyMAmg https://www.youtube.com/watch?v=HTB4mQyMAmg And supabase uses elixir to listen to database changes and push then over websockets.
kevsim 4y ago
Definitely feel your pain. We did a full OT implementation for our startup [0] and it was a beast. We based it on Slate.js which has a nice concept of operations that maps nicely to OT, but it was still a lot of work to get it working well (and there are still rough edges we try to improve all of the time). We did base it on Postgres in the backend so really looking forward to what the Supabase team comes up with going forward and seeing if they can help us delete some complex code :-) Happy to have a chat on collaborative editing anytime if that'd be helpful (email in profile). 0: https://kitemaker.co https://kitemaker.co
berjin 4y ago
Fluid Framework looks interesting. Since it's open source you can either use a cloud service (Azure Fluid Relay) or run it on Kubernetes with Routerlicious. https://fluidframework.com/ https://fluidframework.com/
AlchemistCamp 4y ago
I can definitely see how a company built on Elixir, like Supabase, would offer this as part of their product. Phoenix Framework gives you presence and CDRTs out of the box. I’m not sure if they’re also using Phoenix, but there’s a well-known, heavily used open source solution for the core of this offering and I’d be shocked if they didn’t at least study and/or borrow from it. Edit: yep, according to the page they’re advised by Chris McCord, the creator of Phoenix.

samwillis 4y ago

It’s broadcast and presence they have released, both building blocks for multiplayer. It’s unfortunate that HN rules meant a mods changed the title to the blog posts title. I had gone with a slightly edited (for length) sentence from the second paragraph as I thought it was clearer: … general availability of Realtime's multiplayer features, Broadcast and Presence.

upupandup 4y ago
how does the pricing compare to liveblocks? was really offput by their pricing (charging $0.01 for every time a client connects)
- chasers 4y ago
  Pricing is still tbd unfortunately. Currently every project gets these features with some limitations: - 25 concurrent channels - 25 channel joins per second - 200 concurrent connections - 100 broadcast messages per second avg over 60 seconds (not including db changes) (aka 6,000 per minute rolling) I think these are probably pretty close to where we'll land for free projects. They can be changed per project so if you (or anyone) needs a limit increased in the short term we can do that.
- stevenfabre 4y ago
  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!

ZeroCool2u 4y ago

I think what you want is probably https://replicache.dev/ https://replicache.dev/

kiwicopple 4y ago
replicache has a great "Linear" example using Supabase: https://doc.replicache.dev/examples/repliear https://doc.replicache.dev/examples/repliear
wahnfrieden 4y ago
They take rent
- aboodman 4y ago
  We'd like to ensure that Replicache continues to exist and that we can continue to support it. So yeah, we proudly charge for it.
  - wahnfrieden 4y ago
    It’s just a fact to consider in tradeoffs. There are several economic models that support tool businesses, or returns for investors. Please don’t take offense at noting which of those several valid approaches
    - aboodman 4y ago
      Not offended. Our team has a long history in open source and have seen both the triumphs and challenges over the years. It's very difficult to build a sustainable client-side open source tool without some other business off to the side that supports it (example: nextjs/vercel). I like the simplicity and clarity of just directly charging for the valuable thing. Nothing wrong with the other models, they just aren't for us.
chimen 4y ago
do you have to load third party scripts with replicache?

btown 4y ago

For a collaborative text editor, you need two things: (1) a full-stack system that maintains a running list of data events such that everyone sees everyone else's events eventually, and (2) frontend code that adapts that set of events, along with your text cursor position and current changes, into a cohesive view of a document at any moment in time. Supabase and Replicache can absolutely help with (1). But for (2) you will need OT or CRDT. https://docs.yjs.dev/getting-started/a-collaborative-editor https://docs.yjs.dev/getting-started/a-collaborative-editor is a good place to start - it uses Quill and CRDTs for (2) and can have a persistence layer built in (or custom written, to work on top of Supabase etc.) for (1).

eduardosalaz 4y ago
Quill Deltas are a very interesting concept, I used Quill myself along with Supabase for realtime sharing (not collaboration) of text and it was almost a breeze.
aboodman 4y ago
Several teams use yjs on top of Replicache, it's a real easy match.

tekacs 4y ago

One thing that... might be useful depending on what exactly you're building here is https://hocuspocus.dev https://hocuspocus.dev, which is an incredibly easy to use server for Y.js. It's written by the team behind https://tiptap.dev https://tiptap.dev, which is an amazing WYSIWYG text editor, but HocusPocus does a great job of syncing state of a variety of WYSIWYG editors out of the box. Getting the server running is a couple of minutes worth of work and scaling it is quite easy. In addition to editor state, it also has built-in support for 'Awareness' (info on current users), as well as any other Y.js datatype, including other things with a bridge into Y.js.

danielvaughn 4y ago
I'm using TipTap actually, but decided not to go with hocuspocus since it's in beta (at least that's how they position it). edit: also, I couldn't get a good look at their documentation outside of the paywall, so I have no idea how they implement the backend. It's important, because I need to persist my documents as html strings, not as y docs.
- tekacs 4y ago
  Just so you know, I've used it since the early part of this year and found it to be robust and fully-featured (most functionality comes from Y.js after all), but definitely defer to them on how ready they consider it. :)
TranquilMarmot 4y ago
We use tiptap/hocuspocus at Vowel (https://www.vowel.com/ https://www.vowel.com/) for our collaborative notes editor. It's really slick!
- tekacs 4y ago
  Ha, that's good to know -- I've been enjoying using Vowel and was wondering what the in-call notes editor was powered by. Vowel is really slick too -- nice job! :)
- 4y ago

sureglymop 4y ago

How are you currently building the collaborative features? Using web sockets i imagine, right?

danielvaughn 4y ago
yeah, websockets + yjs + y-prosemirror
- kabes 4y ago
  That sounds like a stack that should be up for the job. Used these myself and found making a collaborative editer with those quite a breeze actually. What issues do you have with them? Or did it just take a long time before arriving at that combination?
  - danielvaughn 4y ago
    That combination kinda came by default, since I opted to use TipTap: https://tiptap.dev/ https://tiptap.dev/ My real trouble is the fact that this is an existing application, with hundreds of thousands of pre-existing documents, all stored as html strings. I've been trying to extract the html on the server, but it's incredibly difficult. I've actually given up for the time being, and using a hacky workaround.

mathgladiator 4y ago

I haven't documented it yet, but my serverless board game platform supports collaborative text editing. I'm using Codemirror 6 which has a very simple operational transform scheme, and I baked Codemirror's OT scheme into my back-end. It works great, but this was because I had all the realtime stuff sorted out (connection management, multiplexing, etc...) https://www.adama-platform.com/ https://www.adama-platform.com/

cpursley 4y ago

This is where Erlang/Elixir really shines. https://elixir-lang.org/blog/2020/11/17/real-time-collaboration-with-elixir-at-slab/ https://elixir-lang.org/blog/2020/11/17/real-time-collaborat... https://www.youtube.com/watch?v=HTB4mQyMAmg https://www.youtube.com/watch?v=HTB4mQyMAmg And supabase uses elixir to listen to database changes and push then over websockets.

kevsim 4y ago

Definitely feel your pain. We did a full OT implementation for our startup [0] and it was a beast. We based it on Slate.js which has a nice concept of operations that maps nicely to OT, but it was still a lot of work to get it working well (and there are still rough edges we try to improve all of the time). We did base it on Postgres in the backend so really looking forward to what the Supabase team comes up with going forward and seeing if they can help us delete some complex code :-) Happy to have a chat on collaborative editing anytime if that'd be helpful (email in profile). 0: https://kitemaker.co https://kitemaker.co

berjin 4y ago

Fluid Framework looks interesting. Since it's open source you can either use a cloud service (Azure Fluid Relay) or run it on Kubernetes with Routerlicious. https://fluidframework.com/ https://fluidframework.com/

AlchemistCamp 4y ago

I can definitely see how a company built on Elixir, like Supabase, would offer this as part of their product. Phoenix Framework gives you presence and CDRTs out of the box. I’m not sure if they’re also using Phoenix, but there’s a well-known, heavily used open source solution for the core of this offering and I’d be shocked if they didn’t at least study and/or borrow from it. Edit: yep, according to the page they’re advised by Chris McCord, the creator of Phoenix.