Collaborative Real-Time Text Editing: A Front-End Case Study

on YouTube ↗37m

" summary

Real-time collaborative text editing in web apps, specifically how Grammarly’s Front-End team implemented it in the Grammarly web editor. Covers implementation challenges, communication protocols (collaboration/sync protocols) and Front-End-specific pitfalls and nuances to watch for.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 2:07Alexei and Grammarie
3. 3:08Real-time editor goals
4. 4:54Two-way sync
5. 6:40Edit conflicts
6. 8:49OT vs CRDT protocols
7. 13:29OT vs CRDT comparison
8. 16:44OT choice
9. 17:04OT example
10. 21:24Editor and server
11. 23:58Delta format
12. 27:11Extending Delta for highlights
13. 30:47Performance with highlights
14. 31:51Production results
15. 32:56Resources

" related talks

• 37mBuilding a Collaborative Text EditorJustin Weiss · RailsConf 2018
• 01h 00mBuilding a real-time collaborative editorMihaela Gheorghe-Roman · NDC Copenhagen 2026
• 13mHow to make a real-time collaborative text editor in 5 easy steps!Rudi Chen · StarCon 2018
• 52mA Story about Scaling Front-End Platforms at GrammarlyOleksii Levzhynskyi · Software Architecture fwdays'24
• 40mNew algorithms for collaborative text editingMartin Kleppmann · Strange Loop 2023
• 23mBuilding a real-time collaborative editor with PhoenixSheharyar Naseer · ElixirConf EU 2021
• 41mCreating collaborative editing UIs in ReactEspen Hovlandsdal · JS Fest 2019 Spring
• 05mBuilding Editors in the BrowserJason Chen · JSConf.ar 2014