CollabyDraw is a web-based collaborative whiteboard where multiple users can draw, edit, and brainstorm together in real time. Whether solo or in a group session, the app offers a smooth, intuitive canvas experience with real-time sync, shape tools, editable text, and privacy-focused end-to-end encryption — all without needing an account.
- Canvas Drawing: Freehand, shapes, and editable text
- Rough.js Support: Optional sketch-style drawing
- Perfect-freehand Support: Hand drawn feel
- Eraser Tool: Remove individual shapes
- Editable Text: Double-click to edit on canvas
- Real-time Sync: WebSocket-powered live drawing
- Multi-Tab Awareness: No duplicate join/leave events
- Optimistic Updates: Instant feedback before server response
CollabyDraw is built with privacy by design to ensure that no sensitive drawing data can be accessed by anyone other than the intended participants.
-
When a user creates or joins a room, the app generates a link like:
https://collabydraw.xyz#room=abc123,xyz456abc123: Unique room ID (used by the server)xyz456: Encryption key (used only on the client)
-
The encryption key after the comma (
xyz456) is part of the URL fragment (#...). -
This fragment is never sent in HTTP requests, meaning:
The server cannot see or store the encryption key.
- All encrypted drawing data is transmitted over WebSocket.
- The decryption and rendering happen completely on the client-side using the
keyfrom the URL. - Even if someone intercepts the WebSocket traffic, they cannot decrypt the data without the key.
- No one — not even the server — can read what’s drawn in a room without the key.
- Ensures confidentiality for private brainstorming, teaching, or design sessions.
- Works like Excalidraw's E2EE rooms, but tailored for your collaborative drawing logic.
- Message Queue: Stores unsent messages in memory/localStorage
- Auto Retry: Flushes queued messages on reconnect
- Standalone Mode: Offline/local drawing
- Room Mode: Collaborative sessions
- Frontend: React (Vite), TypeScript, Tailwind CSS
- Canvas: HTML Canvas API + Custom Engine
- Realtime: Native WebSocket (
useWebSockethook) - Security: Hash-based E2EE
https://www.youtube.com/watch?v=NNVdRCoFnK0
I want CollabyDraw to be open source so that other students and developers can explore and learn from it.
If you'd like to contribute—whether it's improving the UI, optimizing performance, or adding new features—feel free to open an issue or submit a pull request!
git clone https://github.com/coderomm/CollabyDraw.git
cd CollabyDrawdocker-compose up- Make sure you have a postgres database running. You can use Docker for this:
docker run --name collabydraw-db -e POSTGRES_PASSWORD=your_secure_password -e POSTGRES_DB=collabydraw -d -p 5432:5432 postgres- Install Dependencies
pnpm install- Set up Environment Variables (in apps/collabydraw, apps/ws, packages/db)
cp .env.example .env- Start the Next.js app
cd apps/collabydraw
pnpm dev- Start the WebSocket server
cd apps/ws
pnpm devThis project is licensed under a Custom Personal Use License — you may view and learn from the code, but commercial use, redistribution, or claiming authorship is strictly prohibit
59DD
ed.
See the full LICENSE for details.