Building a Collaborative Text Editor

on YouTube ↗37m

" summary

Explains how to get real-time editing working: represent edits as operations, assign document version numbers, run an operational-transformation control algorithm that transforms lists of operations, and keep a server as the single source of truth; implements cursor sync, local undo via inverted operations on undo/redo stacks, and transforms those stacks on remote edits. Demo and source exist and run; author reports handling 13 operations requiring 100+ transform functions and points at ShareDB and CRDTs (Y.js, Gun.js, Automerge).

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 2:28Making Changes Optimistically
3. 3:34Conflicts
4. 6:05Operational Transformation
5. 9:17Break Ties
6. 13:40Transformation Functions
7. 17:26Multiple Operations in a Row
8. 20:57Keep It Linear
9. 24:28Curser Reporting and Local Undo
10. 28:09Local Undo
11. 30:35Transforming Lists of Operations
12. 33:15Source Demo

" related talks

• 13mHow to make a real-time collaborative text editor in 5 easy steps!Rudi Chen · StarCon 2018
• 40mNew algorithms for collaborative text editingMartin Kleppmann · Strange Loop 2023
• 01h 00mBuilding a real-time collaborative editorMihaela Gheorghe-Roman · NDC Copenhagen 2026
• 23mBuilding a real-time collaborative editor with PhoenixSheharyar Naseer · ElixirConf EU 2021
• 41mFrom single player to multiplayer-building realtime collaborative experiences with FlutterIiro Krankka · Flutter Vikings 2022
• 41mCreating collaborative editing UIs in ReactEspen Hovlandsdal · JS Fest 2019 Spring
• 29mCRDT: Conflict-free Data Types for Collaborative Editing and Offline-FirstAndrey Sitnik · NEJS Conf 2018
• 42mBuilding a reactive multi user document editor in ScalaJSJan Ypma · Scala Days Berlin 2018