Excalidraw-with-storage NPM

THIS IS AN EXPERIMENTAL POC.

To implement a configurable storage in excalidraw, which can remove the dependency on firebase and allow end users to implement any self-hosted storage solution.

NOT READY FOR USE IN PRODUCTION.

Check out examples repo for how this project works

Excalidraw

Excalidraw is exported as a component to directly embed in your projects.

Installation

You can use npm

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

After installation you will see a folder excalidraw-assets and excalidraw-assets-dev in dist directory which contains the assets needed for this app in prod and dev mode respectively.

Move the folder excalidraw-assets and excalidraw-assets-dev to the path where your assets are served.

By default it will try to load the files from https://unpkg.com/@excalidraw/excalidraw/dist/

If you want to load assets from a different path you can set a variable window.EXCALIDRAW_ASSET_PATH depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.

Note

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

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.