Skip to main content

UIOptions

This prop can be used to customise UI of Excalidraw. Currently we support customising canvasActions, dockedSidebarBreakpoint welcomeScreen and tools.

{
canvasActions?: CanvasActions,
dockedSidebarBreakpoint?: number,
welcomeScreen?: boolean
}

canvasActions

This prop controls the visibility of the canvas actions inside the menu.

PropTypeDefaultDescription
changeViewBackgroundColorbooleantrueIndicates whether to show Background color picker.
clearCanvasbooleantrueIndicates whether to show Clear canvas button.
exportfalse | exportOptsobjectThis prop allows to customize the UI inside the export dialog. By default it shows the save file to disk. For more details visit exportOpts.
loadScenebooleantrueIndicates whether to show Load button.
saveToActiveFilebooleantrueIndicates whether to show Save button to save to current file.
toggleThemeboolean | nullnullIndicates whether to show Theme toggle. When defined as boolean, takes precedence over props.theme to show Theme toggle.
saveAsImagebooleantrueIndicates whether to show Save as image button.
Live Editor
Result
Loading...

exportOpts

The below attributes can be set in UIOptions.canvasActions.export to customize the export dialog.
If UIOptions.canvasActions.export is false the export button will not be rendered.

PropTypeDefaultDescription
saveFileToDiskbooleantrueIndicates whether save file to disk button should be shown
onExportToBackendobject_This callback is triggered when the shareable-link button is clicked in the export dialog. The link button will only be shown if this callback is passed.
renderCustomUIobject_This callback should be supplied if you want to render custom UI in the export dialog.

dockedSidebarBreakpoint

This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT.
If the width of the excalidraw container exceeds dockedSidebarBreakpoint, the sidebar will be dockable and the button to dock the sidebar will be shown
If user choses to dock the sidebar, it will push the right part of the UI towards the left, making space for the sidebar as shown below.

image

Live Editor
Result
Loading...

tools

This prop controls the visibility of the tools in the editor. Currently you can control the visibility of image tool via this prop.

PropTypeDefaultDescription
imagebooleantrueDecides whether image tool should be visible.