I Built a Real-Time Collaborative Whiteboard in One Day — Here's How

It started at midnight

I had 24 hours, a free Replit subscription, and an idea: what if I could build something like Miro — but actually understand every line of code in it?
That's how CollabCanvas was born. A real-time collaborative whiteboard where multiple users can draw, drop sticky notes, build flowcharts, and see each other's cursors move live — all synced instantly over WebSockets.
I'm a third-year AI & Data Science student, and most of my projects live in Python and ML pipelines. So building a full-stack multiplayer canvas app in a day was genuinely outside my comfort zone. This is the story of how it went.

The core problem I had to solve first

Multiplayer sync sounds simple until you actually build it. The hard part isn't sending a canvas update — it's figuring out what to send.
I tried syncing the full Fabric.js canvas JSON on every change. It worked, but at 30+ objects it became sluggish. The fix was delta syncing — only emitting the changed object's state, not the entire canvas. This cut the payload size dramatically and made the sync feel instant.

canvas.on('object:modified', (e) => {
  socket.emit('canvas:update', {
    roomId,
    delta: e.target.toObject(['id', 'left', 'top', 'scaleX', 'scaleY'])
  });
});

On the server, the room state is held in memory and rebroadcast to all other clients in the room. New joiners receive a canvas:init event with the full current state so they're immediately in sync.

What CollabCanvas actually does

Live multiplayer canvas — real-time drawing sync with color-coded cursor presence for every connected user
Full drawing toolkit — freehand pen, rectangles, circles, lines, arrows, text, and sticky notes
Flowchart maker — connectable shapes in a Figma-style node system
Admin controls — room creator gets an admin panel to assign Editor or Viewer roles, and set draw zone restrictions per user
Hover attribution — hover any object to see who drew it
Voice notes — record and embed audio annotations directly onto the board
AI assistant — generate and place shapes via natural language (powered by Claude API)
Export — download the full canvas as PNG or PDF
Undo/redo — full history stack, synced across the room

The technical stack

React + Vite — frontend
Fabric.js v7 — canvas rendering and object model
Socket.io + Express — real-time WebSocket server
pnpm monorepo — client and server in one repo
Deployed on Replit

The architecture is intentionally simple: no database, canvas state lives in server memory per room, cleared after an hour of inactivity. This kept the scope tight for a one-day build while still being fully functional.

What surprised me

Cursor sync was the feature I almost skipped — and it ended up being the most impressive thing in the demo. Seeing three colored cursors moving independently on the same canvas makes the multiplayer feel real in a way that just synced drawing doesn't.
It's also just 10 lines of code:

canvas.on('mouse:move', ({ e }) => {
  const { x, y } = canvas.getPointer(e);
  socket.emit('cursor:move', { roomId, userId, x, y });
});

The lesson: polish the presence features. They're what make multiplayer feel alive.

Try it

The live demo is deployed on Replit — open it in two tabs, click on the link for the first tab, and then use the "Share" button to share the room id with the link and start drawing, and you'll see exactly what I mean.

https://collab-canvas--dhruvaugust1.replit.app

Built in 24 hours for the Replit Buildathon. Feedback welcome.