We have created an interactive demo for web based collaborative text editors.

TLDR

• We introduce a method to create a web based collaborative editor based on ProseMirror
• We use PouchDB (CouchDB) to abstract away all the hassle that comes with directly managing WebSockets
• Any database with real time syncing functionality can be used
• For the interactive demo we used React and TypeScript

Details

With the collaborative editing functionality in ProseMirror it's possible to create documents that are editable by multiple users at the same time. Although the prosemirror-collab module is not very hard to use, a communication layer is necessary for the clients to receive new steps to update their local document, keeping them in sync. This is usually done with WebSockets, which adds another layer in the stack where bugs can hide. This article shows a path to get rid of that layer by using a well-tested layer in the form as a syncing database. In this article PouchDB/CouchDB is used, so the emulated "server" can also live in the browser, thus making the example simpler. This approach has also been tested with Firestore.

Code

The code is available here