# Whiteboard

Stores whiteboard scenes, titles and previews. Editing, renaming, selection actions and rendering are explicit host integrations.

Stores whiteboard scenes, titles and previews. Editing, renaming, selection actions and rendering are explicit host integrations.

`@quirekit/extension-whiteboard` · **AGPL-3.0-only**

## Editor compatibility
Layer：**Shared document capability**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Requires integration | [ClassicWhiteboard](/en/plugins/reference/classic-whiteboard) — The shared extension defines content and host ports. Use the Classic adapter below for its workspace and product interaction, without installing both the base extension and its replacement. |
| Block | Supported | [createBlockEditorPreset](/en/plugins/reference/create-block-editor-preset) — The default createBlockEditor preset installs this capability. Configure the corresponding preset child; graphic editing uses the preset's workspace ports, while persistence and assets remain host-owned. Avoid duplicate extensions. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/extension-whiteboard@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { Whiteboard } from '@quirekit/extension-whiteboard'
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

The shared extension defines content and host ports. Use the Classic adapter below for its workspace and product interaction, without installing both the base extension and its replacement.

[ClassicWhiteboard](/en/plugins/reference/classic-whiteboard)

```ts
import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'
import { ClassicWhiteboard } from '@quirekit/classic-whiteboard'

const instance = createClassicEditor({
  element,
  extensions: [ClassicWhiteboard],
})
```

### Block

The default createBlockEditor preset installs this capability. Configure the corresponding preset child; graphic editing uses the preset's workspace ports, while persistence and assets remain host-owned. Avoid duplicate extensions.

[createBlockEditorPreset](/en/plugins/reference/create-block-editor-preset)

```ts
import { createBlockEditor } from '@quirekit/block-editor'
import '@quirekit/block-editor/styles.css'

const instance = createBlockEditor({
  element,
  content: { type: 'doc', content: [{ type: 'paragraph' }] },
})
```

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### open

Open an authoring workspace for the captured target and return a disposable UI task. Recheck the target before asynchronous submission.

Type：`((request: WhiteboardEditRequest, editor: QuireEditor) => { close(): void; }) | null`

Default：`null`

### rename

Host's lightweight title task, sharing exact source acceptance.

Type：`((request: WhiteboardEditRequest, editor: QuireEditor) => { close(): void; }) | null`

Default：`undefined`

### mountActions

Optional product toolbar for the selected DOM preview.

Type：`(container: HTMLElement, actions: WhiteboardPreviewActions): WhiteboardActionsHandle`

Default：`undefined`

### renderScene

Render a whiteboard scene, returning normalized scene data and its matching preview.

Type：`((scene: WhiteboardScene, editor: QuireEditor) => ReturnType<WhiteboardSceneRenderer>) | null`

Default：`undefined`

## Commands and runtime

These commands are supplied directly by this extension. Availability depends on the installed schema, selection and protection policy; query editor.can() first.

| Command | Parameter signature |
| --- | --- |
| `insertWhiteboard` | `insertWhiteboard(request: WhiteboardInsertion)` |
| `updateWhiteboard` | `updateWhiteboard(request: WhiteboardUpdate)` |

These are parameter signatures. See [commands and controls](/en/build/commands) to connect UI while retaining one transaction/history authority.

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.