Repository files navigation

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 withprivacy 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,xyz456

  • abc123: Unique room ID (used by the server)
  • xyz456: Encryption key (usedonly on the client)

• Theencryption key after the comma (xyz456) is part of the URL fragment (#...).

• This fragment isnever sent in HTTP requests, meaning:

  The server cannot see or store the encryption key.

• All encrypted drawing data is transmitted over WebSocket.
• Thedecryption and rendering happen completely on the client-side using thekey from 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.
• Ensuresconfidentiality for private brainstorming, teaching, or design sessions.
• Works likeCollabydraw'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 (useWebSocket hook)
• Security: Hash-based E2EE

https://plum-chamomile-116.notion.site/Collabydraw-Hand-drawn-look-feel-Collaborative-Secure-1cb6d6552d9b802597c1cb575db2a9da?pvs=4

https://www.youtube.com/watch?v=NNVdRCoFnK0

I wantCollabyDraw 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!

1. Fork the Repo and clone it locally
2. Runpnpm install andpnpm dev to start the dev server
3. Check theIssues tab for open tasks — especially those labeledgood first issue
4. Follow theCONTRIBUTING.md (coming soon) for guidelines
5. Submit a Pull Request — even small improvements matter!

💡Ideas for Contribution (feel free to raise these as issues):

• Add undo/redo support in standalone mode
• Add support for duplicating a selected shape usingCtrl + D keyboard shortcut.
• Fix:Rounded corners not working for Diamond shapeWhen the"rounded" option is selected for diamond shapes, the corners remain sharp. Update the rendering logic to support rounded edges for diamonds.

👉 Tag your issue withgood first issue,help wanted, orenhancement so others can discover and contribute!

• Next.js 15 for Fullstack: Frontend and backend are handled together using server actions. No separate HTTP services.
• No Mandatory Auth for Canvas Use: Users can draw without logging in. Auth is only required for collaboration.
• Server Actions Instead of REST APIs: Room creation, joining, and user management are handled through server actions.
• Standalone Mode with Local Storage: For solo drawing sessions, data is stored locally and never sent to a server.
• Interactive Room Collaboration Mode: Shows participant presence, names, and avatars in real-time sync only as of now.
• End-to-End Encrypted Collaboration: No drawn shapes or messages are stored in any database.
• Database Used Only for Auth: All other state management is client-side or ephemeral.
• Hookified WebSocket Layer: Abstracts the socket connection with clean React patterns.

This project is licensed under aCustom Personal Use License — you may view and learn from the code, butcommercial use, redistribution, or claiming authorship is strictly prohibited.
See the fullLICENSE for details.