UIOptions

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

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

canvasActions

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

Prop	Type	Default	Description
changeViewBackgroundColor	boolean	true	Indicates whether to show Background color picker.
clearCanvas	boolean	true	Indicates whether to show Clear canvas button.
export	false | exportOpts	object	This prop allows to customize the UI inside the export dialog. By default it shows the save file to disk. For more details visit exportOpts.
loadScene	boolean	true	Indicates whether to show Load button.
saveToActiveFile	boolean	true	Indicates whether to show Save button to save to current file.
toggleTheme	boolean | null	null	Indicates whether to show Theme toggle. When defined as boolean, takes precedence over props.theme to show Theme toggle.
saveAsImage	boolean	true	Indicates whether to show Save as image button.

Live Editor

function App() { const UIOptions = { canvasActions: { changeViewBackgroundColor: false, clearCanvas: false, loadScene: false, }, }; return ( <div style={{ height: "500px" }}> <Excalidraw UIOptions={UIOptions} /> </div> ); }

function App() {
  const UIOptions = {
    canvasActions: {
      changeViewBackgroundColor: false,
      clearCanvas: false,
      loadScene: false,
    },
  };
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw UIOptions={UIOptions} />
    </div>
  );
}

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.

Prop	Type	Default	Description
saveFileToDisk	boolean	true	Indicates whether save file to disk button should be shown
onExportToBackend	object	_	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.
renderCustomUI	object	_	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.

Live Editor

function App() { return ( <div style={{ height: "500px" }}> <Excalidraw UIOptions={{dockedSidebarBreakpoint: 200}}/> </div> ); }

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw UIOptions={{dockedSidebarBreakpoint: 200}}/>
    </div>
  );
}

Result

Loading...