DEV Community

Abhishek Gupta
Abhishek Gupta

Posted on

CRDT (Conflict-free Replicated Data Types) — Easy Notes for Exams + Interviews + Real Understanding

1. What is CRDT? (Simple Definition)

CRDT stands for:

  • C = Conflict
  • R = Replicated
  • D = Data
  • T = Type

Full form:

Conflict-free Replicated Data Types

Easy definition:

CRDT is a special data structure that allows many users to edit the same data at the same time without conflicts.

All users eventually see the same final data.

Interview Definition

CRDT is a distributed data structure that lets multiple replicas update independently and automatically merge changes without conflicts.

One-line exam answer

CRDT is a technique used in distributed systems for conflict-free synchronization of shared data.

2. Why do we need CRDT?

Suppose two users edit same document.

User A:

Hello
Enter fullscreen mode Exit fullscreen mode

User B:

Hello World
Enter fullscreen mode Exit fullscreen mode

Problem:

Which version should stay?

This is called:

Conflict.

CRDT solves this automatically.

3. Why is it called conflict-free?

Because:

  • No manual merge needed
  • No data overwrite
  • No edit loss
  • Changes merge automatically

That is “conflict-free”.

4. What does replicated mean?

Replicated means:

Same data exists in multiple places.

Example:

  • User A browser
  • User B browser
  • Server

All have a copy.

These copies are called:

Replicas.

5. Real-life examples using CRDT

CRDT ideas are used in:

  • Google Docs
  • Figma
  • Notion
  • VS Code Live Share
  • Real-time code editors

6. How does CRDT work? (Easy Steps)

Step 1:

User types.

Step 2:

Change is stored as operation.

Example:

Insert A
Delete B
Enter fullscreen mode Exit fullscreen mode

Step 3:

Operation sent to other users.

Step 4:

Everyone applies same updates.

Step 5:

All copies become same.

This is called:

Convergence

7. What is convergence?

Convergence means:

All users finally see same result.

Example:

User A sees:

Hello World
Enter fullscreen mode Exit fullscreen mode

User B sees:

Hello World
Enter fullscreen mode Exit fullscreen mode

Same final state.

That is convergence.

8. Two types of CRDT

1. State-based CRDT

Whole state is shared.

Example:

Send full document.

2. Operation-based CRDT

Only operations shared.

Example:

Insert X
Delete Y
Enter fullscreen mode Exit fullscreen mode

Most editors use this idea.

9. CRDT vs Traditional System

Traditional:

  • Conflicts happen
  • Merge problems
  • Data can be lost

CRDT:

  • No conflicts
  • Automatic merge
  • Safer collaboration

10. CRDT vs OT (Important Interview Question)

OT

Operational Transform.

Old technique.

Used in older collaborative systems.

CRDT

Newer technique.

Changes merge automatically.

Difference:

OT transforms operations.

CRDT uses special data structures to avoid conflict.

11. What problem does CRDT solve?

CRDT solves:

  • Simultaneous editing
  • Merge conflicts
  • Offline editing sync
  • Distributed data consistency

Important exam point.

12. What is Yjs?

Yjs is a JavaScript library that implements CRDT.

Simple meaning:

Yjs gives ready-made CRDT.

You do not build CRDT from scratch.

13. What is this? 

const ydoc = new Y.Doc()
Enter fullscreen mode Exit fullscreen mode

This creates:

Shared document.

Like collaborative database in memory.

14. What is Y.Text? 

ydoc.getText('monaco')
Enter fullscreen mode Exit fullscreen mode

Creates shared text.

Like collaborative string.

Used in your code editor project. fileciteturn0file0

15. What is y-monaco?

It connects:

Monaco Editor + Yjs

Without it:

Editor changes do not sync.

16. What is y-socket.io?

Used for network communication.

It sends updates between users.

Without it:

No real-time collaboration.

17. What is Socket.IO?

Socket.IO is real-time communication library.

Used for:

  • WebSockets
  • Real-time messages
  • Live sync

18. How your collaborative editor works

Flow:

Monaco Editor
↓
Yjs
↓
Socket.IO Provider
↓
Server
↓
Other users
Enter fullscreen mode Exit fullscreen mode

This is your architecture. fileciteturn0file0

19. What is awareness?

Awareness means:

User presence.

Example:

  • Who is online
  • Cursor position
  • User color
  • User name

Example:

provider.awareness.setLocalStateField()
Enter fullscreen mode Exit fullscreen mode

20. Awareness vs Document (Interview Question)

Document

Actual shared content.

Like:

Code.

Awareness

Temporary user info.

Like:

Cursor.

Difference important.

21. What is eventual consistency?

Very important interview question.

Definition:

All replicas eventually become consistent.

Simple:

Everyone finally sees same data.

22. What is a replica?

Replica = copy of data.

Example:

Each user has one copy.

23. What is a conflict?

Conflict means:

Two changes compete.

CRDT resolves it.

24. What is tombstone? (Exam Question)

When data is deleted:

Sometimes system marks:

Deleted = true
Enter fullscreen mode Exit fullscreen mode

instead of removing immediately.

This is tombstone.

25. Advantages of CRDT

  • Conflict-free
  • Real-time collaboration
  • Offline support
  • Automatic merging
  • Strong distributed systems support

Important exam answer.

26. Disadvantages of CRDT

  • Complex algorithms
  • Memory overhead
  • Hard to implement

Common interview question.

27. Where CRDT is used

Used in:

  • Collaborative editors
  • Multiplayer apps
  • Shared whiteboards
  • Offline-first apps

28. Interview Questions and Answers

Q1 What is CRDT?

Answer:

CRDT is a distributed data structure used for conflict-free synchronization.

Q2 Why use CRDT?

To solve conflicts in concurrent distributed edits.

Q3 Difference between CRDT and OT?

OT transforms operations.

CRDT avoids conflicts using special data structures.

Q4 What is eventual consistency?

All replicas eventually become identical.

Q5 What is Yjs?

Yjs is a JavaScript CRDT library.

Q6 What is awareness?

Awareness manages user presence.

Q7 What is replica?

A copy of shared data.

29. Exam Answers (Short)

Define CRDT.

CRDT is a conflict-free replicated data type used for distributed synchronization.

Define replica.

Replica is a copy of shared distributed data.

Define convergence.

Convergence means all replicas reach same final state.

Define eventual consistency.

All replicas become consistent over time.

30. Project Ideas Using CRDT

Beginner:

  • Collaborative notes app
  • Shared todo app

Intermediate:

  • Collaborative code editor
  • Shared whiteboard
  • Multiplayer kanban board

Advanced:

  • Figma clone
  • Notion clone
  • Collaborative IDE

31. Viva Questions

Teacher may ask:

What does CRDT stand for?

Why use CRDT?

Difference between CRDT and OT?

What is Yjs?

What is awareness?

Prepare these.

32. Remember Formula

Think:

CRDT =
Multiple users
+
No conflicts
+
Automatic merge
+
Same final data
Enter fullscreen mode Exit fullscreen mode

Easy memory trick.

33. Final Easy Definition

CRDT is a special distributed data structure that lets many users edit the same data at the same time without conflicts, while automatically keeping all copies synchronized.

This is correct for:

  • Exams
  • Interviews
  • Viva
  • Projects

Done.

34. Complete Topic Coverage (Added Missing Topics)

Characteristics of CRDT

A good CRDT has:

  1. Convergence

All replicas reach same state.

  1. Commutativity

Order does not matter.

Example:

A then B = B then A
Enter fullscreen mode Exit fullscreen mode
  1. Idempotence

Applying same update twice gives same result.

  1. Associativity

Grouping operations does not change result.

These are important interview topics.

35. Diagram: CRDT Merge 

         User A
          |
       Insert X
          |
          |
          v
      -----------
      CRDT Merge Engine
      -----------
          ^
          |
       Insert Y
          |
         User B

Final:
X and Y both preserved
Enter fullscreen mode Exit fullscreen mode

36. Example of Conflict Without CRDT

User A edits:

Apple
Enter fullscreen mode Exit fullscreen mode

User B edits:

Apple Mango
Enter fullscreen mode Exit fullscreen mode

Traditional system:

One may overwrite other.

Data loss possible.

37. Example With CRDT

Both changes preserved.

Apple Mango
Enter fullscreen mode Exit fullscreen mode

No loss.

38. Types of Shared Yjs Data Types

Y.Text

Collaborative text.

Example:

Shared code editor.

Y.Array

Shared arrays.

Example:

['Task1','Task2']
Enter fullscreen mode Exit fullscreen mode

Y.Map

Shared object.

Example:

{
 name:'Abhishek',
 role:'editor'
}
Enter fullscreen mode Exit fullscreen mode

Y.XmlFragment

Rich text editors.

39. Diagram: Yjs Architecture 

User Types
   |
Monaco Editor
   |
y-monaco
   |
Yjs Document
   |
y-socket.io
   |
Server
   |
Other Clients
Enter fullscreen mode Exit fullscreen mode

40. Example: Y.Map 

const users=ydoc.getMap('users')

users.set('name','Abhishek')
Enter fullscreen mode Exit fullscreen mode

Shared map updated.

41. Example: Y.Array 

const tasks=ydoc.getArray('tasks')

tasks.push(['Learn CRDT'])
Enter fullscreen mode Exit fullscreen mode

Collaborative shared array.

42. Example: Awareness 

provider.awareness.setLocalStateField(
'user',
{
 name:'Abhishek',
 color:'blue'
}
)
Enter fullscreen mode Exit fullscreen mode

Stores presence.

43. Interview Question

Difference between Y.Doc and Y.Text?

Answer:

Y.Doc is complete shared document.

Y.Text is collaborative text inside Y.Doc.

44. What is WebSocket?

Interview favorite.

WebSocket:

Two-way real-time communication protocol.

Used for:

  • Chat
  • Collaboration
  • Live updates

45. WebSocket vs HTTP

HTTP:

Request-response.

One-way.

WebSocket:

Persistent connection.

Two-way.

Better for real-time.

46. Diagram 

HTTP
Client -> Server

WebSocket
Client <-> Server
Enter fullscreen mode Exit fullscreen mode

47. What is Socket.IO Provider?

Bridge between:

Yjs and Socket.IO.

Responsible for:

  • sending updates
  • receiving updates
  • syncing replicas

48. What is Replica Synchronization?

Keeping all copies updated.

Example:

User A copy
User B copy
Server copy

All sync.

49. Example of Concurrent Editing

A types:

cat
Enter fullscreen mode Exit fullscreen mode

B types:

dog
Enter fullscreen mode Exit fullscreen mode

CRDT merges.

Final:

cat dog
Enter fullscreen mode Exit fullscreen mode

50. What is Offline Editing?

User edits without internet.

Later reconnects.

Changes merge automatically.

Huge CRDT feature.

51. What is Causal Ordering?

Advanced interview question.

Operations applied in logical order.

Cause before effect.

52. Lamport Clock (Simple)

Used to track event ordering.

Important distributed systems topic.

53. Vector Clock

Tracks ordering across multiple machines.

Advanced topic.

54. Strong Eventual Consistency

All replicas:

  • receive same updates
  • reach same state

Important theory topic.

55. State-Based Example

Send:

Whole document
Enter fullscreen mode Exit fullscreen mode

56. Operation-Based Example

Send:

Insert A
Delete B
Enter fullscreen mode Exit fullscreen mode

57. Difference

State-based:

Sends state.

Operation-based:

Sends operations.

Common exam question.

58. What is Distributed System?

Very important prerequisite.

Distributed system:

Multiple computers working together.

Example:

  • Google
  • AWS
  • Collaborative editors

59. CRDT in Distributed Systems

CRDT helps distributed systems maintain consistency.

60. What is Consistency?

Consistency means:

All users see correct data.

61. What is Data Synchronization?

Keeping multiple copies updated.

62. What is Automatic Merge?

Merging changes without manual work.

CRDT does this.

63. Traditional Locking vs CRDT

Locking:

Only one user edits.

CRDT:

Many users edit.

Much better collaboration.

64. Diagram 

Locking:
User A edits
User B waits

CRDT:
User A edits
User B edits
Both succeed
Enter fullscreen mode Exit fullscreen mode

65. Common Viva Questions

What is convergence?

What is commutativity?

What is idempotence?

What is awareness?

What is Y.Doc?

What is Y.Text?

What is Socket.IO?

What is WebSocket?

What is eventual consistency?

Important.

66. Common Mistakes Students Make

Confusing:

WebSocket with CRDT.

Wrong.

WebSocket = transport.

CRDT = data structure.

Very different.

67. Common Mistake

Thinking Yjs is WebSocket.

Wrong.

Yjs = CRDT engine.

Socket.IO = transport.

68. Interview Question

Why not use only WebSocket?

Answer:

WebSocket only sends messages.

It does not solve conflicts.

CRDT solves conflicts.

Very important answer.

69. Interview Question

Why not use only database?

Answer:

Database stores data.

CRDT handles distributed concurrent editing.

Different purpose.

70. Exam Question

Advantages of Yjs

Answer:

  • Fast
  • Conflict-free
  • Real-time sync
  • Offline support
  • Efficient updates

71. Disadvantages of Yjs

  • Learning curve
  • Complex internals
  • Large documents need optimization

72. Diagram: Packages Role 

yjs
↓
CRDT Engine


y-monaco
↓
Editor Binding


y-socket.io
↓
Network Sync
Enter fullscreen mode Exit fullscreen mode

73. Example Interview Answer

Q:
How does collaborative editor work?

Answer:

Monaco captures edits.

Yjs converts edits into CRDT updates.

Socket.IO sends updates.

Other clients receive and apply updates.

All replicas converge.

Excellent answer.

74. Scenario Question

What happens if two users type at same time?

Answer:

CRDT merges concurrent changes automatically.

No data loss.

75. Scenario Question

What if user disconnects?

Answer:

User can reconnect.

CRDT can merge updates.

76. Important Terms Dictionary

Conflict

Replica

Convergence

Consistency

Synchronization

Awareness

Tombstone

Operation

State

Causality

Learn all.

77. Big Diagram Full System 

User A
 |
Monaco
 |
Yjs
 |
Socket.IO
 |
Server
 |
Socket.IO
 |
Yjs
 |
Monaco
 |
User B
Enter fullscreen mode Exit fullscreen mode

Full architecture.

78. Practice Questions

Explain CRDT.

Explain Yjs.

Explain Awareness.

Explain convergence.

Explain eventual consistency.

Explain state-based CRDT.

Explain operation-based CRDT.

Explain WebSocket vs HTTP.

Practice these.

79. 2 Mark Questions

Define CRDT.

Define replica.

Define convergence.

Define awareness.

80. 5 Mark Questions

Explain CRDT architecture.

Explain Yjs packages.

Difference between CRDT and OT.

81. 10 Mark Questions

Explain conflict-free replicated data types with diagram.

Explain collaborative editor architecture using Yjs and Socket.IO.

Very important.

82. Advanced Topics To Mention In Interview

Lamport Clock

Vector Clock

Tombstones

Causal Ordering

Strong Eventual Consistency

Mentioning these makes you look strong.

83. Final Memory Map 

CRDT
├── Conflict-free
├── Replicated
├── Data Type
│
├── Convergence
├── Consistency
├── Replicas
│
├── Yjs
│   ├── Y.Doc
│   ├── Y.Text
│   ├── Y.Map
│   └── Y.Array
│
├── y-monaco
├── y-socket.io
│
├── WebSocket
├── Awareness
│
└── Collaborative Editors
Enter fullscreen mode Exit fullscreen mode

Complete map.

84. Final Interview Definition (Best)

CRDT is a distributed data structure that allows multiple users to modify shared replicated data concurrently while automatically resolving conflicts and ensuring all replicas converge to the same final state.

Use this in interviews.

Now coverage is much more complete.

Top comments (0)