> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-nick-sd-2070-add-content-controls-namespace-to-doc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Whiteboard

Lightweight annotation layer for documents. Supports drawing, text, and stickers.

<Note>
  Whiteboard currently works **only with PDF documents**. See [PDF](/modules/pdf) setup first.
</Note>

## Quick start

```javascript theme={null}
const superdoc = new SuperDoc({
  modules: {
    whiteboard: {
      enabled: true, // show whiteboard layer by default
    },
  },
});
```

<Note>
  To disable the whiteboard layer entirely, set `modules.whiteboard` to `false`:

  ```javascript theme={null}
  modules: {
    whiteboard: false;
  }
  ```
</Note>

## Tools / modes

* **select** — default; select/drag/resize, drop stickers/text
* **draw** — draw strokes only
* **erase** — erases strokes only
* **text** — click to add text

These modes are intentionally strict to avoid ambiguous interactions.

## API methods

All APIs are exposed via `superdoc.whiteboard`.

### `register`

Register palette items (e.g. stickers, comments).
For stickers, `src` is an image URL and can point to common browser-supported formats (for example: `svg`, `png`, `jpg`, `webp`, or data URL).

```javascript theme={null}
superdoc.whiteboard.register('stickers', [
  { id: 'check-mark', label: 'Check', src: '/stickers/check-mark.svg', width: 100, height: 83 },
]);

superdoc.whiteboard.register('comments', [
  { id: 'great-job', text: 'Great job!' },
]);
```

### Sticker drag-and-drop checklist

For sticker drag/drop, keep the id contract explicit:

1. Register sticker ids when whiteboard is created.
2. Set `application/sticker` to the exact sticker id on drag start.
3. Use `text/plain` only as optional fallback content (empty string is fine).

```javascript theme={null}
superdoc.on('whiteboard:init', ({ whiteboard }) => {
  whiteboard.register('stickers', [
    { id: 'cite-source', src: '/stickers/cite-source.svg', width: 52, height: 52 },
  ]);
});

function onStickerDragStart(event, stickerId) {
  event.dataTransfer.setData('application/sticker', stickerId);
  event.dataTransfer.setData('text/plain', '');
}
```

If a dropped id is not in the registered sticker list, whiteboard continues through other drop handlers and may use `text/plain`.

### `getType`

Get registered items by type.

```javascript theme={null}
const stickers = superdoc.whiteboard.getType('stickers');
```

### `setTool`

Set the current tool: `select`, `draw`, `erase`, `text`.

```javascript theme={null}
superdoc.whiteboard.setTool('draw');
```

### `setEnabled`

Enable or disable whiteboard interactivity.

```javascript theme={null}
superdoc.whiteboard.setEnabled(true);
```

### `setOpacity`

Set overlay opacity (0–1).

```javascript theme={null}
superdoc.whiteboard.setOpacity(0.8);
```

### `getWhiteboardData`

Export annotations (normalized coordinates).

```javascript theme={null}
const data = superdoc.whiteboard.getWhiteboardData();
```

### `setWhiteboardData`

Import annotations.

```javascript theme={null}
superdoc.whiteboard.setWhiteboardData(json);
```

### `rerender`

Force re-render for all pages.

```javascript theme={null}
superdoc.whiteboard.rerender();
```

## Events

### `whiteboard:init`

Fired when the whiteboard instance is created.

```javascript theme={null}
superdoc.on('whiteboard:init', ({ whiteboard }) => {
  console.log('Whiteboard instance ready');
});
```

### `whiteboard:ready`

Fired when all whiteboard pages are ready.

```javascript theme={null}
superdoc.on('whiteboard:ready', ({ whiteboard }) => {
  console.log('Whiteboard pages ready');
});
```

### `whiteboard:change`

Fired on any data change. Receives full whiteboard JSON.

```javascript theme={null}
superdoc.on('whiteboard:change', (data) => {
  console.log(data);
});
```

### `whiteboard:enabled`

Fired when interactivity is toggled.

```javascript theme={null}
superdoc.on('whiteboard:enabled', (enabled) => {
  console.log(enabled);
});
```

### `whiteboard:tool`

Fired when the active tool changes.

```javascript theme={null}
superdoc.on('whiteboard:tool', (tool) => {
  console.log(tool);
});
```

## Import / export

Whiteboard data is stored in normalized coordinates so annotations stay stable across zoom levels.

```javascript theme={null}
const saved = superdoc.whiteboard.getWhiteboardData();

superdoc.whiteboard.setWhiteboardData(saved);
```