Tutorial
Build a multi-user drawing app
Step by step: canvas setup, publishing strokes, cursors as signals, names in Presence state.
Collaboration
Draw together in real time
Sketch on a shared canvas with anyone who opens the demo. Strokes, cursors, and names sync live, built with plain JavaScript and the PubNub JavaScript SDK.
About this demo
A shared canvas with no server code
CoDoodler is a multi-user drawing app built with the PubNub JavaScript SDK, the HTML Canvas API, and plain JavaScript, HTML, and CSS. There are no other libraries or frameworks, and no backend to run.
Every stroke you draw is published to a shared channel, your cursor position travels as a lightweight signal, and the name you type is stored as Presence state. Everyone on the canvas sees who is drawing what, as it happens. The source code is open on GitHub, and the step-by-step tutorial walks you through building it yourself.
Features
What you can do
Draw together
Your strokes reach everyone on the canvas as PubNub messages, sent in small batches of line segments so drawing stays smooth.
See everyone’s cursor
Cursor positions go out as signals: small, fast messages that aren’t stored, made for high-frequency updates like pointer movement.
Put your name on your cursor
Type a name and it follows your cursor on every screen. It’s stored as Presence state, so people who join later see it too.
See who’s online
The counter in the corner shows how many people are on the canvas, updated live as they join, leave, or time out.
Clear your canvas or everyone’s
Clear wipes your own screen. Clear All publishes a message that clears the canvas for everyone.
Build it yourself
Make your own CoDoodler
Follow the tutorial from an empty folder to a working shared canvas, or clone the finished app and start changing it.
GitHub
PubNubDevelopers/collaboration-demo
The complete source. Add your publish and subscribe keys to js/config.js and open index.html.
git clone https://github.com/PubNubDevelopers/collaboration-demo.gitMore demos
Related demos
- Collaboration
Real-Time Auction Demo
PubNub makes it easy to create real-time auctions with tons of features.
- Virtual Events
Live Auction Demo
A live auction experience combining PubNub real-time bidding, chat, and presence with Red5 Pro ultra-low latency video — fully serverless, no backend required.
- IoT Device Control
IoT Dashboard Demo
PubNub’s high availability, scalable infrastructure is ideal for IoT solutions with thousands of devices spread across a large geographical area
Keep building
Build interactive real-time experiences with PubNub
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
