Building CollabyDraw: A Deep Dive into a Real-Time, Secure Collaborative Whiteboard
October 20, 2025
A few months ago, I set out to build CollabyDraw, a web-based collaborative whiteboard. My goal was to create a tool that was not only functional but also secure, intuitive, and a little bit different, with a unique hand-drawn feel. This project became one of my most rewarding, pushing me to learn and implement solutions for real-time communication, security, and modern web architecture. In this post, I'll take you on a deep dive into the technical decisions and architecture behind it.
The Core Drawing Experience
The heart of CollabyDraw is, of course, the canvas. I used the standard HTML Canvas API as the foundation. However, I wanted to avoid the sterile, overly perfect lines of typical digital drawing tools. To achieve a more organic, hand-drawn aesthetic, I integrated two fantastic libraries:
- Rough.js: This library allows you to draw shapes in a sketchy, hand-drawn style. It was perfect for creating shapes that felt more natural.
- perfect-freehand: For freehand drawing, this library is a game-changer. It takes a series of points and renders a beautiful, pressure-sensitive line, which was key to the "hand-drawn feel."
The Magic of Real-Time Collaboration
Real-time collaboration was a must-have feature. I opted to use native WebSockets for this, as they provide a persistent, low-latency, bidirectional communication channel between the client and the server.
To make the user experience as smooth as possible, I implemented a couple of key reliability features:
- Optimistic Updates: When a user draws something, it appears on their screen instantly, without waiting for the server to confirm. The data is sent to the server in the background and broadcast to other users. This makes the app feel incredibly responsive.
- Message Queue & Auto-Retry: Network connections can be flaky. If a message fails to send, I store it in a temporary in-memory queue. The app then automatically tries to flush this queue and send any pending messages as soon as the connection is re-established.
A Fortress of Privacy: End-to-End Encryption (E2EE)
Security was a top priority, especially for a tool where users might be brainstorming sensitive ideas. I implemented End-to-End Encryption (E2EE) with a design that ensures no one—not even the server—can see the content of a drawing.
Here's how it works: When a user creates or joins a room, the app generates a URL like this:
https://collabydraw.xyz#room=abc123,xyz456
- The first part,
abc123, is the unique room ID, which the server uses to group users. - The second part,
xyz456, is the encryption key.
The key insight is that the encryption key is in the URL fragment (everything after the #). Browsers never send the URL fragment to the server in an HTTP request. This means the key lives exclusively on the client-side. All drawing data is encrypted on the client before being sent over the WebSocket, and it can only be decrypted by other clients in the room who have the key from the URL.
The Architectural Decisions
CollabyDraw is built as a monorepo using pnpm workspaces. The tech stack is modern and designed for a great developer experience:
- Next.js 15: I used Next.js for its powerful full-stack capabilities, including the App Router.
- Server Actions: Instead of building traditional REST APIs, I leveraged Next.js Server Actions for mutations like creating and joining rooms. This simplified the backend logic significantly.
- TypeScript: For type safety across the entire project.
- Tailwind CSS: For styling the user interface.
I also made a clear distinction between two modes of operation:
- Standalone Mode: For solo drawing sessions. In this mode, all data is stored locally in the browser, and nothing is ever sent to a server.
- Room Mode: The collaborative mode, which uses the E2EE WebSocket communication described above.
Conclusion
Building CollabyDraw was a fantastic learning experience, teaching me invaluable lessons about real-time systems, security, and modern full-stack development. But beyond the technical skills, the most rewarding part was the response from the community.
I shared my progress in the 100xDevs cohort, and I was incredibly humbled when someone I deeply respect in the Indian tech community, Harkirat Singh, reviewed the project live and gave it his praise. It was a huge confidence boost and validated all the late nights I'd put in. I shared that moment on LinkedIn, and the support was amazing.
I also shared it on X (formerly Twitter), where it received similar support.
Upgraded collabydraw.xyz 🚀 1📡Remote cursors now stream in real-time for all room participants 2📡All shape events (draw, move, resize, drag, reposition) are now streamed — not just synced @kirat_tw 's appreciation pushed me to level this up 🖤 #CollabyDraw #100xDevs
The project is fully open-source, and I encourage you to check out the repository on GitHub. Whether you're a student, a developer, or just curious, feel free to explore the code. If you have ideas for improvements, I'd love to see your issues and pull requests!