From single player to multiplayer-building realtime collaborative experiences with Flutter
summary
Shows how SuperEditor becomes a real‑time collaborative editor by adding an OT sync layer using the Delta format for edits, an operational transformation transform method on the server, and an Elixir backend that stores every change. Implements client sync engine that diffs with Delta.diff, transforms remote selections, and preserves undo/redo via delta.invert. Demo sustains ~20 simultaneous users without breaking. Codebase is a companion repo (initially private) and the approach groups keystrokes and composes changes to keep documents consistent.
AI-written summary · about
chapters (15)
- 0:00Introduction and background
- 3:15Demo of real-time collaboration
- 5:40From single-player to multiplayer
- 8:10Challenges with last-write-wins
- 11:20Choosing operational transformation
- 14:31Delta format for document changes
- 17:42Change Deltas and document updates
- 20:12Sync logic with server and clients
- 26:38Server-side change tracking
- 28:47Front-end sync engine
- 32:20Transforming document selections
- 34:05Implementing undo and redo
- 37:24Handling remote changes in history
- 39:12Integrating with Super Editor
- 40:17Challenges and next steps
related talks
23mBuilding a real-time collaborative editor with Phoenix
37mBuilding a Collaborative Text Editor
01h 00mBuilding a real-time collaborative editor
40mNew algorithms for collaborative text editing
41mCreating collaborative editing UIs in React
13mHow to make a real-time collaborative text editor in 5 easy steps!
44mCollaborative Music with Elm and Phoenix
31mEverything's better with friends