What is the primary advantage of using binary updates instead of JSON or plain text in y-websocket?

Binary Uint8Array encoding is much smaller than JSON/text, reducing network traffic and improving sync speed for large documents.

In the y-websocket two-step handshake, what does the client send during SyncStep1?

SyncStep1 sends the state vector so server knows what updates client is missing and can send only those in SyncStep2.

What message type code is used for syncing document updates in y-websocket protocol?

messageSync with code 0 is designated for synchronizing document state; messageAwareness (1) is for presence.

Why is SyncStep2 necessary after the server receives SyncStep1?

SyncStep2 sends missing updates identified by comparing state vectors, bringing client to current state.

In a y-websocket server handling multiple rooms, how does the server determine which clients should receive a broadcast update?

Updates are room-specific; server broadcasts only to clients connected to that document/room to avoid cross-document pollution.

What happens if a client reconnects with a state vector that is older than available server updates?

SyncStep2 sends all missing updates regardless of how old the client's state is, ensuring complete sync.

In high-latency networks, what optimization technique reduces SyncStep1/2 overhead?

Batching reduces message count and network round-trips, improving throughput on high-latency connections.

What is the key difference between awareness state and document state in Yjs?

Awareness (cursors, selections) disappears on disconnect; document state persists permanently across sessions.

How is each client identified in the Awareness API?

Each client receives unique clientID used to track and update its awareness entry independently.

What happens to a user's cursor in awareness when they disconnect from the collaborative editor?

Server removes stale awareness after ~30s inactivity, preventing zombie cursors from cluttering the UI.

In awareness state, what does the 'color' field typically represent?

User color is a visual property stored in awareness to make each user's cursor and selection uniquely identifiable.

Which of the following is NOT typically stored in awareness state?

Edit history is document state (persisted), not awareness. Awareness stores only ephemeral presence info.

How are awareness updates distinguished from document updates in the y-websocket protocol?

Separate message types allow server to handle presence and document data independently, optimizing bandwidth.

How does Yjs handle user edits when they lose internet connection?

y-indexeddb provider persists updates locally, enabling offline editing and automatic sync on reconnection.

What property of CRDTs enables conflict-free merging of offline edits on reconnection?

Each CRDT operation is uniquely identified by logical clock + client ID, allowing deterministic merge regardless of order.

When a client reconnects, how are offline edits and server edits resolved?

SyncStep1/2 exchange missing updates bidirectionally; CRDT guarantees convergence regardless of order.

What is the purpose of y-indexeddb in an offline-first Yjs application?

y-indexeddb provider stores updates in browser IndexedDB, enabling offline editing and recovery after browser restart.

In offline scenarios, how does Yjs ensure that two users' edits don't conflict when both edit the same text?

CRDT operations are self-identifying, so even if two users insert at same position offline, their unique IDs determine merge order.

What does Y.encodeStateAsUpdate() return?

Y.encodeStateAsUpdate() serializes the full document state into compact binary for storage or transmission.

What is the main advantage of append-only update logs over saving full document snapshots?

Append-only avoids rewriting full document each edit; incremental updates are cheaper. Reconstruction replays log.

How do you restore a Yjs document from a binary blob stored in the database?

Y.applyUpdate(doc, binaryBlob) merges the stored state into a new empty document, reconstructing it.

In a version history feature for Google Docs, what is a Snapshot used for?

Snapshots let you restore document to earlier state, enabling rollback and version history features.

What problem does incremental snapshotting solve in append-only persistence?

Snapshotting every N updates avoids replaying entire log; can load from recent snapshot + delta updates.

How does compacting updates improve persistence efficiency?

Merging consecutive ops (e.g., 10 char inserts into 1) reduces database row count and improves load time.

In a Google Docs-style editor, which Yjs data type is used to store the editable text?

Y.Text provides ordered character storage with built-in insertion/deletion conflict resolution for text editors.

What is a 'room' in a WebSocket server handling multiple collaborative documents?

Room is server-side concept grouping clients editing same doc/room; updates broadcast only to room members.

Why is a load balancer necessary in a production Google Docs-style architecture?

Load balancer distributes clients to different WS servers; single server has limited concurrent connections.

In a sharded WebSocket architecture, how are documents distributed across servers?

Consistent hash ensures same doc always maps to same server, keeping all clients for a doc on one WS instance.

How does document persistence interact with the WebSocket server layer?

WS server maintains in-memory room state and broadcasts; background job or event stream persists to database.

What is the key difference between a text editor's data model and a whiteboard's data model in Yjs?

Y.Text enforces order (important for character sequences); Y.Map/Array allow flexible shape storage.

How is presence represented differently in a whiteboard vs. a text editor?

Text cursor is 1D index; whiteboard presence is 2D coordinates tracking mouse position on canvas.

Why might last-write-wins conflict resolution be more suitable for shapes than for text in whiteboards?

Shape position/rotation updates are atomic; most recent update naturally wins. Text insertion order matters.

In a collaborative whiteboard, what Yjs data structure best stores a list of drawn shapes?

Y.Array maintains ordered list of shapes; Y.Map could store individual shape props with shape ID as key.

How does undo functionality differ between a text editor and whiteboard in Yjs?

Text editor undo is character-level; whiteboard undo typically reverts entire shape addition/modification.

If two users draw shapes simultaneously at different positions, how does Yjs handle this in a whiteboard?

Y.Array with unique operation IDs ensures both shapes stay; order determined by CRDT logic, not network timing.

Yjs in Practice — System Design Concept

📚Yjs in PracticePro

8 sections

~29 min total

35 quick quizzes

2 SD challenges linked

0 of 8 done·~28 min left

Concepts›Yjs in Practice›What is Yjs in Practice?

0 / 8

8 sections~29 min

What is Yjs in Practice?

Build real-time collaborative apps with Yjs: syncing, offline support, persistence, and presence awareness.

Read

~4 min

⋯

y-websocket Provider: Binary Sync Protocol

WebSocket transport layer syncing document changes using compact binary updates and two-step handshake.

ReadQuizCode

~4 min

⋯

Awareness API: Cursors, Selections, User Colours

Ephemeral presence state sharing cursor position, selection, and user metadata across connected clients.

ReadQuizCode

~4 min

⋯

Offline Support: Yjs Buffers Ops Locally, Syncs on Reconnect

CRDT-based offline editing with local buffering and automatic conflict-free merging on reconnection.

ReadQuizCode

~4 min

⋯

Snapshots and Persistence: Saving Yjs State to a DB

Two persistence strategies: full-document blobs or append-only update logs for long-term storage.

ReadQuizCode

~4 min

⋯

Collaborative Editor (Google Docs)

End-to-end architecture for real-time text editing with awareness, persistence, and server-side state.

ReadQuizCode

~4 min

⋯

Collaborative Whiteboard

Shape-based CRDT model with 2D awareness and last-write-wins conflict resolution for drawing apps.

ReadQuiz

~4 min

⋯

Practice test

35 questions

~12 min

🔒

Pro content

Yjs in Practice is a Pro concept. Upgrade to access full content, practice questions, and design challenges.

Upgrade to Pro →

Notes

🔍

Loading…