Whiteboard — Collaborative P2P whiteboard

What this example does

Collaborative P2P whiteboard: join a topic, draw on a canvas, and strokes and “Clear board” sync to all peers in real time via JSON messages over raw connections.

Prerequisites

Install the BridgeSwarm extension and native host before opening this example.

How to run

Recommended: Extension Settings → enable Examples server, then open the demo URL below.

Dev alternative from the repo root:

npm run examples

Open http://127.0.0.1:4173/whiteboard/ (two tabs for P2P). Do not use file://.

Usage

Click Join (default topic is bridge-swarm-whiteboard).
Open the same page in another tab or device and join the same topic.
Draw on the canvas; strokes sync to all peers. Use Clear board to broadcast a clear to everyone.
Click Leave when done.

Files in this directory

index.html — Page structure (topic input, join/leave/clear, canvas).
style.css — Layout and theme (canvas wrap, buttons, status).
app.js — BridgeSwarm setup, canvas drawing, stroke/draft/clear message protocol and broadcast.

APIs and concepts

Same swarm/connection pattern as chat: BridgeSwarm.ready(), new BridgeSwarm(), swarm.join(), swarm.on('connection'), conn.on('data'), conn.write().
Raw JSON messages: conn.write(JSON.stringify(msg)) and conn.on('data') with JSON.parse. Message types: strokeStart, strokeDraft, stroke, clear.
Canvas 2D for drawing strokes (local and from peers); draft strokes for live preview.

1.7 KiB Raw Blame History