From bc297e5e496d9f48ef77581b7fb41fdf328a62cf Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sun, 15 Mar 2026 16:19:35 -0400 Subject: refactor: dev-docs/ --- .../docs/@excalidraw/excalidraw/installation.mdx | 55 ++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 dev-docs/docs/@excalidraw/excalidraw/installation.mdx (limited to 'dev-docs/docs/@excalidraw/excalidraw/installation.mdx') diff --git a/dev-docs/docs/@excalidraw/excalidraw/installation.mdx b/dev-docs/docs/@excalidraw/excalidraw/installation.mdx new file mode 100644 index 0000000..bcab229 --- /dev/null +++ b/dev-docs/docs/@excalidraw/excalidraw/installation.mdx @@ -0,0 +1,55 @@ +# Installation + +**Excalidraw** is exported as a component to be directly embedded in your project. + +Use `npm` or `yarn` to install the package. + +```bash +npm install react react-dom @excalidraw/excalidraw +# or +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`.** + +::: + +### Self-hosting fonts + +By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod). + +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: + +```js +window.EXCALIDRAW_ASSET_PATH = "/"; +``` + +or, if you serve your assets from the root of your CDN, you would do: + +```js +// Vanilla + + + +``` + +or, if you prefer the path to be dynamicly set based on the `location.origin`, you could do the following: + +```jsx +// Next.js + +``` + +### 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](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example. -- cgit v1.2.3