socketboard

A real time, multiplayer whiteboard for collaborative sketching

The goal of this project is to build a whiteboard that can be edited collaborative in real time, and instantly joined with a link.

Why?

This app aims to reduce friction when a shared space is needed for collaborative sketching. No invite/accept process, just visit the shared link and immediately start drawing. Also, the whiteboard will be a static size to give a guarunteed shared view between users. The static size also adds a kind of practical constraint similar to a real whiteboard. This could also avoid the need for sharing screens if there is confidence all users see the same view.

Planned architecture

Frontend:

• Vite for quick iteration
• TypeScript/SolidJS for fine-grained reactivity and type safety
• HTML Canvas for whiteboard rendering

Backend:

• Node.js/Fastify for high performance back end
• Socket.io for real-time communication

MVP

• The Lobby: A user visits the app, a random room ID is generated (e.g., /room/abc-123), and they are placed in that room. The user is asked for their name and is assigned a color. A list of names:colors will be displayed somewhere on the side.

• Real time collaboration: Opening that same URL in a second, side-by-side browser window successfully connects both windows to the same Socket.io room.

• Cursors: Moving your mouse in window A renders a basic placeholder dot or colored square in window B representing user A's current mouse position.

• Drawing: Clicking and dragging in window A draws a line in window A and instantly mirrors that exact same line in window B.

Future additions

• WASM for heavy rendering tasks if bottlenecks call for it
• Yjs (CRDT) for state sync — late join, undo/redo, and offline resilience

Progress

Below serves as a track record of progress.

Completed

• Decide on arcitechture
• Initialize monorepo with packages/client and packages/server
• Add concurrently for easy logging
• Room system with in-memory state (Map<roomId, { color }>) on the server
• Socket.io events: join-room (receive current state), color-change (broadcast to room)
• Client auto-generates a room ID and redirects to /room/:id on first visit
• Full-screen whiteboard that changes color on click and syncs in real time across all clients in the room
• Display user cursors in real time
• Show connected users
• Auto-assign unique guest names and persist in sessionStorage
• Support real-time name editing with inline input fields
• Add real-time pixel-drawing functionality and sync across clients in the room
• Restyle the app to a text-first, minimalist light mode (high-contrast white/black palette, sharp corners, monospace font stack)
• Center the whiteboard at the exact center of the viewport with a static, non-responsive layout
• Implement real-time, synchronized room title editing
• Position the user list to the left of the board (right-aligned names, square color dots on the right)
• Enable page-wide collaborative cursor tracking (custom stylized color cursor, browser cursor hidden globally)

Current goals

• Make canvas higher resolution
• make marks look like a marker with some kind of stroke function to calculate which pixels are changed when clicked
• implement eraser (essentially a white marker)

Up next

• Persist room state (database or Redis)