From 2cce7fc945d95025841da677752981997a47339c Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Wed, 25 Feb 2026 13:09:56 -0300
Subject: [PATCH 1/6] ENG-1706: Removing UI buttons, except for zoom and revert

---
 packages/common/src/constants.ts              |  1 +
 packages/excalidraw/components/LayerUI.tsx    | 16 +++++---
 packages/excalidraw/components/MobileMenu.tsx | 17 ++++++++
 .../excalidraw/components/footer/Footer.tsx   | 41 +++++++++++--------
 packages/excalidraw/index.tsx                 |  1 +
 .../__snapshots__/excalidraw.test.tsx.snap    | 10 ++---
 packages/excalidraw/tests/excalidraw.test.tsx | 34 +++++++++++++++
 packages/excalidraw/types.ts                  |  8 ++++
 8 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index c948e441bb59..e070ff9c0ed5 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -330,6 +330,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
   tools: {
     image: true,
   },
+  uiMode: "minimal",
 };
 
 export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index 4cd9c7dbbf9f..e4de766d0741 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -163,6 +163,7 @@ const LayerUI = ({
   const editorInterface = useEditorInterface();
   const stylesPanelMode = useStylesPanelMode();
   const isCompactStylesPanel = stylesPanelMode === "compact";
+  const isMinimalUI = UIOptions.uiMode === "minimal";
   const tunnels = useInitializeTunnels();
 
   const spacing = isCompactStylesPanel
@@ -471,8 +472,8 @@ const LayerUI = ({
       {/* render component fallbacks. Can be rendered anywhere as they'll be
           tunneled away. We only render tunneled components that actually
         have defaults when host do not render anything. */}
-      <DefaultMainMenu UIOptions={UIOptions} />
-      {UIOptions.showSidebarTrigger !== false && (
+      {!isMinimalUI && <DefaultMainMenu UIOptions={UIOptions} />}
+      {!isMinimalUI && UIOptions.showSidebarTrigger !== false && (
         <DefaultSidebar.Trigger
           __fallback
           icon={sidebarRightIcon}
@@ -596,6 +597,7 @@ const LayerUI = ({
           renderSidebars={renderSidebars}
           renderWelcomeScreen={renderWelcomeScreen}
           UIOptions={UIOptions}
+          isMinimalUI={isMinimalUI}
         />
       )}
       {editorInterface.formFactor !== "phone" && (
@@ -610,15 +612,17 @@ const LayerUI = ({
                 : {}
             }
           >
-            {renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
-            {renderFixedSideContainer()}
+            {!isMinimalUI &&
+              renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
+            {!isMinimalUI && renderFixedSideContainer()}
             <Footer
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
               renderWelcomeScreen={renderWelcomeScreen}
+              isMinimalUI={isMinimalUI}
             />
-            {appState.scrolledOutside && (
+            {!isMinimalUI && appState.scrolledOutside && (
               <button
                 type="button"
                 className="scroll-back-to-content"
@@ -632,7 +636,7 @@ const LayerUI = ({
               </button>
             )}
           </div>
-          {renderSidebars()}
+          {!isMinimalUI && renderSidebars()}
         </>
       )}
     </>
diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index 05317fe7733f..00eafca254cb 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -10,6 +10,7 @@ import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { ExitViewModeButton, MobileShapeActions } from "./Actions";
 import { MobileToolBar } from "./MobileToolBar";
 import { FixedSideContainer } from "./FixedSideContainer";
+import Footer from "./footer/Footer";
 
 import { Island } from "./Island";
 
@@ -46,6 +47,7 @@ type MobileMenuProps = {
   renderWelcomeScreen: boolean;
   UIOptions: AppProps["UIOptions"];
   app: AppClassProperties;
+  isMinimalUI: boolean;
 };
 
 export const MobileMenu = ({
@@ -61,7 +63,22 @@ export const MobileMenu = ({
   UIOptions,
   app,
   onPenModeToggle,
+  isMinimalUI,
 }: MobileMenuProps) => {
+  if (isMinimalUI) {
+    return (
+      <FixedSideContainer side="top" className="App-top-bar">
+        <Footer
+          appState={appState}
+          actionManager={actionManager}
+          showExitZenModeBtn={false}
+          renderWelcomeScreen={false}
+          isMinimalUI={true}
+        />
+      </FixedSideContainer>
+    );
+  }
+
   const {
     WelcomeScreenCenterTunnel,
     MainMenuTunnel,
diff --git a/packages/excalidraw/components/footer/Footer.tsx b/packages/excalidraw/components/footer/Footer.tsx
index debbf332e6c4..76883e182605 100644
--- a/packages/excalidraw/components/footer/Footer.tsx
+++ b/packages/excalidraw/components/footer/Footer.tsx
@@ -15,11 +15,13 @@ const Footer = ({
   actionManager,
   showExitZenModeBtn,
   renderWelcomeScreen,
+  isMinimalUI = false,
 }: {
   appState: UIAppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
+  isMinimalUI?: boolean;
 }) => {
   const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
 
@@ -53,23 +55,30 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <FooterCenterTunnel.Out />
-      <div
-        className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
-          "transition-right": appState.zenModeEnabled,
-        })}
-      >
-        <div style={{ position: "relative" }}>
-          {renderWelcomeScreen && <WelcomeScreenHelpHintTunnel.Out />}
-          <HelpButton
-            onClick={() => actionManager.executeAction(actionShortcuts)}
-          />
+      {!isMinimalUI && <FooterCenterTunnel.Out />}
+      {!isMinimalUI && (
+        <div
+          className={clsx(
+            "layer-ui__wrapper__footer-right zen-mode-transition",
+            {
+              "transition-right": appState.zenModeEnabled,
+            },
+          )}
+        >
+          <div style={{ position: "relative" }}>
+            {renderWelcomeScreen && <WelcomeScreenHelpHintTunnel.Out />}
+            <HelpButton
+              onClick={() => actionManager.executeAction(actionShortcuts)}
+            />
+          </div>
         </div>
-      </div>
-      <ExitZenModeButton
-        actionManager={actionManager}
-        showExitZenModeBtn={showExitZenModeBtn}
-      />
+      )}
+      {!isMinimalUI && (
+        <ExitZenModeButton
+          actionManager={actionManager}
+          showExitZenModeBtn={showExitZenModeBtn}
+        />
+      )}
     </footer>
   );
 };
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index f8004b4c2f9f..c5ff573ccfd5 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -64,6 +64,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
   // compares the same values
   const UIOptions: AppProps["UIOptions"] = {
     ...props.UIOptions,
+    uiMode: props.UIOptions?.uiMode ?? DEFAULT_UI_OPTIONS.uiMode,
     canvasActions: {
       ...DEFAULT_UI_OPTIONS.canvasActions,
       ...canvasActions,
diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
index ef0fb47e640e..ecf9a73307f0 100644
--- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu items if passed from host 1`] = `
 <div
-  aria-labelledby="radix-:r7t:"
+  aria-labelledby="radix-:r9l:"
   aria-orientation="vertical"
   class="dropdown-menu main-menu"
   data-align="start"
@@ -12,7 +12,7 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
   data-state="open"
   data-testid="dropdown-menu"
   dir="ltr"
-  id="radix-:r7u:"
+  id="radix-:r9m:"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;"
   tabindex="-1"
@@ -138,7 +138,7 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
 
 exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should render menu with default items when "UIOPtions" is "undefined" 1`] = `
 <div
-  aria-labelledby="radix-:rq:"
+  aria-labelledby="radix-:r18:"
   aria-orientation="vertical"
   class="dropdown-menu main-menu"
   data-align="start"
@@ -148,7 +148,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
   data-state="open"
   data-testid="dropdown-menu"
   dir="ltr"
-  id="radix-:rr:"
+  id="radix-:r19:"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;"
   tabindex="-1"
@@ -759,7 +759,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               style="width: 1px; height: 1rem; margin: 0px auto;"
             />
             <button
-              aria-controls="radix-:r16:"
+              aria-controls="radix-:r1k:"
               aria-expanded="false"
               aria-haspopup="dialog"
               aria-label="Canvas background"
diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index 34135c618de2..f58c56c540e4 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/packages/excalidraw/tests/excalidraw.test.tsx
@@ -256,6 +256,40 @@ describe("<Excalidraw/>", () => {
         expect(queryByTestId(container, "load-button")).toBeNull();
       });
     });
+
+    describe("Test uiMode", () => {
+      it("should render only zoom and undo/redo controls in minimal mode on desktop", async () => {
+        const { container } = await render(
+          <Excalidraw UIOptions={{ uiMode: "minimal" }} />,
+        );
+
+        expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
+        expect(container.querySelector(".App-menu_top")).toBeNull();
+        expect(container.querySelector(".layer-ui__wrapper__footer-right")).toBe(
+          null,
+        );
+        expect(container.querySelector(".zoom-actions")).not.toBeNull();
+        expect(queryByTestId(container, "button-undo")).not.toBeNull();
+        expect(queryByTestId(container, "button-redo")).not.toBeNull();
+      });
+
+      it("should render only zoom and undo/redo controls in minimal mode on phone layout", async () => {
+        const { container } = await render(
+          <Excalidraw
+            UIOptions={{
+              uiMode: "minimal",
+              getFormFactor: () => "phone",
+            }}
+          />,
+        );
+
+        expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
+        expect(container.querySelector(".App-bottom-bar")).toBeNull();
+        expect(container.querySelector(".zoom-actions")).not.toBeNull();
+        expect(queryByTestId(container, "button-undo")).not.toBeNull();
+        expect(queryByTestId(container, "button-redo")).not.toBeNull();
+      });
+    });
   });
 
   describe("Test theme prop", () => {
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 4921271f7680..2c383699aa01 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -686,12 +686,20 @@ export type CanvasActions = Partial<{
   saveAsImage: boolean;
 }>;
 
+export type UIMode = "default" | "minimal";
+
 export type UIOptions = Partial<{
   dockedSidebarBreakpoint: number;
   canvasActions: CanvasActions;
   tools: {
     image: boolean;
   };
+  /**
+   * The visibility preset for Excalidraw's built-in UI.
+   * - `default`: render all built-in controls
+   * - `minimal`: render only zoom + undo/redo controls
+   */
+  uiMode: UIMode;
   /**
    * Optionally control the editor form factor and desktop UI mode from the host app.
    * If not provided, we will take care of it internally.

From b22f4f5ae71c46a631e7013e9e4fccc977f2b5d2 Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Wed, 25 Feb 2026 15:29:50 -0300
Subject: [PATCH 2/6] ENG-1706: yarn fix.

---
 packages/excalidraw/components/Actions.scss   | 1 -
 packages/excalidraw/components/LayerUI.tsx    | 5 +++--
 packages/excalidraw/tests/excalidraw.test.tsx | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss
index 3fc5e9fe2f11..7e6aaa668670 100644
--- a/packages/excalidraw/components/Actions.scss
+++ b/packages/excalidraw/components/Actions.scss
@@ -212,7 +212,6 @@
   margin-inline-start: 0.6em !important;
 }
 
-
 .lock-buttons {
   display: flex;
 
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index e4de766d0741..65698d9d3513 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -612,8 +612,9 @@ const LayerUI = ({
                 : {}
             }
           >
-            {!isMinimalUI &&
-              renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
+            {!isMinimalUI && renderWelcomeScreen && (
+              <tunnels.WelcomeScreenCenterTunnel.Out />
+            )}
             {!isMinimalUI && renderFixedSideContainer()}
             <Footer
               appState={appState}
diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index f58c56c540e4..ed83632d0782 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/packages/excalidraw/tests/excalidraw.test.tsx
@@ -265,9 +265,9 @@ describe("<Excalidraw/>", () => {
 
         expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
         expect(container.querySelector(".App-menu_top")).toBeNull();
-        expect(container.querySelector(".layer-ui__wrapper__footer-right")).toBe(
-          null,
-        );
+        expect(
+          container.querySelector(".layer-ui__wrapper__footer-right"),
+        ).toBe(null);
         expect(container.querySelector(".zoom-actions")).not.toBeNull();
         expect(queryByTestId(container, "button-undo")).not.toBeNull();
         expect(queryByTestId(container, "button-redo")).not.toBeNull();

From df9c6a15ebfa63eb694f414416a6c448ad66de6c Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Wed, 25 Feb 2026 16:10:01 -0300
Subject: [PATCH 3/6] ENG-1706: Fix cannot click on goback button.

---
 packages/excalidraw/components/MobileMenu.tsx | 4 ++--
 packages/excalidraw/tests/excalidraw.test.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index 00eafca254cb..a1b6c6067810 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -67,7 +67,7 @@ export const MobileMenu = ({
 }: MobileMenuProps) => {
   if (isMinimalUI) {
     return (
-      <FixedSideContainer side="top" className="App-top-bar">
+      <div className="layer-ui__wrapper">
         <Footer
           appState={appState}
           actionManager={actionManager}
@@ -75,7 +75,7 @@ export const MobileMenu = ({
           renderWelcomeScreen={false}
           isMinimalUI={true}
         />
-      </FixedSideContainer>
+      </div>
     );
   }
 
diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index ed83632d0782..3aec364635bd 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/packages/excalidraw/tests/excalidraw.test.tsx
@@ -285,6 +285,7 @@ describe("<Excalidraw/>", () => {
 
         expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
         expect(container.querySelector(".App-bottom-bar")).toBeNull();
+        expect(container.querySelector(".layer-ui__wrapper")).not.toBeNull();
         expect(container.querySelector(".zoom-actions")).not.toBeNull();
         expect(queryByTestId(container, "button-undo")).not.toBeNull();
         expect(queryByTestId(container, "button-redo")).not.toBeNull();

From cda9ba2fb574a9f08d75e99d6229b06d5f5ba5a4 Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Thu, 26 Feb 2026 17:10:40 -0300
Subject: [PATCH 4/6] ENG-1706: Fix Panning Mode button on mobile.

---
 packages/excalidraw/components/Actions.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss
index 7e6aaa668670..2926dd1194cb 100644
--- a/packages/excalidraw/components/Actions.scss
+++ b/packages/excalidraw/components/Actions.scss
@@ -212,6 +212,11 @@
   margin-inline-start: 0.6em !important;
 }
 
+.panning-mode-trigger.dropdown-menu-button--mobile {
+  width: var(--lg-button-size) !important;
+  height: var(--lg-button-size) !important;
+}
+
 .lock-buttons {
   display: flex;
 

From 0d960b0c67fd866594a81b6b9c2c24f8d46047ab Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Fri, 27 Feb 2026 10:41:24 -0300
Subject: [PATCH 5/6] ENG-1706: Removing test.

---
 packages/excalidraw/tests/excalidraw.test.tsx | 35 -------------------
 1 file changed, 35 deletions(-)

diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index 3aec364635bd..34135c618de2 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/packages/excalidraw/tests/excalidraw.test.tsx
@@ -256,41 +256,6 @@ describe("<Excalidraw/>", () => {
         expect(queryByTestId(container, "load-button")).toBeNull();
       });
     });
-
-    describe("Test uiMode", () => {
-      it("should render only zoom and undo/redo controls in minimal mode on desktop", async () => {
-        const { container } = await render(
-          <Excalidraw UIOptions={{ uiMode: "minimal" }} />,
-        );
-
-        expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
-        expect(container.querySelector(".App-menu_top")).toBeNull();
-        expect(
-          container.querySelector(".layer-ui__wrapper__footer-right"),
-        ).toBe(null);
-        expect(container.querySelector(".zoom-actions")).not.toBeNull();
-        expect(queryByTestId(container, "button-undo")).not.toBeNull();
-        expect(queryByTestId(container, "button-redo")).not.toBeNull();
-      });
-
-      it("should render only zoom and undo/redo controls in minimal mode on phone layout", async () => {
-        const { container } = await render(
-          <Excalidraw
-            UIOptions={{
-              uiMode: "minimal",
-              getFormFactor: () => "phone",
-            }}
-          />,
-        );
-
-        expect(queryByTestId(container, "main-menu-trigger")).toBeNull();
-        expect(container.querySelector(".App-bottom-bar")).toBeNull();
-        expect(container.querySelector(".layer-ui__wrapper")).not.toBeNull();
-        expect(container.querySelector(".zoom-actions")).not.toBeNull();
-        expect(queryByTestId(container, "button-undo")).not.toBeNull();
-        expect(queryByTestId(container, "button-redo")).not.toBeNull();
-      });
-    });
   });
 
   describe("Test theme prop", () => {

From aa4449de18e95f9be7d3447bb8af4e7e54706828 Mon Sep 17 00:00:00 2001
From: ArielMn22 <arielpaixao10@gmail.com>
Date: Fri, 27 Feb 2026 10:51:39 -0300
Subject: [PATCH 6/6] ENG-1706: Move useTunnels() hook before the early return
 for isMinimalUI.

---
 packages/excalidraw/components/MobileMenu.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index a1b6c6067810..7cfe63aa943f 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -65,6 +65,12 @@ export const MobileMenu = ({
   onPenModeToggle,
   isMinimalUI,
 }: MobileMenuProps) => {
+  const {
+    WelcomeScreenCenterTunnel,
+    MainMenuTunnel,
+    DefaultSidebarTriggerTunnel,
+  } = useTunnels();
+
   if (isMinimalUI) {
     return (
       <div className="layer-ui__wrapper">
@@ -79,11 +85,6 @@ export const MobileMenu = ({
     );
   }
 
-  const {
-    WelcomeScreenCenterTunnel,
-    MainMenuTunnel,
-    DefaultSidebarTriggerTunnel,
-  } = useTunnels();
   const renderAppTopBar = () => {
     if (appState.openDialog?.name === "elementLinkSelector") {
       return null;