restoreElements() now takes an optional parameter to indicate whether we should also recalculate text element dimensions. Defaults to true, but since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration #5432.renderSidebar prop (#5663).toggleMenu prop to toggle specific menu open/close state (#5663).customData on Excalidraw elements [#5592].exportPadding?: number; to exportToCanvas and exportToBlob. The default value of the padding is 10.props.UIOptions.canvasActions.theme is now renamed to props.UIOptions.canvasActions.toggleTheme #5660.setToastMessage API is now renamed to setToast API and the function signature is also updated #5427. You can also pass duration and closable attributes along with message.This section lists the updates made to the excalidraw library and will not affect the integration.
Render library into Sidebar on mobile #5774
Additional drag and drop image format support (webp, bmp, ico) #5749
Enter and Exit line editor via context menu #5719
Further reduce darkmode init flash #5701
Support segment midpoints in line editor #5641
Added exportPadding to PNG (blob) export in @excalidraw/utils #5626
Introduce ExcalidrawElements and ExcalidrawAppState provider #5463
Enable midpoint inside linear element editor #5564
Show a mid point for linear elements #5534
Lock angle when editing linear elements with shift pressed #5527
Redesign linear elements 🎉 #5501
Cursor alignment when creating linear elements with shift pressed #5518
Shift-clamp when creating multi-point lines/arrows #5500
Cursor alignment when creating generic elements #5516
Make context menu scrollable #4030
Ungroup short cut key #5779
Replaced KeyboardEvent.code with KeyboardEvent.key for all letters #5523
Free draw flip not scaling correctly #5752
Wait for window focus until prompting for library install #5751
Update perfect freehand library to fix extra dot #5727
RestoreElementWithProperties drops "parent" property #5742
Horizontal text alignment for bound text when resizing #5721
Set the dimensions of bound text correctly #5710
Image-mirroring in export preview and in exported svg #5700
Double state update incorrectly resetting state #5704
Remove no longer used code related to collab room loading #5699
Revert webpack deduping to fix @next runtime #5695
Move to release notes for v0.9.0 and after #5686
Zen-mode exit button not working #5682
Buttons jump around on the mobile menu #5658
#5622 - prevent session theme reset during collaboration #5640
Library actions inside the sidebar #5638
Don't render library menu twice for mobile #5636
Reintroduce help dialog button #5631
Add display name to components so it doesn't show as anonymous #5616
Improve solveQuadratic when a = 0 #5618
Add random tiny offsets to avoid linear elements from being clipped #5615
Crash when adding a new point in the line editor #5602 #5606
Allow box selection of points when inside editor #5594
Remove unnecessary conditions in pointerup for linear elements #5575
Check if hitting link in handleSelectionOnPointerDown #5589
Points not being normalized on single-elem resize #5581
Deselect linear element when clicked inside bounding box outside editor #5579
Resize multiple elements from center #5560
Call static methods via class instead of instance in linearElementEditor #5561
Show bounding box for 3 or more linear point elements #5554
Cleanup the condition for dragging elements #5555
Shareable links being merged with current scene data #5547
Scene lookup failing when looking up by id #5542
Remove rounding to fix jitter when shift-editing #5543
Line deselected when shift-dragging point outside editor #5540
Flip linear elements after redesign #5538
Disable locking aspect ratio for box-selection #5525
Add title attribute to the modal close button #5521
Context menu positioning when component has offsets #5520
Resolve paths in prebuild.js script #5498
Use flushSync when moving line editor since we need to read previous value after setting state #5508
UseLayout effect cleanup in dev mode for charts #5505
Revert browser toast for high/low zoom #5495
Fixing push to DockerHub #5468
Incorrectly rendering freedraw elements #5481
Generate types when building example #5480
Use React.FC as react-dom is not able to infer types of Modal #5479
Missing translation for "Scale" to Export Dialog #5456
Add display name for Excalidraw component so it doesn't show as anonymous #5464
Account for safe area for floating buttons on mobile #5420
Attribute warnings in comment svg example #5465
Check for ctrl key when wheel event triggered to only disable zooming #5459
Disable render throttling by default & during resize #5451
Attach wheel event to exscalidraw container only #5443
Show toast when browser zoom is not 100% #5304
Prevent browser zoom inside Excalidraw #5426
Typo in changelog #5425
Create a util to compute container dimensions for bound text container #5708
Reuse common ui dialogs and message for mobile and LayerUI #5611
Stats component #5610
Move footer to its own component #5609
Remove unused attribute hasHitElementInside from pointerDownState #5591
Cleanup renderScene #5573
Rename docs to dev-docs #5487
Remove unnecessary if condition for linear element onKeyDown #5486
Improve typing & check #5415
Don't pass zenModeEnable, viewModeEnabled and toggleZenMode props to LayerUI #5444
Check out the release notes )
This section lists the updates made to the excalidraw library and will not affect the integration.
Check out the release notes
Check out the release notes
Check out the release notes
These section lists the updates which may affect your integration, so it is recommended to go through this when upgrading the version.
appState properties in updateScene API. Earlier only appState.viewBackgroundColor was supported, now any attribute can be updated with this API.serializeAsJSON helper that we use when saving Excalidraw scene to a file #3538.renderTopRightUI prop #3539, #3572 .This also removes the GitHub icon, keeping it local to the https://excalidraw.com app.
renderFooter prop. In case you were hiding this icon earlier, you need not do that anymore #3577.Now appState is also passed to renderFooter prop.
These section lists the updates made to the excalidraw library and will not affect the integration.
.visually-hidden elements #3501.backdrop-filter to improve perf #3506scrollToContent API now supports passing just a single Excalidraw element, or none at all (which will default to current elements on the scene) #3482.#### BREAKING CHANGE
Renamed setScrollToContent to scrollToContent.
Make library local to given excalidraw instance (previously, all instances on the same page shared one global library) #3451.
Added prop onLibraryChange which if supplied will be called when library is updated.
Added attribute libraryItems to prop initialData which can be used to load excalidraw with existing library items.
Assign a unique id to the excalidraw component. The id can be accessed via ref.
#### BREAKING CHANGE
From now on the host application is responsible for persisting the library to LocalStorage (or elsewhere), and importing it on mount.
Bind the keyboard events to component and added a prop handleKeyboardGlobally which if set to true will bind the keyboard events to document #3430.
#### BREAKING CHANGE
Earlier keyboard events were bind to document but now its bind to Excalidraw component by default. So you will need to set handleKeyboardGlobally to true if you want the previous behaviour (bind the keyboard events to document).
Recompute offsets on scroll of the nearest scrollable container #3408. This can be disabled by setting detectScroll to false.
Add onPaste prop to handle custom clipboard behaviours #3420.
version and versionNonce (only applies to the selected elements). This fix will allow you account for z-index changes if you're syncing just the elements that changed (and not the whole scene) #3483.Only handle cut/paste events inside excalidraw #3484.
Make history local to a given Excalidraw instance. This fixes a case where history was getting shared when you have multiple Excalidraw components on the same page #3481.
Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page #3478.
Fix library being pasted off-center #3462.
When switching theme, apply it only to the active Excalidraw component. This fixes a case where the theme was getting applied to the first Excalidraw component if you had multiple Excalidraw components on the same page #3446.
getSyncableElements helper which was specific to excalidraw app collab implementation #3471. If you happened to use it, you can easily reimplement it yourself using the newly exposed isInvisiblySmallElement helper:const getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
elements.filter((el) => el.isDeleted || !isInvisiblySmallElement(el));
DataState → ExportedDataStateLibraryData → ExportedLibraryDataSupport tab-to-indent when editing text #3411.
App now breaks into mobile view using the component dimensions, not viewport dimensions. This fixes a case where the app would break sooner than necessary when the component's size is smaller than viewport #3414.
Add screenshots to manifest.json #3369.
Enable drop event on the whole component #3406.
Focus on last active element when dialog closes #3447.
Fix incorrectly caching png file handle #3407.
Fix popover position incorrect on Safari for non-zero offsets/scroll #3399.
UIOptions prop to customise canvas actions which includes customising background color picker, clear canvas, export, load, save, save as & theme toggle #3364. Check the readme for more details.Calculate width/height of canvas based on excalidraw component (".excalidraw" selector) & also resize and update offsets whenever the dimensions of excalidraw component gets updated #3379. You also don't need to add a resize handler anymore for excalidraw as its handled now in excalidraw itself.
width/height props have been removed. Instead now it takes 100% of width and height of the container so you need to make sure the container in which you are rendering Excalidraw has non zero dimensions (It should have non zero width and height so Excalidraw can match the dimensions of containing block)
Calculate offsets when excalidraw container resizes using resize observer api #3374.
Export types for the package so now it can be used with typescript #3337. The types are available at @excalidraw/excalidraw/types.
Add renderCustomStats prop to render extra stats on host, and expose setToastMessage API via refs which can be used to show toast with custom message #3360.
Support passing a CSRF token when importing libraries to prevent prompting before installation. The token is passed from https://libraries.excalidraw.com using the token URL key #3329.
Use location.hash when importing libraries to fix installation issues. This will require host apps to add a hashchange listener and call the newly exposed excalidrawAPI.importLibrary(url) API when applicable #3320. Check the readme for more details.
Append location.pathname to libraryReturnUrl default url #3325.
Support image elements #3424.
Expose separate builds for dev and prod and support source maps in dev build #3330. Check the readme for more details.
If you are using script tag to embed excalidraw then the name of the file will have to be updated to excalidraw.production.min.js instead of excalidraw.min.js. If you want to use dev build you can use excalidraw.development.js
window.name if present during excalidraw libraries installation so it opens in same tab for the host. If window.name is not set it will open in a new tab #3299.name prop to indicate the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over intialData.appState.name, the name will be fully controlled by host app and the users won't be able to edit from within Excalidraw #3273.Export API setCanvasOffsets via ref to set the offsets for Excalidraw#3265.
offsetLeft and offsetTop props have been removed now so you have to use the setCanvasOffsets via ref to achieve the same.
Export API to export the drawing to canvas, svg and blob #3258. For more info you can check the readme
Add a theme prop to indicate Excalidraw's theme. #3228. When this prop is passed, the theme is fully controlled by host app.
Support libraryReturnUrl prop to indicate what URL to install libraries to #3227.
initialData.scrollToCenter and setScrollToCenter API exposed via ref to initialData.scrollToContent and setScrollToContent respectively#3261.Rename appearance to theme #3237.
Since appState.appearance is renamed to appState.theme so wherever appState.appearance including initialData.appState.appearance should be renamed to appState.theme and initialData.appState.theme respectively. If the appearance was persisted earlier, now it needs to passed as theme.
The class Appearance_dark is renamed to theme--dark.
The class Appearance_dark-background-none is renamed to theme--dark-background-none.
100ms so offsets gets updated faster if changed when container scrolled #3182.renderFooter prop change #3183Array.from when spreading over set so that typescript transpiles correctly in the umd build#3165.window.EXCALIDRAW_ASSET_PATH which host can use to load assets from a different URL. By default it will be loaded from https://unpkg.com/@excalidraw/excalidraw{currentVersion}/dist/#3068.Also now the assets will have a hash in filename so cache bursting can easily happen with version bump.
Add support for scrollToCenter in initialData so host can control whether to scroll to center on mount #3070.
Export restore, restoreAppState and restoreElements to host #3049
user is now removed.zenModeEnabled and gridModeEnabled prop which enables zen mode and grid mode respectively #2901. When this prop is used, the zen mode / grid mode will be fully controlled by the host app.viewModeEnabled prop which enabled the view mode #2840. When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host.getAppState on excalidrawRef #2834.__webpack_public_path__ to host the assets#2835copy, cut, and paste actions from contextmenu #2872Ctrl-Y shortcut to redo on Windows #2831.lang attribute with the current lang. #2995Sentence case for Live collaborationExported few Extra API's which can be used by the host to communicate with Excalidraw.
Remove language picker, and add langCode, renderFooter #2644:
BREAKING: removed the language picker from UI. It is now the host app's responsibility to implement a language picker if desirable, using the newly added renderFooter prop. The reasoning is that the i18n should be controlled by the app itself, not by the nested Excalidraw component.
Added langCode prop to control the UI language.
Add support for exportToBackend prop to allow host apps to implement shareable links #2612
onCollabButtonClick is not provided #2598cmd+o shortcut to load scene #2732First release of @excalidraw/excalidraw