Skip to main content

Installation

Excalidraw is published to npm as a component you can directly embed in your projects.

Using npm:

npm install react react-dom @excalidraw/excalidraw

or yarn:

yarn add react react-dom @excalidraw/excalidraw
tip

If you don't want to wait for the next stable release and try out the unreleased changes you can use @excalidraw/excalidraw@next.

Static assets

Excalidraw depends on assets such as localization files (if you opt to use them), fonts, and others.

By default these assets are loaded from a public CDN https://unpkg.com/@excalidraw/excalidraw/dist/, so you don't need to do anything on your end.

However, if you want to host these files yourself, you can find them in your node_modules/@excalidraw/excalidraw/dist directory, in folders excalidraw-assets (for production) and excalidraw-assets-dev (for development).

Copy these folders to your static assets directory, and add a window.EXCALIDRAW_ASSET_PATH variable in your index.html or index.js entry file pointing to your public assets path (relative). For example, if you serve your assets from the root of your hostname, you would do:

window.EXCALIDRAW_ASSET_PATH = "/";

Dimensions of Excalidraw

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.

Demo

Try here.