Skip to main content
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). 
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!' },
]);

​
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);