Whiteboard

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

Whiteboard currently works only with PDF documents. See PDF setup first.

Quick start

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

To disable the whiteboard layer entirely, set modules.whiteboard to false:

modules: {
  whiteboard: false;
}

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).

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).

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.

const stickers = superdoc.whiteboard.getType('stickers');

setTool

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

superdoc.whiteboard.setTool('draw');

setEnabled

Enable or disable whiteboard interactivity.

superdoc.whiteboard.setEnabled(true);

setOpacity

Set overlay opacity (0–1).

superdoc.whiteboard.setOpacity(0.8);

getWhiteboardData

Export annotations (normalized coordinates).

const data = superdoc.whiteboard.getWhiteboardData();

setWhiteboardData

Import annotations.

superdoc.whiteboard.setWhiteboardData(json);

rerender

Force re-render for all pages.

superdoc.whiteboard.rerender();

Events

whiteboard:init

Fired when the whiteboard instance is created.

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

whiteboard:ready

Fired when all whiteboard pages are ready.

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

whiteboard:change

Fired on any data change. Receives full whiteboard JSON.

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

whiteboard:enabled

Fired when interactivity is toggled.

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

whiteboard:tool

Fired when the active tool changes.

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

Import / export

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

const saved = superdoc.whiteboard.getWhiteboardData();

superdoc.whiteboard.setWhiteboardData(saved);