Collaborative Editing Feature Broken in Bolt App
Your Bolt.new application has a collaborative editing feature (shared documents, kanban boards, whiteboards) where multiple users should be able to edit simultaneously, but changes from one user overwrite another's work, edits don't appear in real-time, or the document gets into a corrupted state with missing or duplicated content.
Collaborative editing is one of the hardest technical challenges in web development. It requires real-time synchronization, conflict resolution, presence awareness, and careful state management. When Bolt generates collaborative features, it often implements basic database saving without the synchronization layer that makes true collaboration work.
Users experience this as: changes disappearing after they save, seeing stale content that doesn't match what others are editing, or two users making simultaneous changes where only the last save survives and the other's work is lost.
Error Messages You Might See
Common Causes
- Last-write-wins without conflict resolution — Each save overwrites the entire document, so the last person to save destroys everyone else's concurrent changes
- No real-time sync between clients — Changes are saved to the database but other connected users don't receive updates until they refresh
- Missing optimistic concurrency control — No version tracking or timestamps to detect when two users edit the same data simultaneously
- Presence information not shared — Users can't see who else is editing, leading to unknowing concurrent edits on the same section
- Database updates too coarse — The entire document is replaced on each edit instead of applying granular operations (insert text at position X)
How to Fix It
- Use Supabase Realtime for sync — Broadcast changes through Supabase channels: const channel = supabase.channel('doc:' + docId); channel.on('broadcast', { event: 'edit' }, handleRemoteEdit).subscribe()
- Implement operational transforms or CRDTs — For text editing, use a library like Yjs or Automerge that handles conflict resolution: const ydoc = new Y.Doc(); const provider = new SupabaseProvider(supabase, ydoc, docId)
- Add presence awareness — Show who is editing with cursor positions: channel.track({ user: currentUser, cursor: cursorPosition })
- Use granular updates — Instead of replacing the whole document, send operations: { type: 'insert', position: 42, text: 'hello' } and apply them to each client's local state
- Add version numbers — Track document versions and reject stale updates: UPDATE docs SET content = $1, version = version + 1 WHERE id = $2 AND version = $3
- Implement undo/redo — Maintain an operation history so users can undo both their own and others' changes if needed
Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
What is the easiest way to add collaborative editing to a Bolt app?
Use Yjs with Supabase as the sync provider. Yjs handles conflict resolution automatically using CRDTs (Conflict-free Replicated Data Types). Install yjs and create a shared document that syncs through Supabase Realtime channels.
Why does the last person to save overwrite everyone else's changes?
This is the 'last-write-wins' problem. When you save the entire document, you overwrite whatever was there, including other users' unsaved changes. The fix is to send granular operations (insert, delete, update at specific positions) instead of replacing the whole document.