BridgeSwarm/examples/whiteboard

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

Open index.html in your browser (File → Open or drag the file in). For file:// URLs, ensure the extension has Allow access to file URLs enabled, or run a local server (e.g. npx serve . from the examples folder) and open http://localhost:3000/whiteboard/.

Usage

1. Click Join (default topic is bridge-swarm-whiteboard).
2. Open the same page in another tab or device and join the same topic.
3. Draw on the canvas; strokes sync to all peers. Use Clear board to broadcast a clear to everyone.
4. 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.

See also

• API reference — Page API and host request types.