Collaborative text editor

Bogdan Drema

Fullstack Engineer
Node.js
Redis
Vue.js

What

Online text editor for collaborative editing. Supports multiple users editing the same document at the same using CRDT syncing to not lose changes while editing.

Editing content in the editor
Editing content in the editor

Contribution

Setup, stylised, enforced formatting, added validation checks and error handling, cross server communication (with load balancing) and final document preview.

Lessons learned

Originally attempted to use WebRTC but had some odd network issues occasionally where a user's internet affected their connection and couldn't sync while the other users didn't have trouble. Swapped to WebSocket pointing at load balanced servers and then stopped issues cropping up and allowed server storing state so if a user disconnects their work isn't lost.

Balancing the Enforcement of a specific content structure on the document without causing performance issues on edit was tricky due to the nested nature of the structure and elements within it that were not allowed to be deleted or overwritten by the user. The solution was to perform simple checks against parts of the nested structure. Using more complex logic such as traversing the nodes and details checks caused performances issues even for the simpler checks.

Detailed checks that didn't have to be done were reserved for publish stage document validation checks that could be more complex that tangling with live updates.

Partner With Bogdan
View Services

More Projects by Bogdan