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
If you don't want to wait for the next stable release and try out the unreleased changes you can use @excalidraw/excalidraw@next
.
Self-hosting fonts
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 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
Go to CodeSandbox example.