---
title: "Whiteboard editor events"
description: "The editor events of the Tiptap Whiteboard extension."
canonical_url: "https://tiptap.dev/docs/editor/whiteboard/api-reference/events"
---

# Whiteboard editor events

The editor events of the Tiptap Whiteboard extension.

The board's editor emits these events. Listen with `editor.on()`, and stop with `editor.off()`.

## `docChange`

Fired when the editor of a doc frame's document has a transaction, also one that only moves the caret, when its editing starts or stops, and when the editor is created or destroyed. Use it to update a toolbar that also works in documents, but not to save documents.

```js
import { getEditedDocEditor } from '@tiptap-pro/extension-whiteboard'

editor.on('docChange', ({ docId }) => {
  const isEditing = getEditedDocEditor(editor) !== null
  console.log(`The document ${docId} changed. A document is edited: ${isEditing}`)
})
```

### Payload

- `docId` (`string`): The id of the document that changed.

## `shapesMove`

Fired while a drag moves shapes, with how far it moved them as `delta`, in board units. `delta` is `null` once the drag ends. When a drag ends, the drop changes the document before this event reports the end.

Share it with other users, so [`createRemoteMoves`](https://tiptap.dev/docs/editor/whiteboard/api-reference/utilities.md#createremotemoves) shows the drag on their boards:

```js
editor.on('shapesMove', ({ ids, delta }) => {
  provider.setAwarenessField('drag', delta ? { ids, delta } : null)
})
```

### Payload

- `ids` (`readonly string[]`): The ids of the dragged shapes.
- `delta` (`Point | null`): How far the drag has moved the shapes since it began, or `null` once it ends.

See [Collaboration](https://tiptap.dev/docs/editor/whiteboard/guides/collaboration.md#show-what-others-select-and-drag).