TheySynced: Building a Real-Time Collaborative Whiteboard
Built TheySynced in December 2025 as a real-time collaborative whiteboard application. The goal was simple – create a tool where multiple people can draw, brainstorm, and chat together in real-time without any lag or complexity.
The Problem with Existing Tools
Most collaborative whiteboard tools are either heavy web apps with framework bloat or closed-source SaaS products where you don't control your data. I wanted something lightweight, fast, and self-hosted.
Real-time collaboration is technically challenging. WebSocket connections, concurrent state management, message broadcasting to multiple users, keeping everything in sync. These are real problems that need real solutions.
Technical Architecture
Backend is built in Rust using Axum web framework. Chose Rust for the same reasons I use it everywhere – memory safety, zero-cost abstractions, excellent async runtime with Tokio.
Frontend is vanilla JavaScript. No React, no Vue, no build tools. Just HTML, CSS, and JavaScript working directly with the Canvas API and WebSocket. Keeps things fast and simple.
WebSocket Communication
The core of real-time collaboration is WebSocket connections. Each user connects to the server via WebSocket when they join a session. Server maintains these connections and broadcasts messages between all users in the same session.
When one user draws something, their client sends a draw message over WebSocket. Server receives it, validates it, broadcasts to all other users in that session. Their clients receive the message and render the drawing action. Happens in under 50ms typically.
Message types include drawing actions (pen, line, rectangle, circle, text, eraser), cursor positions, chat messages, clear canvas, and undo operations. Each message is JSON serialized and sent over the WebSocket connection.
Session Management
Sessions are stored in memory using DashMap – a concurrent HashMap from the Rust ecosystem. Each session has a unique 8-character alphanumeric ID. Users create sessions or join existing ones using these IDs.
Session state includes all drawing actions, cursor positions for each user, and chat message history. When a new user joins, they get the complete session state so they see everything that's been drawn so far.
Sessions are automatically cleaned up when the last user disconnects. No orphaned data sitting around consuming memory.
Database Integration
User authentication uses SurrealDB Cloud. Distributed SQL database that handles user accounts, passwords (SHA-256 hashed), and JWT token generation.
When you sign in, the server generates a JWT token that's valid for 7 days. This token authenticates all subsequent requests and WebSocket connections. Simple authentication flow without requiring complex OAuth setups.
Drawing Tools
Implemented multiple drawing tools to make the whiteboard actually useful. Pen for freehand drawing, line tool for straight lines, rectangle and circle tools for shapes, text tool for annotations, eraser for removing elements.
Each tool has customizable color and size. Full RGB color picker and size slider from 1 to 50 pixels. The color and size settings apply to whatever tool you're using.
Drawing happens on an HTML5 Canvas element. Canvas API provides the rendering primitives. JavaScript handles mouse events, calculates points, sends them to the server, receives broadcasts, renders other users' actions.
Real-Time Cursors
One feature that makes collaboration feel real is seeing other users' cursors. When someone moves their mouse, you see their cursor moving on your screen with their username attached.
Cursor position messages are sent frequently but not on every pixel movement – that would flood the network. Instead, cursor updates are throttled to send only when the cursor has moved a certain distance. Balances responsiveness with network efficiency.
Each user's cursor is rendered in their chosen color. Makes it easy to track who's doing what in busy sessions.
Chat System
Built-in chat lets users communicate without leaving the whiteboard. Messages are sent over the same WebSocket connection as drawing actions.
Chat interface uses glassmorphism design – semi-transparent background with backdrop blur. Keeps the UI modern without blocking the canvas content behind it.
Messages show username and timestamp. Simple but functional for coordination during collaborative sessions.
User Presence
The user panel shows everyone currently in the session with their join time. Lets you see who's active and when they joined. Updates in real-time as people join and leave.
Performance Characteristics
Rust's async runtime (Tokio) handles concurrent WebSocket connections efficiently. Can support hundreds of concurrent users in multiple sessions on modest hardware.
Memory usage is low. Each session consumes around 5MB depending on how much has been drawn. In-memory storage is fast but means sessions don't persist across server restarts.
Message latency is under 50ms average for WebSocket round-trip. Fast enough that drawing feels instant across all connected clients.
Concurrency Handling
DashMap provides concurrent access to session state. Multiple users can read and write session data simultaneously without lock contention. Atomic operations ensure thread safety without sacrificing performance.
Broadcast channels in Tokio handle message distribution. When a message needs to go to all users in a session, it goes into a broadcast channel. Each user's WebSocket task subscribes to that channel and receives messages.
Technical Stack Details
Backend uses Axum for HTTP routing and WebSocket handling. Tower middleware for CORS and static file serving. Serde for JSON serialization. Jsonwebtoken for JWT generation and verification.
Database interaction with SurrealDB's Rust client. Async queries using Tokio runtime. Connection pooling handled automatically.
Frontend is pure JavaScript with HTML5 Canvas for drawing. WebSocket API for real-time communication. CSS custom properties for theming. No transpilation, no build step.
Deployment
The application compiles to a single binary. Deploy it anywhere that can run Rust executables – Linux servers, containers, cloud platforms.
Currently deployed on Render at theysynced.onrender.com. Render handles the infrastructure, SSL certificates, and scaling automatically.
Configuration through environment variables. Database credentials, JWT secret, server host and port, logging level. Everything configurable without code changes.
What I Learned
Building real-time collaborative software taught me about concurrency challenges. Managing shared state across multiple connections, broadcasting messages efficiently, handling disconnections gracefully.
WebSocket protocol is straightforward but implementing it correctly requires attention to detail. Connection lifecycle, ping/pong frames, message framing, error handling.
Rust's async ecosystem is excellent for this kind of work. Tokio makes concurrent programming tractable. The type system catches threading bugs at compile time.
SurrealDB as a database is interesting. SQL-like queries but with graph capabilities and modern features. Cloud hosting means no database server to maintain.
Open Source
TheySynced is open source on GitHub. Full code available, no proprietary components. The README is comprehensive. Architecture documentation, API reference, deployment guides. Everything needed to understand and run the project.
Not looking for contributions necessarily but if someone finds it useful or wants to extend it, the code is there.
Use Cases
Collaborative whiteboarding for remote teams. Brainstorming sessions where everyone needs to sketch ideas together. Teaching where an instructor draws and students follow along in real-time.
The self-hosted nature means you control the data. No third-party service seeing your whiteboard content. Deploy it internally and keep everything private.
Lightweight enough to run on a cheap VPS. Don't need enterprise infrastructure to host collaborative tools.
Future Improvements
Session persistence would be useful. Currently sessions exist only in memory. Adding database storage would let sessions survive server restarts.
More drawing tools could be interesting. Shapes like polygons, curved paths, arrows. Selection tool for moving or resizing elements.
Better undo/redo handling. Current implementation works per-user but could be smarter about collaborative editing scenarios.
Export functionality to save whiteboards as images or SVG files. Makes the content useful beyond the live session.
Current Status
TheySynced works. Deploy it, create a session, invite people, collaborate in real-time. The core functionality is solid and performs well.
It's a working demonstration of building real-time collaborative software with Rust and vanilla JavaScript. No framework magic, just clean code solving real problems.
Check it out at theysynced.onrender.com or grab the code from github.com/aryansrao/theysynced. Build it, deploy it, use it.
