diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index dacdce0c5945..da3bf42eb5a8 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -68,8 +68,10 @@ export const actionClearCanvas = register({
         gridSize: appState.gridSize,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
-        elementType:
-          appState.elementType === "image" ? "selection" : appState.elementType,
+        activeTool:
+          appState.activeTool.type === "image"
+            ? { type: "selection" }
+            : appState.activeTool,
       },
       commitToHistory: true,
     };
@@ -299,7 +301,7 @@ export const actionErase = register({
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        elementType: isEraserActive(appState) ? "selection" : "eraser",
+        activeTool: { type: isEraserActive(appState) ? "selection" : "eraser" },
       },
       commitToHistory: true,
     };
diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx
index 0e7b0d0a4aa8..003cd880d3ee 100644
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -133,7 +133,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        elementType: "selection",
+        activeTool: { type: "selection" },
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(
diff --git a/src/actions/actionFinalize.tsx b/src/actions/actionFinalize.tsx
index 7e9ba25bf057..8e07add6eacf 100644
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -119,13 +119,13 @@ export const actionFinalize = register({
         );
       }
 
-      if (!appState.elementLocked && appState.elementType !== "freedraw") {
+      if (!appState.elementLocked && appState.activeTool.type !== "freedraw") {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
 
     if (
-      (!appState.elementLocked && appState.elementType !== "freedraw") ||
+      (!appState.elementLocked && appState.activeTool.type !== "freedraw") ||
       !multiPointElement
     ) {
       resetCursor(canvas);
@@ -135,11 +135,11 @@ export const actionFinalize = register({
       elements: newElements,
       appState: {
         ...appState,
-        elementType:
-          (appState.elementLocked || appState.elementType === "freedraw") &&
+        activeTool:
+          (appState.elementLocked || appState.activeTool.type === "freedraw") &&
           multiPointElement
-            ? appState.elementType
-            : "selection",
+            ? appState.activeTool
+            : { type: "selection" },
         draggingElement: null,
         multiElement: null,
         editingElement: null,
@@ -148,7 +148,7 @@ export const actionFinalize = register({
         selectedElementIds:
           multiPointElement &&
           !appState.elementLocked &&
-          appState.elementType !== "freedraw"
+          appState.activeTool.type !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,
@@ -156,7 +156,7 @@ export const actionFinalize = register({
             : appState.selectedElementIds,
         pendingImageElement: null,
       },
-      commitToHistory: appState.elementType === "freedraw",
+      commitToHistory: appState.activeTool.type === "freedraw",
     };
   },
   keyTest: (event, appState) =>
diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index d961006a70cc..3ccb2f025e58 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -847,10 +847,10 @@ export const actionChangeSharpness = register({
     );
     const shouldUpdateForNonLinearElements = targetElements.length
       ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.elementType);
+      : !isLinearElementType(appState.activeTool.type);
     const shouldUpdateForLinearElements = targetElements.length
       ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.elementType);
+      : isLinearElementType(appState.activeTool.type);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
@@ -890,8 +890,8 @@ export const actionChangeSharpness = register({
           elements,
           appState,
           (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.elementType) &&
-            (isLinearElementType(appState.elementType)
+          (canChangeSharpness(appState.activeTool.type) &&
+            (isLinearElementType(appState.activeTool.type)
               ? appState.currentItemLinearStrokeSharpness
               : appState.currentItemStrokeSharpness)) ||
             null,
diff --git a/src/appState.ts b/src/appState.ts
index 816079644b10..550eaabffaf2 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -42,7 +42,7 @@ export const getDefaultAppState = (): Omit<
     editingGroupId: null,
     editingLinearElement: null,
     elementLocked: false,
-    elementType: "selection",
+    activeTool: { type: "selection" },
     penMode: false,
     penDetected: false,
     errorMessage: null,
@@ -131,7 +131,7 @@ const APP_STATE_STORAGE_CONF = (<
   editingGroupId: { browser: true, export: false, server: false },
   editingLinearElement: { browser: false, export: false, server: false },
   elementLocked: { browser: true, export: false, server: false },
-  elementType: { browser: true, export: false, server: false },
+  activeTool: { browser: true, export: false, server: false },
   penMode: { browser: true, export: false, server: false },
   penDetected: { browser: true, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
@@ -215,7 +215,7 @@ export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
 };
 
 export const isEraserActive = ({
-  elementType,
+  activeTool,
 }: {
-  elementType: AppState["elementType"];
-}) => elementType === "eraser";
+  activeTool: AppState["activeTool"];
+}) => activeTool.type === "eraser";
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 9ce29f07159f..50812f72be05 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -30,12 +30,12 @@ export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  elementType,
+  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"]["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -55,13 +55,13 @@ export const SelectedShapeActions = ({
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
@@ -78,23 +78,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(elementType) &&
-        elementType !== "image" &&
+      {((hasStrokeColor(activeTool) &&
+        activeTool !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(elementType) ||
+      {(hasStrokeWidth(activeTool) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(elementType === "freedraw" ||
+      {(activeTool === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(elementType) ||
+      {(hasStrokeStyle(activeTool) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -102,12 +102,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(elementType) ||
+      {(canChangeSharpness(activeTool) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(elementType) ||
+      {(hasText(activeTool) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -122,7 +122,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(elementType) ||
+      {(canHaveArrowheads(activeTool) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
@@ -190,23 +190,23 @@ export const SelectedShapeActions = ({
 
 export const ShapesSwitcher = ({
   canvas,
-  elementType,
+  activeTool,
   setAppState,
   onImageAction,
   appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"];
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
 }) => {
   const onChange = withBatchedUpdates(
     ({
-      elementType,
+      activeToolType,
       pointerType,
     }: {
-      elementType: typeof SHAPES[number]["value"];
+      activeToolType: typeof SHAPES[number]["value"];
       pointerType: PointerType | null;
     }) => {
       if (!appState.penDetected && pointerType === "pen") {
@@ -216,12 +216,12 @@ export const ShapesSwitcher = ({
         });
       }
       setAppState({
-        elementType,
+        activeTool: { type: activeToolType },
         multiElement: null,
         selectedElementIds: {},
       });
-      setCursorForShape(canvas, { ...appState, elementType });
-      if (elementType === "image") {
+      setCursorForShape(canvas, { ...appState, activeTool });
+      if (activeTool.type === "image") {
         onImageAction({ pointerType });
       }
     },
@@ -241,7 +241,7 @@ export const ShapesSwitcher = ({
             key={value}
             type="radio"
             icon={icon}
-            checked={elementType === value}
+            checked={activeTool.type === value}
             name="editor-current-shape"
             title={`${capitalizeString(label)} — ${shortcut}`}
             keyBindingLabel={`${index + 1}`}
@@ -249,10 +249,10 @@ export const ShapesSwitcher = ({
             aria-keyshortcuts={shortcut}
             data-testid={value}
             onPointerDown={({ pointerType }) => {
-              onChange({ elementType: value, pointerType });
+              onChange({ activeToolType: value, pointerType });
             }}
             onChange={({ pointerType }) => {
-              onChange({ elementType: value, pointerType });
+              onChange({ activeToolType: value, pointerType });
             }}
           />
         );
diff --git a/src/components/App.tsx b/src/components/App.tsx
index cec088fd0d43..d3726714a1a3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -811,10 +811,10 @@ class App extends React.Component<AppProps, AppState> {
 
     scene.appState = {
       ...scene.appState,
-      elementType:
-        scene.appState.elementType === "image"
-          ? "selection"
-          : scene.appState.elementType,
+      activeTool:
+        scene.appState.activeTool.type === "image"
+          ? { type: "selection" }
+          : scene.appState.activeTool,
       isLoading: false,
     };
     if (initialData?.scrollToContent) {
@@ -1068,15 +1068,15 @@ class App extends React.Component<AppProps, AppState> {
       Object.keys(this.state.selectedElementIds).length &&
       isEraserActive(this.state)
     ) {
-      this.setState({ elementType: "selection" });
+      this.setState({ activeTool: { type: "selection" } });
     }
     if (prevState.theme !== this.state.theme) {
       setEraserCursor(this.canvas, this.state.theme);
     }
     // Hide hyperlink popup if shown when element type is not selection
     if (
-      prevState.elementType === "selection" &&
-      this.state.elementType !== "selection" &&
+      prevState.activeTool.type === "selection" &&
+      this.state.activeTool.type !== "selection" &&
       this.state.showHyperlinkPopup
     ) {
       this.setState({ showHyperlinkPopup: false });
@@ -1130,7 +1130,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     const { multiElement } = prevState;
     if (
-      prevState.elementType !== this.state.elementType &&
+      prevState.activeTool !== this.state.activeTool &&
       multiElement != null &&
       isBindingEnabled(this.state) &&
       isBindingElement(multiElement)
@@ -1433,7 +1433,7 @@ class App extends React.Component<AppProps, AppState> {
       } else if (data.text) {
         this.addTextFromPaste(data.text);
       }
-      this.selectShapeTool("selection");
+      this.setActiveTool({ type: "selection" });
       event?.preventDefault();
     },
   );
@@ -1521,7 +1521,7 @@ class App extends React.Component<AppProps, AppState> {
         }
       },
     );
-    this.selectShapeTool("selection");
+    this.setActiveTool({ type: "selection" });
   };
 
   private addTextFromPaste(text: any) {
@@ -1574,9 +1574,9 @@ class App extends React.Component<AppProps, AppState> {
     this.setState((prevState) => {
       return {
         elementLocked: !prevState.elementLocked,
-        elementType: prevState.elementLocked
-          ? "selection"
-          : prevState.elementType,
+        activeTool: prevState.elementLocked
+          ? { type: "selection" }
+          : prevState.activeTool,
       };
     });
   };
@@ -1851,7 +1851,7 @@ class App extends React.Component<AppProps, AppState> {
       ) {
         const shape = findShapeByKey(event.key);
         if (shape) {
-          this.selectShapeTool(shape);
+          this.setActiveTool({ type: shape });
         } else if (event.key === KEYS.Q) {
           this.toggleLock();
         }
@@ -1868,7 +1868,7 @@ class App extends React.Component<AppProps, AppState> {
           this.state,
         );
         if (
-          this.state.elementType === "selection" &&
+          this.state.activeTool.type === "selection" &&
           !selectedElements.length
         ) {
           return;
@@ -1876,7 +1876,7 @@ class App extends React.Component<AppProps, AppState> {
 
         if (
           event.key === KEYS.G &&
-          (hasBackground(this.state.elementType) ||
+          (hasBackground(this.state.activeTool.type) ||
             selectedElements.some((element) => hasBackground(element.type)))
         ) {
           this.setState({ openPopup: "backgroundColorPicker" });
@@ -1892,7 +1892,7 @@ class App extends React.Component<AppProps, AppState> {
     if (event.key === KEYS.SPACE) {
       if (this.state.viewModeEnabled) {
         setCursor(this.canvas, CURSOR_TYPE.GRAB);
-      } else if (this.state.elementType === "selection") {
+      } else if (this.state.activeTool.type === "selection") {
         resetCursor(this.canvas);
       } else {
         setCursorForShape(this.canvas, this.state);
@@ -1919,28 +1919,28 @@ class App extends React.Component<AppProps, AppState> {
     }
   });
 
-  private selectShapeTool(elementType: AppState["elementType"]) {
+  private setActiveTool(tool: AppState["activeTool"]) {
     if (!isHoldingSpace) {
       setCursorForShape(this.canvas, this.state);
     }
     if (isToolIcon(document.activeElement)) {
       this.focusContainer();
     }
-    if (!isLinearElementType(elementType)) {
+    if (!isLinearElementType(tool.type)) {
       this.setState({ suggestedBindings: [] });
     }
-    if (elementType === "image") {
+    if (tool.type === "image") {
       this.onImageAction();
     }
-    if (elementType !== "selection") {
+    if (tool.type !== "selection") {
       this.setState({
-        elementType,
+        activeTool: tool,
         selectedElementIds: {},
         selectedGroupIds: {},
         editingGroupId: null,
       });
     } else {
-      this.setState({ elementType });
+      this.setState({ activeTool: tool });
     }
   }
 
@@ -2314,7 +2314,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
     // we should only be able to double click when mode is selection
-    if (this.state.elementType !== "selection") {
+    if (this.state.activeTool.type !== "selection") {
       return;
     }
 
@@ -2504,7 +2504,7 @@ class App extends React.Component<AppProps, AppState> {
 
       const distance = getDistance(Array.from(gesture.pointers.values()));
       const scaleFactor =
-        this.state.elementType === "freedraw" && this.state.penMode
+        this.state.activeTool.type === "freedraw" && this.state.penMode
           ? 1
           : distance / gesture.initialDistance;
 
@@ -2579,7 +2579,7 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
-    if (isBindingElementType(this.state.elementType)) {
+    if (isBindingElementType(this.state.activeTool.type)) {
       // Hovering with a selected tool or creating new linear element via click
       // and point
       const { draggingElement } = this.state;
@@ -2655,9 +2655,9 @@ class App extends React.Component<AppProps, AppState> {
     const hasDeselectedButton = Boolean(event.buttons);
     if (
       hasDeselectedButton ||
-      (this.state.elementType !== "selection" &&
-        this.state.elementType !== "text" &&
-        this.state.elementType !== "eraser")
+      (this.state.activeTool.type !== "selection" &&
+        this.state.activeTool.type !== "text" &&
+        this.state.activeTool.type !== "eraser")
     ) {
       return;
     }
@@ -2734,7 +2734,7 @@ class App extends React.Component<AppProps, AppState> {
         !this.state.showHyperlinkPopup
       ) {
         this.setState({ showHyperlinkPopup: "info" });
-      } else if (this.state.elementType === "text") {
+      } else if (this.state.activeTool.type === "text") {
         setCursor(
           this.canvas,
           isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR,
@@ -2946,27 +2946,27 @@ class App extends React.Component<AppProps, AppState> {
     const allowOnPointerDown =
       !this.state.penMode ||
       event.pointerType !== "touch" ||
-      this.state.elementType === "selection" ||
-      this.state.elementType === "text" ||
-      this.state.elementType === "image";
+      this.state.activeTool.type === "selection" ||
+      this.state.activeTool.type === "text" ||
+      this.state.activeTool.type === "image";
 
     if (!allowOnPointerDown) {
       return;
     }
 
-    if (this.state.elementType === "text") {
+    if (this.state.activeTool.type === "text") {
       this.handleTextOnPointerDown(event, pointerDownState);
       return;
     } else if (
-      this.state.elementType === "arrow" ||
-      this.state.elementType === "line"
+      this.state.activeTool.type === "arrow" ||
+      this.state.activeTool.type === "line"
     ) {
       this.handleLinearElementOnPointerDown(
         event,
-        this.state.elementType,
+        this.state.activeTool.type,
         pointerDownState,
       );
-    } else if (this.state.elementType === "image") {
+    } else if (this.state.activeTool.type === "image") {
       // reset image preview on pointerdown
       setCursor(this.canvas, CURSOR_TYPE.CROSSHAIR);
 
@@ -2986,15 +2986,15 @@ class App extends React.Component<AppProps, AppState> {
         x,
         y,
       });
-    } else if (this.state.elementType === "freedraw") {
+    } else if (this.state.activeTool.type === "freedraw") {
       this.handleFreeDrawElementOnPointerDown(
         event,
-        this.state.elementType,
+        this.state.activeTool.type,
         pointerDownState,
       );
-    } else if (this.state.elementType !== "eraser") {
+    } else if (this.state.activeTool.type !== "eraser") {
       this.createGenericElementOnPointerDown(
-        this.state.elementType,
+        this.state.activeTool.type,
         pointerDownState,
       );
     }
@@ -3312,7 +3312,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private clearSelectionIfNotUsingSelection = (): void => {
-    if (this.state.elementType !== "selection") {
+    if (this.state.activeTool.type !== "selection") {
       this.setState({
         selectedElementIds: {},
         selectedGroupIds: {},
@@ -3328,7 +3328,7 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
     pointerDownState: PointerDownState,
   ): boolean => {
-    if (this.state.elementType === "selection") {
+    if (this.state.activeTool.type === "selection") {
       const elements = this.scene.getElements();
       const selectedElements = getSelectedElements(elements, this.state);
       if (selectedElements.length === 1 && !this.state.editingLinearElement) {
@@ -3573,7 +3573,7 @@ class App extends React.Component<AppProps, AppState> {
     resetCursor(this.canvas);
     if (!this.state.elementLocked) {
       this.setState({
-        elementType: "selection",
+        activeTool: { type: "selection" },
       });
     }
   };
@@ -3882,8 +3882,8 @@ class App extends React.Component<AppProps, AppState> {
       // triggering pointermove)
       if (
         !pointerDownState.drag.hasOccurred &&
-        (this.state.elementType === "arrow" ||
-          this.state.elementType === "line")
+        (this.state.activeTool.type === "arrow" ||
+          this.state.activeTool.type === "line")
       ) {
         if (
           distance2d(
@@ -4078,7 +4078,7 @@ class App extends React.Component<AppProps, AppState> {
 
         if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
           ({ width: dx, height: dy } = getPerfectElementSize(
-            this.state.elementType,
+            this.state.activeTool.type,
             dx,
             dy,
           ));
@@ -4106,7 +4106,7 @@ class App extends React.Component<AppProps, AppState> {
         this.maybeDragNewGenericElement(pointerDownState, event);
       }
 
-      if (this.state.elementType === "selection") {
+      if (this.state.activeTool.type === "selection") {
         pointerDownState.boxSelection.hasOccurred = true;
 
         const elements = this.scene.getElements();
@@ -4217,7 +4217,7 @@ class App extends React.Component<AppProps, AppState> {
         draggingElement,
         resizingElement,
         multiElement,
-        elementType,
+        activeTool,
         elementLocked,
         isResizing,
         isRotating,
@@ -4386,7 +4386,7 @@ class App extends React.Component<AppProps, AppState> {
             resetCursor(this.canvas);
             this.setState((prevState) => ({
               draggingElement: null,
-              elementType: "selection",
+              activeTool: { type: "selection" },
               selectedElementIds: {
                 ...prevState.selectedElementIds,
                 [this.state.draggingElement!.id]: true,
@@ -4406,7 +4406,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        elementType !== "selection" &&
+        activeTool.type !== "selection" &&
         draggingElement &&
         isInvisiblySmallElement(draggingElement)
       ) {
@@ -4575,7 +4575,7 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (!elementLocked && elementType !== "freedraw" && draggingElement) {
+      if (!elementLocked && activeTool.type !== "freedraw" && draggingElement) {
         this.setState((prevState) => ({
           selectedElementIds: {
             ...prevState.selectedElementIds,
@@ -4585,7 +4585,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        elementType !== "selection" ||
+        activeTool.type !== "selection" ||
         isSomeElementSelected(this.scene.getElements(), this.state)
       ) {
         this.history.resumeRecording();
@@ -4599,12 +4599,12 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
 
-      if (!elementLocked && elementType !== "freedraw") {
+      if (!elementLocked && activeTool.type !== "freedraw") {
         resetCursor(this.canvas);
         this.setState({
           draggingElement: null,
           suggestedBindings: [],
-          elementType: "selection",
+          activeTool: { type: "selection" },
         });
       } else {
         this.setState({
@@ -4910,7 +4910,7 @@ class App extends React.Component<AppProps, AppState> {
         {
           pendingImageElement: null,
           editingElement: null,
-          elementType: "selection",
+          activeTool: { type: "selection" },
         },
         () => {
           this.actionManager.executeAction(actionFinalize);
@@ -5280,7 +5280,7 @@ class App extends React.Component<AppProps, AppState> {
         (event.nativeEvent.pointerType === "pen" &&
           // always allow if user uses a pen secondary button
           event.button !== POINTER_BUTTON.SECONDARY)) &&
-      this.state.elementType !== "selection"
+      this.state.activeTool.type !== "selection"
     ) {
       return;
     }
@@ -5314,10 +5314,13 @@ class App extends React.Component<AppProps, AppState> {
     if (!draggingElement) {
       return;
     }
-    if (draggingElement.type === "selection") {
+    if (
+      draggingElement.type === "selection" &&
+      this.state.activeTool.type !== "eraser"
+    ) {
       dragNewElement(
         draggingElement,
-        this.state.elementType,
+        this.state.activeTool.type,
         pointerDownState.origin.x,
         pointerDownState.origin.y,
         pointerCoords.x,
@@ -5344,7 +5347,7 @@ class App extends React.Component<AppProps, AppState> {
 
       dragNewElement(
         draggingElement,
-        this.state.elementType,
+        this.state.activeTool.type,
         pointerDownState.originInGrid.x,
         pointerDownState.originInGrid.y,
         gridX,
diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx
index 250f904d536e..983938a85e40 100644
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@@ -20,28 +20,28 @@ interface HintViewerProps {
 }
 
 const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
+  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
   if (isEraserActive(appState)) {
     return t("hints.eraserRevert");
   }
-  if (elementType === "arrow" || elementType === "line") {
+  if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (!multiMode) {
       return t("hints.linearElement");
     }
     return t("hints.linearElementMulti");
   }
 
-  if (elementType === "freedraw") {
+  if (activeTool.type === "freedraw") {
     return t("hints.freeDraw");
   }
 
-  if (elementType === "text") {
+  if (activeTool.type === "text") {
     return t("hints.text");
   }
 
-  if (appState.elementType === "image" && appState.pendingImageElement) {
+  if (appState.activeTool.type === "image" && appState.pendingImageElement) {
     return t("hints.placeImage");
   }
 
@@ -73,7 +73,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.text_editing");
   }
 
-  if (elementType === "selection") {
+  if (activeTool.type === "selection") {
     if (
       appState.draggingElement?.type === "selection" &&
       !appState.editingElement &&
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index ef1df4bb9f3a..91f021664ebc 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -248,7 +248,7 @@ const LayerUI = ({
           appState={appState}
           elements={elements}
           renderAction={actionManager.renderAction}
-          elementType={appState.elementType}
+          activeTool={appState.activeTool.type}
         />
       </Island>
     </Section>
@@ -345,7 +345,7 @@ const LayerUI = ({
                         <ShapesSwitcher
                           appState={appState}
                           canvas={canvas}
-                          elementType={appState.elementType}
+                          activeTool={appState.activeTool}
                           setAppState={setAppState}
                           onImageAction={({ pointerType }) => {
                             onImageAction({
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 5ef6d9f44e6e..7a928fb4b3fa 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -74,7 +74,7 @@ export const MobileMenu = ({
                     <ShapesSwitcher
                       appState={appState}
                       canvas={canvas}
-                      elementType={appState.elementType}
+                      activeTool={appState.activeTool}
                       setAppState={setAppState}
                       onImageAction={({ pointerType }) => {
                         onImageAction({
@@ -226,7 +226,7 @@ export const MobileMenu = ({
                 appState={appState}
                 elements={elements}
                 renderAction={actionManager.renderAction}
-                elementType={appState.elementType}
+                activeTool={appState.activeTool.type}
               />
             </Section>
           ) : null}
diff --git a/src/data/restore.ts b/src/data/restore.ts
index c8e18c026b0f..d993f01f69c3 100644
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -30,8 +30,8 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
-export const AllowedExcalidrawElementTypes: Record<
-  AppState["elementType"],
+export const AllowedExcalidrawActiveTools: Record<
+  AppState["activeTool"]["type"],
   boolean
 > = {
   selection: true,
@@ -255,9 +255,9 @@ export const restoreAppState = (
 
   return {
     ...nextAppState,
-    elementType: AllowedExcalidrawElementTypes[nextAppState.elementType]
-      ? nextAppState.elementType
-      : "selection",
+    activeTool: AllowedExcalidrawActiveTools[nextAppState.activeTool.type]
+      ? nextAppState.activeTool
+      : { type: "selection" },
     // Migrates from previous version where appState.zoom was a number
     zoom:
       typeof appState.zoom === "number"
diff --git a/src/element/dragElements.ts b/src/element/dragElements.ts
index 42990b51f55b..251b345f8e36 100644
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -92,7 +92,7 @@ export const getDragOffsetXY = (
 
 export const dragNewElement = (
   draggingElement: NonDeletedExcalidrawElement,
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
   originX: number,
   originY: number,
   x: number,
diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts
index 634e9ddae415..ff4925639090 100644
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -12,6 +12,7 @@ import {
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawElement,
 } from "./types";
 import {
   getElementAbsoluteCoords,
@@ -186,7 +187,7 @@ const validateTwoPointElementNormalized = (
 };
 
 const getPerfectElementSizeWithRotation = (
-  elementType: string,
+  elementType: ExcalidrawElement["type"],
   width: number,
   height: number,
   angle: number,
diff --git a/src/element/showSelectedShapeActions.ts b/src/element/showSelectedShapeActions.ts
index 7dce2628d181..4c0d5b0afcef 100644
--- a/src/element/showSelectedShapeActions.ts
+++ b/src/element/showSelectedShapeActions.ts
@@ -10,6 +10,6 @@ export const showSelectedShapeActions = (
     !appState.viewModeEnabled &&
       (appState.editingElement ||
         getSelectedElements(elements, appState).length ||
-        (appState.elementType !== "selection" &&
-          appState.elementType !== "eraser")),
+        (appState.activeTool.type !== "selection" &&
+          appState.activeTool.type !== "eraser")),
   );
diff --git a/src/element/sizeHelpers.ts b/src/element/sizeHelpers.ts
index d370192251a8..454cb80f43d4 100644
--- a/src/element/sizeHelpers.ts
+++ b/src/element/sizeHelpers.ts
@@ -2,6 +2,7 @@ import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
+import { AppState } from "../types";
 
 export const isInvisiblySmallElement = (
   element: ExcalidrawElement,
@@ -16,7 +17,7 @@ export const isInvisiblySmallElement = (
  * Makes a perfect shape or diagonal/horizontal/vertical line
  */
 export const getPerfectElementSize = (
-  elementType: string,
+  elementType: AppState["activeTool"]["type"],
   width: number,
   height: number,
 ): { width: number; height: number } => {
diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts
index 4776fd872f61..58d9492fd5e6 100644
--- a/src/element/typeChecks.ts
+++ b/src/element/typeChecks.ts
@@ -61,7 +61,7 @@ export const isLinearElement = (
 };
 
 export const isLinearElementType = (
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
 ): boolean => {
   return (
     elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
@@ -75,7 +75,7 @@ export const isBindingElement = (
 };
 
 export const isBindingElementType = (
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
 ): boolean => {
   return elementType === "arrow";
 };
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index d399d2565e38..bacc760649e0 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -11,6 +11,18 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
+## Unreleased
+
+### Excalidraw API
+
+#### Refactor
+
+- Rename `appState.elementType` to [`appState.activeTool`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L80) which is now an object.
+
+##### BREAKING CHANGE
+
+You will need to pass `activeTool` instead of `elementType` from now onwards in `appState`
+
 ## 0.11.0 (2022-02-17)
 
 ## Excalidraw API
diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index 89efe544e844..1f9b7f00c22e 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -2,6 +2,9 @@
 
 exports[`contextMenu element selecting 'Add to library' in context menu adds element to library: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -24,7 +27,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -173,6 +175,9 @@ exports[`contextMenu element selecting 'Add to library' in context menu adds ele
 
 exports[`contextMenu element selecting 'Bring forward' in context menu brings element forward: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -195,7 +200,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -500,6 +504,9 @@ exports[`contextMenu element selecting 'Bring forward' in context menu brings el
 
 exports[`contextMenu element selecting 'Bring to front' in context menu brings element to front: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -522,7 +529,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -827,6 +833,9 @@ exports[`contextMenu element selecting 'Bring to front' in context menu brings e
 
 exports[`contextMenu element selecting 'Copy styles' in context menu copies styles: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -849,7 +858,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -998,6 +1006,9 @@ exports[`contextMenu element selecting 'Copy styles' in context menu copies styl
 
 exports[`contextMenu element selecting 'Delete' in context menu deletes element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -1020,7 +1031,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -1204,6 +1214,9 @@ exports[`contextMenu element selecting 'Delete' in context menu deletes element:
 
 exports[`contextMenu element selecting 'Duplicate' in context menu duplicates element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -1226,7 +1239,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -1467,6 +1479,9 @@ exports[`contextMenu element selecting 'Duplicate' in context menu duplicates el
 
 exports[`contextMenu element selecting 'Group selection' in context menu groups selected elements: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -1489,7 +1504,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -1812,6 +1826,9 @@ exports[`contextMenu element selecting 'Group selection' in context menu groups
 
 exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "#e64980",
@@ -1834,7 +1851,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2587,6 +2603,9 @@ exports[`contextMenu element selecting 'Paste styles' in context menu pastes sty
 
 exports[`contextMenu element selecting 'Send backward' in context menu sends element backward: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2609,7 +2628,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2914,6 +2932,9 @@ exports[`contextMenu element selecting 'Send backward' in context menu sends ele
 
 exports[`contextMenu element selecting 'Send to back' in context menu sends element to back: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2936,7 +2957,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3241,6 +3261,9 @@ exports[`contextMenu element selecting 'Send to back' in context menu sends elem
 
 exports[`contextMenu element selecting 'Ungroup selection' in context menu ungroups selected group: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -3263,7 +3286,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3646,6 +3668,9 @@ exports[`contextMenu element selecting 'Ungroup selection' in context menu ungro
 
 exports[`contextMenu element shows 'Group selection' in context menu for multiple selected elements: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -3668,7 +3693,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3915,6 +3939,9 @@ exports[`contextMenu element shows 'Group selection' in context menu for multipl
 
 exports[`contextMenu element shows 'Ungroup selection' in context menu for group inside selected elements: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -3937,7 +3964,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4263,6 +4289,9 @@ exports[`contextMenu element shows 'Ungroup selection' in context menu for group
 
 exports[`contextMenu element shows context menu for canvas: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4285,7 +4314,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4365,6 +4393,9 @@ exports[`contextMenu element shows context menu for canvas: [end of test] number
 
 exports[`contextMenu element shows context menu for element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4387,7 +4418,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4445,6 +4475,9 @@ Object {
 
 exports[`contextMenu element shows context menu for element: [end of test] appState 2`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4467,7 +4500,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4692,4 +4724,4 @@ exports[`contextMenu element shows context menu for element: [end of test] numbe
 
 exports[`contextMenu element shows context menu for element: [end of test] number of renders 1`] = `9`;
 
-exports[`contextMenu element shows context menu for element: [end of test] number of renders 2`] = `6`;
\ No newline at end of file
+exports[`contextMenu element shows context menu for element: [end of test] number of renders 2`] = `6`;
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index c719ccb510b1..d3bf0703206a 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -2,6 +2,9 @@
 
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -24,7 +27,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -495,6 +497,9 @@ exports[`given element A and group of elements B and given both are selected whe
 
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -517,7 +522,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -994,6 +998,9 @@ exports[`given element A and group of elements B and given both are selected whe
 
 exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -1016,7 +1023,6 @@ Object {
   "editingGroupId": "id10",
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -1828,6 +1834,9 @@ exports[`regression tests Cmd/Ctrl-click exclusively select element under pointe
 
 exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -1850,7 +1859,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2042,6 +2050,9 @@ exports[`regression tests Drags selected element when hitting only bounding box
 
 exports[`regression tests adjusts z order when grouping: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2064,7 +2075,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2532,6 +2542,9 @@ exports[`regression tests adjusts z order when grouping: [end of test] number of
 
 exports[`regression tests alt-drag duplicates an element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2554,7 +2567,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2799,6 +2811,9 @@ exports[`regression tests alt-drag duplicates an element: [end of test] number o
 
 exports[`regression tests arrow keys: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2821,7 +2836,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -2970,6 +2984,9 @@ exports[`regression tests arrow keys: [end of test] number of renders 1`] = `20`
 
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -2992,7 +3009,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3443,6 +3459,9 @@ exports[`regression tests can drag element that covers another element, while an
 
 exports[`regression tests change the properties of a shape: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "#fa5252",
@@ -3465,7 +3484,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3692,6 +3710,9 @@ exports[`regression tests change the properties of a shape: [end of test] number
 
 exports[`regression tests click on an element and drag it: [dragged] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -3714,7 +3735,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -3906,6 +3926,9 @@ exports[`regression tests click on an element and drag it: [dragged] number of r
 
 exports[`regression tests click on an element and drag it: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -3928,7 +3951,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4163,6 +4185,9 @@ exports[`regression tests click on an element and drag it: [end of test] number
 
 exports[`regression tests click to select a shape: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4185,7 +4210,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4429,6 +4453,9 @@ exports[`regression tests click to select a shape: [end of test] number of rende
 
 exports[`regression tests click-drag to select a group: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4451,7 +4478,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -4813,6 +4839,9 @@ exports[`regression tests click-drag to select a group: [end of test] number of
 
 exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -4859,7 +4888,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -5126,6 +5154,9 @@ exports[`regression tests deselects group of selected elements on pointer down w
 
 exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -5172,7 +5203,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -5415,6 +5445,9 @@ exports[`regression tests deselects group of selected elements on pointer up whe
 
 exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -5461,7 +5494,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -5634,6 +5666,9 @@ exports[`regression tests deselects selected element on pointer down when pointe
 
 exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -5680,7 +5715,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -5829,6 +5863,9 @@ exports[`regression tests deselects selected element, on pointer up, when click
 
 exports[`regression tests double click to edit a group: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -5851,7 +5888,6 @@ Object {
   "editingGroupId": "id3",
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -6314,6 +6350,9 @@ exports[`regression tests double click to edit a group: [end of test] number of
 
 exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -6336,7 +6375,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -6651,6 +6689,9 @@ exports[`regression tests drags selected elements from point inside common bound
 
 exports[`regression tests draw every type of shape: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "freedraw",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -6673,7 +6714,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -8829,6 +8869,9 @@ exports[`regression tests draw every type of shape: [end of test] number of rend
 
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -8851,7 +8894,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -9214,6 +9256,9 @@ exports[`regression tests given a group of selected elements with an element tha
 
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "#fa5252",
@@ -9236,7 +9281,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -9481,6 +9525,9 @@ exports[`regression tests given a selected element A and a not selected element
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -9503,7 +9550,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -9710,6 +9756,9 @@ exports[`regression tests given selected element A with lower z-index than unsel
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -9732,7 +9781,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10006,6 +10054,9 @@ exports[`regression tests given selected element A with lower z-index than unsel
 
 exports[`regression tests key 2 selects rectangle tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10028,7 +10079,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10177,6 +10227,9 @@ exports[`regression tests key 2 selects rectangle tool: [end of test] number of
 
 exports[`regression tests key 3 selects diamond tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10199,7 +10252,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10348,6 +10400,9 @@ exports[`regression tests key 3 selects diamond tool: [end of test] number of re
 
 exports[`regression tests key 4 selects ellipse tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10370,7 +10425,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10519,6 +10573,9 @@ exports[`regression tests key 4 selects ellipse tool: [end of test] number of re
 
 exports[`regression tests key 5 selects arrow tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10541,7 +10598,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10720,6 +10776,9 @@ exports[`regression tests key 5 selects arrow tool: [end of test] number of rend
 
 exports[`regression tests key 6 selects line tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10742,7 +10801,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -10921,6 +10979,9 @@ exports[`regression tests key 6 selects line tool: [end of test] number of rende
 
 exports[`regression tests key 7 selects freedraw tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "freedraw",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -10943,7 +11004,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11140,6 +11200,9 @@ exports[`regression tests key 7 selects freedraw tool: [end of test] number of r
 
 exports[`regression tests key a selects arrow tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -11162,7 +11225,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11341,6 +11403,9 @@ exports[`regression tests key a selects arrow tool: [end of test] number of rend
 
 exports[`regression tests key d selects diamond tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -11363,7 +11428,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11512,6 +11576,9 @@ exports[`regression tests key d selects diamond tool: [end of test] number of re
 
 exports[`regression tests key l selects line tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -11534,7 +11601,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11713,6 +11779,9 @@ exports[`regression tests key l selects line tool: [end of test] number of rende
 
 exports[`regression tests key o selects ellipse tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -11735,7 +11804,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -11884,6 +11952,9 @@ exports[`regression tests key o selects ellipse tool: [end of test] number of re
 
 exports[`regression tests key r selects rectangle tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -11906,7 +11977,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -12055,6 +12125,9 @@ exports[`regression tests key r selects rectangle tool: [end of test] number of
 
 exports[`regression tests key x selects freedraw tool: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "freedraw",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -12077,7 +12150,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "freedraw",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -12274,6 +12346,9 @@ exports[`regression tests key x selects freedraw tool: [end of test] number of r
 
 exports[`regression tests make a group and duplicate it: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -12296,7 +12371,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -13043,6 +13117,9 @@ exports[`regression tests make a group and duplicate it: [end of test] number of
 
 exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -13065,7 +13142,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -13310,6 +13386,9 @@ exports[`regression tests noop interaction after undo shouldn't create history e
 
 exports[`regression tests pinch-to-zoom works: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -13332,7 +13411,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -13414,6 +13492,9 @@ exports[`regression tests pinch-to-zoom works: [end of test] number of renders 1
 
 exports[`regression tests rerenders UI on language change: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "rectangle",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -13436,7 +13517,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "rectangle",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -13516,6 +13596,9 @@ exports[`regression tests rerenders UI on language change: [end of test] number
 
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -13538,7 +13621,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -13690,6 +13772,9 @@ exports[`regression tests shift click on selected element should deselect it on
 
 exports[`regression tests shift-click to multiselect, then drag: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -13712,7 +13797,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -14030,6 +14114,9 @@ exports[`regression tests shift-click to multiselect, then drag: [end of test] n
 
 exports[`regression tests should show fill icons when element has non transparent background: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "#fa5252",
@@ -14052,7 +14139,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -14240,6 +14326,9 @@ exports[`regression tests should show fill icons when element has non transparen
 
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -14262,7 +14351,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -15124,6 +15212,9 @@ exports[`regression tests single-clicking on a subgroup of a selected group shou
 
 exports[`regression tests spacebar + drag scrolls the canvas: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -15146,7 +15237,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -15226,6 +15316,9 @@ exports[`regression tests spacebar + drag scrolls the canvas: [end of test] numb
 
 exports[`regression tests supports nested groups: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -15248,7 +15341,6 @@ Object {
   "editingGroupId": "id3",
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -16015,6 +16107,9 @@ exports[`regression tests supports nested groups: [end of test] number of render
 
 exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -16061,7 +16156,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -16447,6 +16541,9 @@ exports[`regression tests switches from group of selected elements to another el
 
 exports[`regression tests switches selected element on pointer down: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -16493,7 +16590,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -16760,6 +16856,9 @@ exports[`regression tests switches selected element on pointer down: [end of tes
 
 exports[`regression tests two-finger scroll works: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -16782,7 +16881,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -16864,6 +16962,9 @@ exports[`regression tests two-finger scroll works: [end of test] number of rende
 
 exports[`regression tests undo/redo drawing an element: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -16886,7 +16987,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -17392,6 +17492,9 @@ exports[`regression tests undo/redo drawing an element: [end of test] number of
 
 exports[`regression tests updates fontSize & fontFamily appState: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "text",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -17414,7 +17517,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "text",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -17494,6 +17596,9 @@ exports[`regression tests updates fontSize & fontFamily appState: [end of test]
 
 exports[`regression tests zoom hotkeys: [end of test] appState 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -17516,7 +17621,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
diff --git a/src/tests/data/restore.test.ts b/src/tests/data/restore.test.ts
index ce010f8126d3..82878bee30f9 100644
--- a/src/tests/data/restore.test.ts
+++ b/src/tests/data/restore.test.ts
@@ -297,12 +297,12 @@ describe("restoreElements", () => {
 describe("restoreAppState", () => {
   it("should restore with imported data", () => {
     const stubImportedAppState = getDefaultAppState();
-    stubImportedAppState.elementType = "selection";
+    stubImportedAppState.activeTool.type = "selection";
     stubImportedAppState.cursorButton = "down";
     stubImportedAppState.name = "imported app state";
 
     const stubLocalAppState = getDefaultAppState();
-    stubLocalAppState.elementType = "rectangle";
+    stubLocalAppState.activeTool.type = "rectangle";
     stubLocalAppState.cursorButton = "up";
     stubLocalAppState.name = "local app state";
 
@@ -310,7 +310,7 @@ describe("restoreAppState", () => {
       stubImportedAppState,
       stubLocalAppState,
     );
-    expect(restoredAppState.elementType).toBe(stubImportedAppState.elementType);
+    expect(restoredAppState.activeTool).toBe(stubImportedAppState.activeTool);
     expect(restoredAppState.cursorButton).toBe(
       stubImportedAppState.cursorButton,
     );
@@ -391,14 +391,14 @@ describe("restoreAppState", () => {
   it("when imported data state has a not allowed Excalidraw Element Types", () => {
     const stubImportedAppState: any = getDefaultAppState();
 
-    stubImportedAppState.elementType = "not allowed Excalidraw Element Types";
+    stubImportedAppState.activeTool = "not allowed Excalidraw Element Types";
     const stubLocalAppState = getDefaultAppState();
 
     const restoredAppState = restore.restoreAppState(
       stubImportedAppState,
       stubLocalAppState,
     );
-    expect(restoredAppState.elementType).toBe("selection");
+    expect(restoredAppState.activeTool.type).toBe("selection");
   });
 
   describe("with zoom in imported data state", () => {
diff --git a/src/tests/library.test.tsx b/src/tests/library.test.tsx
index a959099d204a..5b8bf26411a1 100644
--- a/src/tests/library.test.tsx
+++ b/src/tests/library.test.tsx
@@ -60,6 +60,6 @@ describe("library", () => {
     await waitFor(() => {
       expect(h.elements).toEqual([expect.objectContaining({ id: "A_copy" })]);
     });
-    expect(h.state.elementType).toBe("selection");
+    expect(h.state.activeTool.type).toBe("selection");
   });
 });
diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index 6ebff17400db..d195ca7c839c 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -2,6 +2,9 @@
 
 exports[`exportToSvg with default arguments 1`] = `
 Object {
+  "activeTool": Object {
+    "type": "selection",
+  },
   "collaborators": Map {},
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
@@ -24,7 +27,6 @@ Object {
   "editingGroupId": null,
   "editingLinearElement": null,
   "elementLocked": false,
-  "elementType": "selection",
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx
index bd768e6788b4..3fbd6513b9f7 100644
--- a/src/tests/regressionTests.test.tsx
+++ b/src/tests/regressionTests.test.tsx
@@ -144,7 +144,7 @@ describe("regression tests", () => {
       it(`key ${key} selects ${shape} tool`, () => {
         Keyboard.keyPress(key);
 
-        expect(h.state.elementType).toBe(shape);
+        expect(h.state.activeTool.type).toBe(shape);
 
         mouse.down(10, 10);
         mouse.up(10, 10);
diff --git a/src/types.ts b/src/types.ts
index ecd92c679504..5d2269c4aa6f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -77,7 +77,7 @@ export type AppState = {
   // (e.g. text element when typing into the input)
   editingElement: NonDeletedExcalidrawElement | null;
   editingLinearElement: LinearElementEditor | null;
-  elementType: typeof SHAPES[number]["value"] | "eraser";
+  activeTool: { type: typeof SHAPES[number]["value"] | "eraser" };
   elementLocked: boolean;
   penMode: boolean;
   penDetected: boolean;
diff --git a/src/utils.ts b/src/utils.ts
index 3648286726d6..0ab1ccae3588 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -268,13 +268,13 @@ export const setCursorForShape = (
   if (!canvas) {
     return;
   }
-  if (appState.elementType === "selection") {
+  if (appState.activeTool.type === "selection") {
     resetCursor(canvas);
-  } else if (appState.elementType === "eraser") {
+  } else if (appState.activeTool.type === "eraser") {
     setEraserCursor(canvas, appState.theme);
     // do nothing if image tool is selected which suggests there's
     // a image-preview set as the cursor
-  } else if (appState.elementType !== "image") {
+  } else if (appState.activeTool.type !== "image") {
     canvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
   }
 };