Realtime Collab Whiteboard

A multiplayer infinite canvas whiteboard for real-time visual collaboration, voice annotations, and AI-powered diagram recognition.

What is this?

Realtime Collab Whiteboard bridges the gap between isolated local tools and complex distributed systems by providing a shared visual workspace with sub-100ms latency. Ideal for design reviews, brainstorming sessions, and collaborative debugging—especially for teams working on VR projects, mesh systems, or agent-based infrastructure. Voice annotations and optional AI diagram recognition integrate seamlessly with your existing agent infrastructure.

Features

• Infinite Canvas: Unlimited drawing surface with pan and zoom capabilities
• Real-Time Collaboration: WebSocket-powered updates with <100ms latency
• Voice Annotations: Attach audio notes directly to canvas elements
• AI Diagram Recognition: Optional AI analysis to detect and label shapes and patterns
• User Presence: See who's online and active on the canvas
• Persistent Storage: Auto-save drawings with session recovery
• Toolbar Controls: Draw, erase, select, and manage stroke properties
• Multi-User Awareness: Cursor tracking and per-user color differentiation

Quick Start

Installation

Backend Requirements:

• Python 3.9+
• FastAPI, Uvicorn, WebSockets
• See pyproject.toml for full dependencies

Frontend Requirements:

• Node.js 16+
• React, Vite

Setup:

# Install backend dependencies
pip install -r requirements.txt  # or use pyproject.toml

# Install frontend dependencies
cd frontend
npm install

# Start backend server
python -m app.main
# Server runs on ws://localhost:8000

# Start frontend dev server
npm run dev
# Open http://localhost:5173

Usage

1. Open the app in your browser—you're automatically assigned a user session
2. Draw on the canvas using the toolbar (pen, eraser, selection tools)
3. Add voice notes by clicking the microphone icon and speaking
4. Enable AI analysis (if configured) to auto-label drawn shapes
5. Invite collaborators by sharing the session URL
6. Watch in real-time as remote users draw—updates sync instantly

Example: Design Review Workflow

1. Host opens a new session
2. 3 team members join via URL
3. Host sketches UI wireframe on canvas
4. Teammate 1 adds voice annotation: "Add dark mode toggle here"
5. Teammate 2 circles a section; AI recognizes it as a button component
6. All changes propagate to everyone in <100ms
7. Session auto-saves; join later to resume where you left off

Tech Stack

Backend:

• FastAPI (async web framework)
• WebSockets (real-time bidirectional communication)
• Pydantic (data validation)
• Python 3.9+

Frontend:

• React 18 (UI framework)
• Vite (build tool)
• WebSocket client (native)
• State management (Zustand or Redux—see store.js)

Infrastructure:

• In-memory connection management (scales to ~500 concurrent users)
• Optional persistent storage layer (Postgres-ready)
• Optional AI backend (pluggable via ai_analyzer.py)

Optional Integrations:

• C2PA/watermarking APIs for media compliance
• Agent framework hooks for automation
• Custom LLM endpoints for diagram analysis

License

MIT