Collaborative Whiteboard · React 18, WebSockets & Llama 3.3
Drawo
Modern, full-featured collaborative hand-drawn whiteboard application combining an infinite canvas with real-time zero-knowledge end-to-end encryption (AES-GCM), Cloudflare Workers AI edge diagram generation (Llama 3.3 70B), and cloud workspaces.
Feature
Edge AI Text-to-Diagram Generator
- Natural language to architectural diagrams powered by Cloudflare Workers AI and Meta Llama 3.3 70B Instruct
- Real-time Server-Sent Events (SSE) streaming proxy converting LLM token deltas into Mermaid AST representations
- Seamless client-side compilation turning Mermaid syntax into fully interactive and editable whiteboard elements
Zero-Knowledge Live Collaboration (E2EE)
- Client-side 128-bit AES-GCM encryption via Web Crypto API with keys isolated exclusively in the client URL hash
- Low-latency ephemeral WebSocket relay multiplexing room states without storing unencrypted scene data
- Instant multiplayer onboarding via one-click encrypted invite links and dynamic high-resolution QR codes
Interactive Architecture Studio & Dark Mode
- Infinite hand-drawn canvas supporting smart bounding connectors, geometric shapes, sticky notes, and freehand ink
- Dedicated high-contrast Dark Mode Studio (#121212) engineered for nighttime system design and brainstorming
- Cloud workspace management with Firebase Auth, Firestore snapshot checkpoints, and JSON file exports
Mobile Responsive & Touch-First Canvas
- Touch-optimized viewport layout with floating bottom action dock for rapid shape, drawing, and eraser switching
- Smooth multi-touch gestures supporting fluid two-finger panning, pinch-to-zoom, and stylus pressure sensing
- Cross-platform parity delivering 60fps canvas rendering across desktop, tablet, and mobile devices
Technical
Real-time SSE streaming edge inference on Cloudflare Workers AI with sub-300ms time-to-first-token latency
Client-side Web Crypto AES-GCM encryption ensuring canvas payloads never leak in plaintext to the WebSocket relay
Fully responsive touch-first whiteboard experience with dedicated dark mode studio aesthetics and offline PWA support
Technologies Utilized
React 18
TypeScript
Cloudflare Workers AI
Llama 3.3 70B
WebSockets
AES-GCM Encryption
Web Crypto API
Firebase
Firestore
Excalidraw
PWA