If you have ever tried to sketch out an idea with a remote teammate, you know the pain. One person shares their screen. The other person says "no, move that to the left — no, my left." You end up spending more time explaining than actually working.

I ran into this problem too many times. So I built a simple collaborative whiteboard that solves the core problem: letting multiple people draw on the same canvas, in real time, without any friction.

What It Does
It is a browser-based whiteboard. You open the link, create a room, and start drawing. Share the room link with your team, and they join instantly. Everyone sees the same canvas. Everyone can draw, erase, add rectangles and circles, and chat in the side panel.

There is no download, no waiting, and no feature bloat. The toolbar has exactly what you need: pen, eraser, rectangle, circle, fill toggle, undo, and redo. You can change brush size and color. You can export the canvas as a PNG image. That is it.

Why I Built It
Most online whiteboard tools are either too heavy or too expensive. They take ten seconds to load, throw up multiple popups asking you to sign in or upgrade, and come with hundreds of features you will never use. I wanted something that loads in under a second and lets me start drawing immediately.

The whiteboard runs on vanilla JavaScript — no React, no Vue, no framework overhead. The backend is Supabase, which handles authentication, real-time messaging, and data storage. The whole thing is hosted on Netlify and deploys with a single drag-and-drop.

What Makes It Work
The interesting technical challenge was canvas synchronization. When multiple people draw on the same canvas, you need to broadcast each stroke to everyone else. But full-resolution canvas images can exceed the message size limits of real-time channels. If you try to send the whole canvas at once, the message gets dropped, and the other users see nothing.

My solution was to split the canvas into tiles — 16 smaller images — and send them as separate messages. The receiving side collects the tiles, reassembles them like a jigsaw puzzle, and renders the complete canvas. If some tiles are lost due to network issues, the system still assembles whatever it received. This tiled approach guarantees that canvas sync works regardless of canvas size.

Real-Time Collaboration Features
Beyond drawing sync, the whiteboard includes several collaboration features. A chat panel lets team members talk while they draw. User cursors are visible in real time, so you can see where other people are pointing. The user list shows who is in the room, and the first person to join automatically becomes the room administrator. The admin can mute or kick users and clear the canvas.

The app supports both English and Chinese, with automatic language detection based on browser settings or IP location. A language toggle button sits in the top-right corner for manual switching.

Authentication Without Annoyance
Registration uses email OTP codes instead of magic links. You enter your email, receive an 8-digit code, type it in, and you are done. After verification, you can optionally set a password for future logins. There is also a password reset flow for existing users. The whole auth system is built on Supabase Auth, which handles session management and token refresh automatically.

Admin Dashboard
The app includes a separate admin page at /admin.html that shows registered users, new sign-ups, and email verification status. There is a searchable user table with roles and timestamps. The data query layer is abstracted from the UI, so it can be connected to a unified admin panel for managing multiple sites in the future.

Give It a Try
The project is free and open source. You can use it as-is, fork the code, or integrate it into your own product. It is simple enough to understand in one read-through, but solid enough to use in production.

Live site: https://cobboard.netlify.app

If you have feedback, bug reports, or ideas, I would love to hear them. Happy collaborating.