From bc297e5e496d9f48ef77581b7fb41fdf328a62cf Mon Sep 17 00:00:00 2001
From: kj_sh604
Date: Sun, 15 Mar 2026 16:19:35 -0400
Subject: refactor: dev-docs/
---
.../excalidraw/api/props/ui-options.mdx | 81 ++++++++++++++++++++++
1 file changed, 81 insertions(+)
create mode 100644 dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx
(limited to 'dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx')
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx
new file mode 100644
index 0000000..9d77e39
--- /dev/null
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx
@@ -0,0 +1,81 @@
+# UIOptions
+
+This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) [`welcomeScreen`](#welcmescreen) and [`tools`](#tools).
+
+
+ {
+
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`](#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`](#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`](/docs/@excalidraw/excalidraw/api/props#theme) to show `Theme toggle`. |
+| `saveAsImage` | `boolean` | `true` | Indicates whether to show `Save as image` button. |
+
+```tsx live
+function App() {
+ const UIOptions = {
+ canvasActions: {
+ changeViewBackgroundColor: false,
+ clearCanvas: false,
+ loadScene: false,
+ },
+ };
+ return (
+
+
+
+ );
+}
+```
+
+### 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`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L161).
+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.
+
+
+
+```tsx live
+function App() {
+ return (
+
+
+
+ );
+}
+```
+
+## tools
+
+This `prop` controls the visibility of the tools in the editor.
+Currently you can control the visibility of `image` tool via this prop.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| image | boolean | true | Decides whether `image` tool should be visible.
--
cgit v1.2.3