https://github.com/ezeslucky/drawio
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.
https://github.com/ezeslucky/drawio
docker postgresql reactjs turborepo
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ezeslucky/drawio
- Owner: ezeslucky
- License: other
- Created: 2025-04-08T03:12:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T05:50:53.000Z (about 1 year ago)
- Last Synced: 2025-04-10T06:33:19.665Z (about 1 year ago)
- Topics: docker, postgresql, reactjs, turborepo
- Language: TypeScript
- Homepage: https://drawio-ivory.vercel.app/
- Size: 2.01 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎨 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](./LICENSE) for details.