44 lines
1.5 KiB
Plaintext
44 lines
1.5 KiB
Plaintext
# Installation
|
|
|
|
**Excalidraw** is published to npm as a component you can directly embed in your projects.
|
|
|
|
Using `npm`:
|
|
|
|
```bash
|
|
npm install react react-dom @excalidraw/excalidraw
|
|
```
|
|
|
|
or `yarn`:
|
|
|
|
```bash
|
|
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/`](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:
|
|
|
|
```js
|
|
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](https://codesandbox.io/s/excalidraw-ehlz3).
|