Building a real-time collaborative editor with Phoenix
summary
A working Google Docs–style editor is implemented using Elixir, Phoenix channels, OTP supervisors and a Elixir GenServer per document that stores document state, version and a list of changes. Edits are sent as deltas (using the delta OT library), transformed against intervening revisions with delta.compose and delta.transform, then broadcast; tests with 2 second artificial latency show eventual consistency across clients. Cursor jitter is fixed by transforming cursor indexes with a transform-position helper, and the Elixir delta library is open sourced.
AI-written summary · about
chapters (9)
- 0:00Introduction and background
- 1:15High-level architecture
- 3:00Building the base infrastructure
- 5:46Naive synchronization approach
- 8:41Improving with diffs
- 12:43Operational transformation
- 16:17Implementing consistency
- 19:17Refining cursor management
- 21:12Future challenges and closure
related talks
41mFrom single player to multiplayer-building realtime collaborative experiences with Flutter
37mBuilding a Collaborative Text Editor
01h 00mBuilding a real-time collaborative editor
13mHow to make a real-time collaborative text editor in 5 easy steps!
44mCollaborative Music with Elm and Phoenix
40mNew algorithms for collaborative text editing
35mBuilding a Block Based Editor in Phoenix LiveView
05mBuilding Editors in the Browser