logoViberzFix
Back to Blog
EngineeringNov 05, 202418 min read

The Architecture of a Real-time Collaborative Editor

Using CRDTs and WebSockets to build a conflict-free editing experience.

E
Emily Zhang
Senior Engineer

Real-time collaboration is one of the hardest problems in distributed systems. When multiple users edit the same document simultaneously, how do you ensure everyone sees a consistent result?

The Problem with OT

Operational Transformation (OT) was the original solution, used by Google Docs. But OT has a fundamental flaw: it requires a central server to order operations. This creates a single point of failure and adds latency.

Enter CRDTs

Conflict-free Replicated Data Types (CRDTs) solve this differently. Instead of transforming operations, CRDTs use data structures that are mathematically guaranteed to converge, regardless of the order operations are applied.

typescript
interface CRDT<T> {
  value: T;
  merge(other: CRDT<T>): CRDT<T>;
  // Merge is commutative: a.merge(b) = b.merge(a)
  // Merge is associative: (a.merge(b)).merge(c) = a.merge(b.merge(c))
  // Merge is idempotent: a.merge(a) = a
}

Our Implementation

We chose Yjs, a high-performance CRDT implementation in JavaScript. Combined with WebSockets for real-time sync and IndexedDB for offline support, we built an editor that feels instant even on slow connections.

  • Sub-50ms sync latency in most cases
  • Full offline support with automatic conflict resolution
  • Presence awareness showing who's editing what
  • Undo/redo that works correctly across all clients