Real time collaborative editing in your web application
I am writing this article in the time when most of us are working remotely and we all are doing collaborative work in one way or another.
This article is about various options that can be used in your web application to integrate real time collaboration.
“Coming together is a beginning. Keeping together is progress. Working together is success.” -Henry Ford
There are various ways to achieve real time collaboration, in this article I will be covering only open source projects, their pros and cons in brief.
1. Quill
Collaboration in quill-
1. The simplest approach for real time collaboration in quill is to Wave. It is not open source though and it’s paid. So if you want a very clean user interface with minimal coding (and trusting a third party over you data) you can go straight away for this approach.
2. The another approach is using an open source project quill-sharedb-cursors. It runs on node and uses mongodb as database.
The deployment is very simple but customization is not. You have to get your hands dirty on the node project if you want to customize it your way.
Further if you are comfortable with MongoDB you are all set to use this.
2. ProseMirror
It is another strong rich text editor.
Collaboration in prosemirror-
There is no documentation available for collaborative editing on their official website, however they have given a playground and a link to github code.
For setting up and customization you have to write some(`some` can be `many` if you compare with quill or any other editor) lines of code.
Also if you are using Vue.js there is a renderless editor tiptap which is written on prosemirror itself. You can explore that more and it supports real-time collaboration.
3. Etherpad
Etherpad is highly customizable web based real time editor.
It runs on a node server and can be configured with your MySQL database.
The setup is very easy and it provides a lot of options for customization.
It also provides-
1. HTTP API -You can perform various actions using the API calls, also it has various API clients in different languages but they are not customizable (I checked the python client) so it’s better to write your own.
2. Plugins -There are various plugins available for customizing your etherpad.
Installation is very simple and most of them don’t require any settings.
PS: I will be writing a separate article on integration of etherpad editor with your project.
4. TogetherJS
TogetherJS seems to provide a very promising solution for collaboration, but it’s not production ready (I am saying this because there are a lot of open issues, not maintained and the demo examples given on home page doesn’t work)
It was developed by Mozilla labs and now maintained by jsfiddle.
It’s implementation is easy. You have to host your own server (you can’t rely on theirs, it is down most of the times) and include the JS in your script tag and you are all set to go.
It provides chat option by default (which is the only thing that works).
Also it’s not consistent for elements, sometimes you may see it working, sometimes it doesn’t.
5. Onlyoffice
https://www.onlyoffice.com/en/
It is a very powerful project alternative to google docs,sheet etc.
The best part is that Docker installation is available and you can host in on your own server.
For collaboration you can use their API.
