3 ms·

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 t

by 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! :)
- jahewson 4y ago
  Ooh I like your product.
- danielvaughn 4y ago
  Very nice. One of my hard requirements is that the data itself has to be persisted as a string. So I’ve had to implement a system where a new yDoc is created when the session begins, and then is converted back into a string when the session ends. Did you have to do anything similar? And if so was it easy with hocuspocus? I wasn’t able to get a clear answer from the docs.
qwertox 4y ago
Related to this is also an example from ProseMirror (which TipTap uses as the editing component) [0][1] I'm not completely sure, but I think at ProseMirror they're using Yjs [2] for the collaborative editing part. If not, checking out Yjs is worth it in and of itself. > Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts. > Yjs is network agnostic (p2p!), supports many existing rich text editors, offline editing, version snapshots, undo/redo and shared cursors. It scales well with an unlimited number of users and is well suited for even large documents. > Conflict-free replicated data types (CRDT) for collaborative editing are an alternative approach to operational transformation (OT). [3] OT was what Google Wave was based on and I think current colab editing in Google Docs and other of their office products use this. [0] https://prosemirror.net/examples/collab/#edit-Example https://prosemirror.net/examples/collab/#edit-Example [1] https://marijnhaverbeke.nl/blog/collaborative-editing.html https://marijnhaverbeke.nl/blog/collaborative-editing.html [2] https://github.com/yjs/yjs https://github.com/yjs/yjs [3] https://github.com/yjs/yjs#Yjs-CRDT-Algorithm https://github.com/yjs/yjs#Yjs-CRDT-Algorithm
- jahewson 4y ago
  > I think at ProseMirror they're using Yjs No, ProseMirror has its own approach to sync. > OT was what Google Wave was based on and I think current colab editing in Google Docs and other of their office products use this. Yep.
  - samwillis 4y ago
    ProseMirror has its own OT system developed by its lead developer. However the developer behind Yjs has created Yjs bindings for it that are first class! The team behind TipTap (built on top of ProseMirror), created the Hocuspocus server backend for Yjs and collaborative text editing.
zvsmith 4y ago
+1 for tiptap, and yjs, used both to build https://www.buildmemo.com https://www.buildmemo.com 's collaborative editor. Did not use hocuspocus but found it trivial to implement our own node ws backend.
- wahnfrieden 4y ago
  Just fyi your page has text headline cutoff issues on iPhone X
- danielvaughn 4y ago
  How are you persisting the data? Are you storing them as ydocs?

by tekacs 4y ago

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! :)
jahewson 4y ago
Ooh I like your product.
danielvaughn 4y ago
Very nice. One of my hard requirements is that the data itself has to be persisted as a string. So I’ve had to implement a system where a new yDoc is created when the session begins, and then is converted back into a string when the session ends. Did you have to do anything similar? And if so was it easy with hocuspocus? I wasn’t able to get a clear answer from the docs.

qwertox 4y ago

Related to this is also an example from ProseMirror (which TipTap uses as the editing component) [0][1] I'm not completely sure, but I think at ProseMirror they're using Yjs [2] for the collaborative editing part. If not, checking out Yjs is worth it in and of itself. > Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts. > Yjs is network agnostic (p2p!), supports many existing rich text editors, offline editing, version snapshots, undo/redo and shared cursors. It scales well with an unlimited number of users and is well suited for even large documents. > Conflict-free replicated data types (CRDT) for collaborative editing are an alternative approach to operational transformation (OT). [3] OT was what Google Wave was based on and I think current colab editing in Google Docs and other of their office products use this. [0] https://prosemirror.net/examples/collab/#edit-Example https://prosemirror.net/examples/collab/#edit-Example [1] https://marijnhaverbeke.nl/blog/collaborative-editing.html https://marijnhaverbeke.nl/blog/collaborative-editing.html [2] https://github.com/yjs/yjs https://github.com/yjs/yjs [3] https://github.com/yjs/yjs#Yjs-CRDT-Algorithm https://github.com/yjs/yjs#Yjs-CRDT-Algorithm

jahewson 4y ago
> I think at ProseMirror they're using Yjs No, ProseMirror has its own approach to sync. > OT was what Google Wave was based on and I think current colab editing in Google Docs and other of their office products use this. Yep.
- samwillis 4y ago
  ProseMirror has its own OT system developed by its lead developer. However the developer behind Yjs has created Yjs bindings for it that are first class! The team behind TipTap (built on top of ProseMirror), created the Hocuspocus server backend for Yjs and collaborative text editing.

zvsmith 4y ago

+1 for tiptap, and yjs, used both to build https://www.buildmemo.com https://www.buildmemo.com 's collaborative editor. Did not use hocuspocus but found it trivial to implement our own node ws backend.

wahnfrieden 4y ago
Just fyi your page has text headline cutoff issues on iPhone X
danielvaughn 4y ago
How are you persisting the data? Are you storing them as ydocs?