CODESEEDSign in
Explore projects
JavaScriptintermediateweb

Real-time Collaborative Whiteboard

Real-time collaborative drawing canvas — multiple users can draw simultaneously, with basic tools: pencil, shapes, text, colors.

5 steps
Sign in to claim this project

Project steps

  1. 01

    Canvas drawing engine

    Implement basic tools on HTML Canvas: freehand, line, rectangle, circle.

  2. 02

    WebSocket server

    Node.js/Express server with ws: broadcast drawing events to all connected clients.

  3. 03

    Sync state

    On connection, send the current state (PNG snapshot) to the new user.

  4. 04

    User cursors

    Display other users' cursors with a unique avatar/color.

  5. 05

    Collaborative undo/redo

    Action stack per user with propagation to others.

Recommended resources

Ready to build this?

Fork the repo on GitHub and start building. A mentor will review your code when you open a PR.

5 steps

Tech stack

Canvas APIWebSocketNode.jsExpress