Sync Process Explanation

Why events are generated on every keystroke

The Studio component updates its local state on every keystroke to provide a responsive UI. An effect hook in Studio.tsx monitors these state changes and immediately persists them to the local syncQueue (IndexedDB) via mindmapPersistence. This ensures that even if the browser crashes immediately after typing, the latest state is saved locally ("Local-First").

Are all events sent to the backend?

No. While every keystroke creates a record in the local syncQueue, the SyncManager performs batching (compression) before sending data to the backend.

When a sync is triggered (e.g., every 10 seconds, or on page visibility change):

1. The SyncManager reads all pending items from the queue.
2. It calls compressQueue, which merges multiple updates for the same node into a single update.
3. Only the final, coalesced state is sent to the backend API.

Diagram