Creating collaborative editing UIs in React
summary
Covers concrete techniques and gotchas for building real‑time editors in React: tradeoffs between optimistic/pessimistic locking, use WebSockets or WebRTC for transport, one‑way global store (Redux‑style), send intent‑rich patches (use keys rather than raw indices), use diff-match-patch for text patches, consider CRDTs like Automerge, implement optimistic updates and latency masking, preserve cursors with getSnapshotBeforeUpdate, presence via simple roll‑call or navigator.sendBeacon, and testing strategies; includes lessons from a real Sanity implementation.
AI-written summary · about
chapters (15)
- 0:00The evolution of collaboration
- 1:36The need for better tools
- 4:26Async vs real-time editing
- 6:08Conflict resolution strategies
- 8:25Data consistency challenges
- 10:41Building real-time systems
- 13:52Fine-grained patching
- 15:26Advanced conflict handling
- 17:17UX for collaborative tools
- 20:49React and state management
- 22:53UI challenges and undo
- 25:36Technical implementation
- 31:27Presence and cursor visibility
- 36:25Future of collaborative web
- 40:45Q&A session
related talks
45mCreating a WYSIWYG editor using ReactJS
25mRich Text Editing with React
37mBuilding a Collaborative Text Editor
50mRich text editing with Draft.js
41mReact inline visual editing: now's the time.
40mNew algorithms for collaborative text editing
02h 51mEnliven UX with React/Redux
42mBuilding a reactive multi user document editor in ScalaJS