Apps
Collaborate
Real-time collaborative editor with live cursors, presence indicators, and shared state.
What it does
Real-time collaborative editor where multiple users edit the same document simultaneously. Each participant sees live cursors, selections, and presence indicators from every other user in the session.
Tech stack
| Layer | Library |
|---|---|
| App framework | Next.js |
| Real-time sync and presence | @cloudsignal/collaborate |
| Styling | Tailwind CSS |
Key components
| Component | What it does |
|---|---|
Space provider | Wraps the collaborative area, handles the MQTT connection, and synchronizes state across all participants |
CursorOverlay | Renders other users' cursors and selections in real time as colored overlays on the document |
AvatarStack | Shows who is currently in the document with profile pictures and online indicators |
| Shared text state | Document content synchronized via MQTT topics under sync/{room_id}/, with each keystroke broadcast to all participants |
| Conflict resolution | Last-write-wins strategy with operational transform for text, ensuring edits from multiple users merge cleanly |
Build with AI
This app works well as a starting point for AI development platforms like Lovable or v0. Paste the prompt below to generate your own version:
Example prompt
Build a collaborative text editor using @cloudsignal/collaborate with live cursors, user avatars, and real-time sync
Customize the generated app by adding rich text formatting, comment threads, or version history.
Resources
- Source on GitHub: cloudsignal/example-collaborate
- Related guide: Real-time sync