Embed and integrate

Embed Excalidraw in React

Install Excalidraw and render a usable editor in a React application.

Build a small React application that renders the Excalidraw editor in a sized container. You will install the package, add the component, and verify that the editor fills the container.

Before you begin

Use a React application with a package manager and a browser entry point. The package declares peer support for React and React DOM 17.0.2, 18.2.0, and 19.0.0 ranges. This tutorial uses npm.

Have a page or component where the editor can occupy a measured region. The integration is complete only when that region has non-zero width and height; the component fills the containing block rather than choosing its own visible size.

Build the editor

Install the packages

Run:

bash

npm install react react-dom @excalidraw/excalidraw

The package and its React peer dependencies are added to the application.

Create a sized container

Give the editor's parent a non-zero width and height. Excalidraw takes 100% of both dimensions of its containing block.

css

.excalidraw-container {
  width: 100vw;
  height: 100vh;
}

Render the component

Import Excalidraw and render it inside the container:

tsx

import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";

export default function DiagramEditor() {
  return (
    <div className="excalidraw-container">
      <Excalidraw />
    </div>
  );
}

The component renders the editor UI and canvas inside the parent element.

Start the application

Start your normal React development server and open the application in a browser. A non-zero-size container shows the toolbar and canvas; a zero-size container makes the editor appear missing.

Verify the result

Draw a rectangle, select it, and use the editor controls to confirm that the embedded editor accepts input. Keep the application running while you add initial data, callbacks, or API access.

Configure the next integration point

The package exports the Excalidraw component as well as restore, export, JSON, library, and API-related utilities. Add those capabilities after the minimal render works so a layout or bundling problem is not confused with application logic.

If you self-host the package fonts, copy the fonts from node_modules/@excalidraw/excalidraw/dist/prod/fonts to your served assets and set window.EXCALIDRAW_ASSET_PATH to that asset path before rendering.

Troubleshooting

If the editor is invisible, inspect the parent element's computed width and height; both must be non-zero. If React reports missing peer dependencies, install compatible react and react-dom versions. If a production build throws a worker URL error, configure the bundler to emit the worker separately and review embedding and build troubleshooting.

If the editor appears after resizing but not on the initial render, check the same container rule in the first layout that mounts the component. If fonts are missing in a self-hosted build, confirm that the copied font files are served from the path assigned to window.EXCALIDRAW_ASSET_PATH before rendering.

Next steps

Continue with framework integration, then configure component props and configuration.