Skip to content

DrawIO Realtime is a full-stack collaborative whiteboard app designed for real-time drawing and ideation. It allows multiple users to sketch together with seamless live updates.

License

Notifications You must be signed in to change notification settings

ezeslucky/drawio

Repository files navigation

🎨 Drawio | Hand-drawn look & feel • Collaborative • Secure


Drawio 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.


✅ Core Features

  • 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

🔗 Collaboration

  • Real-time Sync: WebSocket-powered live drawing
  • Multi-Tab Awareness: No duplicate join/leave events
  • Optimistic Updates: Instant feedback before server response

🔐 Privacy & End-to-End Encryption (E2EE) in Drawio

Drawio is built with privacy by design to ensure that no sensitive drawing data can be accessed by anyone other than the intended participants.

🔒 Client-Side Only Decryption

  • All encrypted drawing data is transmitted over WebSocket.
  • The decryption and rendering happen completely on the client-side using the key from the URL.
  • Even if someone intercepts the WebSocket traffic, they cannot decrypt the data without the key.

🛡️ Benefits

  • 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.

🧠 Reliability

  • Message Queue: Stores unsent messages in memory/localStorage
  • Auto Retry: Flushes queued messages on reconnect

🧭 Modes

  • Standalone Mode: Offline/local drawing
  • Room Mode: Collaborative sessions

⚙️ Tech Stack

  • Frontend: React (Vite), TypeScript, Tailwind CSS
  • Canvas: HTML Canvas API + Custom Engine
  • Realtime: Native WebSocket (useWebSocket hook)
  • Security: Hash-based E2EE

🌍 Open Source & Contributions

I want Drawio 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!


📄 License

This 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 prohibited.
See the full LICENSE for details.

About

DrawIO Realtime is a full-stack collaborative whiteboard app designed for real-time drawing and ideation. It allows multiple users to sketch together with seamless live updates.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages