svelte-excalidraw Svelte Themes

Svelte Excalidraw

Svelte wrapper for Excalidraw

Demo Download

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 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

Development

npm install
npm run dev

To build and package:

npm run build
npm run package
npm pack

Credits

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes