mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
63 lines
2 KiB
Text
63 lines
2 KiB
Text
# 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 = "/";
|
|
```
|
|
|
|
or, if you serve your assets from the root of your CDN, you would do:
|
|
|
|
```js
|
|
// 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:
|
|
|
|
```jsx
|
|
// 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
|
|
|
|
[Try here](https://codesandbox.io/s/excalidraw-ehlz3).
|