Installation

Excalidraw is exported as a component to be directly embedded in your project.

Use npm or yarn to install the package.

npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw

Self-hosting fontsCopy Anchor Link

By default, Excalidraw will try to download all the used fonts from the CDN.

For self-hosting purposes, you'll have to copy the content of the folder node_modules/@excalidraw/excalidraw/dist/prod/fonts to the path where your assets should be served from (i.e. public/ directory in your project). In that case, you should also set window.EXCALIDRAW_ASSET_PATH to the very same path, i.e. / in case it's in the root:

window.EXCALIDRAW_ASSET_PATH = "/";

or, if you serve your assets from the root of your CDN, you would do:

// Vanilla
<head>
  <script>window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";</script>
</head>

or, if you prefer the path to be dynamicly set based on the location.origin, you could do the following:

// Next.js
<Script id="load-env-variables" strategy="beforeInteractive">
  {`window["EXCALIDRAW_ASSET_PATH"] = location.origin;`} // or use just "/"!
</Script>

Dimensions of ExcalidrawCopy Anchor Link

Excalidraw takes 100% of width and height of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

DemoCopy Anchor Link

Go to CodeSandbox example.