adgen-canvas

adgen-canvas is OrangeCat's canvas component, forked from Excalidraw. It is exported as a React component to be directly embedded in your project.

Installation

Use npm or yarn to install the package.

npm install react react-dom @orangecatai/adgen-canvas
# or
yarn add react react-dom @orangecatai/adgen-canvas

Note: If you don't want to wait for the next stable release and try out the unreleased changes, use @orangecatai/adgen-canvas@next.

Self-hosting fonts

By default, adgen-canvas 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/@orangecatai/adgen-canvas/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:

<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>

Dimensions of adgen-canvas

adgen-canvas takes 100% of width and height of the containing block so make sure the container in which you render adgen-canvas has non zero dimensions.

Integration

Head over to the docs.

API

Head over to the docs.

Contributing

Head over to the docs.