diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index bb62a0e96..07e833c02 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -848,6 +848,13 @@ const ExcalidrawWrapper = () => {
         handleKeyboardGlobally={true}
         autoFocus={true}
         theme={editorTheme}
+        customOptions={{
+          disableKeyEvents: true,
+          //   hideMainToolbar: true,
+          //   hideMenu: true,
+          //   hideFooter: true,
+          hideContextMenu: true,
+        }}
         renderTopRightUI={(isMobile) => {
           if (isMobile || !collabAPI || isCollabDisabled) {
             return null;
diff --git a/package.json b/package.json
index 6f57f7e7c..8fa623852 100644
--- a/package.json
+++ b/package.json
@@ -78,8 +78,8 @@
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
     "release:excalidraw": "node scripts/release.js",
-    "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/{build,dist}",
-    "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",
+    "rm:build": "rimraf -rfexcalidraw-app/{build,dist,dev-dist} && rimraf -rfpackages/*/{dist,build} && rimraf -rfexamples/*/{build,dist}",
+    "rm:node_modules": "rimraf -rfnode_modules && rimraf -rfexcalidraw-app/node_modules && rimraf -rfpackages/*/node_modules",
     "clean-install": "yarn rm:node_modules && yarn install"
   },
   "resolutions": {
diff --git a/packages/common/package.json b/packages/common/package.json
index 3e5f6413a..398212ff7 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -50,7 +50,7 @@
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
+    "gen:types": "rimraf -rf types && tsc",
+    "build:esm": "rimraf -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
   }
 }
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index cd3bd7a15..a7da91434 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -438,6 +438,7 @@ export const TOOL_TYPE = {
   magicframe: "magicframe",
   embeddable: "embeddable",
   laser: "laser",
+  blur: "blur",
 } as const;
 
 export const EDITOR_LS_KEYS = {
diff --git a/packages/common/src/keys.ts b/packages/common/src/keys.ts
index 948e7f568..ba279a6d8 100644
--- a/packages/common/src/keys.ts
+++ b/packages/common/src/keys.ts
@@ -1,7 +1,10 @@
+import type { KeyboardModifiersObject } from "@excalidraw/excalidraw/types";
+
 import { isDarwin } from "./constants";
 
 import type { ValueOf } from "./utility-types";
 
+
 export const CODES = {
   EQUAL: "Equal",
   MINUS: "Minus",
@@ -140,12 +143,60 @@ export const isArrowKey = (key: string) =>
   key === KEYS.ARROW_DOWN ||
   key === KEYS.ARROW_UP;
 
-export const shouldResizeFromCenter = (event: MouseEvent | KeyboardEvent) =>
+const shouldResizeFromCenterDefault = (event: MouseEvent | KeyboardEvent) =>
   event.altKey;
 
-export const shouldMaintainAspectRatio = (event: MouseEvent | KeyboardEvent) =>
+const shouldMaintainAspectRatioDefault = (event: MouseEvent | KeyboardEvent) =>
   event.shiftKey;
 
+const shouldRotateWithDiscreteAngleDefault = (
+  event: MouseEvent | KeyboardEvent | React.PointerEvent<HTMLCanvasElement>,
+) => event.shiftKey;
+
+const shouldSnappingDefault = (event: KeyboardModifiersObject) =>
+  event[KEYS.CTRL_OR_CMD];
+
+let shouldResizeFromCenterFunction = shouldResizeFromCenterDefault;
+let shouldMaintainAspectRatioFunction = shouldMaintainAspectRatioDefault;
+let shouldRotateWithDiscreteAngleFunction =
+  shouldRotateWithDiscreteAngleDefault;
+let shouldSnappingFunction = shouldSnappingDefault;
+
+export const setShouldResizeFromCenter = (
+  shouldResizeFromCenter: (event: MouseEvent | KeyboardEvent) => boolean,
+) => {
+  shouldResizeFromCenterFunction = shouldResizeFromCenter;
+};
+
+export const setShouldMaintainAspectRatio = (
+  shouldMaintainAspectRatio: (event: MouseEvent | KeyboardEvent) => boolean,
+) => {
+  shouldMaintainAspectRatioFunction = shouldMaintainAspectRatio;
+};
+
+export const setShouldRotateWithDiscreteAngle = (
+  shouldRotateWithDiscreteAngle: (
+    event: MouseEvent | KeyboardEvent | React.PointerEvent<HTMLCanvasElement>,
+  ) => boolean,
+) => {
+  shouldRotateWithDiscreteAngleFunction = shouldRotateWithDiscreteAngle;
+};
+
+export const setShouldSnapping = (
+  shouldSnapping: (event: KeyboardModifiersObject) => boolean,
+) => {
+  shouldSnappingFunction = shouldSnapping;
+};
+
+export const shouldResizeFromCenter = (event: MouseEvent | KeyboardEvent) =>
+  shouldResizeFromCenterFunction(event);
+
+export const shouldMaintainAspectRatio = (event: MouseEvent | KeyboardEvent) =>
+  shouldMaintainAspectRatioFunction(event);
+
 export const shouldRotateWithDiscreteAngle = (
   event: MouseEvent | KeyboardEvent | React.PointerEvent<HTMLCanvasElement>,
-) => event.shiftKey;
+) => shouldRotateWithDiscreteAngleFunction(event);
+
+export const shouldSnapping = (event: KeyboardModifiersObject) =>
+  shouldSnappingFunction(event);
diff --git a/packages/element/package.json b/packages/element/package.json
index ae810e374..9de5dffa1 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -50,7 +50,7 @@
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
+    "gen:types": "rimraf -rf types && tsc",
+    "build:esm": "rimraf -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
   }
 }
diff --git a/packages/element/src/Shape.ts b/packages/element/src/Shape.ts
index 4def41957..1f6de9ec8 100644
--- a/packages/element/src/Shape.ts
+++ b/packages/element/src/Shape.ts
@@ -98,6 +98,7 @@ export const generateRoughOptions = (
     case "iframe":
     case "embeddable":
     case "diamond":
+    case "blur":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
       options.fill = isTransparent(element.backgroundColor)
@@ -326,6 +327,7 @@ export const _generateElementShape = (
   switch (element.type) {
     case "rectangle":
     case "iframe":
+    case "blur":
     case "embeddable": {
       let shape: ElementShapes[typeof element.type];
       // this is for rendering the stroke/bg of the embeddable, especially
diff --git a/packages/element/src/comparisons.ts b/packages/element/src/comparisons.ts
index 75fac889d..3aee07b05 100644
--- a/packages/element/src/comparisons.ts
+++ b/packages/element/src/comparisons.ts
@@ -10,7 +10,10 @@ export const hasBackground = (type: ElementOrToolType) =>
   type === "freedraw";
 
 export const hasStrokeColor = (type: ElementOrToolType) =>
-  type !== "image" && type !== "frame" && type !== "magicframe";
+  type !== "image" &&
+  type !== "frame" &&
+  type !== "magicframe" &&
+  type !== "blur";
 
 export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||
@@ -39,6 +42,10 @@ export const canChangeRoundness = (type: ElementOrToolType) =>
   type === "diamond" ||
   type === "image";
 
+export const canChangeBlur = (type: ElementOrToolType) => type === "blur";
+
+export const canChangeLayer = (type: ElementOrToolType) => type !== "blur";
+
 export const toolIsArrow = (type: ElementOrToolType) => type === "arrow";
 
 export const canHaveArrowheads = (type: ElementOrToolType) => type === "arrow";
diff --git a/packages/element/src/newElement.ts b/packages/element/src/newElement.ts
index 53a2f05ae..5b9d252df 100644
--- a/packages/element/src/newElement.ts
+++ b/packages/element/src/newElement.ts
@@ -46,6 +46,7 @@ import type {
   ExcalidrawArrowElement,
   FixedSegment,
   ExcalidrawElbowArrowElement,
+  ExcalidrawBlurElement,
 } from "./types";
 
 export type ElementConstructorOpts = MarkOptional<
@@ -212,6 +213,25 @@ export const newMagicFrameElement = (
   return frameElement;
 };
 
+export const newBlurElement = (
+  opts: {
+    blur: number;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawBlurElement> => {
+  const blurElement = newElementWith(
+    {
+      ..._newElementBase<ExcalidrawBlurElement>("blur", opts),
+      type: "blur",
+      blur: opts.blur,
+      fillStyle: "solid",
+      backgroundColor: "#000000",
+    },
+    {},
+  );
+
+  return blurElement;
+};
+
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {
diff --git a/packages/element/src/renderElement.ts b/packages/element/src/renderElement.ts
index c8091e8ed..36f6d3bdf 100644
--- a/packages/element/src/renderElement.ts
+++ b/packages/element/src/renderElement.ts
@@ -404,6 +404,8 @@ const drawElementOnCanvas = (
       rc.draw(ShapeCache.get(element)!);
       break;
     }
+    case "blur":
+      break;
     case "arrow":
     case "line": {
       context.lineJoin = "round";
@@ -814,6 +816,7 @@ export const renderElement = (
     case "image":
     case "text":
     case "iframe":
+    case "blur":
     case "embeddable": {
       // TODO investigate if we can do this in situ. Right now we need to call
       // beforehand because math helpers (such as getElementAbsoluteCoords)
diff --git a/packages/element/src/shapes.ts b/packages/element/src/shapes.ts
index 96542c538..cd690e728 100644
--- a/packages/element/src/shapes.ts
+++ b/packages/element/src/shapes.ts
@@ -58,6 +58,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
     case "embeddable":
     case "image":
     case "iframe":
+    case "blur":
     case "text":
     case "selection":
       return getPolygonShape(element);
diff --git a/packages/element/src/typeChecks.ts b/packages/element/src/typeChecks.ts
index 54619726d..9369b6c60 100644
--- a/packages/element/src/typeChecks.ts
+++ b/packages/element/src/typeChecks.ts
@@ -28,6 +28,7 @@ import type {
   PointBinding,
   FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
+  ExcalidrawBlurElement,
 } from "./types";
 
 export const isInitializedImageElement = (
@@ -107,6 +108,12 @@ export const isLinearElement = (
   return element != null && isLinearElementType(element.type);
 };
 
+export const isBlurElement = (
+  element?: ExcalidrawElement | null,
+): element is ExcalidrawBlurElement => {
+  return element != null && isBlurElementType(element.type);
+};
+
 export const isArrowElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawArrowElement => {
@@ -127,6 +134,10 @@ export const isLinearElementType = (
   );
 };
 
+export const isBlurElementType = (elementType: ElementOrToolType): boolean => {
+  return elementType === "blur";
+};
+
 export const isBindingElement = (
   element?: ExcalidrawElement | null,
   includeLocked = true,
@@ -231,6 +242,7 @@ export const isExcalidrawElement = (
     case "frame":
     case "magicframe":
     case "image":
+    case "blur":
     case "selection": {
       return true;
     }
diff --git a/packages/element/src/types.ts b/packages/element/src/types.ts
index 3b40135d5..fd00f8a28 100644
--- a/packages/element/src/types.ts
+++ b/packages/element/src/types.ts
@@ -89,6 +89,11 @@ export type ExcalidrawRectangleElement = _ExcalidrawElementBase & {
   type: "rectangle";
 };
 
+export type ExcalidrawBlurElement = _ExcalidrawElementBase & {
+  type: "blur";
+  blur: number;
+};
+
 export type ExcalidrawDiamondElement = _ExcalidrawElementBase & {
   type: "diamond";
 };
@@ -212,7 +217,8 @@ export type ExcalidrawElement =
   | ExcalidrawFrameElement
   | ExcalidrawMagicFrameElement
   | ExcalidrawIframeElement
-  | ExcalidrawEmbeddableElement;
+  | ExcalidrawEmbeddableElement
+  | ExcalidrawBlurElement;
 
 export type ExcalidrawNonSelectionElement = Exclude<
   ExcalidrawElement,
diff --git a/packages/excalidraw/actions/actionAlign.tsx b/packages/excalidraw/actions/actionAlign.tsx
index 0ef938c67..9d7049d82 100644
--- a/packages/excalidraw/actions/actionAlign.tsx
+++ b/packages/excalidraw/actions/actionAlign.tsx
@@ -8,6 +8,8 @@ import { KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
 
 import { alignElements } from "@excalidraw/element/align";
 
+import { useContext } from "react";
+
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import type { Alignment } from "@excalidraw/element/align";
@@ -27,9 +29,14 @@ import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
-import { register } from "./register";
+import {
+  ExcalidrawPropsCustomOptionsContext,
+  type AppClassProperties,
+  type AppState,
+  type UIAppState,
+} from "../types";
 
-import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { register } from "./register";
 
 export const alignActionsPredicate = (
   appState: UIAppState,
@@ -81,19 +88,40 @@ export const actionAlignTop = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={AlignTopIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.alignTop")} — ${getShortcutKey(
-        "CtrlOrCmd+Shift+Up",
-      )}`}
-      aria-label={t("labels.alignTop")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.alignTop")}`,
+        children: AlignTopIcon,
+        name: "alignTop",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={AlignTopIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.alignTop")} — ${getShortcutKey(
+          "CtrlOrCmd+Shift+Up",
+        )}`}
+        aria-label={t("labels.alignTop")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const actionAlignBottom = register({
@@ -115,19 +143,40 @@ export const actionAlignBottom = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={AlignBottomIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.alignBottom")} — ${getShortcutKey(
-        "CtrlOrCmd+Shift+Down",
-      )}`}
-      aria-label={t("labels.alignBottom")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.alignBottom")}`,
+        children: AlignBottomIcon,
+        name: "alignBottom",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={AlignBottomIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.alignBottom")} — ${getShortcutKey(
+          "CtrlOrCmd+Shift+Down",
+        )}`}
+        aria-label={t("labels.alignBottom")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const actionAlignLeft = register({
@@ -149,19 +198,40 @@ export const actionAlignLeft = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={AlignLeftIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.alignLeft")} — ${getShortcutKey(
-        "CtrlOrCmd+Shift+Left",
-      )}`}
-      aria-label={t("labels.alignLeft")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.alignLeft")}`,
+        children: AlignLeftIcon,
+        name: "alignLeft",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={AlignLeftIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.alignLeft")} — ${getShortcutKey(
+          "CtrlOrCmd+Shift+Left",
+        )}`}
+        aria-label={t("labels.alignLeft")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const actionAlignRight = register({
@@ -183,19 +253,39 @@ export const actionAlignRight = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={AlignRightIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.alignRight")} — ${getShortcutKey(
-        "CtrlOrCmd+Shift+Right",
-      )}`}
-      aria-label={t("labels.alignRight")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.alignRight")}`,
+        children: AlignRightIcon,
+        name: "alignRight",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={AlignRightIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.alignRight")} — ${getShortcutKey(
+          "CtrlOrCmd+Shift+Right",
+        )}`}
+        aria-label={t("labels.alignRight")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const actionAlignVerticallyCentered = register({
@@ -215,17 +305,38 @@ export const actionAlignVerticallyCentered = register({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={CenterVerticallyIcon}
-      onClick={() => updateData(null)}
-      title={t("labels.centerVertically")}
-      aria-label={t("labels.centerVertically")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.centerVertically")}`,
+        children: CenterVerticallyIcon,
+        name: "alignVerticallyCentered",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={CenterVerticallyIcon}
+        onClick={() => updateData(null)}
+        title={t("labels.centerVertically")}
+        aria-label={t("labels.centerVertically")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const actionAlignHorizontallyCentered = register({
@@ -245,15 +356,36 @@ export const actionAlignHorizontallyCentered = register({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
-      type="button"
-      icon={CenterHorizontallyIcon}
-      onClick={() => updateData(null)}
-      title={t("labels.centerHorizontally")}
-      aria-label={t("labels.centerHorizontally")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.centerHorizontally")}`,
+        children: CenterHorizontallyIcon,
+        name: "alignHorizontallyCentered",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !alignActionsPredicate(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!alignActionsPredicate(appState, app)}
+        type="button"
+        icon={CenterHorizontallyIcon}
+        onClick={() => updateData(null)}
+        title={t("labels.centerHorizontally")}
+        aria-label={t("labels.centerHorizontally")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/actionBlur.tsx b/packages/excalidraw/actions/actionBlur.tsx
new file mode 100644
index 000000000..3b1b65c40
--- /dev/null
+++ b/packages/excalidraw/actions/actionBlur.tsx
@@ -0,0 +1,48 @@
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+// TODO barnabasmolnar/editor-redesign
+// TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
+// ArrowHead icons
+import { isBlurElement } from "@excalidraw/element/typeChecks";
+
+import { BlurRange } from "../components/Range";
+
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
+import { changeProperty } from "./actionProperties";
+
+export const actionChangeBlur = register({
+  name: "changeBlur",
+  label: "labels.blur",
+  trackEvent: false,
+  perform: (elements, appState, value) => {
+    return {
+      elements: changeProperty(
+        elements,
+        appState,
+        (el) => {
+          if (!isBlurElement(el)) {
+            return el;
+          }
+
+          return newElementWith(el, {
+            blur: value,
+          });
+        },
+        true,
+      ),
+      appState: { ...appState, currentItemBlur: value },
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <BlurRange
+      updateData={updateData}
+      elements={elements}
+      appState={appState}
+      testId="blur"
+    />
+  ),
+});
diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx
index e183d05f4..86c366ae8 100644
--- a/packages/excalidraw/actions/actionDeleteSelected.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.tsx
@@ -17,6 +17,8 @@ import {
   selectGroupsForSelectedElements,
 } from "@excalidraw/element/groups";
 
+import { useContext } from "react";
+
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import { t } from "../i18n";
@@ -25,6 +27,8 @@ import { CaptureUpdateAction } from "../store";
 import { TrashIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { register } from "./register";
 
 import type { AppClassProperties, AppState } from "../types";
@@ -310,14 +314,34 @@ export const actionDeleteSelected = register({
   keyTest: (event, appState, elements) =>
     (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
     !event[KEYS.CTRL_OR_CMD],
-  PanelComponent: ({ elements, appState, updateData }) => (
-    <ToolButton
-      type="button"
-      icon={TrashIcon}
-      title={t("labels.delete")}
-      aria-label={t("labels.delete")}
-      onClick={() => updateData(null)}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.delete")}`,
+        children: TrashIcon,
+        name: "deleteSelectedElements",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+      });
+    }
+
+    return (
+      <ToolButton
+        type="button"
+        icon={TrashIcon}
+        title={t("labels.delete")}
+        aria-label={t("labels.delete")}
+        onClick={() => updateData(null)}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/actionDistribute.tsx b/packages/excalidraw/actions/actionDistribute.tsx
index 9f05ab6bf..433f499a4 100644
--- a/packages/excalidraw/actions/actionDistribute.tsx
+++ b/packages/excalidraw/actions/actionDistribute.tsx
@@ -8,6 +8,8 @@ import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/fra
 
 import { distributeElements } from "@excalidraw/element/distribute";
 
+import { useContext } from "react";
+
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import type { Distribution } from "@excalidraw/element/distribute";
@@ -23,9 +25,13 @@ import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
-import { register } from "./register";
+import {
+  ExcalidrawPropsCustomOptionsContext,
+  type AppClassProperties,
+  type AppState,
+} from "../types";
 
-import type { AppClassProperties, AppState } from "../types";
+import { register } from "./register";
 
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);
@@ -75,19 +81,40 @@ export const distributeHorizontally = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!enableActionGroup(appState, app)}
-      type="button"
-      icon={DistributeHorizontallyIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.distributeHorizontally")} — ${getShortcutKey(
-        "Alt+H",
-      )}`}
-      aria-label={t("labels.distributeHorizontally")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.distributeHorizontally")}`,
+        children: DistributeHorizontallyIcon,
+        name: "distributeHorizontally",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !enableActionGroup(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!enableActionGroup(appState, app)}
+        type="button"
+        icon={DistributeHorizontallyIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.distributeHorizontally")} — ${getShortcutKey(
+          "Alt+H",
+        )}`}
+        aria-label={t("labels.distributeHorizontally")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
 
 export const distributeVertically = register({
@@ -106,15 +133,38 @@ export const distributeVertically = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!enableActionGroup(appState, app)}
-      type="button"
-      icon={DistributeVerticallyIcon}
-      onClick={() => updateData(null)}
-      title={`${t("labels.distributeVertically")} — ${getShortcutKey("Alt+V")}`}
-      aria-label={t("labels.distributeVertically")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.distributeVertically")}`,
+        children: DistributeVerticallyIcon,
+        name: "distributeVertically",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !enableActionGroup(appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!enableActionGroup(appState, app)}
+        type="button"
+        icon={DistributeVerticallyIcon}
+        onClick={() => updateData(null)}
+        title={`${t("labels.distributeVertically")} — ${getShortcutKey(
+          "Alt+V",
+        )}`}
+        aria-label={t("labels.distributeVertically")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx
index 034edf543..35a0dec29 100644
--- a/packages/excalidraw/actions/actionDuplicateSelection.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@@ -18,6 +18,8 @@ import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
 
 import { duplicateElements } from "@excalidraw/element/duplicate";
 
+import { useContext } from "react";
+
 import { ToolButton } from "../components/ToolButton";
 import { DuplicateIcon } from "../components/icons";
 
@@ -25,6 +27,8 @@ import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { register } from "./register";
 
 export const actionDuplicateSelection = register({
@@ -105,16 +109,36 @@ export const actionDuplicateSelection = register({
     };
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
-  PanelComponent: ({ elements, appState, updateData }) => (
-    <ToolButton
-      type="button"
-      icon={DuplicateIcon}
-      title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
-        "CtrlOrCmd+D",
-      )}`}
-      aria-label={t("labels.duplicateSelection")}
-      onClick={() => updateData(null)}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    />
-  ),
+  PanelComponent: ({ elements, appState, updateData }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.duplicateSelection")}`,
+        children: DuplicateIcon,
+        name: "duplicateSelection",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+      });
+    }
+
+    return (
+      <ToolButton
+        type="button"
+        icon={DuplicateIcon}
+        title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
+          "CtrlOrCmd+D",
+        )}`}
+        aria-label={t("labels.duplicateSelection")}
+        onClick={() => updateData(null)}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      />
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/actionGroup.tsx b/packages/excalidraw/actions/actionGroup.tsx
index 6b47ef969..0c8a0ef17 100644
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@@ -28,6 +28,8 @@ import {
 
 import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
 
+import { useContext } from "react";
+
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -42,9 +44,13 @@ import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
-import { register } from "./register";
+import {
+  ExcalidrawPropsCustomOptionsContext,
+  type AppClassProperties,
+  type AppState,
+} from "../types";
 
-import type { AppClassProperties, AppState } from "../types";
+import { register } from "./register";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -195,17 +201,38 @@ export const actionGroup = register({
     enableActionGroup(elements, appState, app),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <ToolButton
-      hidden={!enableActionGroup(elements, appState, app)}
-      type="button"
-      icon={<GroupIcon theme={appState.theme} />}
-      onClick={() => updateData(null)}
-      title={`${t("labels.group")} — ${getShortcutKey("CtrlOrCmd+G")}`}
-      aria-label={t("labels.group")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    ></ToolButton>
-  ),
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.group")}`,
+        children: <GroupIcon theme={appState.theme} />,
+        name: "group",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: !enableActionGroup(elements, appState, app),
+      });
+    }
+
+    return (
+      <ToolButton
+        hidden={!enableActionGroup(elements, appState, app)}
+        type="button"
+        icon={<GroupIcon theme={appState.theme} />}
+        onClick={() => updateData(null)}
+        title={`${t("labels.group")} — ${getShortcutKey("CtrlOrCmd+G")}`}
+        aria-label={t("labels.group")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      ></ToolButton>
+    );
+  },
 });
 
 export const actionUngroup = register({
@@ -304,15 +331,38 @@ export const actionUngroup = register({
     event.key === KEYS.G.toUpperCase(),
   predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
 
-  PanelComponent: ({ elements, appState, updateData }) => (
-    <ToolButton
-      type="button"
-      hidden={getSelectedGroupIds(appState).length === 0}
-      icon={<UngroupIcon theme={appState.theme} />}
-      onClick={() => updateData(null)}
-      title={`${t("labels.ungroup")} — ${getShortcutKey("CtrlOrCmd+Shift+G")}`}
-      aria-label={t("labels.ungroup")}
-      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
-    ></ToolButton>
-  ),
+  PanelComponent: ({ elements, appState, updateData }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.ungroup")}`,
+        children: <UngroupIcon theme={appState.theme} />,
+        name: "ungroup",
+        visible: isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        ),
+        hidden: getSelectedGroupIds(appState).length === 0,
+      });
+    }
+
+    return (
+      <ToolButton
+        type="button"
+        hidden={getSelectedGroupIds(appState).length === 0}
+        icon={<UngroupIcon theme={appState.theme} />}
+        onClick={() => updateData(null)}
+        title={`${t("labels.ungroup")} — ${getShortcutKey(
+          "CtrlOrCmd+Shift+G",
+        )}`}
+        aria-label={t("labels.ungroup")}
+        visible={isSomeElementSelected(
+          getNonDeletedElements(elements),
+          appState,
+        )}
+      ></ToolButton>
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/actionHistory.tsx b/packages/excalidraw/actions/actionHistory.tsx
index a0dfb85df..20f7ad6e0 100644
--- a/packages/excalidraw/actions/actionHistory.tsx
+++ b/packages/excalidraw/actions/actionHistory.tsx
@@ -1,5 +1,7 @@
 import { isWindows, KEYS, matchKey, arrayToMap } from "@excalidraw/common";
 
+import { useContext, useEffect } from "react";
+
 import type { SceneElementsMap } from "@excalidraw/element/types";
 
 import { ToolButton } from "../components/ToolButton";
@@ -9,9 +11,14 @@ import { useEmitter } from "../hooks/useEmitter";
 import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
 
+import {
+  ExcalidrawHistoryContext,
+  type AppClassProperties,
+  type AppState,
+} from "../types";
+
 import type { History } from "../history";
 import type { Store } from "../store";
-import type { AppClassProperties, AppState } from "../types";
 import type { Action, ActionResult } from "./types";
 
 const executeHistoryAction = (
@@ -74,6 +81,12 @@ export const createUndoAction: ActionCreator = (history, store) => ({
       ),
     );
 
+    const historyContext = useContext(ExcalidrawHistoryContext);
+    historyContext &&
+      (historyContext.undoRef.current = () => {
+        updateData();
+      });
+
     return (
       <ToolButton
         type="button"
@@ -114,6 +127,12 @@ export const createRedoAction: ActionCreator = (history, store) => ({
       ),
     );
 
+    const historyContext = useContext(ExcalidrawHistoryContext);
+    historyContext &&
+      (historyContext.redoRef.current = () => {
+        updateData();
+      });
+
     return (
       <ToolButton
         type="button"
diff --git a/packages/excalidraw/actions/actionLink.tsx b/packages/excalidraw/actions/actionLink.tsx
index 71426267d..a096483bc 100644
--- a/packages/excalidraw/actions/actionLink.tsx
+++ b/packages/excalidraw/actions/actionLink.tsx
@@ -2,6 +2,8 @@ import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
 
 import { KEYS, getShortcutKey } from "@excalidraw/common";
 
+import { useContext } from "react";
+
 import { ToolButton } from "../components/ToolButton";
 import { getContextMenuLabel } from "../components/hyperlink/Hyperlink";
 import { LinkIcon } from "../components/icons";
@@ -10,6 +12,8 @@ import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { register } from "./register";
 
 export const actionLink = register({
@@ -40,6 +44,20 @@ export const actionLink = register({
   PanelComponent: ({ elements, appState, updateData }) => {
     const selectedElements = getSelectedElements(elements, appState);
 
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: isEmbeddableElement(elements[0])
+          ? t("labels.link.labelEmbed")
+          : t("labels.link.label"),
+        children: LinkIcon,
+        name: "link",
+        visible: selectedElements.length === 1 && !!selectedElements[0].link,
+      });
+    }
+
     return (
       <ToolButton
         type="button"
diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
index df07960af..031a080ce 100644
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -1,5 +1,5 @@
 import { pointFrom } from "@excalidraw/math";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
@@ -133,10 +133,16 @@ import {
 } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
+import {
+  ExcalidrawPropsCustomOptionsContext,
+  type AppClassProperties,
+  type AppState,
+  type Primitive,
+} from "../types";
+
 import { register } from "./register";
 
 import type { CaptureUpdateActionType } from "../store";
-import type { AppClassProperties, AppState, Primitive } from "../types";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -318,28 +324,35 @@ export const actionChangeStrokeColor = register({
         : CaptureUpdateAction.EVENTUALLY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, appProps }) => (
-    <>
-      <h3 aria-hidden="true">{t("labels.stroke")}</h3>
-      <ColorPicker
-        topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
-        palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
-        type="elementStroke"
-        label={t("labels.stroke")}
-        color={getFormValue(
-          elements,
-          appState,
-          (element) => element.strokeColor,
-          true,
-          appState.currentItemStrokeColor,
-        )}
-        onChange={(color) => updateData({ currentItemStrokeColor: color })}
-        elements={elements}
-        appState={appState}
-        updateData={updateData}
-      />
-    </>
-  ),
+  PanelComponent: ({ elements, appState, updateData, appProps }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    return (
+      <>
+        <h3 aria-hidden="true">{t("labels.stroke")}</h3>
+        <ColorPicker
+          topPicks={
+            customOptions?.pickerRenders?.elementStrokeColors ??
+            DEFAULT_ELEMENT_STROKE_PICKS
+          }
+          palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
+          type="elementStroke"
+          label={t("labels.stroke")}
+          color={getFormValue(
+            elements,
+            appState,
+            (element) => element.strokeColor,
+            true,
+            appState.currentItemStrokeColor,
+          )}
+          onChange={(color) => updateData({ currentItemStrokeColor: color })}
+          elements={elements}
+          appState={appState}
+          updateData={updateData}
+        />
+      </>
+    );
+  },
 });
 
 export const actionChangeBackgroundColor = register({
@@ -364,28 +377,37 @@ export const actionChangeBackgroundColor = register({
         : CaptureUpdateAction.EVENTUALLY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, appProps }) => (
-    <>
-      <h3 aria-hidden="true">{t("labels.background")}</h3>
-      <ColorPicker
-        topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
-        palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
-        type="elementBackground"
-        label={t("labels.background")}
-        color={getFormValue(
-          elements,
-          appState,
-          (element) => element.backgroundColor,
-          true,
-          appState.currentItemBackgroundColor,
-        )}
-        onChange={(color) => updateData({ currentItemBackgroundColor: color })}
-        elements={elements}
-        appState={appState}
-        updateData={updateData}
-      />
-    </>
-  ),
+  PanelComponent: ({ elements, appState, updateData, appProps }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    return (
+      <>
+        <h3 aria-hidden="true">{t("labels.background")}</h3>
+        <ColorPicker
+          topPicks={
+            customOptions?.pickerRenders?.elementBackgroundColors ??
+            DEFAULT_ELEMENT_BACKGROUND_PICKS
+          }
+          palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
+          type="elementBackground"
+          label={t("labels.background")}
+          color={getFormValue(
+            elements,
+            appState,
+            (element) => element.backgroundColor,
+            true,
+            appState.currentItemBackgroundColor,
+          )}
+          onChange={(color) =>
+            updateData({ currentItemBackgroundColor: color })
+          }
+          elements={elements}
+          appState={appState}
+          updateData={updateData}
+        />
+      </>
+    );
+  },
 });
 
 export const actionChangeFillStyle = register({
@@ -1520,46 +1542,92 @@ export const actionChangeArrowhead = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
     const isRTL = getLanguage().rtl;
 
     return (
       <fieldset>
         <legend>{t("labels.arrowheads")}</legend>
-        <div className="iconSelectList buttonList">
-          <IconPicker
-            label="arrowhead_start"
-            options={getArrowheadOptions(!isRTL)}
-            value={getFormValue<Arrowhead | null>(
-              elements,
-              appState,
-              (element) =>
-                isLinearElement(element) && canHaveArrowheads(element.type)
-                  ? element.startArrowhead
-                  : appState.currentItemStartArrowhead,
-              true,
-              appState.currentItemStartArrowhead,
-            )}
-            onChange={(value) => updateData({ position: "start", type: value })}
-            numberOfOptionsToAlwaysShow={4}
-          />
-          <IconPicker
-            label="arrowhead_end"
-            group="arrowheads"
-            options={getArrowheadOptions(!!isRTL)}
-            value={getFormValue<Arrowhead | null>(
-              elements,
-              appState,
-              (element) =>
-                isLinearElement(element) && canHaveArrowheads(element.type)
-                  ? element.endArrowhead
-                  : appState.currentItemEndArrowhead,
-              true,
-              appState.currentItemEndArrowhead,
-            )}
-            onChange={(value) => updateData({ position: "end", type: value })}
-            numberOfOptionsToAlwaysShow={4}
-          />
-        </div>
+        {customOptions?.pickerRenders?.ButtonList && (
+          <customOptions.pickerRenders.ButtonList className="iconPickerList">
+            <IconPicker
+              label="arrowhead_start"
+              options={getArrowheadOptions(!isRTL)}
+              value={getFormValue<Arrowhead | null>(
+                elements,
+                appState,
+                (element) =>
+                  isLinearElement(element) && canHaveArrowheads(element.type)
+                    ? element.startArrowhead
+                    : appState.currentItemStartArrowhead,
+                true,
+                appState.currentItemStartArrowhead,
+              )}
+              onChange={(value) =>
+                updateData({ position: "start", type: value })
+              }
+              numberOfOptionsToAlwaysShow={4}
+            />
+            <IconPicker
+              label="arrowhead_end"
+              group="arrowheads"
+              options={getArrowheadOptions(!!isRTL)}
+              value={getFormValue<Arrowhead | null>(
+                elements,
+                appState,
+                (element) =>
+                  isLinearElement(element) && canHaveArrowheads(element.type)
+                    ? element.endArrowhead
+                    : appState.currentItemEndArrowhead,
+                true,
+                appState.currentItemEndArrowhead,
+              )}
+              onChange={(value) => updateData({ position: "end", type: value })}
+              numberOfOptionsToAlwaysShow={4}
+            />
+          </customOptions.pickerRenders.ButtonList>
+        )}
+
+        {!customOptions?.pickerRenders?.ButtonList && (
+          <div className="iconSelectList buttonList">
+            <IconPicker
+              label="arrowhead_start"
+              options={getArrowheadOptions(!isRTL)}
+              value={getFormValue<Arrowhead | null>(
+                elements,
+                appState,
+                (element) =>
+                  isLinearElement(element) && canHaveArrowheads(element.type)
+                    ? element.startArrowhead
+                    : appState.currentItemStartArrowhead,
+                true,
+                appState.currentItemStartArrowhead,
+              )}
+              onChange={(value) =>
+                updateData({ position: "start", type: value })
+              }
+              numberOfOptionsToAlwaysShow={4}
+            />
+            <IconPicker
+              label="arrowhead_end"
+              group="arrowheads"
+              options={getArrowheadOptions(!!isRTL)}
+              value={getFormValue<Arrowhead | null>(
+                elements,
+                appState,
+                (element) =>
+                  isLinearElement(element) && canHaveArrowheads(element.type)
+                    ? element.endArrowhead
+                    : appState.currentItemEndArrowhead,
+                true,
+                appState.currentItemEndArrowhead,
+              )}
+              onChange={(value) => updateData({ position: "end", type: value })}
+              numberOfOptionsToAlwaysShow={4}
+            />
+          </div>
+        )}
       </fieldset>
     );
   },
diff --git a/packages/excalidraw/actions/actionZindex.tsx b/packages/excalidraw/actions/actionZindex.tsx
index 8eb5a50f2..2bd2f9cfc 100644
--- a/packages/excalidraw/actions/actionZindex.tsx
+++ b/packages/excalidraw/actions/actionZindex.tsx
@@ -7,6 +7,8 @@ import {
   moveAllRight,
 } from "@excalidraw/element/zindex";
 
+import { useContext } from "react";
+
 import {
   BringForwardIcon,
   BringToFrontIcon,
@@ -16,6 +18,8 @@ import {
 import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { register } from "./register";
 
 export const actionSendBackward = register({
@@ -36,16 +40,29 @@ export const actionSendBackward = register({
     event[KEYS.CTRL_OR_CMD] &&
     !event.shiftKey &&
     event.code === CODES.BRACKET_LEFT,
-  PanelComponent: ({ updateData, appState }) => (
-    <button
-      type="button"
-      className="zIndexButton"
-      onClick={() => updateData(null)}
-      title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
-    >
-      {SendBackwardIcon}
-    </button>
-  ),
+  PanelComponent: ({ updateData, appState }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.sendBackward")}`,
+        children: SendBackwardIcon,
+        name: "sendBackward",
+      });
+    }
+
+    return (
+      <button
+        type="button"
+        className="zIndexButton"
+        onClick={() => updateData(null)}
+        title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
+      >
+        {SendBackwardIcon}
+      </button>
+    );
+  },
 });
 
 export const actionBringForward = register({
@@ -66,16 +83,29 @@ export const actionBringForward = register({
     event[KEYS.CTRL_OR_CMD] &&
     !event.shiftKey &&
     event.code === CODES.BRACKET_RIGHT,
-  PanelComponent: ({ updateData, appState }) => (
-    <button
-      type="button"
-      className="zIndexButton"
-      onClick={() => updateData(null)}
-      title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
-    >
-      {BringForwardIcon}
-    </button>
-  ),
+  PanelComponent: ({ updateData, appState }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.bringForward")}`,
+        children: BringForwardIcon,
+        name: "bringForward",
+      });
+    }
+
+    return (
+      <button
+        type="button"
+        className="zIndexButton"
+        onClick={() => updateData(null)}
+        title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
+      >
+        {BringForwardIcon}
+      </button>
+    );
+  },
 });
 
 export const actionSendToBack = register({
@@ -99,20 +129,33 @@ export const actionSendToBack = register({
       : event[KEYS.CTRL_OR_CMD] &&
         event.shiftKey &&
         event.code === CODES.BRACKET_LEFT,
-  PanelComponent: ({ updateData, appState }) => (
-    <button
-      type="button"
-      className="zIndexButton"
-      onClick={() => updateData(null)}
-      title={`${t("labels.sendToBack")} — ${
-        isDarwin
-          ? getShortcutKey("CtrlOrCmd+Alt+[")
-          : getShortcutKey("CtrlOrCmd+Shift+[")
-      }`}
-    >
-      {SendToBackIcon}
-    </button>
-  ),
+  PanelComponent: ({ updateData, appState }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.sendToBack")}`,
+        children: SendToBackIcon,
+        name: "sendToBack",
+      });
+    }
+
+    return (
+      <button
+        type="button"
+        className="zIndexButton"
+        onClick={() => updateData(null)}
+        title={`${t("labels.sendToBack")} — ${
+          isDarwin
+            ? getShortcutKey("CtrlOrCmd+Alt+[")
+            : getShortcutKey("CtrlOrCmd+Shift+[")
+        }`}
+      >
+        {SendToBackIcon}
+      </button>
+    );
+  },
 });
 
 export const actionBringToFront = register({
@@ -137,18 +180,31 @@ export const actionBringToFront = register({
       : event[KEYS.CTRL_OR_CMD] &&
         event.shiftKey &&
         event.code === CODES.BRACKET_RIGHT,
-  PanelComponent: ({ updateData, appState }) => (
-    <button
-      type="button"
-      className="zIndexButton"
-      onClick={(event) => updateData(null)}
-      title={`${t("labels.bringToFront")} — ${
-        isDarwin
-          ? getShortcutKey("CtrlOrCmd+Alt+]")
-          : getShortcutKey("CtrlOrCmd+Shift+]")
-      }`}
-    >
-      {BringToFrontIcon}
-    </button>
-  ),
+  PanelComponent: ({ updateData, appState }) => {
+    const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return customOptions.pickerRenders.layerButtonRender({
+        onClick: () => updateData(null),
+        title: `${t("labels.bringToFront")}`,
+        children: BringToFrontIcon,
+        name: "bringToFront",
+      });
+    }
+
+    return (
+      <button
+        type="button"
+        className="zIndexButton"
+        onClick={(event) => updateData(null)}
+        title={`${t("labels.bringToFront")} — ${
+          isDarwin
+            ? getShortcutKey("CtrlOrCmd+Alt+]")
+            : getShortcutKey("CtrlOrCmd+Shift+]")
+        }`}
+      >
+        {BringToFrontIcon}
+      </button>
+    );
+  },
 });
diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts
index f37747aeb..aecbeb8de 100644
--- a/packages/excalidraw/actions/index.ts
+++ b/packages/excalidraw/actions/index.ts
@@ -20,6 +20,8 @@ export {
   actionChangeVerticalAlign,
 } from "./actionProperties";
 
+export { actionChangeBlur } from "./actionBlur";
+
 export {
   actionChangeViewBackgroundColor,
   actionClearCanvas,
diff --git a/packages/excalidraw/actions/manager.tsx b/packages/excalidraw/actions/manager.tsx
index 171bb5df7..8ec2586b9 100644
--- a/packages/excalidraw/actions/manager.tsx
+++ b/packages/excalidraw/actions/manager.tsx
@@ -160,7 +160,6 @@ export class ActionManager {
       const appState = this.getAppState();
       const updateData = (formState?: any) => {
         trackAction(action, "ui", appState, elements, this.app, formState);
-
         this.updater(
           action.perform(
             this.getElementsIncludingDeleted(),
diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts
index c63a122e0..ddcda87d3 100644
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -140,7 +140,8 @@ export type ActionName =
   | "linkToElement"
   | "cropEditor"
   | "wrapSelectionInFrame"
-  | "toggleLassoTool";
+  | "toggleLassoTool"
+  | "changeBlur";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index a75745f2a..046ab1c73 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -33,6 +33,7 @@ export const getDefaultAppState = (): Omit<
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
     currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
+    currentItemBlur: 50,
     currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
     currentItemStartArrowhead: null,
     currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
@@ -161,6 +162,7 @@ const APP_STATE_STORAGE_CONF = (<
     server: false,
   },
   currentItemOpacity: { browser: true, export: false, server: false },
+  currentItemBlur: { browser: true, export: false, server: false },
   currentItemRoughness: { browser: true, export: false, server: false },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index 3a7df37a8..37afc60c7 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useState } from "react";
+import { useState, useContext } from "react";
 
 import {
   CLASSES,
@@ -21,7 +21,12 @@ import {
   isTextElement,
 } from "@excalidraw/element/typeChecks";
 
-import { hasStrokeColor, toolIsArrow } from "@excalidraw/element/comparisons";
+import {
+  canChangeBlur,
+  canChangeLayer,
+  hasStrokeColor,
+  toolIsArrow,
+} from "@excalidraw/element/comparisons";
 
 import type {
   ExcalidrawElement,
@@ -46,6 +51,8 @@ import {
   hasStrokeWidth,
 } from "../scene";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { SHAPES } from "./shapes";
 
 import "./Actions.scss";
@@ -86,6 +93,7 @@ export const canChangeStrokeColor = (
     (hasStrokeColor(appState.activeTool.type) &&
       commonSelectedType !== "image" &&
       commonSelectedType !== "frame" &&
+      commonSelectedType !== "blur" &&
       commonSelectedType !== "magicframe") ||
     targetElements.some((element) => hasStrokeColor(element.type))
   );
@@ -112,6 +120,8 @@ export const SelectedShapeActions = ({
   renderAction: ActionManager["renderAction"];
   app: AppClassProperties;
 }) => {
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
   const targetElements = getTargetElements(elementsMap, appState);
 
   let isSingleElementBoundContainer = false;
@@ -153,6 +163,12 @@ export const SelectedShapeActions = ({
   const showAlignActions =
     !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
 
+  const showLayerActions =
+    appState.activeTool.type === "selection"
+      ? !targetElements.some((element) => !canChangeLayer(element.type))
+      : canChangeLayer(appState.activeTool.type) ||
+        targetElements.some((element) => canChangeLayer(element.type));
+
   return (
     <div className="panelColumn">
       <div>
@@ -208,72 +224,138 @@ export const SelectedShapeActions = ({
         <>{renderAction("changeArrowhead")}</>
       )}
 
+      {(canChangeBlur(appState.activeTool.type) ||
+        targetElements.some((element) => canChangeBlur(element.type))) &&
+        renderAction("changeBlur")}
+
       {renderAction("changeOpacity")}
 
-      <fieldset>
-        <legend>{t("labels.layers")}</legend>
-        <div className="buttonList">
-          {renderAction("sendToBack")}
-          {renderAction("sendBackward")}
-          {renderAction("bringForward")}
-          {renderAction("bringToFront")}
-        </div>
-      </fieldset>
+      {showLayerActions && (
+        <fieldset>
+          <legend>{t("labels.layers")}</legend>
+          {!customOptions?.pickerRenders?.ButtonList && (
+            <div className={"buttonList"}>
+              {renderAction("sendToBack")}
+              {renderAction("sendBackward")}
+              {renderAction("bringForward")}
+              {renderAction("bringToFront")}
+            </div>
+          )}
+          {customOptions?.pickerRenders?.ButtonList && (
+            <customOptions.pickerRenders.ButtonList>
+              {renderAction("sendToBack")}
+              {renderAction("sendBackward")}
+              {renderAction("bringForward")}
+              {renderAction("bringToFront")}
+            </customOptions.pickerRenders.ButtonList>
+          )}
+        </fieldset>
+      )}
 
       {showAlignActions && !isSingleElementBoundContainer && (
         <fieldset>
           <legend>{t("labels.align")}</legend>
-          <div className="buttonList">
-            {
-              // swap this order for RTL so the button positions always match their action
-              // (i.e. the leftmost button aligns left)
-            }
-            {isRTL ? (
-              <>
-                {renderAction("alignRight")}
-                {renderAction("alignHorizontallyCentered")}
-                {renderAction("alignLeft")}
-              </>
-            ) : (
-              <>
-                {renderAction("alignLeft")}
-                {renderAction("alignHorizontallyCentered")}
-                {renderAction("alignRight")}
-              </>
-            )}
-            {targetElements.length > 2 &&
-              renderAction("distributeHorizontally")}
-            {/* breaks the row ˇˇ */}
-            <div style={{ flexBasis: "100%", height: 0 }} />
-            <div
-              style={{
-                display: "flex",
-                flexWrap: "wrap",
-                gap: ".5rem",
-                marginTop: "-0.5rem",
-              }}
-            >
-              {renderAction("alignTop")}
-              {renderAction("alignVerticallyCentered")}
-              {renderAction("alignBottom")}
+          {!customOptions?.pickerRenders?.ButtonList && (
+            <div className="buttonList">
+              {
+                // swap this order for RTL so the button positions always match their action
+                // (i.e. the leftmost button aligns left)
+              }
+              {isRTL ? (
+                <>
+                  {renderAction("alignRight")}
+                  {renderAction("alignHorizontallyCentered")}
+                  {renderAction("alignLeft")}
+                </>
+              ) : (
+                <>
+                  {renderAction("alignLeft")}
+                  {renderAction("alignHorizontallyCentered")}
+                  {renderAction("alignRight")}
+                </>
+              )}
               {targetElements.length > 2 &&
-                renderAction("distributeVertically")}
+                renderAction("distributeHorizontally")}
+              {/* breaks the row ˇˇ */}
+              <div style={{ flexBasis: "100%", height: 0 }} />
+              <div
+                style={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: ".5rem",
+                  marginTop: "-0.5rem",
+                }}
+              >
+                {renderAction("alignTop")}
+                {renderAction("alignVerticallyCentered")}
+                {renderAction("alignBottom")}
+                {targetElements.length > 2 &&
+                  renderAction("distributeVertically")}
+              </div>
             </div>
-          </div>
+          )}
+          {customOptions?.pickerRenders?.ButtonList && (
+            <>
+              <customOptions.pickerRenders.ButtonList>
+                {
+                  // swap this order for RTL so the button positions always match their action
+                  // (i.e. the leftmost button aligns left)
+                }
+                {isRTL ? (
+                  <>
+                    {renderAction("alignRight")}
+                    {renderAction("alignHorizontallyCentered")}
+                    {renderAction("alignLeft")}
+                  </>
+                ) : (
+                  <>
+                    {renderAction("alignLeft")}
+                    {renderAction("alignHorizontallyCentered")}
+                    {renderAction("alignRight")}
+                  </>
+                )}
+                {targetElements.length > 2 &&
+                  renderAction("distributeHorizontally")}
+              </customOptions.pickerRenders.ButtonList>
+              <customOptions.pickerRenders.ButtonList>
+                {renderAction("alignTop")}
+                {renderAction("alignVerticallyCentered")}
+                {renderAction("alignBottom")}
+
+                {targetElements.length > 2 &&
+                  renderAction("distributeVertically")}
+              </customOptions.pickerRenders.ButtonList>
+            </>
+          )}
         </fieldset>
       )}
       {!isEditingTextOrNewElement && targetElements.length > 0 && (
         <fieldset>
           <legend>{t("labels.actions")}</legend>
-          <div className="buttonList">
-            {!device.editor.isMobile && renderAction("duplicateSelection")}
-            {!device.editor.isMobile && renderAction("deleteSelectedElements")}
-            {renderAction("group")}
-            {renderAction("ungroup")}
-            {showLinkIcon && renderAction("hyperlink")}
-            {showCropEditorAction && renderAction("cropEditor")}
-            {showLineEditorAction && renderAction("toggleLinearEditor")}
-          </div>
+          {!customOptions?.pickerRenders?.ButtonList && (
+            <div className="buttonList">
+              {!device.editor.isMobile && renderAction("duplicateSelection")}
+              {!device.editor.isMobile &&
+                renderAction("deleteSelectedElements")}
+              {renderAction("group")}
+              {renderAction("ungroup")}
+              {showLinkIcon && renderAction("hyperlink")}
+              {showCropEditorAction && renderAction("cropEditor")}
+              {showLineEditorAction && renderAction("toggleLinearEditor")}
+            </div>
+          )}
+          {customOptions?.pickerRenders?.ButtonList && (
+            <customOptions.pickerRenders.ButtonList>
+              {!device.editor.isMobile && renderAction("duplicateSelection")}
+              {!device.editor.isMobile &&
+                renderAction("deleteSelectedElements")}
+              {renderAction("group")}
+              {renderAction("ungroup")}
+              {showLinkIcon && renderAction("hyperlink")}
+              {showCropEditorAction && renderAction("cropEditor")}
+              {showLineEditorAction && renderAction("toggleLinearEditor")}
+            </customOptions.pickerRenders.ButtonList>
+          )}
         </fieldset>
       )}
     </div>
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 0381a2e39..e6637ab87 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -100,6 +100,10 @@ import {
   arrayToMap,
   type EXPORT_IMAGE_TYPES,
   randomInteger,
+  setShouldResizeFromCenter,
+  setShouldMaintainAspectRatio,
+  setShouldRotateWithDiscreteAngle,
+  setShouldSnapping,
 } from "@excalidraw/common";
 
 import {
@@ -136,6 +140,7 @@ import {
   newLinearElement,
   newTextElement,
   refreshTextDimensions,
+  newBlurElement,
 } from "@excalidraw/element/newElement";
 
 import {
@@ -643,6 +648,9 @@ class App extends React.Component<AppProps, AppState> {
   public id: string;
   private store: Store;
   private history: History;
+
+  public getHistory = () => this.history;
+
   public excalidrawContainerValue: {
     container: HTMLDivElement | null;
     id: string;
@@ -804,7 +812,7 @@ class App extends React.Component<AppProps, AppState> {
     };
 
     this.fonts = new Fonts(this.scene);
-    this.history = new History();
+    this.history = new History(this.props.customOptions?.onHistoryChange);
 
     this.actionManager.registerAll(actions);
     this.actionManager.registerAction(
@@ -813,6 +821,26 @@ class App extends React.Component<AppProps, AppState> {
     this.actionManager.registerAction(
       createRedoAction(this.history, this.store),
     );
+
+    // 初始化一些配置
+    if (this.props.customOptions?.shouldResizeFromCenter) {
+      setShouldResizeFromCenter(
+        this.props.customOptions.shouldResizeFromCenter,
+      );
+    }
+    if (this.props.customOptions?.shouldMaintainAspectRatio) {
+      setShouldMaintainAspectRatio(
+        this.props.customOptions.shouldMaintainAspectRatio,
+      );
+    }
+    if (this.props.customOptions?.shouldRotateWithDiscreteAngle) {
+      setShouldRotateWithDiscreteAngle(
+        this.props.customOptions.shouldRotateWithDiscreteAngle,
+      );
+    }
+    if (this.props.customOptions?.shouldSnapping) {
+      setShouldSnapping(this.props.customOptions.shouldSnapping);
+    }
   }
 
   private onWindowMessage(event: MessageEvent) {
@@ -1651,212 +1679,218 @@ class App extends React.Component<AppProps, AppState> {
                           generateLinkForSelection={
                             this.props.generateLinkForSelection
                           }
+                          customOptions={this.props.customOptions}
                         >
                           {this.props.children}
                         </LayerUI>
 
-                        <div className="excalidraw-textEditorContainer" />
-                        <div className="excalidraw-contextMenuContainer" />
-                        <div className="excalidraw-eye-dropper-container" />
-                        <SVGLayer
-                          trails={[
-                            this.laserTrails,
-                            this.lassoTrail,
-                            this.eraserTrail,
-                          ]}
-                        />
-                        {selectedElements.length === 1 &&
-                          this.state.openDialog?.name !==
-                            "elementLinkSelector" &&
-                          this.state.showHyperlinkPopup && (
-                            <Hyperlink
-                              key={firstSelectedElement.id}
-                              element={firstSelectedElement}
-                              scene={this.scene}
-                              setAppState={this.setAppState}
-                              onLinkOpen={this.props.onLinkOpen}
-                              setToast={this.setToast}
-                              updateEmbedValidationStatus={
-                                this.updateEmbedValidationStatus
-                              }
+                        <div className="excalidraw-container-inner">
+                          <div className="excalidraw-textEditorContainer" />
+                          <div className="excalidraw-contextMenuContainer" />
+                          <div className="excalidraw-eye-dropper-container" />
+                          <SVGLayer
+                            trails={[
+                              this.laserTrails,
+                              this.lassoTrail,
+                              this.eraserTrail,
+                            ]}
+                          />
+                          {selectedElements.length === 1 &&
+                            this.state.openDialog?.name !==
+                              "elementLinkSelector" &&
+                            this.state.showHyperlinkPopup && (
+                              <Hyperlink
+                                key={firstSelectedElement.id}
+                                element={firstSelectedElement}
+                                scene={this.scene}
+                                setAppState={this.setAppState}
+                                onLinkOpen={this.props.onLinkOpen}
+                                setToast={this.setToast}
+                                updateEmbedValidationStatus={
+                                  this.updateEmbedValidationStatus
+                                }
+                              />
+                            )}
+                          {this.props.aiEnabled !== false &&
+                            selectedElements.length === 1 &&
+                            isMagicFrameElement(firstSelectedElement) && (
+                              <ElementCanvasButtons
+                                element={firstSelectedElement}
+                                elementsMap={elementsMap}
+                              >
+                                <ElementCanvasButton
+                                  title={t("labels.convertToCode")}
+                                  icon={MagicIcon}
+                                  checked={false}
+                                  onChange={() =>
+                                    this.onMagicFrameGenerate(
+                                      firstSelectedElement,
+                                      "button",
+                                    )
+                                  }
+                                />
+                              </ElementCanvasButtons>
+                            )}
+                          {selectedElements.length === 1 &&
+                            isIframeElement(firstSelectedElement) &&
+                            firstSelectedElement.customData?.generationData
+                              ?.status === "done" && (
+                              <ElementCanvasButtons
+                                element={firstSelectedElement}
+                                elementsMap={elementsMap}
+                              >
+                                <ElementCanvasButton
+                                  title={t("labels.copySource")}
+                                  icon={copyIcon}
+                                  checked={false}
+                                  onChange={() =>
+                                    this.onIframeSrcCopy(firstSelectedElement)
+                                  }
+                                />
+                                <ElementCanvasButton
+                                  title="Enter fullscreen"
+                                  icon={fullscreenIcon}
+                                  checked={false}
+                                  onChange={() => {
+                                    const iframe =
+                                      this.getHTMLIFrameElement(
+                                        firstSelectedElement,
+                                      );
+                                    if (iframe) {
+                                      try {
+                                        iframe.requestFullscreen();
+                                        this.setState({
+                                          activeEmbeddable: {
+                                            element: firstSelectedElement,
+                                            state: "active",
+                                          },
+                                          selectedElementIds: {
+                                            [firstSelectedElement.id]: true,
+                                          },
+                                          newElement: null,
+                                          selectionElement: null,
+                                        });
+                                      } catch (err: any) {
+                                        console.warn(err);
+                                        this.setState({
+                                          errorMessage:
+                                            "Couldn't enter fullscreen",
+                                        });
+                                      }
+                                    }
+                                  }}
+                                />
+                              </ElementCanvasButtons>
+                            )}
+                          {this.state.toast !== null && (
+                            <Toast
+                              message={this.state.toast.message}
+                              onClose={() => this.setToast(null)}
+                              duration={this.state.toast.duration}
+                              closable={this.state.toast.closable}
                             />
                           )}
-                        {this.props.aiEnabled !== false &&
-                          selectedElements.length === 1 &&
-                          isMagicFrameElement(firstSelectedElement) && (
-                            <ElementCanvasButtons
-                              element={firstSelectedElement}
-                              elementsMap={elementsMap}
-                            >
-                              <ElementCanvasButton
-                                title={t("labels.convertToCode")}
-                                icon={MagicIcon}
-                                checked={false}
-                                onChange={() =>
-                                  this.onMagicFrameGenerate(
-                                    firstSelectedElement,
-                                    "button",
-                                  )
-                                }
-                              />
-                            </ElementCanvasButtons>
-                          )}
-                        {selectedElements.length === 1 &&
-                          isIframeElement(firstSelectedElement) &&
-                          firstSelectedElement.customData?.generationData
-                            ?.status === "done" && (
-                            <ElementCanvasButtons
-                              element={firstSelectedElement}
-                              elementsMap={elementsMap}
-                            >
-                              <ElementCanvasButton
-                                title={t("labels.copySource")}
-                                icon={copyIcon}
-                                checked={false}
-                                onChange={() =>
-                                  this.onIframeSrcCopy(firstSelectedElement)
-                                }
-                              />
-                              <ElementCanvasButton
-                                title="Enter fullscreen"
-                                icon={fullscreenIcon}
-                                checked={false}
-                                onChange={() => {
-                                  const iframe =
-                                    this.getHTMLIFrameElement(
-                                      firstSelectedElement,
-                                    );
-                                  if (iframe) {
-                                    try {
-                                      iframe.requestFullscreen();
-                                      this.setState({
-                                        activeEmbeddable: {
-                                          element: firstSelectedElement,
-                                          state: "active",
-                                        },
-                                        selectedElementIds: {
-                                          [firstSelectedElement.id]: true,
-                                        },
-                                        newElement: null,
-                                        selectionElement: null,
-                                      });
-                                    } catch (err: any) {
-                                      console.warn(err);
-                                      this.setState({
-                                        errorMessage:
-                                          "Couldn't enter fullscreen",
-                                      });
-                                    }
-                                  }
+                          {this.state.contextMenu &&
+                            !this.props.customOptions?.hideContextMenu && (
+                              <ContextMenu
+                                items={this.state.contextMenu.items}
+                                top={this.state.contextMenu.top}
+                                left={this.state.contextMenu.left}
+                                actionManager={this.actionManager}
+                                onClose={(callback) => {
+                                  this.setState({ contextMenu: null }, () => {
+                                    this.focusContainer();
+                                    callback?.();
+                                  });
                                 }}
                               />
-                            </ElementCanvasButtons>
-                          )}
-                        {this.state.toast !== null && (
-                          <Toast
-                            message={this.state.toast.message}
-                            onClose={() => this.setToast(null)}
-                            duration={this.state.toast.duration}
-                            closable={this.state.toast.closable}
-                          />
-                        )}
-                        {this.state.contextMenu && (
-                          <ContextMenu
-                            items={this.state.contextMenu.items}
-                            top={this.state.contextMenu.top}
-                            left={this.state.contextMenu.left}
-                            actionManager={this.actionManager}
-                            onClose={(callback) => {
-                              this.setState({ contextMenu: null }, () => {
-                                this.focusContainer();
-                                callback?.();
-                              });
-                            }}
-                          />
-                        )}
-                        <StaticCanvas
-                          canvas={this.canvas}
-                          rc={this.rc}
-                          elementsMap={elementsMap}
-                          allElementsMap={allElementsMap}
-                          visibleElements={visibleElements}
-                          sceneNonce={sceneNonce}
-                          selectionNonce={
-                            this.state.selectionElement?.versionNonce
-                          }
-                          scale={window.devicePixelRatio}
-                          appState={this.state}
-                          renderConfig={{
-                            imageCache: this.imageCache,
-                            isExporting: false,
-                            renderGrid: isGridModeEnabled(this),
-                            canvasBackgroundColor:
-                              this.state.viewBackgroundColor,
-                            embedsValidationStatus: this.embedsValidationStatus,
-                            elementsPendingErasure: this.elementsPendingErasure,
-                            pendingFlowchartNodes:
-                              this.flowChartCreator.pendingNodes,
-                          }}
-                        />
-                        {this.state.newElement && (
-                          <NewElementCanvas
-                            appState={this.state}
-                            scale={window.devicePixelRatio}
+                            )}
+                          <StaticCanvas
+                            canvas={this.canvas}
                             rc={this.rc}
                             elementsMap={elementsMap}
                             allElementsMap={allElementsMap}
+                            visibleElements={visibleElements}
+                            sceneNonce={sceneNonce}
+                            selectionNonce={
+                              this.state.selectionElement?.versionNonce
+                            }
+                            scale={window.devicePixelRatio}
+                            appState={this.state}
                             renderConfig={{
                               imageCache: this.imageCache,
                               isExporting: false,
-                              renderGrid: false,
+                              renderGrid: isGridModeEnabled(this),
                               canvasBackgroundColor:
                                 this.state.viewBackgroundColor,
                               embedsValidationStatus:
                                 this.embedsValidationStatus,
                               elementsPendingErasure:
                                 this.elementsPendingErasure,
-                              pendingFlowchartNodes: null,
+                              pendingFlowchartNodes:
+                                this.flowChartCreator.pendingNodes,
                             }}
                           />
-                        )}
-                        <InteractiveCanvas
-                          containerRef={this.excalidrawContainerRef}
-                          canvas={this.interactiveCanvas}
-                          elementsMap={elementsMap}
-                          visibleElements={visibleElements}
-                          allElementsMap={allElementsMap}
-                          selectedElements={selectedElements}
-                          sceneNonce={sceneNonce}
-                          selectionNonce={
-                            this.state.selectionElement?.versionNonce
-                          }
-                          scale={window.devicePixelRatio}
-                          appState={this.state}
-                          renderScrollbars={
-                            this.props.renderScrollbars === true
-                          }
-                          device={this.device}
-                          renderInteractiveSceneCallback={
-                            this.renderInteractiveSceneCallback
-                          }
-                          handleCanvasRef={this.handleInteractiveCanvasRef}
-                          onContextMenu={this.handleCanvasContextMenu}
-                          onPointerMove={this.handleCanvasPointerMove}
-                          onPointerUp={this.handleCanvasPointerUp}
-                          onPointerCancel={this.removePointer}
-                          onTouchMove={this.handleTouchMove}
-                          onPointerDown={this.handleCanvasPointerDown}
-                          onDoubleClick={this.handleCanvasDoubleClick}
-                        />
-                        {this.state.userToFollow && (
-                          <FollowMode
-                            width={this.state.width}
-                            height={this.state.height}
-                            userToFollow={this.state.userToFollow}
-                            onDisconnect={this.maybeUnfollowRemoteUser}
+                          {this.state.newElement && (
+                            <NewElementCanvas
+                              appState={this.state}
+                              scale={window.devicePixelRatio}
+                              rc={this.rc}
+                              elementsMap={elementsMap}
+                              allElementsMap={allElementsMap}
+                              renderConfig={{
+                                imageCache: this.imageCache,
+                                isExporting: false,
+                                renderGrid: false,
+                                canvasBackgroundColor:
+                                  this.state.viewBackgroundColor,
+                                embedsValidationStatus:
+                                  this.embedsValidationStatus,
+                                elementsPendingErasure:
+                                  this.elementsPendingErasure,
+                                pendingFlowchartNodes: null,
+                              }}
+                            />
+                          )}
+                          <InteractiveCanvas
+                            containerRef={this.excalidrawContainerRef}
+                            canvas={this.interactiveCanvas}
+                            elementsMap={elementsMap}
+                            visibleElements={visibleElements}
+                            allElementsMap={allElementsMap}
+                            selectedElements={selectedElements}
+                            sceneNonce={sceneNonce}
+                            selectionNonce={
+                              this.state.selectionElement?.versionNonce
+                            }
+                            scale={window.devicePixelRatio}
+                            appState={this.state}
+                            renderScrollbars={
+                              this.props.renderScrollbars === true
+                            }
+                            device={this.device}
+                            renderInteractiveSceneCallback={
+                              this.renderInteractiveSceneCallback
+                            }
+                            handleCanvasRef={this.handleInteractiveCanvasRef}
+                            onContextMenu={this.handleCanvasContextMenu}
+                            onPointerMove={this.handleCanvasPointerMove}
+                            onPointerUp={this.handleCanvasPointerUp}
+                            onPointerCancel={this.removePointer}
+                            onTouchMove={this.handleTouchMove}
+                            onPointerDown={this.handleCanvasPointerDown}
+                            onDoubleClick={this.handleCanvasDoubleClick}
                           />
-                        )}
-                        {this.renderFrameNames()}
+                          {this.state.userToFollow && (
+                            <FollowMode
+                              width={this.state.width}
+                              height={this.state.height}
+                              userToFollow={this.state.userToFollow}
+                              onDisconnect={this.maybeUnfollowRemoteUser}
+                            />
+                          )}
+                          {this.renderFrameNames()}
+                        </div>
                       </ExcalidrawActionManagerContext.Provider>
                       {this.renderEmbeddables()}
                     </ExcalidrawElementsContext.Provider>
@@ -2252,7 +2286,7 @@ class App extends React.Component<AppProps, AppState> {
       this.setState((prevAppState) => {
         const actionAppState = actionResult.appState || {};
 
-        return {
+        const res = {
           ...prevAppState,
           ...actionAppState,
           // NOTE this will prevent opening context menu using an action
@@ -2266,6 +2300,8 @@ class App extends React.Component<AppProps, AppState> {
           name,
           errorMessage,
         };
+
+        return res;
       });
 
       didUpdate = true;
@@ -2973,6 +3009,10 @@ class App extends React.Component<AppProps, AppState> {
   // Copy/paste
 
   private onCut = withBatchedUpdates((event: ClipboardEvent) => {
+    if (this.props.customOptions?.disableKeyEvents) {
+      return;
+    }
+
     const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
       document.activeElement,
     );
@@ -4109,6 +4149,10 @@ class App extends React.Component<AppProps, AppState> {
   // Input handling
   private onKeyDown = withBatchedUpdates(
     (event: React.KeyboardEvent | KeyboardEvent) => {
+      if (this.props.customOptions?.disableKeyEvents) {
+        return;
+      }
+
       // normalize `event.key` when CapsLock is pressed #2372
 
       if (
@@ -5986,7 +6030,12 @@ class App extends React.Component<AppProps, AppState> {
         let dxFromLastCommitted = gridX - rx - lastCommittedX;
         let dyFromLastCommitted = gridY - ry - lastCommittedY;
 
-        if (shouldRotateWithDiscreteAngle(event)) {
+        if (
+          (
+            this.props.customOptions?.shouldRotateWithDiscreteAngle ??
+            shouldRotateWithDiscreteAngle
+          )(event)
+        ) {
           ({ width: dxFromLastCommitted, height: dyFromLastCommitted } =
             getLockedLinearCursorAlignSize(
               // actual coordinate of the last committed point
@@ -6240,6 +6289,7 @@ class App extends React.Component<AppProps, AppState> {
 
     this.elementsPendingErasure = new Set(elementsToErase);
     this.triggerRender();
+    this.props.customOptions?.onHandleEraser?.(this.elementsPendingErasure);
   };
 
   // set touch moving for mobile context menu
@@ -7820,7 +7870,8 @@ class App extends React.Component<AppProps, AppState> {
       | "diamond"
       | "ellipse"
       | "iframe"
-      | "embeddable",
+      | "embeddable"
+      | "blur",
   ) {
     return this.state.currentItemRoundness === "round"
       ? {
@@ -7832,7 +7883,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private createGenericElementOnPointerDown = (
-    elementType: ExcalidrawGenericElement["type"] | "embeddable",
+    elementType: ExcalidrawGenericElement["type"] | "embeddable" | "blur",
     pointerDownState: PointerDownState,
   ): void => {
     const [gridX, gridY] = getGridPoint(
@@ -7869,6 +7920,11 @@ class App extends React.Component<AppProps, AppState> {
         type: "embeddable",
         ...baseElementAttributes,
       });
+    } else if (elementType === "blur") {
+      element = newBlurElement({
+        ...baseElementAttributes,
+        blur: this.state.currentItemBlur,
+      });
     } else {
       element = newElement({
         type: elementType,
@@ -8653,7 +8709,13 @@ class App extends React.Component<AppProps, AppState> {
           let dx = gridX - newElement.x;
           let dy = gridY - newElement.y;
 
-          if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
+          if (
+            (
+              this.props.customOptions?.shouldRotateWithDiscreteAngle ??
+              shouldRotateWithDiscreteAngle
+            )(event) &&
+            points.length === 2
+          ) {
             ({ width: dx, height: dy } = getLockedLinearCursorAlignSize(
               newElement.x,
               newElement.y,
@@ -10578,7 +10640,7 @@ class App extends React.Component<AppProps, AppState> {
         width: distance(pointerDownState.origin.x, pointerCoords.x),
         height: distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio: shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter: false,
+        shouldResizeFromCenter: shouldResizeFromCenter(event),
         scene: this.scene,
         zoom: this.state.zoom.value,
         informMutation: false,
@@ -10868,11 +10930,16 @@ class App extends React.Component<AppProps, AppState> {
         transformHandleType,
         selectedElements,
         this.scene,
-        shouldRotateWithDiscreteAngle(event),
+        (
+          this.props.customOptions?.shouldRotateWithDiscreteAngle ??
+          shouldRotateWithDiscreteAngle
+        )(event),
         shouldResizeFromCenter(event),
-        selectedElements.some((element) => isImageElement(element))
-          ? !shouldMaintainAspectRatio(event)
-          : shouldMaintainAspectRatio(event),
+        selectedElements.some((element) =>
+          isImageElement(element)
+            ? !shouldMaintainAspectRatio(event)
+            : shouldMaintainAspectRatio(event),
+        ),
         resizeX,
         resizeY,
         pointerDownState.resize.center.x,
diff --git a/packages/excalidraw/components/ButtonIconSelect.tsx b/packages/excalidraw/components/ButtonIconSelect.tsx
index 45665e4ca..35391af07 100644
--- a/packages/excalidraw/components/ButtonIconSelect.tsx
+++ b/packages/excalidraw/components/ButtonIconSelect.tsx
@@ -1,37 +1,53 @@
 import clsx from "clsx";
 
+import { useContext, type JSX } from "react";
+
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import { ButtonIcon } from "./ButtonIcon";
 
-import type { JSX } from "react";
+export type ButtonIconSelectProps<T> = {
+  options: {
+    value: T;
+    text: string;
+    icon: JSX.Element;
+    testId?: string;
+    /** if not supplied, defaults to value identity check */
+    active?: boolean;
+  }[];
+  value: T | null;
+  type?: "radio" | "button";
+} & (
+  | { type?: "radio"; group: string; onChange: (value: T) => void }
+  | {
+      type: "button";
+      onClick: (
+        value: T,
+        event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+      ) => void;
+    }
+);
 
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
 export const ButtonIconSelect = <T extends Object>(
-  props: {
-    options: {
-      value: T;
-      text: string;
-      icon: JSX.Element;
-      testId?: string;
-      /** if not supplied, defaults to value identity check */
-      active?: boolean;
-    }[];
-    value: T | null;
-    type?: "radio" | "button";
-  } & (
-    | { type?: "radio"; group: string; onChange: (value: T) => void }
-    | {
-        type: "button";
-        onClick: (
-          value: T,
-          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => void;
-      }
-  ),
-) => (
-  <div className="buttonList">
-    {props.options.map((option) =>
-      props.type === "button" ? (
-        <ButtonIcon
+  props: ButtonIconSelectProps<T>,
+) => {
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+  if (customOptions?.pickerRenders?.buttonIconSelectRender) {
+    return customOptions.pickerRenders.buttonIconSelectRender(props);
+  }
+
+  const renderButtonIcon = (
+    option: ButtonIconSelectProps<T>["options"][number],
+  ) => {
+    if (props.type !== "button") {
+      return null;
+    }
+
+    if (customOptions?.pickerRenders?.CustomButtonIcon) {
+      return (
+        <customOptions.pickerRenders.CustomButtonIcon
           key={option.text}
           icon={option.icon}
           title={option.text}
@@ -39,22 +55,66 @@ export const ButtonIconSelect = <T extends Object>(
           active={option.active ?? props.value === option.value}
           onClick={(event) => props.onClick(option.value, event)}
         />
-      ) : (
-        <label
-          key={option.text}
-          className={clsx({ active: props.value === option.value })}
-          title={option.text}
-        >
-          <input
-            type="radio"
-            name={props.group}
-            onChange={() => props.onChange(option.value)}
-            checked={props.value === option.value}
-            data-testid={option.testId}
-          />
-          {option.icon}
-        </label>
-      ),
-    )}
-  </div>
-);
+      );
+    }
+    return (
+      <ButtonIcon
+        key={option.text}
+        icon={option.icon}
+        title={option.text}
+        testId={option.testId}
+        active={option.active ?? props.value === option.value}
+        onClick={(event) => props.onClick(option.value, event)}
+      />
+    );
+  };
+
+  const renderRadioButtonIcon = (
+    option: ButtonIconSelectProps<T>["options"][number],
+  ) => {
+    if (props.type === "button") {
+      return null;
+    }
+
+    if (customOptions?.pickerRenders?.buttonIconSelectRadioRender) {
+      return customOptions.pickerRenders.buttonIconSelectRadioRender({
+        key: option.text,
+        active: props.value === option.value,
+        title: option.text,
+        name: props.group,
+        onChange: () => props.onChange(option.value),
+        checked: props.value === option.value,
+        dataTestid: option.testId ?? "",
+        children: option.icon,
+        value: option.value,
+      });
+    }
+
+    return (
+      <label
+        key={option.text}
+        className={clsx({ active: props.value === option.value })}
+        title={option.text}
+      >
+        <input
+          type="radio"
+          name={props.group}
+          onChange={() => props.onChange(option.value)}
+          checked={props.value === option.value}
+          data-testid={option.testId}
+        />
+        {option.icon}
+      </label>
+    );
+  };
+
+  return (
+    <div className="buttonList">
+      {props.options.map((option) =>
+        props.type === "button"
+          ? renderButtonIcon(option)
+          : renderRadioButtonIcon(option),
+      )}
+    </div>
+  );
+};
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index eb6d82d9e..c10008f92 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -1,6 +1,6 @@
 import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
 
 import {
   COLOR_OUTLINE_CONTRAST_THRESHOLD,
@@ -19,6 +19,11 @@ import { ButtonSeparator } from "../ButtonSeparator";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
 
+import {
+  ExcalidrawPropsCustomOptionsContext,
+  type AppState,
+} from "../../types";
+
 import { ColorInput } from "./ColorInput";
 import { Picker } from "./Picker";
 import PickerHeading from "./PickerHeading";
@@ -29,8 +34,6 @@ import "./ColorPicker.scss";
 
 import type { ColorPickerType } from "./colorPickerUtils";
 
-import type { AppState } from "../../types";
-
 const isValidColor = (color: string) => {
   const style = new Option().style;
   style.color = color;
@@ -220,6 +223,46 @@ export const ColorPicker = ({
   updateData,
   appState,
 }: ColorPickerProps) => {
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+  const renderPopover = () => {
+    if (customOptions?.pickerRenders?.colorPickerPopoverRender) {
+      return customOptions.pickerRenders.colorPickerPopoverRender({
+        color,
+        label,
+        type,
+        onChange,
+        elements,
+        palette,
+        updateData,
+      });
+    }
+
+    return (
+      <Popover.Root
+        open={appState.openPopup === type}
+        onOpenChange={(open) => {
+          updateData({ openPopup: open ? type : null });
+        }}
+      >
+        {/* serves as an active color indicator as well */}
+        <ColorPickerTrigger color={color} label={label} type={type} />
+        {/* popup content */}
+        {appState.openPopup === type && (
+          <ColorPickerPopupContent
+            type={type}
+            color={color}
+            onChange={onChange}
+            label={label}
+            elements={elements}
+            palette={palette}
+            updateData={updateData}
+          />
+        )}
+      </Popover.Root>
+    );
+  };
+
   return (
     <div>
       <div role="dialog" aria-modal="true" className="color-picker-container">
@@ -230,27 +273,7 @@ export const ColorPicker = ({
           topPicks={topPicks}
         />
         <ButtonSeparator />
-        <Popover.Root
-          open={appState.openPopup === type}
-          onOpenChange={(open) => {
-            updateData({ openPopup: open ? type : null });
-          }}
-        >
-          {/* serves as an active color indicator as well */}
-          <ColorPickerTrigger color={color} label={label} type={type} />
-          {/* popup content */}
-          {appState.openPopup === type && (
-            <ColorPickerPopupContent
-              type={type}
-              color={color}
-              onChange={onChange}
-              label={label}
-              elements={elements}
-              palette={palette}
-              updateData={updateData}
-            />
-          )}
-        </Popover.Root>
+        {renderPopover()}
       </div>
     </div>
   );
diff --git a/packages/excalidraw/components/ColorPicker/TopPicks.tsx b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
index 8531172fb..c88bfe31e 100644
--- a/packages/excalidraw/components/ColorPicker/TopPicks.tsx
+++ b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
@@ -7,10 +7,13 @@ import {
   DEFAULT_ELEMENT_STROKE_PICKS,
 } from "@excalidraw/common";
 
+import { useContext } from "react";
+
+import { ExcalidrawPropsCustomOptionsContext } from "@excalidraw/excalidraw/types";
+
 import { isColorDark } from "./colorPickerUtils";
 
 import type { ColorPickerType } from "./colorPickerUtils";
-
 interface TopPicksProps {
   onChange: (color: string) => void;
   type: ColorPickerType;
@@ -24,13 +27,19 @@ export const TopPicks = ({
   activeColor,
   topPicks,
 }: TopPicksProps) => {
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
   let colors;
   if (type === "elementStroke") {
-    colors = DEFAULT_ELEMENT_STROKE_PICKS;
+    colors =
+      customOptions?.pickerRenders?.elementStrokeColors ??
+      DEFAULT_ELEMENT_STROKE_PICKS;
   }
 
   if (type === "elementBackground") {
-    colors = DEFAULT_ELEMENT_BACKGROUND_PICKS;
+    colors =
+      customOptions?.pickerRenders?.elementBackgroundColors ??
+      DEFAULT_ELEMENT_BACKGROUND_PICKS;
   }
 
   if (type === "canvasBackground") {
@@ -49,26 +58,41 @@ export const TopPicks = ({
 
   return (
     <div className="color-picker__top-picks">
-      {colors.map((color: string) => (
-        <button
-          className={clsx("color-picker__button", {
+      {colors.map((color: string) => {
+        if (customOptions?.pickerRenders?.colorPickerTopPickesButtonRender) {
+          return customOptions.pickerRenders.colorPickerTopPickesButtonRender({
             active: color === activeColor,
-            "is-transparent": color === "transparent" || !color,
-            "has-outline": !isColorDark(
-              color,
-              COLOR_OUTLINE_CONTRAST_THRESHOLD,
-            ),
-          })}
-          style={{ "--swatch-color": color }}
-          key={color}
-          type="button"
-          title={color}
-          onClick={() => onChange(color)}
-          data-testid={`color-top-pick-${color}`}
-        >
-          <div className="color-picker__button-outline" />
-        </button>
-      ))}
+            color,
+            isTransparent: color === "transparent" || !color,
+            hasOutline: !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
+            onClick: () => onChange(color),
+            dataTestid: `color-top-pick-${color}`,
+            children: <div className="color-picker__button-outline" />,
+            key: color,
+          });
+        }
+
+        return (
+          <button
+            className={clsx("color-picker__button", {
+              active: color === activeColor,
+              "is-transparent": color === "transparent" || !color,
+              "has-outline": !isColorDark(
+                color,
+                COLOR_OUTLINE_CONTRAST_THRESHOLD,
+              ),
+            })}
+            style={{ "--swatch-color": color }}
+            key={color}
+            type="button"
+            title={color}
+            onClick={() => onChange(color)}
+            data-testid={`color-top-pick-${color}`}
+          >
+            <div className="color-picker__button-outline" />
+          </button>
+        );
+      })}
     </div>
   );
 };
diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx
index 5630ae8d7..04398834f 100644
--- a/packages/excalidraw/components/IconPicker.tsx
+++ b/packages/excalidraw/components/IconPicker.tsx
@@ -1,12 +1,14 @@
 import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 
 import { isArrowKey, KEYS } from "@excalidraw/common";
 
 import { atom, useAtom } from "../editor-jotai";
 import { getLanguage, t } from "../i18n";
 
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
+
 import Collapsible from "./Stats/Collapsible";
 import { useDevice } from "./App";
 
@@ -115,39 +117,63 @@ function Picker<T>({
     }
   }, [value, alwaysVisibleOptions, setShowMoreOptions]);
 
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
   const renderOptions = (options: Option<T>[]) => {
     return (
       <div className="picker-content">
-        {options.map((option, i) => (
-          <button
-            type="button"
-            className={clsx("picker-option", {
+        {options.map((option, i) => {
+          if (customOptions?.pickerRenders?.layerButtonRender) {
+            return customOptions.pickerRenders.layerButtonRender({
               active: value === option.value,
-            })}
-            onClick={(event) => {
-              onChange(option.value);
-            }}
-            title={`${option.text} ${
-              option.keyBinding && `— ${option.keyBinding.toUpperCase()}`
-            }`}
-            aria-label={option.text || "none"}
-            aria-keyshortcuts={option.keyBinding || undefined}
-            key={option.text}
-            ref={(ref) => {
-              if (value === option.value) {
-                // Use a timeout here to render focus properly
-                setTimeout(() => {
-                  ref?.focus();
-                }, 0);
-              }
-            }}
-          >
-            {option.icon}
-            {option.keyBinding && (
-              <span className="picker-keybinding">{option.keyBinding}</span>
-            )}
-          </button>
-        ))}
+              title: option.text,
+              children: (
+                <>
+                  {option.icon}
+                  {/* {option.keyBinding && (
+                    <span className="picker-keybinding">
+                      {option.keyBinding}
+                    </span>
+                  )} */}
+                </>
+              ),
+              key: option.text,
+              onClick: () => onChange(option.value),
+              name: option.text,
+            });
+          }
+
+          return (
+            <button
+              type="button"
+              className={clsx("picker-option", {
+                active: value === option.value,
+              })}
+              onClick={(event) => {
+                onChange(option.value);
+              }}
+              title={`${option.text} ${
+                option.keyBinding && `— ${option.keyBinding.toUpperCase()}`
+              }`}
+              aria-label={option.text || "none"}
+              aria-keyshortcuts={option.keyBinding || undefined}
+              key={option.text}
+              ref={(ref) => {
+                if (value === option.value) {
+                  // Use a timeout here to render focus properly
+                  setTimeout(() => {
+                    ref?.focus();
+                  }, 0);
+                }
+              }}
+            >
+              {option.icon}
+              {option.keyBinding && (
+                <span className="picker-keybinding">{option.keyBinding}</span>
+              )}
+            </button>
+          );
+        })}
       </div>
     );
   };
@@ -162,7 +188,7 @@ function Picker<T>({
       align="start"
       sideOffset={12}
       style={{ zIndex: "var(--zIndex-popup)" }}
-      onKeyDown={handleKeyDown}
+      onKeyDown={customOptions?.disableKeyEvents ? undefined : handleKeyDown}
     >
       <div
         className={`picker`}
@@ -209,22 +235,46 @@ export function IconPicker<T>({
   numberOfOptionsToAlwaysShow?: number;
   group?: string;
 }) {
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
   const [isActive, setActive] = React.useState(false);
   const rPickerButton = React.useRef<any>(null);
 
+  const renderTrigger = () => {
+    if (customOptions?.pickerRenders?.layerButtonRender) {
+      return (
+        <>
+          <Popover.Trigger
+            name={group}
+            type="button"
+            aria-label={label}
+            onClick={() => setActive(!isActive)}
+            ref={rPickerButton}
+            className={isActive ? "active" : ""}
+            style={{
+              padding: 0,
+              border: "unset",
+              width: 0,
+            }}
+          >
+            {options.find((option) => option.value === value)?.icon}
+          </Popover.Trigger>
+          {customOptions.pickerRenders.layerButtonRender({
+            name: group,
+            title: "",
+            onClick: () => setActive(!isActive),
+            children: options.find((option) => option.value === value)?.icon,
+            active: isActive,
+          })}
+        </>
+      );
+    }
+  };
+
   return (
     <div>
       <Popover.Root open={isActive} onOpenChange={(open) => setActive(open)}>
-        <Popover.Trigger
-          name={group}
-          type="button"
-          aria-label={label}
-          onClick={() => setActive(!isActive)}
-          ref={rPickerButton}
-          className={isActive ? "active" : ""}
-        >
-          {options.find((option) => option.value === value)?.icon}
-        </Popover.Trigger>
+        {renderTrigger()}
         {isActive && (
           <Picker
             options={options}
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index b2e0d446f..f933a6f47 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -72,6 +72,7 @@ import type {
   BinaryFiles,
   UIAppState,
   AppClassProperties,
+  ExcalidrawPropsCustomOptions,
 } from "../types";
 
 interface LayerUIProps {
@@ -95,6 +96,7 @@ interface LayerUIProps {
   app: AppClassProperties;
   isCollaborating: boolean;
   generateLinkForSelection?: AppProps["generateLinkForSelection"];
+  customOptions?: ExcalidrawPropsCustomOptions;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -153,6 +155,7 @@ const LayerUI = ({
   app,
   isCollaborating,
   generateLinkForSelection,
+  customOptions,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -209,13 +212,8 @@ const LayerUI = ({
     </div>
   );
 
-  const renderSelectedShapeActions = () => (
-    <Section
-      heading="selectedShapeActions"
-      className={clsx("selected-shape-actions zen-mode-transition", {
-        "transition-left": appState.zenModeEnabled,
-      })}
-    >
+  const renderSelectedShapeActions = () => {
+    const children = (
       <Island
         className={CLASSES.SHAPE_ACTIONS_MENU}
         padding={2}
@@ -232,8 +230,19 @@ const LayerUI = ({
           app={app}
         />
       </Island>
-    </Section>
-  );
+    );
+
+    return (
+      <Section
+        heading="selectedShapeActions"
+        className={clsx("selected-shape-actions zen-mode-transition", {
+          "transition-left": appState.zenModeEnabled,
+        })}
+      >
+        {customOptions?.layoutRenders?.menuRender?.({ children }) ?? children}
+      </Section>
+    );
+  };
 
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
@@ -249,7 +258,10 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        <div className="App-menu App-menu_top">
+        <div
+          className="App-menu App-menu_top"
+          style={{ display: customOptions?.hideMenu ? "none" : undefined }}
+        >
           <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
@@ -274,6 +286,11 @@ const LayerUI = ({
                           className={clsx("App-toolbar", {
                             "zen-mode": appState.zenModeEnabled,
                           })}
+                          style={{
+                            display: customOptions?.hideMainToolbar
+                              ? "none"
+                              : undefined,
+                          }}
                         >
                           <HintViewer
                             appState={appState}
@@ -543,12 +560,14 @@ const LayerUI = ({
           >
             {renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
             {renderFixedSideContainer()}
-            <Footer
-              appState={appState}
-              actionManager={actionManager}
-              showExitZenModeBtn={showExitZenModeBtn}
-              renderWelcomeScreen={renderWelcomeScreen}
-            />
+            {!customOptions?.hideFooter && (
+              <Footer
+                appState={appState}
+                actionManager={actionManager}
+                showExitZenModeBtn={showExitZenModeBtn}
+                renderWelcomeScreen={renderWelcomeScreen}
+              />
+            )}
             {appState.scrolledOutside && (
               <button
                 type="button"
diff --git a/packages/excalidraw/components/Range.tsx b/packages/excalidraw/components/Range.tsx
index 3ab9ede15..1b8854e14 100644
--- a/packages/excalidraw/components/Range.tsx
+++ b/packages/excalidraw/components/Range.tsx
@@ -1,7 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
+
+import { isBlurElement } from "@excalidraw/element/typeChecks";
 
 import { getFormValue } from "../actions/actionProperties";
 import { t } from "../i18n";
+import { ExcalidrawPropsCustomOptionsContext } from "../types";
 
 import "./Range.scss";
 
@@ -40,28 +43,115 @@ export const Range = ({
     }
   }, [value]);
 
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
   return (
     <label className="control-label">
       {t("labels.opacity")}
-      <div className="range-wrapper">
-        <input
-          ref={rangeRef}
-          type="range"
-          min="0"
-          max="100"
-          step="10"
-          onChange={(event) => {
-            updateData(+event.target.value);
-          }}
-          value={value}
-          className="range-input"
-          data-testid={testId}
-        />
-        <div className="value-bubble" ref={valueRef}>
-          {value !== 0 ? value : null}
+      {customOptions?.pickerRenders?.rangeRender ? (
+        customOptions?.pickerRenders?.rangeRender({
+          value,
+          onChange: (value: number) => {
+            updateData(value);
+          },
+          step: 10,
+          min: 0,
+          max: 100,
+        })
+      ) : (
+        <div className="range-wrapper">
+          <input
+            ref={rangeRef}
+            type="range"
+            min="0"
+            max="100"
+            step="10"
+            onChange={(event) => {
+              updateData(+event.target.value);
+            }}
+            value={value}
+            className="range-input"
+            data-testid={testId}
+          />
+          <div className="value-bubble" ref={valueRef}>
+            {value !== 0 ? value : null}
+          </div>
+          <div className="zero-label">0</div>
         </div>
-        <div className="zero-label">0</div>
-      </div>
+      )}
+    </label>
+  );
+};
+
+export const BlurRange = ({
+  updateData,
+  appState,
+  elements,
+  testId,
+}: RangeProps) => {
+  const rangeRef = React.useRef<HTMLInputElement>(null);
+  const valueRef = React.useRef<HTMLDivElement>(null);
+  const value = getFormValue(
+    elements,
+    appState,
+    (element) => {
+      if (isBlurElement(element)) {
+        return element.blur;
+      }
+      return appState.currentItemBlur;
+    },
+    true,
+    appState.currentItemBlur,
+  );
+  useEffect(() => {
+    if (rangeRef.current && valueRef.current) {
+      const rangeElement = rangeRef.current;
+      const valueElement = valueRef.current;
+      const inputWidth = rangeElement.offsetWidth;
+      const thumbWidth = 15; // 15 is the width of the thumb
+      const position =
+        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+      valueElement.style.left = `${position}px`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
+    }
+  }, [value]);
+
+  const customOptions = useContext(ExcalidrawPropsCustomOptionsContext);
+
+  return (
+    <label className="control-label">
+      {t("labels.blur")}
+      {customOptions?.pickerRenders?.rangeRender ? (
+        customOptions?.pickerRenders?.rangeRender({
+          value,
+          onChange: (value: number) => {
+            updateData(value);
+          },
+          step: 10,
+          min: 0,
+          max: 100,
+        })
+      ) : (
+        <div className="range-wrapper">
+          <input
+            ref={rangeRef}
+            type="range"
+            min="0"
+            max="100"
+            step="10"
+            onChange={(event) => {
+              updateData(+event.target.value);
+            }}
+            value={value}
+            className="range-input"
+            data-testid={testId}
+          />
+          <div className="value-bubble" ref={valueRef}>
+            {value !== 0 ? value : null}
+          </div>
+          <div className="zero-label">0</div>
+        </div>
+      )}
     </label>
   );
 };
diff --git a/packages/excalidraw/components/canvases/StaticCanvas.tsx b/packages/excalidraw/components/canvases/StaticCanvas.tsx
index 5a498ebac..c170e3629 100644
--- a/packages/excalidraw/components/canvases/StaticCanvas.tsx
+++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx
@@ -47,6 +47,7 @@ const StaticCanvas = (props: StaticCanvasProps) => {
 
       wrapper.replaceChildren(canvas);
       canvas.classList.add("excalidraw__canvas", "static");
+      canvas.id = "excalidraw__content-canvas";
     }
 
     const widthString = `${props.appState.width}px`;
diff --git a/packages/excalidraw/components/shapes.tsx b/packages/excalidraw/components/shapes.tsx
index 7411a9e25..1df45fdc9 100644
--- a/packages/excalidraw/components/shapes.tsx
+++ b/packages/excalidraw/components/shapes.tsx
@@ -9,8 +9,8 @@ import {
   LineIcon,
   FreedrawIcon,
   TextIcon,
-  ImageIcon,
   EraserIcon,
+  ImageIcon,
 } from "./icons";
 
 export const SHAPES = [
@@ -77,6 +77,13 @@ export const SHAPES = [
     numericKey: KEYS["9"],
     fillable: false,
   },
+  {
+    icon: RectangleIcon,
+    key: null,
+    value: "blur",
+    numericKey: KEYS["9"],
+    fillable: false,
+  },
   {
     icon: EraserIcon,
     value: "eraser",
diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index 1811cbb57..d961b421b 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -102,6 +102,7 @@ export const AllowedExcalidrawActiveTools: Record<
   hand: true,
   laser: false,
   magicframe: false,
+  blur: true,
 };
 
 export type RestoredDataState = {
@@ -383,6 +384,7 @@ const restoreElement = (
 
     // generic elements
     case "ellipse":
+    case "blur":
     case "rectangle":
     case "diamond":
     case "iframe":
diff --git a/packages/excalidraw/history.ts b/packages/excalidraw/history.ts
index 0481c8411..d3c9d8211 100644
--- a/packages/excalidraw/history.ts
+++ b/packages/excalidraw/history.ts
@@ -20,6 +20,13 @@ export class History {
     [HistoryChangedEvent]
   >();
 
+  constructor(
+    private readonly onChange: (
+      history: History,
+      type: "undo" | "redo" | "record" | "clear",
+    ) => void = () => {},
+  ) {}
+
   private readonly undoStack: HistoryStack = [];
   private readonly redoStack: HistoryStack = [];
 
@@ -34,6 +41,8 @@ export class History {
   public clear() {
     this.undoStack.length = 0;
     this.redoStack.length = 0;
+
+    this.onChange(this, "clear");
   }
 
   /**
@@ -43,6 +52,8 @@ export class History {
     elementsChange: ElementsChange,
     appStateChange: AppStateChange,
   ) {
+    this.onChange(this, "record");
+
     const entry = HistoryEntry.create(appStateChange, elementsChange);
 
     if (!entry.isEmpty()) {
@@ -67,6 +78,8 @@ export class History {
     appState: AppState,
     snapshot: Readonly<Snapshot>,
   ) {
+    this.onChange(this, "undo");
+
     return this.perform(
       elements,
       appState,
@@ -81,6 +94,8 @@ export class History {
     appState: AppState,
     snapshot: Readonly<Snapshot>,
   ) {
+    this.onChange(this, "redo");
+
     return this.perform(
       elements,
       appState,
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 17c59a1b5..76114f415 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 
 import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common";
 
@@ -16,7 +16,16 @@ import "./css/app.scss";
 import "./css/styles.scss";
 import "./fonts/fonts.css";
 
-import type { AppProps, ExcalidrawProps } from "./types";
+import {
+  ExcalidrawHistoryContext,
+  ExcalidrawPropsCustomOptionsContext,
+  type AppProps,
+  type ExcalidrawProps,
+} from "./types";
+
+import type { ExcalidrawHistoryContextType } from "./types";
+
+import type { ActionResult } from "./actions/types";
 
 polyfill();
 
@@ -53,6 +62,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
+    customOptions,
+    actionRef,
     renderScrollbars,
   } = props;
 
@@ -109,47 +120,83 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     };
   }, []);
 
+  const appRef = useRef<App>(null);
+
+  const historyRedoRef = useRef<() => void>(undefined);
+  const historyUndoRef = useRef<() => void>(undefined);
+
+  useImperativeHandle(
+    actionRef,
+    () => ({
+      syncActionResult: (actionResult: ActionResult) => {
+        appRef.current?.syncActionResult(actionResult);
+      },
+      getHistory: () => appRef.current?.getHistory(),
+      historyRedo: () => {
+        historyRedoRef.current?.();
+      },
+      historyUndo: () => {
+        historyUndoRef.current?.();
+      },
+    }),
+    [],
+  );
+
+  const historyContextValue = useMemo<ExcalidrawHistoryContextType>(
+    () => ({
+      undoRef: historyUndoRef,
+      redoRef: historyRedoRef,
+    }),
+    [],
+  );
+
   return (
-    <EditorJotaiProvider store={editorJotaiStore}>
-      <InitializeApp langCode={langCode} theme={theme}>
-        <App
-          onChange={onChange}
-          initialData={initialData}
-          excalidrawAPI={excalidrawAPI}
-          isCollaborating={isCollaborating}
-          onPointerUpdate={onPointerUpdate}
-          renderTopRightUI={renderTopRightUI}
-          langCode={langCode}
-          viewModeEnabled={viewModeEnabled}
-          zenModeEnabled={zenModeEnabled}
-          gridModeEnabled={gridModeEnabled}
-          libraryReturnUrl={libraryReturnUrl}
-          theme={theme}
-          name={name}
-          renderCustomStats={renderCustomStats}
-          UIOptions={UIOptions}
-          onPaste={onPaste}
-          detectScroll={detectScroll}
-          handleKeyboardGlobally={handleKeyboardGlobally}
-          onLibraryChange={onLibraryChange}
-          autoFocus={autoFocus}
-          generateIdForFile={generateIdForFile}
-          onLinkOpen={onLinkOpen}
-          generateLinkForSelection={generateLinkForSelection}
-          onPointerDown={onPointerDown}
-          onPointerUp={onPointerUp}
-          onScrollChange={onScrollChange}
-          onDuplicate={onDuplicate}
-          validateEmbeddable={validateEmbeddable}
-          renderEmbeddable={renderEmbeddable}
-          aiEnabled={aiEnabled !== false}
-          showDeprecatedFonts={showDeprecatedFonts}
-          renderScrollbars={renderScrollbars}
+    <ExcalidrawHistoryContext.Provider value={historyContextValue}>
+      <ExcalidrawPropsCustomOptionsContext.Provider value={customOptions}>
+        <EditorJotaiProvider store={editorJotaiStore}>
+          <InitializeApp langCode={langCode} theme={theme}>
+            <App
+              ref={appRef}
+              onChange={onChange}
+              initialData={initialData}
+              excalidrawAPI={excalidrawAPI}
+              isCollaborating={isCollaborating}
+              onPointerUpdate={onPointerUpdate}
+              renderTopRightUI={renderTopRightUI}
+              langCode={langCode}
+              viewModeEnabled={viewModeEnabled}
+              zenModeEnabled={zenModeEnabled}
+              gridModeEnabled={gridModeEnabled}
+              libraryReturnUrl={libraryReturnUrl}
+              theme={theme}
+              name={name}
+              renderCustomStats={renderCustomStats}
+              UIOptions={UIOptions}
+              onPaste={onPaste}
+              detectScroll={detectScroll}
+              handleKeyboardGlobally={handleKeyboardGlobally}
+              onLibraryChange={onLibraryChange}
+              autoFocus={autoFocus}
+              generateIdForFile={generateIdForFile}
+              onLinkOpen={onLinkOpen}
+              generateLinkForSelection={generateLinkForSelection}
+              onPointerDown={onPointerDown}
+              onPointerUp={onPointerUp}
+              onScrollChange={onScrollChange}
+              onDuplicate={onDuplicate}
+              validateEmbeddable={validateEmbeddable}
+              renderEmbeddable={renderEmbeddable}
+              aiEnabled={aiEnabled !== false}
+              showDeprecatedFonts={showDeprecatedFonts}
+              customOptions={customOptions}
+              renderScrollbars={renderScrollbars}
         >
-          {children}
-        </App>
-      </InitializeApp>
-    </EditorJotaiProvider>
+              {children}
+            </App>
+          </InitializeApp>
+        </EditorJotaiProvider>
+      </ExcalidrawPropsCustomOptionsContext.Provider>
+    </ExcalidrawHistoryContext.Provider>
   );
 };
 
diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json
index 381f2b67f..24c1da46f 100644
--- a/packages/excalidraw/locales/en.json
+++ b/packages/excalidraw/locales/en.json
@@ -127,6 +127,7 @@
     "unbindText": "Unbind text",
     "bindText": "Bind text to the container",
     "createContainerFromText": "Wrap text in a container",
+    "blur": "Strength",
     "link": {
       "edit": "Edit link",
       "editEmbed": "Edit embeddable link",
@@ -279,6 +280,7 @@
     "lasso": "Lasso selection",
     "image": "Insert image",
     "rectangle": "Rectangle",
+    "blur": "Blur",
     "diamond": "Diamond",
     "ellipse": "Ellipse",
     "arrow": "Arrow",
@@ -312,6 +314,7 @@
     "magicframe": "Wireframe to code",
     "embeddable": "Web Embed",
     "selection": "Selection",
+    "blur": "Blur",
     "iframe": "IFrame"
   },
   "headings": {
diff --git a/packages/excalidraw/locales/zh-CN.json b/packages/excalidraw/locales/zh-CN.json
index 19d715750..404780184 100644
--- a/packages/excalidraw/locales/zh-CN.json
+++ b/packages/excalidraw/locales/zh-CN.json
@@ -44,11 +44,19 @@
     "arrowhead_triangle_outline": "三角箭头（空心）",
     "arrowhead_diamond": "菱形",
     "arrowhead_diamond_outline": "菱形（空心）",
+    "arrowhead_crowfoot_many": "交叉箭头（多个）",
+    "arrowhead_crowfoot_one": "交叉箭头（一个）",
+    "arrowhead_crowfoot_one_or_many": "交叉箭头（一个或多个）",
+    "arrowtypes": "箭头类型",
+    "arrowtype_sharp": "尖锐箭头",
+    "arrowtype_round": "圆润箭头",
+    "arrowtype_elbowed": "弯曲箭头",
     "fontSize": "字体大小",
     "fontFamily": "字体",
     "addWatermark": "添加 “使用 Excalidraw 创建” 水印",
     "handDrawn": "手写",
     "normal": "普通",
+    "more_options": "更多选项",
     "code": "代码",
     "small": "小",
     "medium": "中",
@@ -113,6 +121,7 @@
     "unbindText": "取消文本绑定",
     "bindText": "将文本绑定到容器",
     "createContainerFromText": "将文本包围在容器中",
+    "blur": "强度",
     "link": {
       "edit": "编辑链接",
       "editEmbed": "编辑链接与嵌入",
@@ -237,6 +246,7 @@
     "selection": "选择",
     "image": "插入图像",
     "rectangle": "矩形",
+    "blur": "模糊",
     "diamond": "菱形",
     "ellipse": "椭圆",
     "arrow": "箭头",
diff --git a/packages/excalidraw/locales/zh-TW.json b/packages/excalidraw/locales/zh-TW.json
index e116d9163..f9aa4779c 100644
--- a/packages/excalidraw/locales/zh-TW.json
+++ b/packages/excalidraw/locales/zh-TW.json
@@ -44,11 +44,19 @@
     "arrowhead_triangle_outline": "三角形（外框）",
     "arrowhead_diamond": "菱形",
     "arrowhead_diamond_outline": "菱形（外框）",
+    "arrowhead_crowfoot_many": "交叉箭頭（多個）",
+    "arrowhead_crowfoot_one": "交叉箭頭（一個）",
+    "arrowhead_crowfoot_one_or_many": "交叉箭頭（一個或多個）",
+    "arrowtypes": "箭頭類型",
+    "arrowtype_sharp": "尖銳箭頭",
+    "arrowtype_round": "圓潤箭頭",
+    "arrowtype_elbowed": "彎曲箭頭",
     "fontSize": "字型大小",
     "fontFamily": "字體集",
     "addWatermark": "加上 \"Made with Excalidraw\" 浮水印",
     "handDrawn": "手寫",
     "normal": "一般",
+    "more_options": "更多選項",
     "code": "代碼",
     "small": "小",
     "medium": "中",
@@ -113,6 +121,7 @@
     "unbindText": "取消綁定文字",
     "bindText": "結合文字至容器",
     "createContainerFromText": "將文字包於容器中",
+    "blur": "強度",
     "link": {
       "edit": "編輯連結",
       "editEmbed": "編輯連結&嵌入",
@@ -237,6 +246,7 @@
     "selection": "選取",
     "image": "插入圖片",
     "rectangle": "長方形",
+    "blur": "模糊",
     "diamond": "菱形",
     "ellipse": "橢圓",
     "arrow": "箭頭",
diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
index 27fae8455..37a2b8d7f 100644
--- a/packages/excalidraw/package.json
+++ b/packages/excalidraw/package.json
@@ -129,7 +129,7 @@
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw",
   "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types"
+    "gen:types": "rimraf -rf types && tsc",
+    "build:esm": "rimraf -rf dist && node ../../scripts/buildPackage.js && yarn gen:types"
   }
 }
diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts
index 0d3f5bad9..112e4e51c 100644
--- a/packages/excalidraw/renderer/staticSvgScene.ts
+++ b/packages/excalidraw/renderer/staticSvgScene.ts
@@ -152,6 +152,7 @@ const renderElementToSvg = (
     }
     case "rectangle":
     case "diamond":
+    case "blur":
     case "ellipse": {
       const shape = ShapeCache.generateElementShape(element, null);
       const node = roughSVGDrawWithPrecision(
diff --git a/packages/excalidraw/scene/types.ts b/packages/excalidraw/scene/types.ts
index 12a5e27a8..bb4d70cc6 100644
--- a/packages/excalidraw/scene/types.ts
+++ b/packages/excalidraw/scene/types.ts
@@ -145,6 +145,7 @@ export type ElementShape = Drawable | Drawable[] | null;
 
 export type ElementShapes = {
   rectangle: Drawable;
+  blur: Drawable;
   ellipse: Drawable;
   diamond: Drawable;
   iframe: Drawable;
diff --git a/packages/excalidraw/snapping.ts b/packages/excalidraw/snapping.ts
index 6ea23bd87..f3a2daf69 100644
--- a/packages/excalidraw/snapping.ts
+++ b/packages/excalidraw/snapping.ts
@@ -7,7 +7,7 @@ import {
   type GlobalPoint,
 } from "@excalidraw/math";
 
-import { TOOL_TYPE, KEYS } from "@excalidraw/common";
+import { TOOL_TYPE, KEYS, shouldSnapping } from "@excalidraw/common";
 import {
   getCommonBounds,
   getDraggedElementsBounds,
@@ -173,9 +173,9 @@ export const isSnappingEnabled = ({
 }) => {
   if (event) {
     return (
-      (app.state.objectsSnapModeEnabled && !event[KEYS.CTRL_OR_CMD]) ||
+      (app.state.objectsSnapModeEnabled && !shouldSnapping(event)) ||
       (!app.state.objectsSnapModeEnabled &&
-        event[KEYS.CTRL_OR_CMD] &&
+        shouldSnapping(event) &&
         !isGridModeEnabled(app))
     );
   }
diff --git a/packages/excalidraw/tests/helpers/api.ts b/packages/excalidraw/tests/helpers/api.ts
index 5ac1bca8c..5754d7566 100644
--- a/packages/excalidraw/tests/helpers/api.ts
+++ b/packages/excalidraw/tests/helpers/api.ts
@@ -8,6 +8,7 @@ import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS, assertNever } from "@excalidraw/comm
 
 import {
   newArrowElement,
+  newBlurElement,
   newElement,
   newEmbeddableElement,
   newFrameElement,
@@ -355,12 +356,15 @@ export class API {
           scale: rest.scale || [1, 1],
         });
         break;
-      case "frame":
-        element = newFrameElement({ ...base, width, height });
-        break;
+        case "frame":
+            element = newFrameElement({ ...base, width, height });
+            break;
       case "magicframe":
         element = newMagicFrameElement({ ...base, width, height });
         break;
+      case "blur":
+            element = newBlurElement({ ...base, width, height, blur: appState.currentItemBlur});
+            break;
       default:
         assertNever(
           type,
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index ebc31029c..6c6ee46b2 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -1,8 +1,12 @@
+import { createContext, type JSX } from "react";
+
 import type {
   IMAGE_MIME_TYPES,
   UserIdleState,
   throttleRAF,
   MIME_TYPES,
+  ColorPaletteCustom,
+  ColorTuple,
 } from "@excalidraw/common";
 
 import type { SuggestedBinding } from "@excalidraw/element/binding";
@@ -43,7 +47,9 @@ import type {
   MakeBrand,
 } from "@excalidraw/common/utility-types";
 
-import type { Action } from "./actions/types";
+import type { ColorPickerType } from "./components/ColorPicker/colorPickerUtils";
+
+import type { Action, ActionResult } from "./actions/types";
 import type { Spreadsheet } from "./charts";
 import type { ClipboardData } from "./clipboard";
 import type App from "./components/App";
@@ -57,7 +63,10 @@ import type { ImportedDataState } from "./data/types";
 import type { Language } from "./i18n";
 import type { isOverScrollBars } from "./scene/scrollbars";
 import type React from "react";
-import type { JSX } from "react";
+import type { ButtonIconSelectProps } from "./components/ButtonIconSelect";
+import type { ButtonIcon } from "./components/ButtonIcon";
+
+import type { History } from "./history";
 
 export type SocketId = string & { _brand: "SocketId" };
 
@@ -150,7 +159,8 @@ export type ToolType =
   | "frame"
   | "magicframe"
   | "embeddable"
-  | "laser";
+  | "laser"
+  | "blur";
 
 export type ElementOrToolType = ExcalidrawElementType | ToolType | "custom";
 
@@ -325,6 +335,7 @@ export interface AppState {
   currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
   currentItemRoughness: number;
   currentItemOpacity: number;
+  currentItemBlur: number;
   currentItemFontFamily: FontFamilyValues;
   currentItemFontSize: number;
   currentItemTextAlign: TextAlign;
@@ -512,6 +523,104 @@ export type OnUserFollowedPayload = {
   action: "FOLLOW" | "UNFOLLOW";
 };
 
+export interface ExcalidrawPropsCustomOptions {
+  disableKeyEvents?: boolean;
+  hideMainToolbar?: boolean;
+  hideMenu?: boolean;
+  hideFooter?: boolean;
+  hideContextMenu?: boolean;
+  onHistoryChange?: (
+    history: History,
+    type: "undo" | "redo" | "record" | "clear",
+  ) => void;
+  shouldResizeFromCenter?: (event: MouseEvent | KeyboardEvent) => boolean;
+  shouldMaintainAspectRatio?: (event: MouseEvent | KeyboardEvent) => boolean;
+  shouldRotateWithDiscreteAngle?: (
+    event: MouseEvent | KeyboardEvent | React.PointerEvent<HTMLCanvasElement>,
+  ) => boolean;
+  shouldSnapping?: (event: KeyboardModifiersObject) => boolean;
+  onHandleEraser?: (elements: Set<ExcalidrawElement["id"]>) => void;
+  layoutRenders?: {
+    menuRender?: (props: { children: React.ReactNode }) => React.ReactNode;
+  };
+  pickerRenders?: {
+    ButtonList?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    elementStrokeColors?: ColorTuple;
+    elementBackgroundColors?: ColorTuple;
+    buttonIconSelectRender?: <T extends Object>(
+      props: ButtonIconSelectProps<T>,
+    ) => JSX.Element;
+    buttonIconSelectRadioRender?: (props: {
+      key: string;
+      active: boolean;
+      title: string;
+      name: string;
+      onChange: () => void;
+      checked: boolean;
+      dataTestid?: string;
+      children: React.ReactNode;
+      value: any;
+    }) => JSX.Element;
+    CustomButtonIcon?: typeof ButtonIcon;
+    layerButtonRender?: (props: {
+      onClick: () => void;
+      title: string;
+      children: React.ReactNode;
+      name: string;
+      visible?: boolean;
+      hidden?: boolean;
+      key?: string;
+      active?: boolean;
+    }) => JSX.Element;
+    rangeRender?: (props: {
+      value: number;
+      onChange: (value: number) => void;
+      min: number;
+      max: number;
+      step: number;
+    }) => React.ReactNode;
+    colorPickerTopPickesButtonRender?: (props: {
+      active: boolean;
+      color: string;
+      isTransparent: boolean;
+      hasOutline: boolean;
+      onClick: () => void;
+      dataTestid: string;
+      children: React.ReactNode;
+      key: string;
+    }) => React.ReactNode;
+    colorPickerPopoverRender?: (props: {
+      color: string;
+      label: string;
+      type: ColorPickerType;
+      onChange: (color: string) => void;
+      elements: readonly ExcalidrawElement[];
+      palette: ColorPaletteCustom | null;
+      updateData: (formData?: any) => void;
+    }) => React.ReactNode;
+  };
+}
+
+export const ExcalidrawPropsCustomOptionsContext = createContext<
+  ExcalidrawPropsCustomOptions | undefined
+>({});
+
+export interface ExcalidrawActionType {
+  syncActionResult: (actionResult: ActionResult) => void;
+  getHistory: () => History | undefined;
+  historyRedo: () => void;
+  historyUndo: () => void;
+}
+
+export interface ExcalidrawHistoryContextType {
+  undoRef: React.RefObject<(() => void) | undefined>;
+  redoRef: React.RefObject<(() => void) | undefined>;
+}
+
+export const ExcalidrawHistoryContext = createContext<
+  ExcalidrawHistoryContextType | undefined
+>(undefined);
+
 export interface ExcalidrawProps {
   onChange?: (
     elements: readonly OrderedExcalidrawElement[],
@@ -601,6 +710,8 @@ export interface ExcalidrawProps {
   ) => JSX.Element | null;
   aiEnabled?: boolean;
   showDeprecatedFonts?: boolean;
+  customOptions?: ExcalidrawPropsCustomOptions;
+  actionRef?: React.RefObject<ExcalidrawActionType | undefined>;
   renderScrollbars?: boolean;
 }
 
diff --git a/packages/math/package.json b/packages/math/package.json
index f8b411891..3906fa400 100644
--- a/packages/math/package.json
+++ b/packages/math/package.json
@@ -54,7 +54,7 @@
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
+    "gen:types": "rimraf -rf types && tsc",
+    "build:esm": "rimraf -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
   }
 }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index ca3eee23e..1317de740 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -69,7 +69,7 @@
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildUtils.js && yarn gen:types"
+    "gen:types": "rimraf -rf types && tsc",
+    "build:esm": "rimraf -rf dist && node ../../scripts/buildUtils.js && yarn gen:types"
   }
 }
diff --git a/packages/utils/src/shape.ts b/packages/utils/src/shape.ts
index b750c232e..46d9ef738 100644
--- a/packages/utils/src/shape.ts
+++ b/packages/utils/src/shape.ts
@@ -39,6 +39,7 @@ import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
 import type {
   ElementsMap,
   ExcalidrawBindableElement,
+  ExcalidrawBlurElement,
   ExcalidrawDiamondElement,
   ExcalidrawElement,
   ExcalidrawEllipseElement,
@@ -107,6 +108,7 @@ type RectangularElement =
   | ExcalidrawDiamondElement
   | ExcalidrawFrameLikeElement
   | ExcalidrawEmbeddableElement
+  | ExcalidrawBlurElement
   | ExcalidrawImageElement
   | ExcalidrawIframeElement
   | ExcalidrawTextElement