║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

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

npm install @platejs/excalidraw

Usage

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

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

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert Excalidraw elements:

{
  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>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║