Building a real-time collaborative editor

on YouTube ↗01h 00m

" summary

An embedded real‑time collaborative editor is built for air‑gapped military deployments using operational transformation for consistency and responsiveness, with ProseMirror and CodeMirror for the rich‑text layer and a Java/Scala backend, PostgreSQL/MS SQL, Kubernetes, Kafka and WebSockets for sync. It handles inserts/deletes, complex objects (tables, images, video), cursor sync, undo/redo, per‑paragraph classification and system‑level encryption, and maintains two years of backward compatibility. Conflicts across disconnected nodes merge automatically when possible and escalate to manual review when they cannot; the system works in production.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 3:55User requirements
3. 10:03Rich text editor basics
4. 14:01Framework evaluation
5. 18:59Collaborative editor challenges
6. 23:57Consistency and responsiveness
7. 33:41Operational transformation
8. 38:19Advanced objects handling
9. 43:22Cursor synchronization
10. 46:37Undo redo and versions
11. 48:00Security classification
12. 51:13Disconnected conflicts
13. 53:22Q&A

" related talks

• 37mBuilding a Collaborative Text EditorJustin Weiss · RailsConf 2018
• 40mNew algorithms for collaborative text editingMartin Kleppmann · Strange Loop 2023
• 41mFrom single player to multiplayer-building realtime collaborative experiences with FlutterIiro Krankka · Flutter Vikings 2022
• 13mHow to make a real-time collaborative text editor in 5 easy steps!Rudi Chen · StarCon 2018
• 23mBuilding a real-time collaborative editor with PhoenixSheharyar Naseer · ElixirConf EU 2021
• 37mCollaborative Real-Time Text Editing: A Front-End Case StudyA. Levzhinskiy · JavaScript fwdays’21
• 41mCreating collaborative editing UIs in ReactEspen Hovlandsdal · JS Fest 2019 Spring
• 32mIn the Lab: Crafting the No-Code Editor POCOleksandr Maliuta · React+TS fwdays'23