# 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](../../README.md#easy-install-recommended) 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:

```bash
npm run examples
```

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

## 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](../../docs/API-REFERENCE.md) — Page API and host request types.