Excalidraw

---
title: Excalidraw
docs:
  - route: /docs/components/excalidraw-node
    title: Excalidraw Element
---

<ComponentPreview name="excalidraw-demo" />

<PackageInfo>

## Features

- Integrates Excalidraw library for creation of drawings and diagrams.

</PackageInfo>

## Installation

```bash
npm install @platejs/excalidraw
```

## Usage

```tsx
import { ExcalidrawPlugin } from '@platejs/excalidraw/react';

const plugins = [
  // ...otherPlugins
  ExcalidrawPlugin,
];
```

### Insert Toolbar Button

You can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert Excalidraw elements:

```tsx
{
  icon: <PenToolIcon />,
  label: 'Excalidraw',
  value: KEYS.excalidraw,
}
```

## Plugins

### `ExcalidrawPlugin`

Excalidraw void element plugin.

## API

### `insertExcalidraw`

Inserts an Excalidraw element into the editor.

<API name="insertExcalidraw">
<APIParameters>
  <APIItem name="props" type="NodeProps<TExcalidrawElement>" optional>
    Props for the Excalidraw element.
  </APIItem>
  <APIItem name="options" type="InsertNodesOptions" optional>
    Options for inserting the Excalidraw element.
  </APIItem>
</APIParameters>
</API>

## Hooks

### `useExcalidrawElement`

A behavior hook for the Excalidraw component.

<API name="useExcalidrawElement">
<APIState>
  <APIItem name="element" type="TExcalidrawElement">
    The Excalidraw element.
  </APIItem>
  <APIItem name="libraryItems" type="LibraryItems" optional>
    Library items to display in the Excalidraw component.
    - **Default:** `[]`
  </APIItem>
  <APIItem name="scrollToContent" type="boolean" optional>
    Whether to scroll to content inside the Excalidraw component.
    - **Default:** `true`
  </APIItem>
</APIState>

<APIReturns type="object">
  <APIItem name="Excalidraw" type="any">
    The Excalidraw component.
  </APIItem>
  <APIItem name="excalidrawProps" type="ExcalidrawProps">
    Props to pass to the Excalidraw component.
  </APIItem>
</APIReturns>
</API>