Real-Time Collaboration

DrawMotive is built from the ground up for collaborative editing. Multiple users can work on the same diagram simultaneously, with changes appearing in real time.

How It Works

Local-First Editing

When you make a change — draw a line, move a shape, delete an object — it applies to your local copy immediately. There's no loading spinner or waiting for server confirmation. The change is visible on your screen the moment you make it.

Background Synchronization

After a local change is applied, it's packaged into a transaction and added to a sync queue. The sync system sends this transaction to the server, which broadcasts it to all other users viewing the same diagram. On their end, the transaction is applied to their local copy, and they see your change.

This happens continuously in the background. The typical latency between one user's edit and another user seeing it is 50–500ms, depending on network conditions.

Conflict Resolution

When two users edit the same property at the same time (e.g., both change a line's color), DrawMotive uses Last-Write-Wins (LWW) resolution. Each edit carries a timestamp, and the edit with the later timestamp takes precedence. Both users automatically converge to the same result.

For structural changes (adding or removing shapes), there's no conflict — adds and removes from different users are applied independently.

Vector Clocks

The system uses vector clocks to track the causal order of changes. This ensures that if User A makes a change, and User B makes a change that depends on User A's change, the changes are always applied in the correct order — even if network delays cause them to arrive out of order.

If a transaction arrives that depends on one the client hasn't received yet, it's placed in a deferred queue. The client requests the missing transactions from the server and applies them in order.

Offline Collaboration

DrawMotive continues to work when you lose your network connection:

1. Keep editing — All tools and features work normally offline
2. Local persistence — Every change is saved to IndexedDB in your browser
3. Queue changes — Transactions accumulate in the sync queue
4. Auto-reconnect — When the network returns, the client reconnects automatically
5. Queue drain — Pending transactions are sent to the server
6. Pull remote changes — Changes made by others while you were offline are pulled and merged
7. Converge — All clients reach the same state through CRDT merging

No manual intervention is required. You won't even notice a brief disconnection.

Undo and Redo in Collaborative Sessions

Undo in a collaborative environment only reverses your own actions. If you and a colleague are both editing, pressing Ctrl+Z undoes your most recent change without affecting theirs.

The undo system works by marking transactions as "undone" rather than deleting them. This means:

• Undo is itself a transaction, so it syncs to other users
• Other users see your undo take effect on their screens
• Redo re-applies the undone transaction

Sync States

The editor shows the current sync status:

State	Meaning
Connected	Real-time sync active, all changes are up to date
Syncing	Changes are being sent to or received from the server
Offline	No server connection, edits are saved locally
Reconnecting	Attempting to re-establish the server connection

Best Practices

• Save frequently — While DrawMotive auto-saves to IndexedDB, exporting periodic snapshots provides an additional backup
• Communicate with collaborators — The tool merges changes automatically, but planning who works on which section avoids unnecessary conflicts
• Check sync status — Before closing your browser, verify the sync indicator shows all changes are synced