svelte-excalidraw lib

Thin Svelte wrapper around Excalidraw, the virtual whiteboard for sketching hand-drawn like diagrams.

Try it in SvelteLab

Installation

npm i svelte-excalidraw

Usage

<script>
  import Excalidraw from "svelte-excalidraw";
</script>

<Excalidraw />

This will render an embedded Excalidraw canvas with default behavior.

Props

https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/

All props are optional.

| Name | Type | Default | Description | | --- | --- | --- | --- | | initialData | object | null | Promise<object | null> | null | The initial data with which app loads. | | excalidrawAPI | function | _ | Callback triggered with the excalidraw api once rendered | | isCollaborating | boolean | _ | This indicates if the app is in collaboration mode | | onChange | function | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. | | onPointerUpdate | function | _ | Callback triggered when mouse pointer is updated. | | onPointerDown | function | _ | This prop if passed gets triggered on pointer down events | | onScrollChange | function | _ | This prop if passed gets triggered when scrolling the canvas. | | onPaste | function | _ | Callback to be triggered if passed when something is pasted into the scene | | onLibraryChange | function | _ | The callback if supplied is triggered when the library is updated and receives the library items. | | generateLinkForSelection | function | _ | Allows you to override url generation when linking to Excalidraw elements. | | onLinkOpen | function | _ | The callback if supplied is triggered when any link is opened. | | langCode | string | en | Language code string to be used in Excalidraw | | renderTopRightUI | function | _ | Render function that renders custom UI in top right corner | | renderCustomStats | function | _ | Render function that can be used to render custom stats on the stats dialog. | | viewModeEnabled | boolean | _ | This indicates if the app is in view mode. | | zenModeEnabled | boolean | _ | This indicates if the zen mode is enabled | | gridModeEnabled | boolean | _ | This indicates if the grid mode is enabled | | libraryReturnUrl | string | _ | What URL should libraries.excalidraw.com be installed to | | theme | "light" | "dark" | "light" | The theme of the Excalidraw component | | name | string | | Name of the drawing | | UIOptions | object | DEFAULT UI OPTIONS | To customise UI options. Currently we support customising canvas actions | | detectScroll | boolean | true | Indicates whether to update the offsets when nearest ancestor is scrolled. | | handleKeyboardGlobally | boolean | false | Indicates whether to bind the keyboard events to document. | | autoFocus | boolean | false | Indicates whether to focus the Excalidraw component on page load | | generateIdForFile | function | _ | Allows you to override id generation for files added on canvas | | validateEmbeddable | string[] | boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined) | _ | use for custom src url validation | | renderEmbeddable | function | _ | Render function that can override the built-in <iframe> | | [renderScrollbars] | boolean| | false | Indicates whether scrollbars will be shown

Development

npm install
npm run dev

To build and package:

npm run build
npm run package
npm pack

Credits

• Powered by Excalidraw & Svelte
• Wrapped for Svelte by TipS