Experience live collaborative document editing and chat
Note: For real-time collaboration to work, you need to run a collaboration server. Install and run: npx y-websocket-server
Real-time Document Editing
Multiple users can edit this document simultaneously. Changes are synced in real-time.
Collaborative Editor temporarily disabled due to dependency issues
Features:
✅ Real-time collaborative editing with multiple cursors
✅ See who's currently editing (user avatars)
✅ Conflict-free automatic merging of changes
✅ Offline support with automatic sync when reconnected
✅ Full formatting toolbar (bold, italic, lists, etc.)
✅ Undo/redo that works with collaboration
✅ Activity logging for document changes
Technical Implementation
How the real-time collaboration works
Document Collaboration
Yjs - A CRDT (Conflict-free Replicated Data Type) library for automatic conflict resolution
WebSocket - For real-time synchronization between clients
IndexedDB - For offline persistence and sync
Tiptap - Rich text editor with collaboration extensions
Chat Features
WebSocket - For instant message delivery
Optimistic Updates - Messages appear instantly, then sync
@Mentions - With team member autocomplete
Message Editing - Edit history preserved
Setup Instructions
# 1. Install and run the collaboration server
npx y-websocket
# 2. Configure the WebSocket URL in your .env
NEXT_PUBLIC_COLLAB_SERVER=ws://localhost:1234
# 3. For production, use a managed service like:
# - Hocuspocus Cloud
# - Liveblocks
# - Y-Sweet