From 81ebf82979f7efba460a882478284583451f2f32 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Thu, 15 Jun 2023 00:42:01 +0800
Subject: [PATCH] feat: introduce frames (#6123)

Co-authored-by: dwelle <luzar.david@gmail.com>
---
 src/actions/actionAddToLibrary.ts             |    5 +-
 src/actions/actionAlign.tsx                   |   40 +-
 src/actions/actionBoundText.tsx               |    1 +
 src/actions/actionCanvas.tsx                  |   10 +-
 src/actions/actionClipboard.tsx               |   25 +-
 src/actions/actionDeleteSelected.tsx          |   14 +-
 src/actions/actionDistribute.tsx              |   18 +-
 src/actions/actionDuplicateSelection.tsx      |   80 +-
 src/actions/actionElementLock.ts              |   21 +-
 src/actions/actionFlip.ts                     |   14 +-
 src/actions/actionFrame.ts                    |  140 +++
 src/actions/actionGroup.tsx                   |   86 +-
 src/actions/actionLinearEditor.ts             |    8 +-
 src/actions/actionMenu.tsx                    |    1 -
 src/actions/actionProperties.tsx              |    5 +-
 src/actions/actionSelectAll.ts                |   22 +-
 src/actions/actionStyles.ts                   |   12 +-
 src/actions/types.ts                          |    5 +
 src/align.ts                                  |    4 +-
 src/appState.ts                               |   14 +
 src/clipboard.ts                              |   21 +-
 src/components/Actions.tsx                    |  150 ++-
 src/components/App.tsx                        | 1025 +++++++++++++++--
 src/components/HelpDialog.tsx                 |    1 +
 src/components/ImageExportDialog.tsx          |    5 +-
 src/components/LayerUI.tsx                    |    9 +-
 src/components/LibraryMenu.tsx                |    6 +-
 src/components/ToolButton.tsx                 |    4 +-
 src/components/Toolbar.scss                   |   19 +-
 .../dropdownMenu/DropdownMenuTrigger.tsx      |   10 +-
 .../hoc/withInternalFallback.test.tsx         |   24 +-
 src/components/icons.tsx                      |   21 +
 src/components/main-menu/MainMenu.tsx         |    1 +
 src/constants.ts                              |   11 +
 src/data/restore.ts                           |    6 +
 src/element/Hyperlink.tsx                     |    6 +-
 src/element/binding.ts                        |    2 +-
 src/element/bounds.ts                         |  266 ++++-
 src/element/collision.ts                      |  168 ++-
 src/element/dragElements.ts                   |   35 +-
 src/element/index.ts                          |   14 +-
 src/element/linearElementEditor.ts            |    2 +-
 src/element/newElement.ts                     |   25 +
 src/element/resizeElements.ts                 |   82 +-
 src/element/textElement.ts                    |   10 +-
 src/element/transformHandles.ts               |   14 +-
 src/element/typeChecks.ts                     |    7 +
 src/element/types.ts                          |   12 +-
 src/frame.ts                                  |  705 ++++++++++++
 src/groups.ts                                 |   40 +
 src/keys.ts                                   |    1 +
 src/locales/en.json                           |    6 +-
 src/math.ts                                   |    2 +-
 src/packages/excalidraw/example/App.tsx       |    1 +
 .../excalidraw/example/initialData.js         |   44 +
 src/renderer/renderElement.ts                 |  163 ++-
 src/renderer/renderScene.ts                   |  203 +++-
 src/scene/Scene.ts                            |   52 +-
 src/scene/comparisons.ts                      |    3 +-
 src/scene/export.ts                           |   83 +-
 src/scene/selection.ts                        |   96 +-
 src/shapes.tsx                                |    8 +
 .../__snapshots__/contextmenu.test.tsx.snap   |  275 +++++
 .../__snapshots__/dragCreate.test.tsx.snap    |    5 +
 src/tests/__snapshots__/export.test.tsx.snap  |    3 +-
 src/tests/__snapshots__/move.test.tsx.snap    |    6 +
 .../multiPointCreate.test.tsx.snap            |    2 +
 .../regressionTests.test.tsx.snap             |  642 +++++++++++
 .../__snapshots__/selection.test.tsx.snap     |    5 +
 .../data/__snapshots__/restore.test.ts.snap   |    9 +
 src/tests/fixtures/elementFixture.ts          |    1 +
 src/tests/helpers/api.ts                      |    7 +-
 .../packages/__snapshots__/utils.test.ts.snap |    5 +
 src/tests/queries/toolQueries.ts              |    1 +
 .../scene/__snapshots__/export.test.ts.snap   |    5 +-
 src/types.ts                                  |   35 +-
 src/utils.ts                                  |   21 +-
 src/zindex.ts                                 |  133 ++-
 78 files changed, 4563 insertions(+), 480 deletions(-)
 create mode 100644 src/actions/actionFrame.ts
 create mode 100644 src/frame.ts

diff --git a/src/actions/actionAddToLibrary.ts b/src/actions/actionAddToLibrary.ts
index a4fca560..ef69a60d 100644
--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@@ -12,7 +12,10 @@ export const actionAddToLibrary = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      },
     );
     if (selectedElements.some((element) => element.type === "image")) {
       return {
diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx
index eceb4217..d917f803 100644
--- a/src/actions/actionAlign.tsx
+++ b/src/actions/actionAlign.tsx
@@ -10,6 +10,7 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
@@ -17,10 +18,20 @@ import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-const enableActionGroup = (
+const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
+) => {
+  const selectedElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+  return (
+    selectedElements.length > 1 &&
+    // TODO enable aligning frames when implemented properly
+    !selectedElements.some((el) => el.type === "frame")
+  );
+};
 
 const alignSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -36,14 +47,16 @@ const alignSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
   );
 };
 
 export const actionAlignTop = register({
   name: "alignTop",
   trackEvent: { category: "element" },
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -58,7 +71,7 @@ export const actionAlignTop = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -74,6 +87,7 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
   name: "alignBottom",
   trackEvent: { category: "element" },
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -88,7 +102,7 @@ export const actionAlignBottom = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -104,6 +118,7 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
   name: "alignLeft",
   trackEvent: { category: "element" },
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -118,7 +133,7 @@ export const actionAlignLeft = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -134,7 +149,7 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
   name: "alignRight",
   trackEvent: { category: "element" },
-
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -149,7 +164,7 @@ export const actionAlignRight = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -165,7 +180,7 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   trackEvent: { category: "element" },
-
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -178,7 +193,7 @@ export const actionAlignVerticallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -192,6 +207,7 @@ export const actionAlignVerticallyCentered = register({
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   trackEvent: { category: "element" },
+  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -204,7 +220,7 @@ export const actionAlignHorizontallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}
diff --git a/src/actions/actionBoundText.tsx b/src/actions/actionBoundText.tsx
index 658bdf8c..c8a1faac 100644
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@@ -249,6 +249,7 @@ export const actionWrapTextInContainer = register({
             "rectangle",
           ),
           groupIds: textElement.groupIds,
+          frameId: textElement.frameId,
         });
 
         // update bindings
diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 16c4fad1..a94a3672 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -20,6 +20,8 @@ import {
   isHandToolActive,
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
+import { Bounds } from "../element/bounds";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -206,7 +208,7 @@ export const actionResetZoom = register({
 });
 
 const zoomValueToFitBoundsOnViewport = (
-  bounds: [number, number, number, number],
+  bounds: Bounds,
   viewportDimensions: { width: number; height: number },
 ) => {
   const [x1, y1, x2, y2] = bounds;
@@ -234,8 +236,10 @@ export const zoomToFitElements = (
 
   const commonBounds =
     zoomToSelection && selectedElements.length > 0
-      ? getCommonBounds(selectedElements)
-      : getCommonBounds(nonDeletedElements);
+      ? getCommonBounds(excludeElementsInFramesFromSelection(selectedElements))
+      : getCommonBounds(
+          excludeElementsInFramesFromSelection(nonDeletedElements),
+        );
 
   const newZoom = {
     value: zoomValueToFitBoundsOnViewport(commonBounds, {
diff --git a/src/actions/actionClipboard.tsx b/src/actions/actionClipboard.tsx
index 18fefafd..c1834f51 100644
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -16,9 +16,12 @@ export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
+    const elementsToCopy = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
 
-    copyToClipboard(selectedElements, app.files);
+    copyToClipboard(elementsToCopy, app.files);
 
     return {
       commitToHistory: false,
@@ -75,7 +78,10 @@ export const actionCopyAsSvg = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      },
     );
     try {
       await exportCanvas(
@@ -119,7 +125,10 @@ export const actionCopyAsPng = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      },
     );
     try {
       await exportCanvas(
@@ -172,7 +181,9 @@ export const copyText = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+      },
     );
 
     const text = selectedElements
@@ -191,7 +202,9 @@ export const copyText = register({
   predicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, true).some(isTextElement)
+      getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+      }).some(isTextElement)
     );
   },
   contextItemLabel: "labels.copyText",
diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx
index 86b98528..b0486e0c 100644
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -1,4 +1,4 @@
-import { isSomeElementSelected } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
@@ -18,11 +18,23 @@ const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
+  const framesToBeDeleted = new Set(
+    getSelectedElements(
+      elements.filter((el) => el.type === "frame"),
+      appState,
+    ).map((el) => el.id),
+  );
+
   return {
     elements: elements.map((el) => {
       if (appState.selectedElementIds[el.id]) {
         return newElementWith(el, { isDeleted: true });
       }
+
+      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+        return newElementWith(el, { isDeleted: true });
+      }
+
       if (
         isBoundToContainer(el) &&
         appState.selectedElementIds[el.containerId]
diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx
index 9eaab70d..f6ab3f09 100644
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@@ -6,6 +6,7 @@ import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
@@ -16,7 +17,17 @@ import { register } from "./register";
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
+) => {
+  const selectedElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+  return (
+    selectedElements.length > 1 &&
+    // TODO enable distributing frames when implemented properly
+    !selectedElements.some((el) => el.type === "frame")
+  );
+};
 
 const distributeSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -32,8 +43,9 @@ const distributeSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
   );
 };
 
diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx
index e3e5fb85..ae2d6f7b 100644
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@@ -2,7 +2,7 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -20,9 +20,17 @@ import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
 } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";
+import { isBoundToContainer, isFrameElement } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
+import {
+  bindElementsToFramesAfterDuplication,
+  getFrameElements,
+} from "../frame";
+import {
+  excludeElementsInFramesFromSelection,
+  getSelectedElements,
+} from "../scene/selection";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -94,8 +102,11 @@ const duplicateElements = (
     return newElement;
   };
 
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(sortedElements, appState, true),
+  const idsOfElementsToDuplicate = arrayToMap(
+    getSelectedElements(sortedElements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    }),
   );
 
   // Ids of elements that have already been processed so we don't push them
@@ -129,12 +140,25 @@ const duplicateElements = (
     }
 
     const boundTextElement = getBoundTextElement(element);
-    if (selectedElementIds.get(element.id)) {
-      // if a group or a container/bound-text, duplicate atomically
-      if (element.groupIds.length || boundTextElement) {
+    const isElementAFrame = isFrameElement(element);
+
+    if (idsOfElementsToDuplicate.get(element.id)) {
+      // if a group or a container/bound-text or frame, duplicate atomically
+      if (element.groupIds.length || boundTextElement || isElementAFrame) {
         const groupId = getSelectedGroupForElement(appState, element);
         if (groupId) {
-          const groupElements = getElementsInGroup(sortedElements, groupId);
+          // TODO:
+          // remove `.flatMap...`
+          // if the elements in a frame are grouped when the frame is grouped
+          const groupElements = getElementsInGroup(
+            sortedElements,
+            groupId,
+          ).flatMap((element) =>
+            isFrameElement(element)
+              ? [...getFrameElements(elements, element.id), element]
+              : [element],
+          );
+
           elementsWithClones.push(
             ...markAsProcessed([
               ...groupElements,
@@ -156,10 +180,34 @@ const duplicateElements = (
           );
           continue;
         }
+        if (isElementAFrame) {
+          const elementsInFrame = getFrameElements(sortedElements, element.id);
+
+          elementsWithClones.push(
+            ...markAsProcessed([
+              ...elementsInFrame,
+              element,
+              ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
+              duplicateAndOffsetElement(element),
+            ]),
+          );
+
+          continue;
+        }
+      }
+      // since elements in frames have a lower z-index than the frame itself,
+      // they will be looped first and if their frames are selected as well,
+      // they will have been copied along with the frame atomically in the
+      // above branch, so we must skip those elements here
+      //
+      // now, for elements do not belong any frames or elements whose frames
+      // are selected (or elements that are left out from the above
+      // steps for whatever reason) we (should at least) duplicate them here
+      if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
+        elementsWithClones.push(
+          ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
+        );
       }
-      elementsWithClones.push(
-        ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
-      );
     } else {
       elementsWithClones.push(...markAsProcessed([element]));
     }
@@ -200,6 +248,14 @@ const duplicateElements = (
     oldElements,
     oldIdToDuplicatedId,
   );
+  bindElementsToFramesAfterDuplication(
+    finalElements,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+
+  const nextElementsToSelect =
+    excludeElementsInFramesFromSelection(newElements);
 
   return {
     elements: finalElements,
@@ -207,7 +263,7 @@ const duplicateElements = (
       {
         ...appState,
         selectedGroupIds: {},
-        selectedElementIds: newElements.reduce(
+        selectedElementIds: nextElementsToSelect.reduce(
           (acc: Record<ExcalidrawElement["id"], true>, element) => {
             if (!isBoundToContainer(element)) {
               acc[element.id] = true;
diff --git a/src/actions/actionElementLock.ts b/src/actions/actionElementLock.ts
index 922a5fae..20ceef78 100644
--- a/src/actions/actionElementLock.ts
+++ b/src/actions/actionElementLock.ts
@@ -11,8 +11,17 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
   trackEvent: { category: "element" },
+  predicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return !selectedElements.some(
+      (element) => element.locked && element.frameId,
+    );
+  },
   perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
+    const selectedElements = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
 
     if (!selectedElements.length) {
       return false;
@@ -38,8 +47,10 @@ export const actionToggleElementLock = register({
     };
   },
   contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, false);
-    if (selected.length === 1) {
+    const selected = getSelectedElements(elements, appState, {
+      includeBoundTextElement: false,
+    });
+    if (selected.length === 1 && selected[0].type !== "frame") {
       return selected[0].locked
         ? "labels.elementLock.unlock"
         : "labels.elementLock.lock";
@@ -54,7 +65,9 @@ export const actionToggleElementLock = register({
       event.key.toLocaleLowerCase() === KEYS.L &&
       event[KEYS.CTRL_OR_CMD] &&
       event.shiftKey &&
-      getSelectedElements(elements, appState, false).length > 0
+      getSelectedElements(elements, appState, {
+        includeBoundTextElement: false,
+      }).length > 0
     );
   },
 });
diff --git a/src/actions/actionFlip.ts b/src/actions/actionFlip.ts
index 8edbbc4a..8199d2f5 100644
--- a/src/actions/actionFlip.ts
+++ b/src/actions/actionFlip.ts
@@ -12,13 +12,17 @@ import {
   isBindingEnabled,
   unbindLinearElements,
 } from "../element/binding";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
-      elements: flipSelectedElements(elements, appState, "horizontal"),
+      elements: updateFrameMembershipOfSelectedElements(
+        flipSelectedElements(elements, appState, "horizontal"),
+        appState,
+      ),
       appState,
       commitToHistory: true,
     };
@@ -32,7 +36,10 @@ export const actionFlipVertical = register({
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
-      elements: flipSelectedElements(elements, appState, "vertical"),
+      elements: updateFrameMembershipOfSelectedElements(
+        flipSelectedElements(elements, appState, "vertical"),
+        appState,
+      ),
       appState,
       commitToHistory: true,
     };
@@ -50,6 +57,9 @@ const flipSelectedElements = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
+    {
+      includeElementsInFrames: true,
+    },
   );
 
   const updatedElements = flipElements(
diff --git a/src/actions/actionFrame.ts b/src/actions/actionFrame.ts
new file mode 100644
index 00000000..980d0f7d
--- /dev/null
+++ b/src/actions/actionFrame.ts
@@ -0,0 +1,140 @@
+import { getNonDeletedElements } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { removeAllElementsFromFrame } from "../frame";
+import { getFrameElements } from "../frame";
+import { KEYS } from "../keys";
+import { getSelectedElements } from "../scene";
+import { AppState } from "../types";
+import { setCursorForShape, updateActiveTool } from "../utils";
+import { register } from "./register";
+
+const isSingleFrameSelected = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) => {
+  const selectedElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+
+  return selectedElements.length === 1 && selectedElements[0].type === "frame";
+};
+
+export const actionSelectAllElementsInFrame = register({
+  name: "selectAllElementsInFrame",
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState) => {
+    const selectedFrame = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    )[0];
+
+    if (selectedFrame && selectedFrame.type === "frame") {
+      const elementsInFrame = getFrameElements(
+        getNonDeletedElements(elements),
+        selectedFrame.id,
+      ).filter((element) => !(element.type === "text" && element.containerId));
+
+      return {
+        elements,
+        appState: {
+          ...appState,
+          selectedElementIds: elementsInFrame.reduce((acc, element) => {
+            acc[element.id] = true;
+            return acc;
+          }, {} as Record<ExcalidrawElement["id"], true>),
+        },
+        commitToHistory: false,
+      };
+    }
+
+    return {
+      elements,
+      appState,
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.selectAllElementsInFrame",
+  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
+});
+
+export const actionRemoveAllElementsFromFrame = register({
+  name: "removeAllElementsFromFrame",
+  trackEvent: { category: "history" },
+  perform: (elements, appState) => {
+    const selectedFrame = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    )[0];
+
+    if (selectedFrame && selectedFrame.type === "frame") {
+      return {
+        elements: removeAllElementsFromFrame(elements, selectedFrame, appState),
+        appState: {
+          ...appState,
+          selectedElementIds: {
+            [selectedFrame.id]: true,
+          },
+        },
+        commitToHistory: true,
+      };
+    }
+
+    return {
+      elements,
+      appState,
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.removeAllElementsFromFrame",
+  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
+});
+
+export const actionToggleFrameRendering = register({
+  name: "toggleFrameRendering",
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState) => {
+    return {
+      elements,
+      appState: {
+        ...appState,
+        shouldRenderFrames: !appState.shouldRenderFrames,
+      },
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.toggleFrameRendering",
+  checked: (appState: AppState) => appState.shouldRenderFrames,
+});
+
+export const actionSetFrameAsActiveTool = register({
+  name: "setFrameAsActiveTool",
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    const nextActiveTool = updateActiveTool(appState, {
+      type: "frame",
+    });
+
+    setCursorForShape(app.canvas, {
+      ...appState,
+      activeTool: nextActiveTool,
+    });
+
+    return {
+      elements,
+      appState: {
+        ...appState,
+        activeTool: updateActiveTool(appState, {
+          type: "frame",
+        }),
+      },
+      commitToHistory: false,
+    };
+  },
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] &&
+    !event.shiftKey &&
+    !event.altKey &&
+    event.key.toLocaleLowerCase() === KEYS.F,
+});
diff --git a/src/actions/actionGroup.tsx b/src/actions/actionGroup.tsx
index 1e6bcfbb..5f22e3ae 100644
--- a/src/actions/actionGroup.tsx
+++ b/src/actions/actionGroup.tsx
@@ -17,9 +17,19 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  ExcalidrawTextElement,
+} from "../element/types";
 import { AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
+import {
+  getElementsInResizingFrame,
+  groupByFrames,
+  removeElementsFromFrame,
+  replaceAllElementsInFrame,
+} from "../frame";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -45,7 +55,9 @@ const enableActionGroup = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
-    true,
+    {
+      includeBoundTextElement: true,
+    },
   );
   return (
     selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@@ -55,11 +67,13 @@ const enableActionGroup = (
 export const actionGroup = register({
   name: "group",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+      },
     );
     if (selectedElements.length < 2) {
       // nothing to group
@@ -86,9 +100,31 @@ export const actionGroup = register({
         return { appState, elements, commitToHistory: false };
       }
     }
+
+    let nextElements = [...elements];
+
+    // this includes the case where we are grouping elements inside a frame
+    // and elements outside that frame
+    const groupingElementsFromDifferentFrames =
+      new Set(selectedElements.map((element) => element.frameId)).size > 1;
+    // when it happens, we want to remove elements that are in the frame
+    // and are going to be grouped from the frame (mouthful, I know)
+    if (groupingElementsFromDifferentFrames) {
+      const frameElementsMap = groupByFrames(selectedElements);
+
+      frameElementsMap.forEach((elementsInFrame, frameId) => {
+        nextElements = removeElementsFromFrame(
+          nextElements,
+          elementsInFrame,
+          appState,
+        );
+      });
+    }
+
     const newGroupId = randomId();
     const selectElementIds = arrayToMap(selectedElements);
-    const updatedElements = elements.map((element) => {
+
+    nextElements = nextElements.map((element) => {
       if (!selectElementIds.get(element.id)) {
         return element;
       }
@@ -102,17 +138,16 @@ export const actionGroup = register({
     });
     // keep the z order within the group the same, but move them
     // to the z order of the highest element in the layer stack
-    const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
+    const elementsInGroup = getElementsInGroup(nextElements, newGroupId);
     const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex =
-      updatedElements.lastIndexOf(lastElementInGroup);
-    const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
-    const elementsBeforeGroup = updatedElements
+    const lastGroupElementIndex = nextElements.lastIndexOf(lastElementInGroup);
+    const elementsAfterGroup = nextElements.slice(lastGroupElementIndex + 1);
+    const elementsBeforeGroup = nextElements
       .slice(0, lastGroupElementIndex)
       .filter(
         (updatedElement) => !isElementInGroup(updatedElement, newGroupId),
       );
-    const updatedElementsInOrder = [
+    nextElements = [
       ...elementsBeforeGroup,
       ...elementsInGroup,
       ...elementsAfterGroup,
@@ -122,9 +157,9 @@ export const actionGroup = register({
       appState: selectGroup(
         newGroupId,
         { ...appState, selectedGroupIds: {} },
-        getNonDeletedElements(updatedElementsInOrder),
+        getNonDeletedElements(nextElements),
       ),
-      elements: updatedElementsInOrder,
+      elements: nextElements,
       commitToHistory: true,
     };
   },
@@ -148,14 +183,23 @@ export const actionGroup = register({
 export const actionUngroup = register({
   name: "ungroup",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     const groupIds = getSelectedGroupIds(appState);
     if (groupIds.length === 0) {
       return { appState, elements, commitToHistory: false };
     }
 
+    let nextElements = [...elements];
+
+    const selectedElements = getSelectedElements(nextElements, appState);
+    const frames = selectedElements
+      .filter((element) => element.frameId)
+      .map((element) =>
+        app.scene.getElement(element.frameId!),
+      ) as ExcalidrawFrameElement[];
+
     const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
-    const nextElements = elements.map((element) => {
+    nextElements = nextElements.map((element) => {
       if (isBoundToContainer(element)) {
         boundTextElementIds.push(element.id);
       }
@@ -176,13 +220,23 @@ export const actionUngroup = register({
       getNonDeletedElements(nextElements),
     );
 
+    frames.forEach((frame) => {
+      if (frame) {
+        nextElements = replaceAllElementsInFrame(
+          nextElements,
+          getElementsInResizingFrame(nextElements, frame, appState),
+          frame,
+          appState,
+        );
+      }
+    });
+
     // remove binded text elements from selection
     boundTextElementIds.forEach(
       (id) => (updateAppState.selectedElementIds[id] = false),
     );
     return {
       appState: updateAppState,
-
       elements: nextElements,
       commitToHistory: true,
     };
diff --git a/src/actions/actionLinearEditor.ts b/src/actions/actionLinearEditor.ts
index fc86eb16..11700f37 100644
--- a/src/actions/actionLinearEditor.ts
+++ b/src/actions/actionLinearEditor.ts
@@ -21,7 +21,9 @@ export const actionToggleLinearEditor = register({
     const selectedElement = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+      },
     )[0] as ExcalidrawLinearElement;
 
     const editingLinearElement =
@@ -40,7 +42,9 @@ export const actionToggleLinearEditor = register({
     const selectedElement = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      true,
+      {
+        includeBoundTextElement: true,
+      },
     )[0] as ExcalidrawLinearElement;
     return appState.editingLinearElement?.elementId === selectedElement.id
       ? "labels.lineEditor.exit"
diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx
index 27bd3b37..80a5c2b1 100644
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@@ -67,7 +67,6 @@ export const actionFullScreen = register({
       commitToHistory: false,
     };
   },
-  keyTest: (event) => event.key === KEYS.F && !event[KEYS.CTRL_OR_CMD],
 });
 
 export const actionShortcuts = register({
diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index d319337c..e0d61a27 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -102,8 +102,11 @@ const changeProperty = (
   includeBoundText = false,
 ) => {
   const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, includeBoundText),
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: includeBoundText,
+    }),
   );
+
   return elements.map((element) => {
     if (
       selectedElementIds.get(element.id) ||
diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts
index 2adadd24..40e7f041 100644
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@@ -5,6 +5,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 
 export const actionSelectAll = register({
   name: "selectAll",
@@ -13,19 +14,18 @@ export const actionSelectAll = register({
     if (appState.editingLinearElement) {
       return false;
     }
-    const selectedElementIds = elements.reduce(
-      (map: Record<ExcalidrawElement["id"], true>, element) => {
-        if (
+
+    const selectedElementIds = excludeElementsInFramesFromSelection(
+      elements.filter(
+        (element) =>
           !element.isDeleted &&
           !(isTextElement(element) && element.containerId) &&
-          !element.locked
-        ) {
-          map[element.id] = true;
-        }
-        return map;
-      },
-      {},
-    );
+          !element.locked,
+      ),
+    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+      map[element.id] = true;
+      return map;
+    }, {});
 
     return {
       appState: selectGroupsForSelectedElements(
diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts
index aaa59d32..88d4b4c4 100644
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@@ -20,6 +20,7 @@ import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
+  isFrameElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
@@ -64,7 +65,9 @@ export const actionPasteStyles = register({
       return { elements, commitToHistory: false };
     }
 
-    const selectedElements = getSelectedElements(elements, appState, true);
+    const selectedElements = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+    });
     const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
@@ -127,6 +130,13 @@ export const actionPasteStyles = register({
             });
           }
 
+          if (isFrameElement(element)) {
+            newElement = newElementWith(newElement, {
+              roundness: null,
+              backgroundColor: "transparent",
+            });
+          }
+
           return newElement;
         }
         return element;
diff --git a/src/actions/types.ts b/src/actions/types.ts
index 277934ad..7ba40afa 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -116,6 +116,11 @@ export type ActionName =
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"
+  | "selectAllElementsInFrame"
+  | "removeAllElementsFromFrame"
+  | "toggleFrameRendering"
+  | "setFrameAsActiveTool"
+  | "createContainerFromText"
   | "wrapTextInContainer";
 
 export type PanelComponentProps = {
diff --git a/src/align.ts b/src/align.ts
index b9971c24..06382838 100644
--- a/src/align.ts
+++ b/src/align.ts
@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { Box, getCommonBoundingBox } from "./element/bounds";
+import { BoundingBox, getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
 
 export interface Alignment {
@@ -33,7 +33,7 @@ export const alignElements = (
 
 const calculateTranslation = (
   group: ExcalidrawElement[],
-  selectionBoundingBox: Box,
+  selectionBoundingBox: BoundingBox,
   { axis, position }: Alignment,
 ): { x: number; y: number } => {
   const groupBoundingBox = getCommonBoundingBox(group);
diff --git a/src/appState.ts b/src/appState.ts
index 4468eb96..aaca0975 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -78,11 +78,16 @@ export const getDefaultAppState = (): Omit<
     scrollY: 0,
     selectedElementIds: {},
     selectedGroupIds: {},
+    selectedElementsAreBeingDragged: false,
     selectionElement: null,
     shouldCacheIgnoreZoom: false,
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
+    shouldRenderFrames: true,
+    frameToHighlight: null,
+    editingFrame: null,
+    elementsToHighlight: null,
     toast: null,
     viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
@@ -176,11 +181,20 @@ const APP_STATE_STORAGE_CONF = (<
   scrollY: { browser: true, export: false, server: false },
   selectedElementIds: { browser: true, export: false, server: false },
   selectedGroupIds: { browser: true, export: false, server: false },
+  selectedElementsAreBeingDragged: {
+    browser: false,
+    export: false,
+    server: false,
+  },
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
+  shouldRenderFrames: { browser: false, export: false, server: false },
+  frameToHighlight: { browser: false, export: false, server: false },
+  editingFrame: { browser: false, export: false, server: false },
+  elementsToHighlight: { browser: false, export: false, server: false },
   toast: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },
diff --git a/src/clipboard.ts b/src/clipboard.ts
index c0f5844d..c13829b6 100644
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@@ -7,6 +7,9 @@ import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
+import { deepCopyElement } from "./element/newElement";
+import { mutateElement } from "./element/mutateElement";
+import { getContainingFrame } from "./frame";
 import { isPromiseLike, isTestEnv } from "./utils";
 
 type ElementsClipboard = {
@@ -57,6 +60,9 @@ export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   files: BinaryFiles | null,
 ) => {
+  const framesToCopy = new Set(
+    elements.filter((element) => element.type === "frame"),
+  );
   let foundFile = false;
 
   const _files = elements.reduce((acc, element) => {
@@ -78,7 +84,20 @@ export const copyToClipboard = async (
   // select binded text elements when copying
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements,
+    elements: elements.map((element) => {
+      if (
+        getContainingFrame(element) &&
+        !framesToCopy.has(getContainingFrame(element)!)
+      ) {
+        const copiedElement = deepCopyElement(element);
+        mutateElement(copiedElement, {
+          frameId: null,
+        });
+        return copiedElement;
+      }
+
+      return element;
+    }),
     files: files ? _files : undefined,
   };
   const json = JSON.stringify(contents);
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 875d8447..594951ae 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
@@ -35,6 +35,9 @@ import {
 } from "../element/textElement";
 
 import "./Actions.scss";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import { extraToolsIcon, frameToolIcon } from "./icons";
+import { KEYS } from "../keys";
 
 export const SelectedShapeActions = ({
   appState,
@@ -89,7 +92,8 @@ export const SelectedShapeActions = ({
       <div>
         {((hasStrokeColor(appState.activeTool.type) &&
           appState.activeTool.type !== "image" &&
-          commonSelectedType !== "image") ||
+          commonSelectedType !== "image" &&
+          commonSelectedType !== "frame") ||
           targetElements.some((element) => hasStrokeColor(element.type))) &&
           renderAction("changeStrokeColor")}
       </div>
@@ -220,28 +224,78 @@ export const ShapesSwitcher = ({
   setAppState: React.Component<any, UIAppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: UIAppState;
-}) => (
-  <>
-    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      const label = t(`toolBar.${value}`);
-      const letter =
-        key && capitalizeString(typeof key === "string" ? key : key[0]);
-      const shortcut = letter
-        ? `${letter} ${t("helpDialog.or")} ${numericKey}`
-        : `${numericKey}`;
-      return (
+}) => {
+  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+  const device = useDevice();
+  return (
+    <>
+      {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+        const label = t(`toolBar.${value}`);
+        const letter =
+          key && capitalizeString(typeof key === "string" ? key : key[0]);
+        const shortcut = letter
+          ? `${letter} ${t("helpDialog.or")} ${numericKey}`
+          : `${numericKey}`;
+        return (
+          <ToolButton
+            className={clsx("Shape", { fillable })}
+            key={value}
+            type="radio"
+            icon={icon}
+            checked={activeTool.type === value}
+            name="editor-current-shape"
+            title={`${capitalizeString(label)} — ${shortcut}`}
+            keyBindingLabel={numericKey || letter}
+            aria-label={capitalizeString(label)}
+            aria-keyshortcuts={shortcut}
+            data-testid={`toolbar-${value}`}
+            onPointerDown={({ pointerType }) => {
+              if (!appState.penDetected && pointerType === "pen") {
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
+              }
+            }}
+            onChange={({ pointerType }) => {
+              if (appState.activeTool.type !== value) {
+                trackEvent("toolbar", value, "ui");
+              }
+              const nextActiveTool = updateActiveTool(appState, {
+                type: value,
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+              setCursorForShape(canvas, {
+                ...appState,
+                activeTool: nextActiveTool,
+              });
+              if (value === "image") {
+                onImageAction({ pointerType });
+              }
+            }}
+          />
+        );
+      })}
+      <div className="App-toolbar__divider" />
+      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
+      {device.isMobile ? (
         <ToolButton
-          className={clsx("Shape", { fillable })}
-          key={value}
+          className={clsx("Shape", { fillable: false })}
           type="radio"
-          icon={icon}
-          checked={activeTool.type === value}
+          icon={frameToolIcon}
+          checked={activeTool.type === "frame"}
           name="editor-current-shape"
-          title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={numericKey || letter}
-          aria-label={capitalizeString(label)}
-          aria-keyshortcuts={shortcut}
-          data-testid={`toolbar-${value}`}
+          title={`${capitalizeString(
+            t("toolBar.frame"),
+          )} — ${KEYS.F.toLocaleUpperCase()}`}
+          keyBindingLabel={KEYS.F.toLocaleUpperCase()}
+          aria-label={capitalizeString(t("toolBar.frame"))}
+          aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
+          data-testid={`toolbar-frame`}
           onPointerDown={({ pointerType }) => {
             if (!appState.penDetected && pointerType === "pen") {
               setAppState({
@@ -251,30 +305,54 @@ export const ShapesSwitcher = ({
             }
           }}
           onChange={({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
+            trackEvent("toolbar", "frame", "ui");
             const nextActiveTool = updateActiveTool(appState, {
-              type: value,
+              type: "frame",
             });
             setAppState({
               activeTool: nextActiveTool,
               multiElement: null,
               selectedElementIds: {},
             });
-            setCursorForShape(canvas, {
-              ...appState,
-              activeTool: nextActiveTool,
-            });
-            if (value === "image") {
-              onImageAction({ pointerType });
-            }
           }}
         />
-      );
-    })}
-  </>
-);
+      ) : (
+        <DropdownMenu open={isExtraToolsMenuOpen}>
+          <DropdownMenu.Trigger
+            className="App-toolbar__extra-tools-trigger"
+            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
+            title={t("toolBar.extraTools")}
+          >
+            {extraToolsIcon}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+            onSelect={() => setIsExtraToolsMenuOpen(false)}
+            className="App-toolbar__extra-tools-dropdown"
+          >
+            <DropdownMenu.Item
+              onSelect={() => {
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "frame",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
+              }}
+              icon={frameToolIcon}
+              shortcut={KEYS.F.toLocaleUpperCase()}
+              data-testid="toolbar-frame"
+            >
+              {t("toolBar.frame")}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      )}
+    </>
+  );
+};
 
 export const ZoomActions = ({
   renderAction,
diff --git a/src/components/App.tsx b/src/components/App.tsx
index ad41e728..bbae21f0 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -59,6 +59,7 @@ import {
   ELEMENT_TRANSLATE_AMOUNT,
   ENV,
   EVENT,
+  FRAME_STYLE,
   EXPORT_IMAGE_TYPES,
   GRID_SIZE,
   IMAGE_MIME_TYPES,
@@ -79,6 +80,7 @@ import {
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   THEME,
+  THEME_FILTER,
   TOUCH_CTX_MENU_TIMEOUT,
   VERTICAL_ALIGN,
   ZOOM_STEP,
@@ -132,6 +134,7 @@ import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
   deepCopyElement,
   duplicateElements,
+  newFrameElement,
   newFreeDrawElement,
 } from "../element/newElement";
 import {
@@ -140,6 +143,7 @@ import {
   isBindingElement,
   isBindingElementType,
   isBoundToContainer,
+  isFrameElement,
   isImageElement,
   isInitializedImageElement,
   isLinearElement,
@@ -159,6 +163,7 @@ import {
   FileId,
   NonDeletedExcalidrawElement,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -181,7 +186,7 @@ import {
   KEYS,
 } from "../keys";
 import { distance2d, getGridPoint, isPathALoop } from "../math";
-import { renderScene } from "../renderer/renderScene";
+import { isVisibleElement, renderScene } from "../renderer/renderScene";
 import { invalidateShapeForElement } from "../renderer/renderElement";
 import {
   calculateScrollCenter,
@@ -211,6 +216,7 @@ import {
   PointerDownState,
   SceneData,
   Device,
+  FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
 } from "../types";
@@ -295,7 +301,26 @@ import {
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
 import { Fonts } from "../scene/Fonts";
+import {
+  getFrameElements,
+  isCursorInFrame,
+  bindElementsToFramesAfterDuplication,
+  addElementsToFrame,
+  replaceAllElementsInFrame,
+  removeElementsFromFrame,
+  getElementsInResizingFrame,
+  getElementsInNewFrame,
+  getContainingFrame,
+  elementOverlapsWithFrame,
+  updateFrameMembershipOfSelectedElements,
+  isElementInFrame,
+} from "../frame";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { actionPaste } from "../actions/actionClipboard";
+import {
+  actionRemoveAllElementsFromFrame,
+  actionSelectAllElementsInFrame,
+} from "../actions/actionFrame";
 import {
   actionToggleHandTool,
   zoomToFitElements,
@@ -422,7 +447,7 @@ class App extends React.Component<AppProps, AppState> {
   public imageCache: AppClassProperties["imageCache"] = new Map();
 
   hitLinkElement?: NonDeletedExcalidrawElement;
-  lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null = null;
+  lastPointerDown: React.PointerEvent<HTMLElement> | null = null;
   lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
   lastViewportPosition = { x: 0, y: 0 };
 
@@ -480,6 +505,7 @@ class App extends React.Component<AppProps, AppState> {
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
+        toggleFrameRendering: this.toggleFrameRendering,
         toggleSidebar: this.toggleSidebar,
       } as const;
       if (typeof excalidrawRef === "function") {
@@ -534,7 +560,9 @@ class App extends React.Component<AppProps, AppState> {
           width={canvasWidth}
           height={canvasHeight}
           ref={this.handleCanvasRef}
-          onContextMenu={this.handleCanvasContextMenu}
+          onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
+            this.handleCanvasContextMenu(event)
+          }
           onPointerMove={this.handleCanvasPointerMove}
           onPointerUp={this.handleCanvasPointerUp}
           onPointerCancel={this.removePointer}
@@ -555,7 +583,9 @@ class App extends React.Component<AppProps, AppState> {
         width={canvasWidth}
         height={canvasHeight}
         ref={this.handleCanvasRef}
-        onContextMenu={this.handleCanvasContextMenu}
+        onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
+          this.handleCanvasContextMenu(event)
+        }
         onPointerDown={this.handleCanvasPointerDown}
         onDoubleClick={this.handleCanvasDoubleClick}
         onPointerMove={this.handleCanvasPointerMove}
@@ -568,6 +598,206 @@ class App extends React.Component<AppProps, AppState> {
     );
   }
 
+  private getFrameNameDOMId = (frameElement: ExcalidrawElement) => {
+    return `${this.id}-frame-name-${frameElement.id}`;
+  };
+
+  frameNameBoundsCache: FrameNameBoundsCache = {
+    get: (frameElement) => {
+      let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);
+      if (
+        !bounds ||
+        bounds.zoom !== this.state.zoom.value ||
+        bounds.versionNonce !== frameElement.versionNonce
+      ) {
+        const frameNameDiv = document.getElementById(
+          this.getFrameNameDOMId(frameElement),
+        );
+
+        if (frameNameDiv) {
+          const box = frameNameDiv.getBoundingClientRect();
+          const boxSceneTopLeft = viewportCoordsToSceneCoords(
+            { clientX: box.x, clientY: box.y },
+            this.state,
+          );
+          const boxSceneBottomRight = viewportCoordsToSceneCoords(
+            { clientX: box.right, clientY: box.bottom },
+            this.state,
+          );
+
+          bounds = {
+            x: boxSceneTopLeft.x,
+            y: boxSceneTopLeft.y,
+            width: boxSceneBottomRight.x - boxSceneTopLeft.x,
+            height: boxSceneBottomRight.y - boxSceneTopLeft.y,
+            angle: 0,
+            zoom: this.state.zoom.value,
+            versionNonce: frameElement.versionNonce,
+          };
+
+          this.frameNameBoundsCache._cache.set(frameElement.id, bounds);
+
+          return bounds;
+        }
+        return null;
+      }
+
+      return bounds;
+    },
+    /**
+     * @private
+     */
+    _cache: new Map(),
+  };
+
+  private renderFrameNames = () => {
+    if (!this.state.shouldRenderFrames) {
+      return null;
+    }
+
+    const isDarkTheme = this.state.theme === "dark";
+
+    return this.scene.getNonDeletedFrames().map((f, index) => {
+      if (
+        !this.canvas ||
+        !isVisibleElement(
+          f,
+          this.canvas.width / window.devicePixelRatio,
+          this.canvas.height / window.devicePixelRatio,
+          {
+            offsetLeft: this.state.offsetLeft,
+            offsetTop: this.state.offsetTop,
+            scrollX: this.state.scrollX,
+            scrollY: this.state.scrollY,
+            zoom: this.state.zoom,
+          },
+        )
+      ) {
+        // if frame not visible, don't render its name
+        return null;
+      }
+
+      const { x: x1, y: y1 } = sceneCoordsToViewportCoords(
+        { sceneX: f.x, sceneY: f.y },
+        this.state,
+      );
+
+      const { x: x2 } = sceneCoordsToViewportCoords(
+        { sceneX: f.x + f.width, sceneY: f.y + f.height },
+        this.state,
+      );
+
+      const FRAME_NAME_GAP = 20;
+      const FRAME_NAME_EDIT_PADDING = 6;
+
+      const reset = () => {
+        if (f.name?.trim() === "") {
+          mutateElement(f, { name: null });
+        }
+
+        this.setState({ editingFrame: null });
+      };
+
+      let frameNameJSX;
+
+      if (f.id === this.state.editingFrame) {
+        const frameNameInEdit = f.name == null ? `Frame ${index + 1}` : f.name;
+
+        frameNameJSX = (
+          <input
+            autoFocus
+            value={frameNameInEdit}
+            onChange={(e) => {
+              mutateElement(f, {
+                name: e.target.value,
+              });
+            }}
+            onBlur={() => reset()}
+            onKeyDown={(event) => {
+              // for some inexplicable reason, `onBlur` triggered on ESC
+              // does not reset `state.editingFrame` despite being called,
+              // and we need to reset it here as well
+              if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+                reset();
+              }
+            }}
+            style={{
+              background: this.state.viewBackgroundColor,
+              filter: isDarkTheme ? THEME_FILTER : "none",
+              zIndex: 2,
+              border: "none",
+              display: "block",
+              padding: `${FRAME_NAME_EDIT_PADDING}px`,
+              borderRadius: 4,
+              boxShadow: "inset 0 0 0 1px var(--color-primary)",
+              fontFamily: "Assistant",
+              fontSize: "14px",
+              transform: `translateY(-${FRAME_NAME_EDIT_PADDING}px)`,
+              color: "var(--color-gray-80)",
+              overflow: "hidden",
+              maxWidth: `${Math.min(
+                x2 - x1 - FRAME_NAME_EDIT_PADDING,
+                document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING,
+              )}px`,
+            }}
+            size={frameNameInEdit.length + 1 || 1}
+            dir="auto"
+            autoComplete="off"
+            autoCapitalize="off"
+            autoCorrect="off"
+          />
+        );
+      } else {
+        frameNameJSX =
+          f.name == null || f.name.trim() === ""
+            ? `Frame ${index + 1}`
+            : f.name.trim();
+      }
+
+      return (
+        <div
+          id={this.getFrameNameDOMId(f)}
+          key={f.id}
+          style={{
+            position: "absolute",
+            top: `${y1 - FRAME_NAME_GAP - this.state.offsetTop}px`,
+            left: `${
+              x1 -
+              this.state.offsetLeft -
+              (this.state.editingFrame === f.id ? FRAME_NAME_EDIT_PADDING : 0)
+            }px`,
+            zIndex: 2,
+            fontSize: "14px",
+            color: isDarkTheme
+              ? "var(--color-gray-60)"
+              : "var(--color-gray-50)",
+            width: "max-content",
+            maxWidth: `${x2 - x1 + FRAME_NAME_EDIT_PADDING * 2}px`,
+            overflow: f.id === this.state.editingFrame ? "visible" : "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            cursor: CURSOR_TYPE.MOVE,
+            // disable all interaction (e.g. cursor change) when in view
+            // mode
+            pointerEvents: this.state.viewModeEnabled ? "none" : "all",
+          }}
+          onPointerDown={(event) => this.handleCanvasPointerDown(event)}
+          onWheel={(event) => this.handleWheel(event)}
+          onContextMenu={(event: React.PointerEvent<HTMLDivElement>) => {
+            this.handleCanvasContextMenu(event);
+          }}
+          onDoubleClick={() => {
+            this.setState({
+              editingFrame: f.id,
+            });
+          }}
+        >
+          {frameNameJSX}
+        </div>
+      );
+    });
+  };
+
   public render() {
     const selectedElement = getSelectedElements(
       this.scene.getNonDeletedElements(),
@@ -626,6 +856,7 @@ class App extends React.Component<AppProps, AppState> {
                             !this.state.isLoading &&
                             this.state.showWelcomeScreen &&
                             this.state.activeTool.type === "selection" &&
+                            !this.state.zenModeEnabled &&
                             !this.scene.getElementsIncludingDeleted().length
                           }
                         >
@@ -661,6 +892,7 @@ class App extends React.Component<AppProps, AppState> {
                           />
                         )}
                         <main>{this.renderCanvas()}</main>
+                        {this.renderFrameNames()}
                       </ExcalidrawActionManagerContext.Provider>
                     </ExcalidrawElementsContext.Provider>
                   </ExcalidrawAppStateContext.Provider>
@@ -1773,6 +2005,9 @@ class App extends React.Component<AppProps, AppState> {
 
     this.history.resumeRecording();
 
+    const nextElementsToSelect =
+      excludeElementsInFramesFromSelection(newElements);
+
     this.setState(
       selectGroupsForSelectedElements(
         {
@@ -1788,7 +2023,7 @@ class App extends React.Component<AppProps, AppState> {
             this.state.defaultSidebarDockedPreference
               ? this.state.openSidebar
               : null,
-          selectedElementIds: newElements.reduce(
+          selectedElementIds: nextElementsToSelect.reduce(
             (acc: Record<ExcalidrawElement["id"], true>, element) => {
               if (!isBoundToContainer(element)) {
                 acc[element.id] = true;
@@ -1848,12 +2083,18 @@ class App extends React.Component<AppProps, AppState> {
 
         const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
         if (text.length) {
+          const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+            x,
+            y: currentY,
+          });
+
           const element = newTextElement({
             ...textElementProps,
             x,
             y: currentY,
             text,
             lineHeight,
+            frameId: topLayerFrame ? topLayerFrame.id : null,
           });
           acc.push(element);
           currentY += element.height + LINE_GAP;
@@ -1877,10 +2118,19 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      ...textElements,
-    ]);
+    const frameId = textElements[0].frameId;
+
+    if (frameId) {
+      this.scene.insertElementsAtIndex(
+        textElements,
+        this.scene.getElementIndex(frameId),
+      );
+    } else {
+      this.scene.replaceAllElements([
+        ...this.scene.getElementsIncludingDeleted(),
+        ...textElements,
+      ]);
+    }
 
     this.setState({
       selectedElementIds: Object.fromEntries(
@@ -1945,6 +2195,14 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
+  toggleFrameRendering = () => {
+    this.setState((prevState) => {
+      return {
+        shouldRenderFrames: !prevState.shouldRenderFrames,
+      };
+    });
+  };
+
   togglePenMode = () => {
     this.setState((prevState) => {
       return {
@@ -2283,7 +2541,10 @@ class App extends React.Component<AppProps, AppState> {
         const selectedElements = getSelectedElements(
           this.scene.getNonDeletedElements(),
           this.state,
-          true,
+          {
+            includeBoundTextElement: true,
+            includeElementsInFrames: true,
+          },
         );
 
         selectedElements.forEach((element) => {
@@ -2341,6 +2602,10 @@ class App extends React.Component<AppProps, AppState> {
             });
             event.preventDefault();
             return;
+          } else if (isFrameElement(selectedElement)) {
+            this.setState({
+              editingFrame: selectedElement.id,
+            });
           }
         }
       } else if (
@@ -2464,7 +2729,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private setActiveTool = (
     tool:
-      | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
+      | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" }
       | { type: "custom"; customType: string },
   ) => {
     const nextActiveTool = updateActiveTool(this.state, tool);
@@ -2722,6 +2987,7 @@ class App extends React.Component<AppProps, AppState> {
       return isHittingElementBoundingBoxWithoutHittingElement(
         elementWithHighestZIndex,
         this.state,
+        this.frameNameBoundsCache,
         x,
         y,
       )
@@ -2753,8 +3019,14 @@ class App extends React.Component<AppProps, AppState> {
             );
 
     return getElementsAtPosition(elements, (element) =>
-      hitTest(element, this.state, x, y),
-    );
+      hitTest(element, this.state, this.frameNameBoundsCache, x, y),
+    ).filter((element) => {
+      // hitting a frame's element from outside the frame is not considered a hit
+      const containingFrame = getContainingFrame(element);
+      return containingFrame && this.state.shouldRenderFrames
+        ? isCursorInFrame({ x, y }, containingFrame)
+        : true;
+    });
   }
 
   private startTextEditing = ({
@@ -2840,6 +3112,12 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
     }
+
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: sceneX,
+      y: sceneY,
+    });
+
     const element = existingTextElement
       ? existingTextElement
       : newTextElement({
@@ -2869,6 +3147,7 @@ class App extends React.Component<AppProps, AppState> {
           groupIds: container?.groupIds ?? [],
           lineHeight,
           angle: container?.angle ?? 0,
+          frameId: topLayerFrame ? topLayerFrame.id : null,
         });
 
     if (!existingTextElement && shouldBindToContainer && container) {
@@ -2886,10 +3165,7 @@ class App extends React.Component<AppProps, AppState> {
         const containerIndex = this.scene.getElementIndex(container.id);
         this.scene.insertElementAtIndex(element, containerIndex + 1);
       } else {
-        this.scene.replaceAllElements([
-          ...this.scene.getElementsIncludingDeleted(),
-          element,
-        ]);
+        this.scene.addNewElement(element);
       }
     }
 
@@ -2986,10 +3262,12 @@ class App extends React.Component<AppProps, AppState> {
         if (
           hasBoundTextElement(container) ||
           !isTransparent(container.backgroundColor) ||
-          isHittingElementNotConsideringBoundingBox(container, this.state, [
-            sceneX,
-            sceneY,
-          ])
+          isHittingElementNotConsideringBoundingBox(
+            container,
+            this.state,
+            this.frameNameBoundsCache,
+            [sceneX, sceneY],
+          )
         ) {
           const midPoint = getContainerCenter(container, this.state);
 
@@ -3091,6 +3369,19 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
+  private getTopLayerFrameAtSceneCoords = (sceneCoords: {
+    x: number;
+    y: number;
+  }) => {
+    const frames = this.scene
+      .getNonDeletedFrames()
+      .filter((frame) =>
+        isCursorInFrame(sceneCoords, frame as ExcalidrawFrameElement),
+      );
+
+    return frames.length ? frames[frames.length - 1] : null;
+  };
+
   private handleCanvasPointerMove = (
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
@@ -3539,10 +3830,12 @@ class App extends React.Component<AppProps, AppState> {
       let hoverPointIndex = -1;
       let segmentMidPointHoveredCoords = null;
       if (
-        isHittingElementNotConsideringBoundingBox(element, this.state, [
-          scenePointerX,
-          scenePointerY,
-        ])
+        isHittingElementNotConsideringBoundingBox(
+          element,
+          this.state,
+          this.frameNameBoundsCache,
+          [scenePointerX, scenePointerY],
+        )
       ) {
         hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
           element,
@@ -3567,6 +3860,7 @@ class App extends React.Component<AppProps, AppState> {
         isHittingElementBoundingBoxWithoutHittingElement(
           element,
           this.state,
+          this.frameNameBoundsCache,
           scenePointerX,
           scenePointerY,
         )
@@ -3574,7 +3868,13 @@ class App extends React.Component<AppProps, AppState> {
         setCursor(this.canvas, CURSOR_TYPE.MOVE);
       } else if (
         boundTextElement &&
-        hitTest(boundTextElement, this.state, scenePointerX, scenePointerY)
+        hitTest(
+          boundTextElement,
+          this.state,
+          this.frameNameBoundsCache,
+          scenePointerX,
+          scenePointerY,
+        )
       ) {
         setCursor(this.canvas, CURSOR_TYPE.MOVE);
       }
@@ -3608,7 +3908,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
   private handleCanvasPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     // since contextMenu options are potentially evaluated on each render,
     // and an contextMenu action may depend on selection state, we must
@@ -3715,6 +4015,10 @@ class App extends React.Component<AppProps, AppState> {
     // pointerDown event, ends with a pointerUp event (or another pointerDown)
     const pointerDownState = this.initialPointerDownState(event);
 
+    this.setState({
+      selectedElementsAreBeingDragged: false,
+    });
+
     if (this.handleDraggingScrollBar(event, pointerDownState)) {
       return;
     }
@@ -3782,6 +4086,8 @@ class App extends React.Component<AppProps, AppState> {
       );
     } else if (this.state.activeTool.type === "custom") {
       setCursor(this.canvas, CURSOR_TYPE.AUTO);
+    } else if (this.state.activeTool.type === "frame") {
+      this.createFrameElementOnPointerDown(pointerDownState);
     } else if (
       this.state.activeTool.type !== "eraser" &&
       this.state.activeTool.type !== "hand"
@@ -3821,6 +4127,7 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     this.lastPointerUp = event;
+
     if (this.device.isTouchScreen) {
       const scenePointer = viewportCoordsToSceneCoords(
         { clientX: event.clientX, clientY: event.clientY },
@@ -3846,7 +4153,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void => {
     // deal with opening context menu on touch devices
     if (event.pointerType === "touch") {
@@ -3877,7 +4184,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private maybeCleanupAfterMissingPointerUp(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void {
     if (lastPointerUp !== null) {
       // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
@@ -3889,7 +4196,7 @@ class App extends React.Component<AppProps, AppState> {
 
   // Returns whether the event is a panning
   private handleCanvasPanUsingWheelOrSpaceDrag = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): boolean => {
     if (
       !(
@@ -3986,7 +4293,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private updateGestureOnPointerDown(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void {
     gesture.pointers.set(event.pointerId, {
       x: event.clientX,
@@ -4003,7 +4310,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private initialPointerDownState(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): PointerDownState {
     const origin = viewportCoordsToSceneCoords(event, this.state);
     const selectedElements = getSelectedElements(
@@ -4068,7 +4375,7 @@ class App extends React.Component<AppProps, AppState> {
 
   // Returns whether the event is a dragging a scrollbar
   private handleDraggingScrollBar(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): boolean {
     if (
@@ -4122,7 +4429,7 @@ class App extends React.Component<AppProps, AppState> {
    * @returns whether the pointer event has been completely handled
    */
   private handleSelectionOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): boolean => {
     if (this.state.activeTool.type === "selection") {
@@ -4282,18 +4589,88 @@ class App extends React.Component<AppProps, AppState> {
             // Add hit element to selection. At this point if we're not holding
             // SHIFT the previously selected element(s) were deselected above
             // (make sure you use setState updater to use latest state)
+            // With shift-selection, we want to make sure that frames and their containing
+            // elements are not selected at the same time.
             if (
               !someHitElementIsSelected &&
               !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements
             ) {
               this.setState((prevState) => {
+                const nextSelectedElementIds = {
+                  ...prevState.selectedElementIds,
+                  [hitElement.id]: true,
+                };
+
+                const previouslySelectedElements: ExcalidrawElement[] = [];
+
+                Object.keys(prevState.selectedElementIds).forEach((id) => {
+                  const element = this.scene.getElement(id);
+                  element && previouslySelectedElements.push(element);
+                });
+
+                // if hitElement is frame, deselect all of its elements if they are selected
+                if (hitElement.type === "frame") {
+                  getFrameElements(
+                    previouslySelectedElements,
+                    hitElement.id,
+                  ).forEach((element) => {
+                    nextSelectedElementIds[element.id] = false;
+                  });
+                } else if (hitElement.frameId) {
+                  // if hitElement is in a frame and its frame has been selected
+                  // disable selection for the given element
+                  if (nextSelectedElementIds[hitElement.frameId]) {
+                    nextSelectedElementIds[hitElement.id] = false;
+                  }
+                } else {
+                  // hitElement is neither a frame nor an element in a frame
+                  // but since hitElement could be in a group with some frames
+                  // this means selecting hitElement will have the frames selected as well
+                  // because we want to keep the invariant:
+                  // - frames and their elements are not selected at the same time
+                  // we deselect elements in those frames that were previously selected
+
+                  const groupIds = hitElement.groupIds;
+                  const framesInGroups = new Set(
+                    groupIds
+                      .flatMap((gid) =>
+                        getElementsInGroup(
+                          this.scene.getNonDeletedElements(),
+                          gid,
+                        ),
+                      )
+                      .filter((element) => element.type === "frame")
+                      .map((frame) => frame.id),
+                  );
+
+                  if (framesInGroups.size > 0) {
+                    previouslySelectedElements.forEach((element) => {
+                      if (
+                        element.frameId &&
+                        framesInGroups.has(element.frameId)
+                      ) {
+                        // deselect element and groups containing the element
+                        nextSelectedElementIds[element.id] = false;
+                        element.groupIds
+                          .flatMap((gid) =>
+                            getElementsInGroup(
+                              this.scene.getNonDeletedElements(),
+                              gid,
+                            ),
+                          )
+                          .forEach(
+                            (element) =>
+                              (nextSelectedElementIds[element.id] = false),
+                          );
+                      }
+                    });
+                  }
+                }
+
                 return selectGroupsForSelectedElements(
                   {
                     ...prevState,
-                    selectedElementIds: {
-                      ...prevState.selectedElementIds,
-                      [hitElement.id]: true,
-                    },
+                    selectedElementIds: nextSelectedElementIds,
                     showHyperlinkPopup: hitElement.link ? "info" : false,
                   },
                   this.scene.getNonDeletedElements(),
@@ -4336,7 +4713,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private handleTextOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): void => {
     // if we're currently still editing text, clicking outside
@@ -4380,7 +4757,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleFreeDrawElementOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     elementType: ExcalidrawFreeDrawElement["type"],
     pointerDownState: PointerDownState,
   ) => {
@@ -4391,6 +4768,11 @@ class App extends React.Component<AppProps, AppState> {
       null,
     );
 
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newFreeDrawElement({
       type: elementType,
       x: gridX,
@@ -4405,6 +4787,7 @@ class App extends React.Component<AppProps, AppState> {
       roundness: null,
       simulatePressure: event.pressure === 0.5,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
     this.setState((prevState) => ({
@@ -4427,10 +4810,7 @@ class App extends React.Component<AppProps, AppState> {
       pointerDownState.origin,
       this.scene,
     );
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      element,
-    ]);
+    this.scene.addNewElement(element);
     this.setState({
       draggingElement: element,
       editingElement: element,
@@ -4448,6 +4828,11 @@ class App extends React.Component<AppProps, AppState> {
   }) => {
     const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize);
 
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newImageElement({
       type: "image",
       x: gridX,
@@ -4461,13 +4846,14 @@ class App extends React.Component<AppProps, AppState> {
       roundness: null,
       opacity: this.state.currentItemOpacity,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
     return element;
   };
 
   private handleLinearElementOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     elementType: ExcalidrawLinearElement["type"],
     pointerDownState: PointerDownState,
   ): void => {
@@ -4523,6 +4909,11 @@ class App extends React.Component<AppProps, AppState> {
         this.state.gridSize,
       );
 
+      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+        x: gridX,
+        y: gridY,
+      });
+
       /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
       If so, we want it to be null for start and "arrow" for end. If the linear item is not
       an arrow, we want it to be null for both. Otherwise, we want it to use the
@@ -4552,6 +4943,7 @@ class App extends React.Component<AppProps, AppState> {
         startArrowhead,
         endArrowhead,
         locked: false,
+        frameId: topLayerFrame ? topLayerFrame.id : null,
       });
       this.setState((prevState) => ({
         selectedElementIds: {
@@ -4566,10 +4958,8 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.origin,
         this.scene,
       );
-      this.scene.replaceAllElements([
-        ...this.scene.getElementsIncludingDeleted(),
-        element,
-      ]);
+
+      this.scene.addNewElement(element);
       this.setState({
         draggingElement: element,
         editingElement: element,
@@ -4588,6 +4978,12 @@ class App extends React.Component<AppProps, AppState> {
       pointerDownState.origin.y,
       this.state.gridSize,
     );
+
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newElement({
       type: elementType,
       x: gridX,
@@ -4608,6 +5004,7 @@ class App extends React.Component<AppProps, AppState> {
             }
           : null,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
     if (element.type === "selection") {
@@ -4616,10 +5013,7 @@ class App extends React.Component<AppProps, AppState> {
         draggingElement: element,
       });
     } else {
-      this.scene.replaceAllElements([
-        ...this.scene.getElementsIncludingDeleted(),
-        element,
-      ]);
+      this.scene.addNewElement(element);
       this.setState({
         multiElement: null,
         draggingElement: element,
@@ -4628,6 +5022,35 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
+  private createFrameElementOnPointerDown = (
+    pointerDownState: PointerDownState,
+  ): void => {
+    const [gridX, gridY] = getGridPoint(
+      pointerDownState.origin.x,
+      pointerDownState.origin.y,
+      this.state.gridSize,
+    );
+
+    const frame = newFrameElement({
+      x: gridX,
+      y: gridY,
+      opacity: this.state.currentItemOpacity,
+      locked: false,
+      ...FRAME_STYLE,
+    });
+
+    this.scene.replaceAllElements([
+      ...this.scene.getElementsIncludingDeleted(),
+      frame,
+    ]);
+
+    this.setState({
+      multiElement: null,
+      draggingElement: frame,
+      editingElement: frame,
+    });
+  };
+
   private onKeyDownFromPointerDownHandler(
     pointerDownState: PointerDownState,
   ): (event: KeyboardEvent) => void {
@@ -4830,12 +5253,26 @@ class App extends React.Component<AppProps, AppState> {
           this.scene.getNonDeletedElements(),
           this.state,
         );
+
         if (selectedElements.every((element) => element.locked)) {
           return;
         }
+
+        const selectedElementsHasAFrame = selectedElements.find((e) =>
+          isFrameElement(e),
+        );
+        const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
+        this.setState({
+          frameToHighlight:
+            topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null,
+        });
+
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
         pointerDownState.drag.hasOccurred = true;
+        this.setState({
+          selectedElementsAreBeingDragged: true,
+        });
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
         // Checking for editingElement to avoid jump while editing on mobile #6503
@@ -4857,16 +5294,20 @@ class App extends React.Component<AppProps, AppState> {
 
           // We only drag in one direction if shift is pressed
           const lockDirection = event.shiftKey;
-          dragSelectedElements(
-            pointerDownState,
-            selectedElements,
-            dragX,
-            dragY,
-            lockDirection,
-            dragDistanceX,
-            dragDistanceY,
-            this.state,
-          );
+          // when we're editing the name of a frame, we want the user to be
+          // able to select and interact with the text input
+          !this.state.editingFrame &&
+            dragSelectedElements(
+              pointerDownState,
+              selectedElements,
+              dragX,
+              dragY,
+              lockDirection,
+              dragDistanceX,
+              dragDistanceY,
+              this.state,
+              this.scene,
+            );
           this.maybeSuggestBindingForAll(selectedElements);
 
           // We duplicate the selected element if alt is pressed on pointer move
@@ -4884,9 +5325,10 @@ class App extends React.Component<AppProps, AppState> {
             const hitElement = pointerDownState.hit.element;
             const elements = this.scene.getElementsIncludingDeleted();
             const selectedElementIds: Array<ExcalidrawElement["id"]> =
-              getSelectedElements(elements, this.state, true).map(
-                (element) => element.id,
-              );
+              getSelectedElements(elements, this.state, {
+                includeBoundTextElement: true,
+                includeElementsInFrames: true,
+              }).map((element) => element.id);
 
             for (const element of elements) {
               if (
@@ -4929,6 +5371,11 @@ class App extends React.Component<AppProps, AppState> {
               oldIdToDuplicatedId,
               "duplicatesServeAsOld",
             );
+            bindElementsToFramesAfterDuplication(
+              nextSceneElements,
+              elementsToAppend,
+              oldIdToDuplicatedId,
+            );
             this.scene.replaceAllElements(nextSceneElements);
           }
           return;
@@ -4963,6 +5410,9 @@ class App extends React.Component<AppProps, AppState> {
         }
       } else if (isLinearElement(draggingElement)) {
         pointerDownState.drag.hasOccurred = true;
+        this.setState({
+          selectedElementsAreBeingDragged: true,
+        });
         const points = draggingElement.points;
         let dx = gridX - draggingElement.x;
         let dy = gridY - draggingElement.y;
@@ -5119,6 +5569,10 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
   ): (event: PointerEvent) => void {
     return withBatchedUpdates((childEvent: PointerEvent) => {
+      if (pointerDownState.eventListeners.onMove) {
+        pointerDownState.eventListeners.onMove.flush();
+      }
+
       const {
         draggingElement,
         resizingElement,
@@ -5132,6 +5586,8 @@ class App extends React.Component<AppProps, AppState> {
         isRotating: false,
         resizingElement: null,
         selectionElement: null,
+        frameToHighlight: null,
+        elementsToHighlight: null,
         cursorButton: "up",
         // text elements are reset on finalize, and resetting on pointerup
         // may cause issues with double taps
@@ -5143,6 +5599,10 @@ class App extends React.Component<AppProps, AppState> {
 
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
 
+      this.setState({
+        selectedElementsAreBeingDragged: false,
+      });
+
       // Handle end of dragging a point of a linear element, might close a loop
       // and sets binding element
       if (this.state.editingLinearElement) {
@@ -5210,10 +5670,6 @@ class App extends React.Component<AppProps, AppState> {
 
       lastPointerUp = null;
 
-      if (pointerDownState.eventListeners.onMove) {
-        pointerDownState.eventListeners.onMove.flush();
-      }
-
       window.removeEventListener(
         EVENT.POINTER_MOVE,
         pointerDownState.eventListeners.onMove!,
@@ -5368,6 +5824,152 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (draggingElement) {
+        if (pointerDownState.drag.hasOccurred) {
+          const sceneCoords = viewportCoordsToSceneCoords(
+            childEvent,
+            this.state,
+          );
+
+          // when editing the points of a linear element, we check if the
+          // linear element still is in the frame afterwards
+          // if not, the linear element will be removed from its frame (if any)
+          if (
+            this.state.selectedLinearElement &&
+            this.state.selectedLinearElement.isDragging
+          ) {
+            const linearElement = this.scene.getElement(
+              this.state.selectedLinearElement.elementId,
+            );
+
+            if (linearElement?.frameId) {
+              const frame = getContainingFrame(linearElement);
+
+              if (frame && linearElement) {
+                if (!elementOverlapsWithFrame(linearElement, frame)) {
+                  // remove the linear element from all groups
+                  // before removing it from the frame as well
+                  mutateElement(linearElement, {
+                    groupIds: [],
+                  });
+
+                  this.scene.replaceAllElements(
+                    removeElementsFromFrame(
+                      this.scene.getElementsIncludingDeleted(),
+                      [linearElement],
+                      this.state,
+                    ),
+                  );
+                }
+              }
+            }
+          } else {
+            // update the relationships between selected elements and frames
+            const topLayerFrame =
+              this.getTopLayerFrameAtSceneCoords(sceneCoords);
+
+            const selectedElements = getSelectedElements(
+              this.scene.getNonDeletedElements(),
+              this.state,
+            );
+            let nextElements = this.scene.getElementsIncludingDeleted();
+
+            const updateGroupIdsAfterEditingGroup = (
+              elements: ExcalidrawElement[],
+            ) => {
+              if (elements.length > 0) {
+                for (const element of elements) {
+                  const index = element.groupIds.indexOf(
+                    this.state.editingGroupId!,
+                  );
+
+                  mutateElement(
+                    element,
+                    {
+                      groupIds: element.groupIds.slice(0, index),
+                    },
+                    false,
+                  );
+                }
+
+                nextElements.forEach((element) => {
+                  if (
+                    element.groupIds.length &&
+                    getElementsInGroup(
+                      nextElements,
+                      element.groupIds[element.groupIds.length - 1],
+                    ).length < 2
+                  ) {
+                    mutateElement(
+                      element,
+                      {
+                        groupIds: [],
+                      },
+                      false,
+                    );
+                  }
+                });
+
+                this.setState({
+                  editingGroupId: null,
+                });
+              }
+            };
+
+            if (
+              topLayerFrame &&
+              !this.state.selectedElementIds[topLayerFrame.id]
+            ) {
+              const elementsToAdd = selectedElements.filter(
+                (element) =>
+                  element.frameId !== topLayerFrame.id &&
+                  isElementInFrame(element, nextElements, this.state),
+              );
+
+              if (this.state.editingGroupId) {
+                updateGroupIdsAfterEditingGroup(elementsToAdd);
+              }
+
+              nextElements = addElementsToFrame(
+                nextElements,
+                elementsToAdd,
+                topLayerFrame,
+              );
+            } else if (!topLayerFrame) {
+              if (this.state.editingGroupId) {
+                const elementsToRemove = selectedElements.filter(
+                  (element) =>
+                    element.frameId &&
+                    !isElementInFrame(element, nextElements, this.state),
+                );
+
+                updateGroupIdsAfterEditingGroup(elementsToRemove);
+              }
+            }
+
+            nextElements = updateFrameMembershipOfSelectedElements(
+              this.scene.getElementsIncludingDeleted(),
+              this.state,
+            );
+
+            this.scene.replaceAllElements(nextElements);
+          }
+        }
+
+        if (draggingElement.type === "frame") {
+          const elementsInsideFrame = getElementsInNewFrame(
+            this.scene.getElementsIncludingDeleted(),
+            draggingElement,
+          );
+
+          this.scene.replaceAllElements(
+            addElementsToFrame(
+              this.scene.getElementsIncludingDeleted(),
+              elementsInsideFrame,
+              draggingElement,
+            ),
+          );
+        }
+
         mutateElement(
           draggingElement,
           getNormalizedDimensions(draggingElement),
@@ -5386,6 +5988,36 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
 
+      // handle frame membership for resizing frames and/or selected elements
+      if (pointerDownState.resize.isResizing) {
+        let nextElements = updateFrameMembershipOfSelectedElements(
+          this.scene.getElementsIncludingDeleted(),
+          this.state,
+        );
+
+        const selectedFrames = getSelectedElements(
+          this.scene.getElementsIncludingDeleted(),
+          this.state,
+        ).filter(
+          (element) => element.type === "frame",
+        ) as ExcalidrawFrameElement[];
+
+        for (const frame of selectedFrames) {
+          nextElements = replaceAllElementsInFrame(
+            nextElements,
+            getElementsInResizingFrame(
+              this.scene.getElementsIncludingDeleted(),
+              frame,
+              this.state,
+            ),
+            frame,
+            this.state,
+          );
+        }
+
+        this.scene.replaceAllElements(nextElements);
+      }
+
       // Code below handles selection when element(s) weren't
       // drag or added to selection on pointer down phase.
       const hitElement = pointerDownState.hit.element;
@@ -5513,9 +6145,40 @@ class App extends React.Component<AppProps, AppState> {
                 );
               });
             }
+          } else if (
+            hitElement.frameId &&
+            this.state.selectedElementIds[hitElement.frameId]
+          ) {
+            // when hitElement is part of a selected frame, deselect the frame
+            // to avoid frame and containing elements selected simultaneously
+            this.setState((prevState) => {
+              const nextSelectedElementIds = {
+                ...prevState.selectedElementIds,
+                [hitElement.id]: true,
+                // deselect the frame
+                [hitElement.frameId!]: false,
+              };
+
+              // deselect groups containing the frame
+              (this.scene.getElement(hitElement.frameId!)?.groupIds ?? [])
+                .flatMap((gid) =>
+                  getElementsInGroup(this.scene.getNonDeletedElements(), gid),
+                )
+                .forEach(
+                  (element) => (nextSelectedElementIds[element.id] = false),
+                );
+
+              return selectGroupsForSelectedElements(
+                {
+                  ...prevState,
+                  selectedElementIds: nextSelectedElementIds,
+                  showHyperlinkPopup: hitElement.link ? "info" : false,
+                },
+                this.scene.getNonDeletedElements(),
+              );
+            });
           } else {
-            // add element to selection while
-            // keeping prev elements selected
+            // add element to selection while keeping prev elements selected
             this.setState((_prevState) => ({
               selectedElementIds: {
                 ..._prevState.selectedElementIds,
@@ -5550,6 +6213,7 @@ class App extends React.Component<AppProps, AppState> {
           isHittingElementBoundingBoxWithoutHittingElement(
             hitElement,
             this.state,
+            this.frameNameBoundsCache,
             pointerDownState.origin.x,
             pointerDownState.origin.y,
           )) ||
@@ -5632,6 +6296,14 @@ class App extends React.Component<AppProps, AppState> {
         return newElementWith(ele, {
           opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity,
         });
+      } else if (
+        ele.frameId &&
+        pointerDownState.elementIdsToErase[ele.frameId] &&
+        pointerDownState.elementIdsToErase[ele.frameId].erase
+      ) {
+        return newElementWith(ele, {
+          opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity,
+        });
       }
       return ele;
     });
@@ -5652,6 +6324,12 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.elementIdsToErase[ele.containerId].erase
       ) {
         return newElementWith(ele, { isDeleted: true });
+      } else if (
+        ele.frameId &&
+        pointerDownState.elementIdsToErase[ele.frameId] &&
+        pointerDownState.elementIdsToErase[ele.frameId].erase
+      ) {
+        return newElementWith(ele, { isDeleted: true });
       }
       return ele;
     });
@@ -5791,10 +6469,7 @@ class App extends React.Component<AppProps, AppState> {
     imageFile: File,
     showCursorImagePreview?: boolean,
   ) => {
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      imageElement,
-    ]);
+    this.scene.addNewElement(imageElement);
 
     try {
       await this.initializeImage({
@@ -6038,7 +6713,7 @@ class App extends React.Component<AppProps, AppState> {
   }, IMAGE_RENDER_TIMEOUT);
 
   private updateBindingEnabledOnPointerMove = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     const shouldEnableBinding = shouldEnableBindingForPointerEvent(event);
     if (this.state.isBindingEnabled !== shouldEnableBinding) {
@@ -6262,7 +6937,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleCanvasContextMenu = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     event.preventDefault();
 
@@ -6383,6 +7058,17 @@ class App extends React.Component<AppProps, AppState> {
       );
 
       this.maybeSuggestBindingForAll([draggingElement]);
+
+      // highlight elements that are to be added to frames on frames creation
+      if (this.state.activeTool.type === "frame") {
+        this.setState({
+          elementsToHighlight: getElementsInResizingFrame(
+            this.scene.getNonDeletedElements(),
+            draggingElement as ExcalidrawFrameElement,
+            this.state,
+          ),
+        });
+      }
     }
   };
 
@@ -6394,7 +7080,16 @@ class App extends React.Component<AppProps, AppState> {
       this.scene.getNonDeletedElements(),
       this.state,
     );
+    const selectedFrames = selectedElements.filter(
+      (element) => element.type === "frame",
+    ) as ExcalidrawFrameElement[];
+
     const transformHandleType = pointerDownState.resize.handleType;
+
+    if (selectedFrames.length > 0 && transformHandleType === "rotation") {
+      return false;
+    }
+
     this.setState({
       // TODO: rename this state field to "isScaling" to distinguish
       // it from the generic "isResizing" which includes scaling and
@@ -6408,6 +7103,29 @@ class App extends React.Component<AppProps, AppState> {
       pointerCoords.y - pointerDownState.resize.offset.y,
       this.state.gridSize,
     );
+
+    const frameElementsOffsetsMap = new Map<
+      string,
+      {
+        x: number;
+        y: number;
+      }
+    >();
+
+    selectedFrames.forEach((frame) => {
+      const elementsInFrame = getFrameElements(
+        this.scene.getNonDeletedElements(),
+        frame.id,
+      );
+
+      elementsInFrame.forEach((element) => {
+        frameElementsOffsetsMap.set(frame.id + element.id, {
+          x: element.x - frame.x,
+          y: element.y - frame.y,
+        });
+      });
+    });
+
     if (
       transformElements(
         pointerDownState,
@@ -6426,6 +7144,53 @@ class App extends React.Component<AppProps, AppState> {
       )
     ) {
       this.maybeSuggestBindingForAll(selectedElements);
+
+      const elementsToHighlight = new Set<ExcalidrawElement>();
+      selectedFrames.forEach((frame) => {
+        const elementsInFrame = getFrameElements(
+          this.scene.getNonDeletedElements(),
+          frame.id,
+        );
+
+        // keep elements' positions relative to their frames on frames resizing
+        if (transformHandleType) {
+          if (transformHandleType.includes("w")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+          if (transformHandleType.includes("n")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+        }
+
+        getElementsInResizingFrame(
+          this.scene.getNonDeletedElements(),
+          frame,
+          this.state,
+        ).forEach((element) => elementsToHighlight.add(element));
+      });
+
+      this.setState({
+        elementsToHighlight: [...elementsToHighlight],
+      });
+
       return true;
     }
     return false;
@@ -6482,6 +7247,8 @@ class App extends React.Component<AppProps, AppState> {
       actionCut,
       actionCopy,
       actionPaste,
+      actionSelectAllElementsInFrame,
+      actionRemoveAllElementsFromFrame,
       CONTEXT_MENU_SEPARATOR,
       ...options,
       CONTEXT_MENU_SEPARATOR,
@@ -6513,60 +7280,62 @@ class App extends React.Component<AppProps, AppState> {
     ];
   };
 
-  private handleWheel = withBatchedUpdates((event: WheelEvent) => {
-    event.preventDefault();
-    if (isPanning) {
-      return;
-    }
-
-    const { deltaX, deltaY } = event;
-    // note that event.ctrlKey is necessary to handle pinch zooming
-    if (event.metaKey || event.ctrlKey) {
-      const sign = Math.sign(deltaY);
-      const MAX_STEP = ZOOM_STEP * 100;
-      const absDelta = Math.abs(deltaY);
-      let delta = deltaY;
-      if (absDelta > MAX_STEP) {
-        delta = MAX_STEP * sign;
+  private handleWheel = withBatchedUpdates(
+    (event: WheelEvent | React.WheelEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      if (isPanning) {
+        return;
       }
 
-      let newZoom = this.state.zoom.value - delta / 100;
-      // increase zoom steps the more zoomed-in we are (applies to >100% only)
-      newZoom +=
-        Math.log10(Math.max(1, this.state.zoom.value)) *
-        -sign *
-        // reduced amplification for small deltas (small movements on a trackpad)
-        Math.min(1, absDelta / 20);
+      const { deltaX, deltaY } = event;
+      // note that event.ctrlKey is necessary to handle pinch zooming
+      if (event.metaKey || event.ctrlKey) {
+        const sign = Math.sign(deltaY);
+        const MAX_STEP = ZOOM_STEP * 100;
+        const absDelta = Math.abs(deltaY);
+        let delta = deltaY;
+        if (absDelta > MAX_STEP) {
+          delta = MAX_STEP * sign;
+        }
 
-      this.translateCanvas((state) => ({
-        ...getStateForZoom(
-          {
-            viewportX: this.lastViewportPosition.x,
-            viewportY: this.lastViewportPosition.y,
-            nextZoom: getNormalizedZoom(newZoom),
-          },
-          state,
-        ),
-        shouldCacheIgnoreZoom: true,
+        let newZoom = this.state.zoom.value - delta / 100;
+        // increase zoom steps the more zoomed-in we are (applies to >100% only)
+        newZoom +=
+          Math.log10(Math.max(1, this.state.zoom.value)) *
+          -sign *
+          // reduced amplification for small deltas (small movements on a trackpad)
+          Math.min(1, absDelta / 20);
+
+        this.translateCanvas((state) => ({
+          ...getStateForZoom(
+            {
+              viewportX: this.lastViewportPosition.x,
+              viewportY: this.lastViewportPosition.y,
+              nextZoom: getNormalizedZoom(newZoom),
+            },
+            state,
+          ),
+          shouldCacheIgnoreZoom: true,
+        }));
+        this.resetShouldCacheIgnoreZoomDebounced();
+        return;
+      }
+
+      // scroll horizontally when shift pressed
+      if (event.shiftKey) {
+        this.translateCanvas(({ zoom, scrollX }) => ({
+          // on Mac, shift+wheel tends to result in deltaX
+          scrollX: scrollX - (deltaY || deltaX) / zoom.value,
+        }));
+        return;
+      }
+
+      this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
+        scrollX: scrollX - deltaX / zoom.value,
+        scrollY: scrollY - deltaY / zoom.value,
       }));
-      this.resetShouldCacheIgnoreZoomDebounced();
-      return;
-    }
-
-    // scroll horizontally when shift pressed
-    if (event.shiftKey) {
-      this.translateCanvas(({ zoom, scrollX }) => ({
-        // on Mac, shift+wheel tends to result in deltaX
-        scrollX: scrollX - (deltaY || deltaX) / zoom.value,
-      }));
-      return;
-    }
-
-    this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
-      scrollX: scrollX - deltaX / zoom.value,
-      scrollY: scrollY - deltaY / zoom.value,
-    }));
-  });
+    },
+  );
 
   private getTextWysiwygSnappedToCenterPosition(
     x: number,
diff --git a/src/components/HelpDialog.tsx b/src/components/HelpDialog.tsx
index da43330f..e78b2625 100644
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -164,6 +164,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("toolBar.eraser")}
               shortcuts={[KEYS.E, KEYS["0"]]}
             />
+            <Shortcut label={t("toolBar.frame")} shortcuts={[KEYS.F]} />
             <Shortcut
               label={t("labels.eyeDropper")}
               shortcuts={[KEYS.I, "Shift+S", "Shift+G"]}
diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx
index 042d5a3f..960c87f2 100644
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@@ -84,7 +84,10 @@ const ImageExportModal = ({
   const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState, true)
+    ? getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      })
     : elements;
 
   useEffect(() => {
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index bf64bf5c..2c868453 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -204,12 +204,7 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         <div className="App-menu App-menu_top">
-          <Stack.Col
-            gap={6}
-            className={clsx("App-menu_top__left", {
-              "disable-pointerEvents": appState.zenModeEnabled,
-            })}
-          >
+          <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
@@ -254,7 +249,7 @@ const LayerUI = ({
                             title={t("toolBar.lock")}
                           />
 
-                          <div className="App-toolbar__divider"></div>
+                          <div className="App-toolbar__divider" />
 
                           <HandButton
                             checked={isHandToolActive(appState)}
diff --git a/src/components/LibraryMenu.tsx b/src/components/LibraryMenu.tsx
index f5f386d4..1932e3ae 100644
--- a/src/components/LibraryMenu.tsx
+++ b/src/components/LibraryMenu.tsx
@@ -148,7 +148,11 @@ const usePendingElementsMemo = (
   appState: UIAppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) => {
-  const create = () => getSelectedElements(elements, appState, true);
+  const create = () =>
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
   const val = useRef(create());
   const prevAppState = useRef<UIAppState>(appState);
   const prevElements = useRef(elements);
diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index 446d154d..c77454dc 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -1,6 +1,6 @@
 import "./ToolIcon.scss";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
@@ -25,6 +25,7 @@ type ToolButtonBaseProps = {
   visible?: boolean;
   selected?: boolean;
   className?: string;
+  style?: CSSProperties;
   isLoading?: boolean;
 };
 
@@ -114,6 +115,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
             "ToolIcon--plain": props.type === "icon",
           },
         )}
+        style={props.style}
         data-testid={props["data-testid"]}
         hidden={props.hidden}
         title={props.title}
diff --git a/src/components/Toolbar.scss b/src/components/Toolbar.scss
index da305b8b..4bd20f7b 100644
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -15,7 +15,24 @@
       height: 1.5rem;
       align-self: center;
       background-color: var(--default-border-color);
-      margin: 0 0.5rem;
+      margin: 0 0.25rem;
     }
   }
+
+  .App-toolbar__extra-tools-trigger {
+    box-shadow: none;
+    border: 0;
+
+    &:active {
+      background-color: var(--button-hover-bg);
+      box-shadow: 0 0 0 1px
+        var(--button-active-border, var(--color-primary-darkest)) inset;
+    }
+  }
+
+  .App-toolbar__extra-tools-dropdown {
+    margin-top: 0.375rem;
+    right: 0;
+    min-width: 11.875rem;
+  }
 }
diff --git a/src/components/dropdownMenu/DropdownMenuTrigger.tsx b/src/components/dropdownMenu/DropdownMenuTrigger.tsx
index d9d3f799..35c360c7 100644
--- a/src/components/dropdownMenu/DropdownMenuTrigger.tsx
+++ b/src/components/dropdownMenu/DropdownMenuTrigger.tsx
@@ -1,23 +1,23 @@
 import clsx from "clsx";
-import { useUIAppState } from "../../context/ui-appState";
 import { useDevice } from "../App";
 
 const MenuTrigger = ({
   className = "",
   children,
   onToggle,
+  title,
+  ...rest
 }: {
   className?: string;
   children: React.ReactNode;
   onToggle: () => void;
-}) => {
-  const appState = useUIAppState();
+  title?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
-      "transition-left": appState.zenModeEnabled,
       "dropdown-menu-button--mobile": device.isMobile,
     },
   ).trim();
@@ -28,6 +28,8 @@ const MenuTrigger = ({
       onClick={onToggle}
       type="button"
       data-testid="dropdown-menu-button"
+      title={title}
+      {...rest}
     >
       {children}
     </button>
diff --git a/src/components/hoc/withInternalFallback.test.tsx b/src/components/hoc/withInternalFallback.test.tsx
index af43db58..363923b4 100644
--- a/src/components/hoc/withInternalFallback.test.tsx
+++ b/src/components/hoc/withInternalFallback.test.tsx
@@ -12,17 +12,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
     ).toBe(1);
   });
 
@@ -36,17 +36,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
     ).toBe(1);
   });
 
@@ -62,17 +62,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
     ).toBe(1);
   });
 
@@ -84,17 +84,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
     ).toBe(1);
   });
 });
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index ee71fb7b..729c87bc 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1616,3 +1616,24 @@ export const eyeDropperIcon = createIcon(
   </g>,
   tablerIconProps,
 );
+
+export const extraToolsIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 3l-4 7h8z"></path>
+    <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
+  </g>,
+  tablerIconProps,
+);
+
+export const frameToolIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M4 7l16 0"></path>
+    <path d="M4 17l16 0"></path>
+    <path d="M7 4l0 16"></path>
+    <path d="M17 4l0 16"></path>
+  </g>,
+  tablerIconProps,
+);
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index 12dd8e83..aa245408 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -42,6 +42,7 @@ const MainMenu = Object.assign(
                   openMenu: appState.openMenu === "canvas" ? null : "canvas",
                 });
               }}
+              data-testid="main-menu-trigger"
             >
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
diff --git a/src/constants.ts b/src/constants.ts
index cb63a4d4..bca7094c 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -94,6 +94,17 @@ export const THEME = {
   DARK: "dark",
 };
 
+export const FRAME_STYLE = {
+  strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
+  strokeWidth: 1 as ExcalidrawElement["strokeWidth"],
+  strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
+  fillStyle: "solid" as ExcalidrawElement["fillStyle"],
+  roughness: 0 as ExcalidrawElement["roughness"],
+  roundness: null as ExcalidrawElement["roundness"],
+  backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
+  radius: 8,
+};
+
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
 export const DEFAULT_FONT_SIZE = 20;
diff --git a/src/data/restore.ts b/src/data/restore.ts
index 96f30aae..b003cb3d 100644
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -62,6 +62,7 @@ export const AllowedExcalidrawActiveTools: Record<
   freedraw: true,
   eraser: false,
   custom: true,
+  frame: true,
   hand: true,
 };
 
@@ -125,6 +126,7 @@ const restoreElementWithProperties = <
     height: element.height || 0,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
+    frameId: element.frameId ?? null,
     roundness: element.roundness
       ? element.roundness
       : element.strokeSharpness === "round"
@@ -272,6 +274,10 @@ const restoreElement = (
       return restoreElementWithProperties(element, {});
     case "diamond":
       return restoreElementWithProperties(element, {});
+    case "frame":
+      return restoreElementWithProperties(element, {
+        name: element.name ?? null,
+      });
 
     // Don't use default case so as to catch a missing an element type case.
     // We also don't want to throw, but instead return void so we filter
diff --git a/src/element/Hyperlink.tsx b/src/element/Hyperlink.tsx
index d6099428..6bf3b17e 100644
--- a/src/element/Hyperlink.tsx
+++ b/src/element/Hyperlink.tsx
@@ -344,7 +344,7 @@ export const isPointHittingLinkIcon = (
   if (
     !isMobile &&
     appState.viewModeEnabled &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold)
+    isPointHittingElementBoundingBox(element, [x, y], threshold, null)
   ) {
     return true;
   }
@@ -440,7 +440,9 @@ export const shouldHideLinkPopup = (
 
   const threshold = 15 / appState.zoom.value;
   // hitbox to prevent hiding when hovered in element bounding box
-  if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold)) {
+  if (
+    isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)
+  ) {
     return false;
   }
   const [x1, y1, x2] = getElementAbsoluteCoords(element);
diff --git a/src/element/binding.ts b/src/element/binding.ts
index b5ae041b..b175f14e 100644
--- a/src/element/binding.ts
+++ b/src/element/binding.ts
@@ -39,7 +39,7 @@ export type SuggestedPointBinding = [
 ];
 
 export const shouldEnableBindingForPointerEvent = (
-  event: React.PointerEvent<HTMLCanvasElement>,
+  event: React.PointerEvent<HTMLElement>,
 ) => {
   return !event[KEYS.CTRL_OR_CMD];
 };
diff --git a/src/element/bounds.ts b/src/element/bounds.ts
index 3245ca3f..a2a04439 100644
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -6,7 +6,7 @@ import {
   NonDeleted,
   ExcalidrawTextElementWithContainer,
 } from "./types";
-import { distance2d, rotate } from "../math";
+import { distance2d, rotate, rotatePoint } from "../math";
 import rough from "roughjs/bin/rough";
 import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
@@ -25,10 +25,101 @@ import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { Mutable } from "../utility-types";
 
-// x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [number, number, number, number];
+export type RectangleBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  angle: number;
+};
+
 type MaybeQuadraticSolution = [number | null, number | null] | false;
 
+// x and y position of top left corner, x and y position of bottom right corner
+export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
+
+export class ElementBounds {
+  private static boundsCache = new WeakMap<
+    ExcalidrawElement,
+    {
+      bounds: Bounds;
+      version: ExcalidrawElement["version"];
+    }
+  >();
+
+  static getBounds(element: ExcalidrawElement) {
+    const cachedBounds = ElementBounds.boundsCache.get(element);
+
+    if (cachedBounds?.version && cachedBounds.version === element.version) {
+      return cachedBounds.bounds;
+    }
+
+    const bounds = ElementBounds.calculateBounds(element);
+
+    ElementBounds.boundsCache.set(element, {
+      version: element.version,
+      bounds,
+    });
+
+    return bounds;
+  }
+
+  private static calculateBounds(element: ExcalidrawElement): Bounds {
+    let bounds: [number, number, number, number];
+
+    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+
+    if (isFreeDrawElement(element)) {
+      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
+        element.points.map(([x, y]) =>
+          rotate(x, y, cx - element.x, cy - element.y, element.angle),
+        ),
+      );
+
+      return [
+        minX + element.x,
+        minY + element.y,
+        maxX + element.x,
+        maxY + element.y,
+      ];
+    } else if (isLinearElement(element)) {
+      bounds = getLinearElementRotatedBounds(element, cx, cy);
+    } else if (element.type === "diamond") {
+      const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
+      const minX = Math.min(x11, x12, x22, x21);
+      const minY = Math.min(y11, y12, y22, y21);
+      const maxX = Math.max(x11, x12, x22, x21);
+      const maxY = Math.max(y11, y12, y22, y21);
+      bounds = [minX, minY, maxX, maxY];
+    } else if (element.type === "ellipse") {
+      const w = (x2 - x1) / 2;
+      const h = (y2 - y1) / 2;
+      const cos = Math.cos(element.angle);
+      const sin = Math.sin(element.angle);
+      const ww = Math.hypot(w * cos, h * sin);
+      const hh = Math.hypot(h * cos, w * sin);
+      bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
+    } else {
+      const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
+      const minX = Math.min(x11, x12, x22, x21);
+      const minY = Math.min(y11, y12, y22, y21);
+      const maxX = Math.max(x11, x12, x22, x21);
+      const maxY = Math.max(y11, y12, y22, y21);
+      bounds = [minX, minY, maxX, maxY];
+    }
+
+    return bounds;
+  }
+}
+
+// Scene -> Scene coords, but in x1,x2,y1,y2 format.
+//
 // If the element is created from right to left, the width is going to be negative
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
@@ -69,6 +160,111 @@ export const getElementAbsoluteCoords = (
   ];
 };
 
+/**
+ * for a given element, `getElementLineSegments` returns line segments
+ * that can be used for visual collision detection (useful for frames)
+ * as opposed to bounding box collision detection
+ */
+export const getElementLineSegments = (
+  element: ExcalidrawElement,
+): [Point, Point][] => {
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+
+  const center: Point = [cx, cy];
+
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
+    const segments: [Point, Point][] = [];
+
+    let i = 0;
+
+    while (i < element.points.length - 1) {
+      segments.push([
+        rotatePoint(
+          [
+            element.points[i][0] + element.x,
+            element.points[i][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
+        ),
+        rotatePoint(
+          [
+            element.points[i + 1][0] + element.x,
+            element.points[i + 1][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
+        ),
+      ]);
+      i++;
+    }
+
+    return segments;
+  }
+
+  const [nw, ne, sw, se, n, s, w, e] = (
+    [
+      [x1, y1],
+      [x2, y1],
+      [x1, y2],
+      [x2, y2],
+      [cx, y1],
+      [cx, y2],
+      [x1, cy],
+      [x2, cy],
+    ] as Point[]
+  ).map((point) => rotatePoint(point, center, element.angle));
+
+  if (element.type === "diamond") {
+    return [
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+    ];
+  }
+
+  if (element.type === "ellipse") {
+    return [
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+    ];
+  }
+
+  return [
+    [nw, ne],
+    [sw, se],
+    [nw, sw],
+    [ne, se],
+    [nw, e],
+    [sw, e],
+    [ne, w],
+    [se, w],
+  ];
+};
+
+/**
+ * Scene -> Scene coords, but in x1,x2,y1,y2 format.
+ *
+ * Rectangle here means any rectangular frame, not an excalidraw element.
+ */
+export const getRectangleBoxAbsoluteCoords = (boxSceneCoords: RectangleBox) => {
+  return [
+    boxSceneCoords.x,
+    boxSceneCoords.y,
+    boxSceneCoords.x + boxSceneCoords.width,
+    boxSceneCoords.y + boxSceneCoords.height,
+    boxSceneCoords.x + boxSceneCoords.width / 2,
+    boxSceneCoords.y + boxSceneCoords.height / 2,
+  ];
+};
+
 export const pointRelativeTo = (
   element: ExcalidrawElement,
   absoluteCoords: Point,
@@ -454,64 +650,12 @@ const getLinearElementRotatedBounds = (
   return coords;
 };
 
-// We could cache this stuff
-export const getElementBounds = (
-  element: ExcalidrawElement,
-): [number, number, number, number] => {
-  let bounds: [number, number, number, number];
-
-  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-  if (isFreeDrawElement(element)) {
-    const [minX, minY, maxX, maxY] = getBoundsFromPoints(
-      element.points.map(([x, y]) =>
-        rotate(x, y, cx - element.x, cy - element.y, element.angle),
-      ),
-    );
-
-    return [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  } else if (isLinearElement(element)) {
-    bounds = getLinearElementRotatedBounds(element, cx, cy);
-  } else if (element.type === "diamond") {
-    const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
-    const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
-    const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
-    const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
-    const minX = Math.min(x11, x12, x22, x21);
-    const minY = Math.min(y11, y12, y22, y21);
-    const maxX = Math.max(x11, x12, x22, x21);
-    const maxY = Math.max(y11, y12, y22, y21);
-    bounds = [minX, minY, maxX, maxY];
-  } else if (element.type === "ellipse") {
-    const w = (x2 - x1) / 2;
-    const h = (y2 - y1) / 2;
-    const cos = Math.cos(element.angle);
-    const sin = Math.sin(element.angle);
-    const ww = Math.hypot(w * cos, h * sin);
-    const hh = Math.hypot(h * cos, w * sin);
-    bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
-  } else {
-    const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
-    const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
-    const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
-    const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
-    const minX = Math.min(x11, x12, x22, x21);
-    const minY = Math.min(y11, y12, y22, y21);
-    const maxX = Math.max(x11, x12, x22, x21);
-    const maxY = Math.max(y11, y12, y22, y21);
-    bounds = [minX, minY, maxX, maxY];
-  }
-
-  return bounds;
+export const getElementBounds = (element: ExcalidrawElement): Bounds => {
+  return ElementBounds.getBounds(element);
 };
-
 export const getCommonBounds = (
   elements: readonly ExcalidrawElement[],
-): [number, number, number, number] => {
+): Bounds => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -608,7 +752,7 @@ export const getElementPointsCoords = (
 export const getClosestElementBounds = (
   elements: readonly ExcalidrawElement[],
   from: { x: number; y: number },
-): [number, number, number, number] => {
+): Bounds => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -629,7 +773,7 @@ export const getClosestElementBounds = (
   return getElementBounds(closestElement);
 };
 
-export interface Box {
+export interface BoundingBox {
   minX: number;
   minY: number;
   maxX: number;
@@ -642,7 +786,7 @@ export interface Box {
 
 export const getCommonBoundingBox = (
   elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
-): Box => {
+): BoundingBox => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
   return {
     minX,
diff --git a/src/element/collision.ts b/src/element/collision.ts
index 0e7257d7..f160783e 100644
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@@ -26,10 +26,16 @@ import {
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
   StrokeRoundness,
+  ExcalidrawFrameElement,
 } from "./types";
 
-import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
-import { Point } from "../types";
+import {
+  getElementAbsoluteCoords,
+  getCurvePathOps,
+  getRectangleBoxAbsoluteCoords,
+  RectangleBox,
+} from "./bounds";
+import { FrameNameBoundsCache, Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
@@ -61,6 +67,7 @@ const isElementDraggableFromInside = (
 export const hitTest = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -72,22 +79,39 @@ export const hitTest = (
     isElementSelected(appState, element) &&
     shouldShowBoundingBox([element], appState)
   ) {
-    return isPointHittingElementBoundingBox(element, point, threshold);
+    return isPointHittingElementBoundingBox(
+      element,
+      point,
+      threshold,
+      frameNameBoundsCache,
+    );
   }
 
   const boundTextElement = getBoundTextElement(element);
   if (boundTextElement) {
-    const isHittingBoundTextElement = hitTest(boundTextElement, appState, x, y);
+    const isHittingBoundTextElement = hitTest(
+      boundTextElement,
+      appState,
+      frameNameBoundsCache,
+      x,
+      y,
+    );
     if (isHittingBoundTextElement) {
       return true;
     }
   }
-  return isHittingElementNotConsideringBoundingBox(element, appState, point);
+  return isHittingElementNotConsideringBoundingBox(
+    element,
+    appState,
+    frameNameBoundsCache,
+    point,
+  );
 };
 
 export const isHittingElementBoundingBoxWithoutHittingElement = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -96,19 +120,33 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
   // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
   // eg for linear elements text can be outside the element bounding box
   const boundTextElement = getBoundTextElement(element);
-  if (boundTextElement && hitTest(boundTextElement, appState, x, y)) {
+  if (
+    boundTextElement &&
+    hitTest(boundTextElement, appState, frameNameBoundsCache, x, y)
+  ) {
     return false;
   }
 
   return (
-    !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold)
+    !isHittingElementNotConsideringBoundingBox(
+      element,
+      appState,
+      frameNameBoundsCache,
+      [x, y],
+    ) &&
+    isPointHittingElementBoundingBox(
+      element,
+      [x, y],
+      threshold,
+      frameNameBoundsCache,
+    )
   );
 };
 
 export const isHittingElementNotConsideringBoundingBox = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache | null,
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
@@ -117,7 +155,13 @@ export const isHittingElementNotConsideringBoundingBox = (
     : isElementDraggableFromInside(element)
     ? isInsideCheck
     : isNearCheck;
-  return hitTestPointAgainstElement({ element, point, threshold, check });
+  return hitTestPointAgainstElement({
+    element,
+    point,
+    threshold,
+    check,
+    frameNameBoundsCache,
+  });
 };
 
 const isElementSelected = (
@@ -129,7 +173,22 @@ export const isPointHittingElementBoundingBox = (
   element: NonDeleted<ExcalidrawElement>,
   [x, y]: Point,
   threshold: number,
+  frameNameBoundsCache: FrameNameBoundsCache | null,
 ) => {
+  // frames needs be checked differently so as to be able to drag it
+  // by its frame, whether it has been selected or not
+  // this logic here is not ideal
+  // TODO: refactor it later...
+  if (element.type === "frame") {
+    return hitTestPointAgainstElement({
+      element,
+      point: [x, y],
+      threshold,
+      check: isInsideCheck,
+      frameNameBoundsCache,
+    });
+  }
+
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const elementCenterX = (x1 + x2) / 2;
   const elementCenterY = (y1 + y2) / 2;
@@ -157,7 +216,13 @@ export const bindingBorderTest = (
   const threshold = maxBindingGap(element, element.width, element.height);
   const check = isOutsideCheck;
   const point: Point = [x, y];
-  return hitTestPointAgainstElement({ element, point, threshold, check });
+  return hitTestPointAgainstElement({
+    element,
+    point,
+    threshold,
+    check,
+    frameNameBoundsCache: null,
+  });
 };
 
 export const maxBindingGap = (
@@ -177,6 +242,7 @@ type HitTestArgs = {
   point: Point;
   threshold: number;
   check: (distance: number, threshold: number) => boolean;
+  frameNameBoundsCache: FrameNameBoundsCache | null;
 };
 
 const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
@@ -208,6 +274,27 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
         "This should not happen, we need to investigate why it does.",
       );
       return false;
+    case "frame": {
+      // check distance to frame element first
+      if (
+        args.check(
+          distanceToBindableElement(args.element, args.point),
+          args.threshold,
+        )
+      ) {
+        return true;
+      }
+
+      const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
+
+      if (frameNameBounds) {
+        return args.check(
+          distanceToRectangleBox(frameNameBounds, args.point),
+          args.threshold,
+        );
+      }
+      return false;
+    }
   }
 };
 
@@ -219,6 +306,7 @@ export const distanceToBindableElement = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return distanceToRectangle(element, point);
     case "diamond":
       return distanceToDiamond(element, point);
@@ -248,7 +336,8 @@ const distanceToRectangle = (
     | ExcalidrawRectangleElement
     | ExcalidrawTextElement
     | ExcalidrawFreeDrawElement
-    | ExcalidrawImageElement,
+    | ExcalidrawImageElement
+    | ExcalidrawFrameElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -258,6 +347,14 @@ const distanceToRectangle = (
   );
 };
 
+const distanceToRectangleBox = (box: RectangleBox, point: Point): number => {
+  const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point, box);
+  return Math.max(
+    GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)),
+    GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)),
+  );
+};
+
 const distanceToDiamond = (
   element: ExcalidrawDiamondElement,
   point: Point,
@@ -457,8 +554,7 @@ const pointRelativeToElement = (
 ): [GA.Point, GA.Point, number, number] => {
   const point = GAPoint.from(pointTuple);
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const elementCoords = getElementAbsoluteCoords(element);
-  const center = coordsCenter([x1, y1, x2, y2]);
+  const center = coordsCenter(x1, y1, x2, y2);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const pointRotated = GATransform.apply(rotate, point);
@@ -466,9 +562,26 @@ const pointRelativeToElement = (
   const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
   const elementPos = GA.offset(element.x, element.y);
   const pointRelToPos = GA.sub(pointRotated, elementPos);
-  const [ax, ay, bx, by] = elementCoords;
-  const halfWidth = (bx - ax) / 2;
-  const halfHeight = (by - ay) / 2;
+  const halfWidth = (x2 - x1) / 2;
+  const halfHeight = (y2 - y1) / 2;
+  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
+};
+
+const pointRelativeToDivElement = (
+  pointTuple: Point,
+  rectangle: RectangleBox,
+): [GA.Point, GA.Point, number, number] => {
+  const point = GAPoint.from(pointTuple);
+  const [x1, y1, x2, y2] = getRectangleBoxAbsoluteCoords(rectangle);
+  const center = coordsCenter(x1, y1, x2, y2);
+  const rotate = GATransform.rotation(center, rectangle.angle);
+  const pointRotated = GATransform.apply(rotate, point);
+  const pointRelToCenter = GA.sub(pointRotated, GADirection.from(center));
+  const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
+  const elementPos = GA.offset(rectangle.x, rectangle.y);
+  const pointRelToPos = GA.sub(pointRotated, elementPos);
+  const halfWidth = (x2 - x1) / 2;
+  const halfHeight = (y2 - y1) / 2;
   return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
 
@@ -490,7 +603,7 @@ const relativizationToElementCenter = (
   element: ExcalidrawElement,
 ): GA.Transform => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const center = coordsCenter([x1, y1, x2, y2]);
+  const center = coordsCenter(x1, y1, x2, y2);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const translate = GA.reverse(
@@ -499,8 +612,13 @@ const relativizationToElementCenter = (
   return GATransform.compose(rotate, translate);
 };
 
-const coordsCenter = ([ax, ay, bx, by]: Bounds): GA.Point => {
-  return GA.point((ax + bx) / 2, (ay + by) / 2);
+const coordsCenter = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): GA.Point => {
+  return GA.point((x1 + x2) / 2, (y1 + y2) / 2);
 };
 
 // The focus distance is the oriented ratio between the size of
@@ -531,6 +649,7 @@ export const determineFocusDistance = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return c / (hwidth * (nabs + q * mabs));
     case "diamond":
       return mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
@@ -548,7 +667,7 @@ export const determineFocusPoint = (
 ): Point => {
   if (focus === 0) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const center = coordsCenter([x1, y1, x2, y2]);
+    const center = coordsCenter(x1, y1, x2, y2);
     return GAPoint.toTuple(center);
   }
   const relateToCenter = relativizationToElementCenter(element);
@@ -563,6 +682,7 @@ export const determineFocusPoint = (
     case "image":
     case "text":
     case "diamond":
+    case "frame":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
       break;
     case "ellipse":
@@ -613,6 +733,7 @@ const getSortedElementLineIntersections = (
     case "image":
     case "text":
     case "diamond":
+    case "frame":
       const corners = getCorners(element);
       intersections = corners
         .flatMap((point, i) => {
@@ -646,7 +767,8 @@ const getCorners = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawFrameElement,
   scale: number = 1,
 ): GA.Point[] => {
   const hx = (scale * element.width) / 2;
@@ -655,6 +777,7 @@ const getCorners = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return [
         GA.point(hx, hy),
         GA.point(hx, -hy),
@@ -802,7 +925,8 @@ export const findFocusPointForRectangulars = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawFrameElement,
   // Between -1 and 1 for how far away should the focus point be relative
   // to the size of the element. Sign determines orientation.
   relativeDistance: number,
diff --git a/src/element/dragElements.ts b/src/element/dragElements.ts
index 56296e46..4dc5322b 100644
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -6,6 +6,8 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
+import Scene from "../scene/Scene";
+import { isFrameElement } from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -16,10 +18,31 @@ export const dragSelectedElements = (
   distanceX: number = 0,
   distanceY: number = 0,
   appState: AppState,
+  scene: Scene,
 ) => {
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
-  selectedElements.forEach((element) => {
+
+  // we do not want a frame and its elements to be selected at the same time
+  // but when it happens (due to some bug), we want to avoid updating element
+  // in the frame twice, hence the use of set
+  const elementsToUpdate = new Set<NonDeletedExcalidrawElement>(
+    selectedElements,
+  );
+  const frames = selectedElements
+    .filter((e) => isFrameElement(e))
+    .map((f) => f.id);
+
+  if (frames.length > 0) {
+    const elementsInFrames = scene
+      .getNonDeletedElements()
+      .filter((e) => e.frameId !== null)
+      .filter((e) => frames.includes(e.frameId!));
+
+    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
+  }
+
+  elementsToUpdate.forEach((element) => {
     updateElementCoords(
       lockDirection,
       distanceX,
@@ -38,7 +61,13 @@ export const dragSelectedElements = (
       (appState.editingGroupId && !isSelectedViaGroup(appState, element))
     ) {
       const textElement = getBoundTextElement(element);
-      if (textElement) {
+      if (
+        textElement &&
+        // when container is added to a frame, so will its bound text
+        // so the text is already in `elementsToUpdate` and we should avoid
+        // updating its coords again
+        (!textElement.frameId || !frames.includes(textElement.frameId))
+      ) {
         updateElementCoords(
           lockDirection,
           distanceX,
@@ -50,7 +79,7 @@ export const dragSelectedElements = (
       }
     }
     updateBoundElements(element, {
-      simultaneouslyUpdated: selectedElements,
+      simultaneouslyUpdated: Array.from(elementsToUpdate),
     });
   });
 };
diff --git a/src/element/index.ts b/src/element/index.ts
index c3543fee..72375bfe 100644
--- a/src/element/index.ts
+++ b/src/element/index.ts
@@ -2,6 +2,7 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawFrameElement,
 } from "./types";
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
@@ -49,7 +50,11 @@ export {
   getDragOffsetXY,
   dragNewElement,
 } from "./dragElements";
-export { isTextElement, isExcalidrawElement } from "./typeChecks";
+export {
+  isTextElement,
+  isExcalidrawElement,
+  isFrameElement,
+} from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export {
@@ -74,6 +79,13 @@ export const getNonDeletedElements = (elements: readonly ExcalidrawElement[]) =>
     (element) => !element.isDeleted,
   ) as readonly NonDeletedExcalidrawElement[];
 
+export const getNonDeletedFrames = (
+  frames: readonly ExcalidrawFrameElement[],
+) =>
+  frames.filter(
+    (frame) => !frame.isDeleted,
+  ) as readonly NonDeleted<ExcalidrawFrameElement>[];
+
 export const isNonDeletedElement = <T extends ExcalidrawElement>(
   element: T,
 ): element is NonDeleted<T> => !element.isDeleted;
diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts
index aedc2597..b10493e0 100644
--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@@ -594,7 +594,7 @@ export class LinearElementEditor {
   }
 
   static handlePointerDown(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     appState: AppState,
     history: History,
     scenePointer: { x: number; y: number },
diff --git a/src/element/newElement.ts b/src/element/newElement.ts
index 7a19f6b3..848a6af7 100644
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@@ -12,6 +12,7 @@ import {
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import {
   arrayToMap,
@@ -50,6 +51,7 @@ type ElementConstructorOpts = MarkOptional<
   | "height"
   | "angle"
   | "groupIds"
+  | "frameId"
   | "boundElements"
   | "seed"
   | "version"
@@ -82,6 +84,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     height = 0,
     angle = 0,
     groupIds = [],
+    frameId = null,
     roundness = null,
     boundElements = null,
     link = null,
@@ -106,6 +109,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     roughness,
     opacity,
     groupIds,
+    frameId,
     roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
@@ -126,6 +130,21 @@ export const newElement = (
 ): NonDeleted<ExcalidrawGenericElement> =>
   _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
 
+export const newFrameElement = (
+  opts: ElementConstructorOpts,
+): NonDeleted<ExcalidrawFrameElement> => {
+  const frameElement = newElementWith(
+    {
+      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
+      type: "frame",
+      name: null,
+    },
+    {},
+  );
+
+  return frameElement;
+};
+
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {
@@ -158,6 +177,7 @@ export const newTextElement = (
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
+    isFrameName?: boolean;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
   const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
@@ -192,6 +212,7 @@ export const newTextElement = (
       containerId: opts.containerId || null,
       originalText: text,
       lineHeight,
+      isFrameName: opts.isFrameName || false,
     },
     {},
   );
@@ -612,6 +633,10 @@ export const duplicateElements = (
         : null;
     }
 
+    if (clonedElement.frameId) {
+      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);
+    }
+
     clonedElements.push(clonedElement);
   }
 
diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts
index 6e49b7e0..b9fd6328 100644
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -27,6 +27,7 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
+  isFrameElement,
   isFreeDrawElement,
   isImageElement,
   isLinearElement,
@@ -160,12 +161,17 @@ const rotateSingleElement = (
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  let angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
-  if (shouldRotateWithDiscreteAngle) {
-    angle += SHIFT_LOCKING_ANGLE / 2;
-    angle -= angle % SHIFT_LOCKING_ANGLE;
+  let angle: number;
+  if (isFrameElement(element)) {
+    angle = 0;
+  } else {
+    angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
+    if (shouldRotateWithDiscreteAngle) {
+      angle += SHIFT_LOCKING_ANGLE / 2;
+      angle -= angle % SHIFT_LOCKING_ANGLE;
+    }
+    angle = normalizeAngle(angle);
   }
-  angle = normalizeAngle(angle);
   const boundTextElementId = getBoundTextElementId(element);
 
   mutateElement(element, { angle });
@@ -877,45 +883,47 @@ const rotateMultipleElements = (
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }
-  elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
-    const origAngle =
-      pointerDownState.originalElements.get(element.id)?.angle ?? element.angle;
-    const [rotatedCX, rotatedCY] = rotate(
-      cx,
-      cy,
-      centerX,
-      centerY,
-      centerAngle + origAngle - element.angle,
-    );
 
-    mutateElement(
-      element,
-      {
-        x: element.x + (rotatedCX - cx),
-        y: element.y + (rotatedCY - cy),
-        angle: normalizeAngle(centerAngle + origAngle),
-      },
-      false,
-    );
-
-    updateBoundElements(element, { simultaneouslyUpdated: elements });
-
-    const boundText = getBoundTextElement(element);
-    if (boundText && !isArrowElement(element)) {
+  elements
+    .filter((element) => element.type !== "frame")
+    .forEach((element) => {
+      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+      const cx = (x1 + x2) / 2;
+      const cy = (y1 + y2) / 2;
+      const origAngle =
+        pointerDownState.originalElements.get(element.id)?.angle ??
+        element.angle;
+      const [rotatedCX, rotatedCY] = rotate(
+        cx,
+        cy,
+        centerX,
+        centerY,
+        centerAngle + origAngle - element.angle,
+      );
       mutateElement(
-        boundText,
+        element,
         {
-          x: boundText.x + (rotatedCX - cx),
-          y: boundText.y + (rotatedCY - cy),
+          x: element.x + (rotatedCX - cx),
+          y: element.y + (rotatedCY - cy),
           angle: normalizeAngle(centerAngle + origAngle),
         },
         false,
       );
-    }
-  });
+      updateBoundElements(element, { simultaneouslyUpdated: elements });
+
+      const boundText = getBoundTextElement(element);
+      if (boundText && !isArrowElement(element)) {
+        mutateElement(
+          boundText,
+          {
+            x: boundText.x + (rotatedCX - cx),
+            y: boundText.y + (rotatedCY - cy),
+            angle: normalizeAngle(centerAngle + origAngle),
+          },
+          false,
+        );
+      }
+    });
 
   Scene.getScene(elements[0])?.informMutation();
 };
diff --git a/src/element/textElement.ts b/src/element/textElement.ts
index a6d0c327..3956393b 100644
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -840,10 +840,12 @@ export const getTextBindableContainerAtPosition = (
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
     if (
       isArrowElement(elements[index]) &&
-      isHittingElementNotConsideringBoundingBox(elements[index], appState, [
-        x,
-        y,
-      ])
+      isHittingElementNotConsideringBoundingBox(
+        elements[index],
+        appState,
+        null,
+        [x, y],
+      )
     ) {
       hitElement = elements[index];
       break;
diff --git a/src/element/transformHandles.ts b/src/element/transformHandles.ts
index 823ba5c7..cf8e5b6a 100644
--- a/src/element/transformHandles.ts
+++ b/src/element/transformHandles.ts
@@ -8,7 +8,7 @@ import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { AppState, Zoom } from "../types";
 import { isTextElement } from ".";
-import { isLinearElement } from "./typeChecks";
+import { isFrameElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_SPACING } from "../renderer/renderScene";
 
 export type TransformHandleDirection =
@@ -44,6 +44,14 @@ export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
   w: true,
 };
 
+export const OMIT_SIDES_FOR_FRAME = {
+  e: true,
+  s: true,
+  n: true,
+  w: true,
+  rotation: true,
+};
+
 const OMIT_SIDES_FOR_TEXT_ELEMENT = {
   e: true,
   s: true,
@@ -249,6 +257,10 @@ export const getTransformHandles = (
     }
   } else if (isTextElement(element)) {
     omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
+  } else if (isFrameElement(element)) {
+    omitSides = {
+      rotation: true,
+    };
   }
   const dashedLineMargin = isLinearElement(element)
     ? DEFAULT_SPACING + 8
diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts
index 164fafe6..302e9d37 100644
--- a/src/element/typeChecks.ts
+++ b/src/element/typeChecks.ts
@@ -12,6 +12,7 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
   RoundnessType,
 } from "./types";
 
@@ -45,6 +46,12 @@ export const isTextElement = (
   return element != null && element.type === "text";
 };
 
+export const isFrameElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawFrameElement => {
+  return element != null && element.type === "frame";
+};
+
 export const isFreeDrawElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawFreeDrawElement => {
diff --git a/src/element/types.ts b/src/element/types.ts
index 4a4db7e8..ad461016 100644
--- a/src/element/types.ts
+++ b/src/element/types.ts
@@ -53,6 +53,7 @@ type _ExcalidrawElementBase = Readonly<{
   /** List of groups the element belongs to.
       Ordered from deepest to shallowest. */
   groupIds: readonly GroupId[];
+  frameId: string | null;
   /** other elements that are bound to this element */
   boundElements:
     | readonly Readonly<{
@@ -98,6 +99,11 @@ export type InitializedExcalidrawImageElement = MarkNonNullable<
   "fileId"
 >;
 
+export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
+  type: "frame";
+  name: string | null;
+};
+
 /**
  * These are elements that don't have any additional properties.
  */
@@ -117,7 +123,8 @@ export type ExcalidrawElement =
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawFrameElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;
@@ -148,7 +155,8 @@ export type ExcalidrawBindableElement =
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawFrameElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement
diff --git a/src/frame.ts b/src/frame.ts
new file mode 100644
index 00000000..18273cea
--- /dev/null
+++ b/src/frame.ts
@@ -0,0 +1,705 @@
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+  isTextElement,
+} from "./element";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
+import { isPointWithinBounds } from "./math";
+import {
+  getBoundTextElement,
+  getContainerElement,
+} from "./element/textElement";
+import { arrayToMap, findIndex } from "./utils";
+import { mutateElement } from "./element/mutateElement";
+import { AppState } from "./types";
+import { getElementsWithinSelection, getSelectedElements } from "./scene";
+import { isFrameElement } from "./element";
+import { moveOneRight } from "./zindex";
+import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
+import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
+import { getElementLineSegments } from "./element/bounds";
+
+// --------------------------- Frame State ------------------------------------
+export const bindElementsToFramesAfterDuplication = (
+  nextElements: ExcalidrawElement[],
+  oldElements: readonly ExcalidrawElement[],
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+) => {
+  const nextElementMap = arrayToMap(nextElements) as Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement
+  >;
+
+  for (const element of oldElements) {
+    if (element.frameId) {
+      // use its frameId to get the new frameId
+      const nextElementId = oldIdToDuplicatedId.get(element.id);
+      const nextFrameId = oldIdToDuplicatedId.get(element.frameId);
+      if (nextElementId) {
+        const nextElement = nextElementMap.get(nextElementId);
+        if (nextElement) {
+          mutateElement(
+            nextElement,
+            {
+              frameId: nextFrameId ?? element.frameId,
+            },
+            false,
+          );
+        }
+      }
+    }
+  }
+};
+
+// --------------------------- Frame Geometry ---------------------------------
+class Point {
+  x: number;
+  y: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+class LineSegment {
+  first: Point;
+  second: Point;
+
+  constructor(pointA: Point, pointB: Point) {
+    this.first = pointA;
+    this.second = pointB;
+  }
+
+  public getBoundingBox(): [Point, Point] {
+    return [
+      new Point(
+        Math.min(this.first.x, this.second.x),
+        Math.min(this.first.y, this.second.y),
+      ),
+      new Point(
+        Math.max(this.first.x, this.second.x),
+        Math.max(this.first.y, this.second.y),
+      ),
+    ];
+  }
+}
+
+// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
+class FrameGeometry {
+  private static EPSILON = 0.000001;
+
+  private static crossProduct(a: Point, b: Point) {
+    return a.x * b.y - b.x * a.y;
+  }
+
+  private static doBoundingBoxesIntersect(
+    a: [Point, Point],
+    b: [Point, Point],
+  ) {
+    return (
+      a[0].x <= b[1].x &&
+      a[1].x >= b[0].x &&
+      a[0].y <= b[1].y &&
+      a[1].y >= b[0].y
+    );
+  }
+
+  private static isPointOnLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    const r = this.crossProduct(aTmp.second, bTmp);
+    return Math.abs(r) < this.EPSILON;
+  }
+
+  private static isPointRightOfLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    return this.crossProduct(aTmp.second, bTmp) < 0;
+  }
+
+  private static lineSegmentTouchesOrCrossesLine(
+    a: LineSegment,
+    b: LineSegment,
+  ) {
+    return (
+      this.isPointOnLine(a, b.first) ||
+      this.isPointOnLine(a, b.second) ||
+      (this.isPointRightOfLine(a, b.first)
+        ? !this.isPointRightOfLine(a, b.second)
+        : this.isPointRightOfLine(a, b.second))
+    );
+  }
+
+  private static doLineSegmentsIntersect(
+    a: [readonly [number, number], readonly [number, number]],
+    b: [readonly [number, number], readonly [number, number]],
+  ) {
+    const aSegment = new LineSegment(
+      new Point(a[0][0], a[0][1]),
+      new Point(a[1][0], a[1][1]),
+    );
+    const bSegment = new LineSegment(
+      new Point(b[0][0], b[0][1]),
+      new Point(b[1][0], b[1][1]),
+    );
+
+    const box1 = aSegment.getBoundingBox();
+    const box2 = bSegment.getBoundingBox();
+    return (
+      this.doBoundingBoxesIntersect(box1, box2) &&
+      this.lineSegmentTouchesOrCrossesLine(aSegment, bSegment) &&
+      this.lineSegmentTouchesOrCrossesLine(bSegment, aSegment)
+    );
+  }
+
+  public static isElementIntersectingFrame(
+    element: ExcalidrawElement,
+    frame: ExcalidrawFrameElement,
+  ) {
+    const frameLineSegments = getElementLineSegments(frame);
+
+    const elementLineSegments = getElementLineSegments(element);
+
+    const intersecting = frameLineSegments.some((frameLineSegment) =>
+      elementLineSegments.some((elementLineSegment) =>
+        this.doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
+      ),
+    );
+
+    return intersecting;
+  }
+}
+
+export const getElementsCompletelyInFrame = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) =>
+  omitGroupsContainingFrames(
+    getElementsWithinSelection(elements, frame, false),
+  ).filter(
+    (element) =>
+      (element.type !== "frame" && !element.frameId) ||
+      element.frameId === frame.id,
+  );
+
+export const isElementContainingFrame = (
+  elements: readonly ExcalidrawElement[],
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) => {
+  return getElementsWithinSelection(elements, element).some(
+    (e) => e.id === frame.id,
+  );
+};
+
+export const getElementsIntersectingFrame = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) =>
+  elements.filter((element) =>
+    FrameGeometry.isElementIntersectingFrame(element, frame),
+  );
+
+export const elementsAreInFrameBounds = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
+    getElementAbsoluteCoords(frame);
+
+  const [elementX1, elementY1, elementX2, elementY2] =
+    getCommonBounds(elements);
+
+  return (
+    selectionX1 <= elementX1 &&
+    selectionY1 <= elementY1 &&
+    selectionX2 >= elementX2 &&
+    selectionY2 >= elementY2
+  );
+};
+
+export const elementOverlapsWithFrame = (
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) => {
+  return (
+    elementsAreInFrameBounds([element], frame) ||
+    FrameGeometry.isElementIntersectingFrame(element, frame) ||
+    isElementContainingFrame([frame], element, frame)
+  );
+};
+
+export const isCursorInFrame = (
+  cursorCoords: {
+    x: number;
+    y: number;
+  },
+  frame: NonDeleted<ExcalidrawFrameElement>,
+) => {
+  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
+
+  return isPointWithinBounds(
+    [fx1, fy1],
+    [cursorCoords.x, cursorCoords.y],
+    [fx2, fy2],
+  );
+};
+
+export const groupsAreAtLeastIntersectingTheFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  groupIds: readonly string[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const elementsInGroup = groupIds.flatMap((groupId) =>
+    getElementsInGroup(elements, groupId),
+  );
+
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+
+  return !!elementsInGroup.find(
+    (element) =>
+      elementsAreInFrameBounds([element], frame) ||
+      FrameGeometry.isElementIntersectingFrame(element, frame),
+  );
+};
+
+export const groupsAreCompletelyOutOfFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  groupIds: readonly string[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const elementsInGroup = groupIds.flatMap((groupId) =>
+    getElementsInGroup(elements, groupId),
+  );
+
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+
+  return (
+    elementsInGroup.find(
+      (element) =>
+        elementsAreInFrameBounds([element], frame) ||
+        FrameGeometry.isElementIntersectingFrame(element, frame),
+    ) === undefined
+  );
+};
+
+// --------------------------- Frame Utils ------------------------------------
+
+/**
+ * Returns a map of frameId to frame elements. Includes empty frames.
+ */
+export const groupByFrames = (elements: ExcalidrawElementsIncludingDeleted) => {
+  const frameElementsMap = new Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement[]
+  >();
+
+  for (const element of elements) {
+    const frameId = isFrameElement(element) ? element.id : element.frameId;
+    if (frameId && !frameElementsMap.has(frameId)) {
+      frameElementsMap.set(frameId, getFrameElements(elements, frameId));
+    }
+  }
+
+  return frameElementsMap;
+};
+
+export const getFrameElements = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frameId: string,
+) => allElements.filter((element) => element.frameId === frameId);
+
+export const getElementsInResizingFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+): ExcalidrawElement[] => {
+  const prevElementsInFrame = getFrameElements(allElements, frame.id);
+  const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);
+
+  const elementsCompletelyInFrame = new Set([
+    ...getElementsCompletelyInFrame(allElements, frame),
+    ...prevElementsInFrame.filter((element) =>
+      isElementContainingFrame(allElements, element, frame),
+    ),
+  ]);
+
+  const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
+    (element) => !elementsCompletelyInFrame.has(element),
+  );
+
+  // for elements that are completely in the frame
+  // if they are part of some groups, then those groups are still
+  // considered to belong to the frame
+  const groupsToKeep = new Set<string>(
+    Array.from(elementsCompletelyInFrame).flatMap(
+      (element) => element.groupIds,
+    ),
+  );
+
+  for (const element of elementsNotCompletelyInFrame) {
+    if (!FrameGeometry.isElementIntersectingFrame(element, frame)) {
+      if (element.groupIds.length === 0) {
+        nextElementsInFrame.delete(element);
+      }
+    } else if (element.groupIds.length > 0) {
+      // group element intersects with the frame, we should keep the groups
+      // that this element is part of
+      for (const id of element.groupIds) {
+        groupsToKeep.add(id);
+      }
+    }
+  }
+
+  for (const element of elementsNotCompletelyInFrame) {
+    if (element.groupIds.length > 0) {
+      let shouldRemoveElement = true;
+
+      for (const id of element.groupIds) {
+        if (groupsToKeep.has(id)) {
+          shouldRemoveElement = false;
+        }
+      }
+
+      if (shouldRemoveElement) {
+        nextElementsInFrame.delete(element);
+      }
+    }
+  }
+
+  const individualElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame,
+  ).filter((element) => element.groupIds.length === 0);
+
+  for (const element of individualElementsCompletelyInFrame) {
+    nextElementsInFrame.add(element);
+  }
+
+  const newGroupElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame,
+  ).filter((element) => element.groupIds.length > 0);
+
+  const groupIds = selectGroupsFromGivenElements(
+    newGroupElementsCompletelyInFrame,
+    appState,
+  );
+
+  // new group elements
+  for (const [id, isSelected] of Object.entries(groupIds)) {
+    if (isSelected) {
+      const elementsInGroup = getElementsInGroup(allElements, id);
+
+      if (elementsAreInFrameBounds(elementsInGroup, frame)) {
+        for (const element of elementsInGroup) {
+          nextElementsInFrame.add(element);
+        }
+      }
+    }
+  }
+
+  return [...nextElementsInFrame].filter((element) => {
+    return !(isTextElement(element) && element.containerId);
+  });
+};
+
+export const getElementsInNewFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+) => {
+  return omitGroupsContainingFrames(
+    allElements,
+    getElementsCompletelyInFrame(allElements, frame),
+  );
+};
+
+export const getContainingFrame = (
+  element: ExcalidrawElement,
+  /**
+   * Optionally an elements map, in case the elements aren't in the Scene yet.
+   * Takes precedence over Scene elements, even if the element exists
+   * in Scene elements and not the supplied elements map.
+   */
+  elementsMap?: Map<string, ExcalidrawElement>,
+) => {
+  if (element.frameId) {
+    if (elementsMap) {
+      return (elementsMap.get(element.frameId) ||
+        null) as null | ExcalidrawFrameElement;
+    }
+    return (
+      (Scene.getScene(element)?.getElement(
+        element.frameId,
+      ) as ExcalidrawFrameElement) || null
+    );
+  }
+  return null;
+};
+
+// --------------------------- Frame Operations -------------------------------
+export const addElementsToFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  elementsToAdd: NonDeletedExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const _elementsToAdd: ExcalidrawElement[] = [];
+
+  for (const element of elementsToAdd) {
+    _elementsToAdd.push(element);
+
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      _elementsToAdd.push(boundTextElement);
+    }
+  }
+
+  let nextElements = allElements.slice();
+
+  const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id);
+
+  for (const element of omitGroupsContainingFrames(
+    allElements,
+    _elementsToAdd,
+  )) {
+    if (element.frameId !== frame.id && !isFrameElement(element)) {
+      mutateElement(
+        element,
+        {
+          frameId: frame.id,
+        },
+        false,
+      );
+
+      const frameIndex = findIndex(nextElements, (e) => e.id === frame.id);
+      const elementIndex = findIndex(nextElements, (e) => e.id === element.id);
+
+      if (elementIndex < frameBoundary) {
+        nextElements = [
+          ...nextElements.slice(0, elementIndex),
+          ...nextElements.slice(elementIndex + 1, frameBoundary),
+          element,
+          ...nextElements.slice(frameBoundary),
+        ];
+      } else if (elementIndex > frameIndex) {
+        nextElements = [
+          ...nextElements.slice(0, frameIndex),
+          element,
+          ...nextElements.slice(frameIndex, elementIndex),
+          ...nextElements.slice(elementIndex + 1),
+        ];
+      }
+    }
+  }
+
+  return nextElements;
+};
+
+export const removeElementsFromFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  elementsToRemove: NonDeletedExcalidrawElement[],
+  appState: AppState,
+) => {
+  const _elementsToRemove: ExcalidrawElement[] = [];
+
+  for (const element of elementsToRemove) {
+    if (element.frameId) {
+      _elementsToRemove.push(element);
+      const boundTextElement = getBoundTextElement(element);
+      if (boundTextElement) {
+        _elementsToRemove.push(boundTextElement);
+      }
+    }
+  }
+
+  for (const element of _elementsToRemove) {
+    mutateElement(
+      element,
+      {
+        frameId: null,
+      },
+      false,
+    );
+  }
+
+  const nextElements = moveOneRight(
+    allElements,
+    appState,
+    Array.from(_elementsToRemove),
+  );
+
+  return nextElements;
+};
+
+export const removeAllElementsFromFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+) => {
+  const elementsInFrame = getFrameElements(allElements, frame.id);
+  return removeElementsFromFrame(allElements, elementsInFrame, appState);
+};
+
+export const replaceAllElementsInFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  nextElementsInFrame: ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+) => {
+  return addElementsToFrame(
+    removeAllElementsFromFrame(allElements, frame, appState),
+    nextElementsInFrame,
+    frame,
+  );
+};
+
+/** does not mutate elements, but return new ones */
+export const updateFrameMembershipOfSelectedElements = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  appState: AppState,
+) => {
+  const selectedElements = getSelectedElements(allElements, appState);
+  const elementsToFilter = new Set<ExcalidrawElement>(selectedElements);
+
+  if (appState.editingGroupId) {
+    for (const element of selectedElements) {
+      if (element.groupIds.length === 0) {
+        elementsToFilter.add(element);
+      } else {
+        element.groupIds
+          .flatMap((gid) => getElementsInGroup(allElements, gid))
+          .forEach((element) => elementsToFilter.add(element));
+      }
+    }
+  }
+
+  const elementsToRemove = new Set<ExcalidrawElement>();
+
+  elementsToFilter.forEach((element) => {
+    if (
+      !isFrameElement(element) &&
+      !isElementInFrame(element, allElements, appState)
+    ) {
+      elementsToRemove.add(element);
+    }
+  });
+
+  return removeElementsFromFrame(allElements, [...elementsToRemove], appState);
+};
+
+/**
+ * filters out elements that are inside groups that contain a frame element
+ * anywhere in the group tree
+ */
+export const omitGroupsContainingFrames = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  /** subset of elements you want to filter. Optional perf optimization so we
+   * don't have to filter all elements unnecessarily
+   */
+  selectedElements?: readonly ExcalidrawElement[],
+) => {
+  const uniqueGroupIds = new Set<string>();
+  for (const el of selectedElements || allElements) {
+    const topMostGroupId = el.groupIds[el.groupIds.length - 1];
+    if (topMostGroupId) {
+      uniqueGroupIds.add(topMostGroupId);
+    }
+  }
+
+  const rejectedGroupIds = new Set<string>();
+  for (const groupId of uniqueGroupIds) {
+    if (
+      getElementsInGroup(allElements, groupId).some((el) => isFrameElement(el))
+    ) {
+      rejectedGroupIds.add(groupId);
+    }
+  }
+
+  return (selectedElements || allElements).filter(
+    (el) => !rejectedGroupIds.has(el.groupIds[el.groupIds.length - 1]),
+  );
+};
+
+/**
+ * depending on the appState, return target frame, which is the frame the given element
+ * is going to be added to or remove from
+ */
+export const getTargetFrame = (
+  element: ExcalidrawElement,
+  appState: AppState,
+) => {
+  const _element = isTextElement(element)
+    ? getContainerElement(element) || element
+    : element;
+
+  return appState.selectedElementIds[_element.id] &&
+    appState.selectedElementsAreBeingDragged
+    ? appState.frameToHighlight
+    : getContainingFrame(_element);
+};
+
+// given an element, return if the element is in some frame
+export const isElementInFrame = (
+  element: ExcalidrawElement,
+  allElements: ExcalidrawElementsIncludingDeleted,
+  appState: AppState,
+) => {
+  const frame = getTargetFrame(element, appState);
+  const _element = isTextElement(element)
+    ? getContainerElement(element) || element
+    : element;
+
+  if (frame) {
+    if (_element.groupIds.length === 0) {
+      return elementOverlapsWithFrame(_element, frame);
+    }
+
+    const allElementsInGroup = new Set(
+      _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
+    );
+
+    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+      const selectedElements = new Set(
+        getSelectedElements(allElements, appState),
+      );
+
+      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+
+      if (editingGroupOverlapsFrame) {
+        return true;
+      }
+
+      selectedElements.forEach((selectedElement) => {
+        allElementsInGroup.delete(selectedElement);
+      });
+    }
+
+    for (const elementInGroup of allElementsInGroup) {
+      if (isFrameElement(elementInGroup)) {
+        return false;
+      }
+    }
+
+    for (const elementInGroup of allElementsInGroup) {
+      if (elementOverlapsWithFrame(elementInGroup, frame)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
diff --git a/src/groups.ts b/src/groups.ts
index e45a59fa..eda01373 100644
--- a/src/groups.ts
+++ b/src/groups.ts
@@ -94,6 +94,31 @@ export const selectGroupsForSelectedElements = (
   return nextAppState;
 };
 
+// given a list of elements, return the the actual group ids that should be selected
+// or used to update the elements
+export const selectGroupsFromGivenElements = (
+  elements: readonly NonDeleted<ExcalidrawElement>[],
+  appState: AppState,
+) => {
+  let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
+
+  for (const element of elements) {
+    let groupIds = element.groupIds;
+    if (appState.editingGroupId) {
+      const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
+      if (indexOfEditingGroup > -1) {
+        groupIds = groupIds.slice(0, indexOfEditingGroup);
+      }
+    }
+    if (groupIds.length > 0) {
+      const groupId = groupIds[groupIds.length - 1];
+      nextAppState = selectGroup(groupId, nextAppState, elements);
+    }
+  }
+
+  return nextAppState.selectedGroupIds;
+};
+
 export const editGroupForSelectedElement = (
   appState: AppState,
   element: NonDeleted<ExcalidrawElement>,
@@ -186,3 +211,18 @@ export const getMaximumGroups = (
 
   return Array.from(groups.values());
 };
+
+export const elementsAreInSameGroup = (elements: ExcalidrawElement[]) => {
+  const allGroups = elements.flatMap((element) => element.groupIds);
+  const groupCount = new Map<string, number>();
+  let maxGroup = 0;
+
+  for (const group of allGroups) {
+    groupCount.set(group, (groupCount.get(group) ?? 0) + 1);
+    if (groupCount.get(group)! > maxGroup) {
+      maxGroup = groupCount.get(group)!;
+    }
+  }
+
+  return maxGroup === elements.length;
+};
diff --git a/src/keys.ts b/src/keys.ts
index ce0e803c..14b7d288 100644
--- a/src/keys.ts
+++ b/src/keys.ts
@@ -42,6 +42,7 @@ export const KEYS = {
   CHEVRON_RIGHT: ">",
   PERIOD: ".",
   COMMA: ",",
+  SUBTRACT: "-",
 
   A: "a",
   C: "c",
diff --git a/src/locales/en.json b/src/locales/en.json
index f751353a..b73f7999 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -124,6 +124,8 @@
     },
     "statusPublished": "Published",
     "sidebarLock": "Keep sidebar open",
+    "selectAllElementsInFrame": "Select all elements in frame",
+    "removeAllElementsFromFrame": "Remove all elements from frame",
     "eyeDropper": "Pick color from canvas"
   },
   "library": {
@@ -221,7 +223,9 @@
     "penMode": "Pen mode - prevent touch",
     "link": "Add/ Update link for a selected shape",
     "eraser": "Eraser",
-    "hand": "Hand (panning tool)"
+    "frame": "Frame tool",
+    "hand": "Hand (panning tool)",
+    "extraTools": "More tools"
   },
   "headings": {
     "canvasActions": "Canvas actions",
diff --git a/src/math.ts b/src/math.ts
index 602fe976..01123ce8 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -206,7 +206,7 @@ export const isPointInPolygon = (
 
 // Returns whether `q` lies inside the segment/rectangle defined by `p` and `r`.
 // This is an approximation to "does `q` lie on a segment `pr`" check.
-const isPointWithinBounds = (p: Point, q: Point, r: Point) => {
+export const isPointWithinBounds = (p: Point, q: Point, r: Point) => {
   return (
     q[0] <= Math.max(p[0], r[0]) &&
     q[0] >= Math.min(p[0], r[0]) &&
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index bccb42bd..03646541 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -205,6 +205,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             height: 141.9765625,
             seed: 1968410350,
             groupIds: [],
+            frameId: null,
             boundElements: null,
             locked: false,
             link: null,
diff --git a/src/packages/excalidraw/example/initialData.js b/src/packages/excalidraw/example/initialData.js
index dde22b83..37b0755d 100644
--- a/src/packages/excalidraw/example/initialData.js
+++ b/src/packages/excalidraw/example/initialData.js
@@ -20,6 +20,7 @@ export default {
       height: 141.9765625,
       seed: 1968410350,
       groupIds: [],
+      frameId: null,
     },
     {
       id: "-xMIs_0jIFqvpx-R9UnaG",
@@ -37,6 +38,7 @@ export default {
       roughness: 1,
       opacity: 100,
       groupIds: [],
+      frameId: null,
       seed: 957947807,
       version: 47,
       versionNonce: 1128618623,
@@ -58,6 +60,7 @@ export default {
       roughness: 1,
       opacity: 100,
       groupIds: [],
+      frameId: null,
       strokeSharpness: "round",
       seed: 707269846,
       version: 143,
@@ -94,6 +97,7 @@ export default {
         height: 103.65107323746608,
         seed: 1445523839,
         groupIds: [],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
         startBinding: null,
@@ -133,6 +137,7 @@ export default {
         height: 113.8575037534261,
         seed: 1513238033,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -182,6 +187,7 @@ export default {
         height: 9.797916664247975,
         seed: 683951089,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -220,6 +226,7 @@ export default {
         height: 9.797916664247975,
         seed: 1817746897,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -258,6 +265,7 @@ export default {
         height: 17.72670397681366,
         seed: 1409727409,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: ["bxuMGTzXLn7H-uBCptINx"],
       },
@@ -281,6 +289,7 @@ export default {
         height: 13.941904362416096,
         seed: 1073094033,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -304,6 +313,7 @@ export default {
         height: 13.941904362416096,
         seed: 526271345,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -327,6 +337,7 @@ export default {
         height: 13.941904362416096,
         seed: 243707217,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -352,6 +363,7 @@ export default {
         height: 36.77344700318558,
         seed: 511870335,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -375,6 +387,7 @@ export default {
         height: 36.77344700318558,
         seed: 1283079231,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -398,6 +411,7 @@ export default {
         height: 36.77344700318558,
         seed: 996251633,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -421,6 +435,7 @@ export default {
         height: 36.77344700318558,
         seed: 1764842481,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -446,6 +461,7 @@ export default {
         height: 154.56722543646003,
         seed: 1424381745,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -495,6 +511,7 @@ export default {
         height: 12.698053371678215,
         seed: 726657713,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -533,6 +550,7 @@ export default {
         height: 10.178760037658167,
         seed: 1977326481,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -571,6 +589,7 @@ export default {
         height: 22.797152568995934,
         seed: 1774660383,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: ["bxuMGTzXLn7H-uBCptINx"],
       },
@@ -596,6 +615,7 @@ export default {
         height: 107.25081879410921,
         seed: 371096063,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -623,6 +643,7 @@ export default {
         height: 107.25081879410921,
         seed: 685932433,
         groupIds: ["0RJwA-yKP5dqk5oMiSeot", "9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -650,6 +671,7 @@ export default {
         height: 107.25081879410921,
         seed: 58634943,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -677,6 +699,7 @@ export default {
         height: 3.249953844290203,
         seed: 1673003743,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -708,6 +731,7 @@ export default {
         height: 2.8032978840147194,
         seed: 1821527807,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -739,6 +763,7 @@ export default {
         height: 4.280657518731036,
         seed: 1485707039,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -771,6 +796,7 @@ export default {
         height: 2.9096445412231735,
         seed: 1042012991,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -804,6 +830,7 @@ export default {
         height: 2.4757501798128,
         seed: 295443295,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -835,6 +862,7 @@ export default {
         height: 2.4757501798128,
         seed: 1734301567,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -869,6 +897,7 @@ export default {
         height: 76.53703389977764,
         seed: 106569279,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -892,6 +921,7 @@ export default {
         height: 0,
         seed: 73916127,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -924,6 +954,7 @@ export default {
         height: 5.001953125,
         seed: 387857791,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -947,6 +978,7 @@ export default {
         height: 5.001953125,
         seed: 1486370207,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -970,6 +1002,7 @@ export default {
         height: 5.001953125,
         seed: 610150847,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -993,6 +1026,7 @@ export default {
         height: 42.72020253937572,
         seed: 144280593,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1016,6 +1050,7 @@ export default {
         height: 24.44112284281997,
         seed: 29167967,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1068,6 +1103,7 @@ export default {
         height: 0,
         seed: 1443027377,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1100,6 +1136,7 @@ export default {
         height: 5.711199931375845,
         seed: 244310513,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1138,6 +1175,7 @@ export default {
         height: 44.82230388130942,
         seed: 683572113,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1161,6 +1199,7 @@ export default {
         height: 5.896061363392446,
         seed: 318798801,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1200,6 +1239,7 @@ export default {
         height: 108.30428902193904,
         seed: 1914896753,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1223,6 +1263,7 @@ export default {
         height: 82.83278895375764,
         seed: 1306468145,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1246,6 +1287,7 @@ export default {
         height: 11.427824006438863,
         seed: 93422161,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1269,6 +1311,7 @@ export default {
         height: 19.889460471185775,
         seed: 11646495,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1292,6 +1335,7 @@ export default {
         height: 19.889460471185775,
         seed: 291717649,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index 77ea1458..ed6ccb69 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -34,6 +34,7 @@ import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
   BOUND_TEXT_PADDING,
+  FRAME_STYLE,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MIME_TYPES,
   SVG_NS,
@@ -48,6 +49,7 @@ import {
   getBoundTextMaxWidth,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { getContainingFrame } from "../frame";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -92,6 +94,7 @@ export interface ExcalidrawElementWithCanvas {
   canvasOffsetX: number;
   canvasOffsetY: number;
   boundTextElementVersion: number | null;
+  containingFrameOpacity: number;
 }
 
 const cappedElementCanvasSize = (
@@ -207,6 +210,7 @@ const generateElementCanvas = (
     canvasOffsetX,
     canvasOffsetY,
     boundTextElementVersion: getBoundTextElement(element)?.version || null,
+    containingFrameOpacity: getContainingFrame(element)?.opacity || 100,
   };
 };
 
@@ -253,7 +257,8 @@ const drawElementOnCanvas = (
   context: CanvasRenderingContext2D,
   renderConfig: RenderConfig,
 ) => {
-  context.globalAlpha = element.opacity / 100;
+  context.globalAlpha =
+    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
   switch (element.type) {
     case "rectangle":
     case "diamond":
@@ -469,7 +474,7 @@ const generateElementShape = (
     elementWithCanvasCache.delete(element);
 
     switch (element.type) {
-      case "rectangle":
+      case "rectangle": {
         if (element.roundness) {
           const w = element.width;
           const h = element.height;
@@ -494,6 +499,7 @@ const generateElementShape = (
         setShapeForElement(element, shape);
 
         break;
+      }
       case "diamond": {
         const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
           getDiamondPoints(element);
@@ -717,12 +723,14 @@ const generateElementWithCanvas = (
     prevElementWithCanvas.zoomValue !== zoom.value &&
     !renderConfig?.shouldCacheIgnoreZoom;
   const boundTextElementVersion = getBoundTextElement(element)?.version || null;
+  const containingFrameOpacity = getContainingFrame(element)?.opacity || 100;
 
   if (
     !prevElementWithCanvas ||
     shouldRegenerateBecauseZoom ||
     prevElementWithCanvas.theme !== renderConfig.theme ||
-    prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion
+    prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
+    prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity
   ) {
     const elementWithCanvas = generateElementCanvas(
       element,
@@ -897,25 +905,59 @@ export const renderElement = (
   const generator = rc.generator;
   switch (element.type) {
     case "selection": {
-      context.save();
-      context.translate(
-        element.x + renderConfig.scrollX,
-        element.y + renderConfig.scrollY,
-      );
-      context.fillStyle = "rgba(0, 0, 200, 0.04)";
+      // do not render selection when exporting
+      if (!renderConfig.isExporting) {
+        context.save();
+        context.translate(
+          element.x + renderConfig.scrollX,
+          element.y + renderConfig.scrollY,
+        );
+        context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
-      // render from 0.5px offset  to get 1px wide line
-      // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
-      // TODO can be be improved by offseting to the negative when user selects
-      // from right to left
-      const offset = 0.5 / renderConfig.zoom.value;
+        // render from 0.5px offset  to get 1px wide line
+        // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
+        // TODO can be be improved by offseting to the negative when user selects
+        // from right to left
+        const offset = 0.5 / renderConfig.zoom.value;
 
-      context.fillRect(offset, offset, element.width, element.height);
-      context.lineWidth = 1 / renderConfig.zoom.value;
-      context.strokeStyle = "rgb(105, 101, 219)";
-      context.strokeRect(offset, offset, element.width, element.height);
+        context.fillRect(offset, offset, element.width, element.height);
+        context.lineWidth = 1 / renderConfig.zoom.value;
+        context.strokeStyle = " rgb(105, 101, 219)";
+        context.strokeRect(offset, offset, element.width, element.height);
 
-      context.restore();
+        context.restore();
+      }
+      break;
+    }
+    case "frame": {
+      if (!renderConfig.isExporting && appState.shouldRenderFrames) {
+        context.save();
+        context.translate(
+          element.x + renderConfig.scrollX,
+          element.y + renderConfig.scrollY,
+        );
+        context.fillStyle = "rgba(0, 0, 200, 0.04)";
+
+        context.lineWidth = 2 / renderConfig.zoom.value;
+        context.strokeStyle = FRAME_STYLE.strokeColor;
+
+        if (FRAME_STYLE.radius && context.roundRect) {
+          context.beginPath();
+          context.roundRect(
+            0,
+            0,
+            element.width,
+            element.height,
+            FRAME_STYLE.radius / renderConfig.zoom.value,
+          );
+          context.stroke();
+          context.closePath();
+        } else {
+          context.strokeRect(0, 0, element.width, element.height);
+        }
+
+        context.restore();
+      }
       break;
     }
     case "freedraw": {
@@ -1107,6 +1149,23 @@ const roughSVGDrawWithPrecision = (
   return rsvg.draw(pshape);
 };
 
+const maybeWrapNodesInFrameClipPath = (
+  element: NonDeletedExcalidrawElement,
+  root: SVGElement,
+  nodes: SVGElement[],
+  exportedFrameId?: string | null,
+) => {
+  const frame = getContainingFrame(element);
+  if (frame && frame.id === exportedFrameId) {
+    const g = root.ownerDocument!.createElementNS(SVG_NS, "g");
+    g.setAttributeNS(SVG_NS, "clip-path", `url(#${frame.id})`);
+    nodes.forEach((node) => g.appendChild(node));
+    return g;
+  }
+
+  return null;
+};
+
 export const renderElementToSvg = (
   element: NonDeletedExcalidrawElement,
   rsvg: RoughSVG,
@@ -1115,6 +1174,7 @@ export const renderElementToSvg = (
   offsetX: number,
   offsetY: number,
   exportWithDarkMode?: boolean,
+  exportingFrameId?: string | null,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   let cx = (x2 - x1) / 2 - (element.x - x1);
@@ -1148,6 +1208,9 @@ export const renderElementToSvg = (
     root = anchorTag;
   }
 
+  const opacity =
+    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
+
   switch (element.type) {
     case "selection": {
       // Since this is used only during editing experience, which is canvas based,
@@ -1163,7 +1226,6 @@ export const renderElementToSvg = (
         getShapeForElement(element)!,
         MAX_DECIMALS_FOR_SVG_EXPORT,
       );
-      const opacity = element.opacity / 100;
       if (opacity !== 1) {
         node.setAttribute("stroke-opacity", `${opacity}`);
         node.setAttribute("fill-opacity", `${opacity}`);
@@ -1175,7 +1237,15 @@ export const renderElementToSvg = (
           offsetY || 0
         }) rotate(${degree} ${cx} ${cy})`,
       );
-      root.appendChild(node);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [node],
+        exportingFrameId,
+      );
+
+      g ? root.appendChild(g) : root.appendChild(node);
       break;
     }
     case "line":
@@ -1228,7 +1298,6 @@ export const renderElementToSvg = (
       if (boundText) {
         group.setAttribute("mask", `url(#mask-${element.id})`);
       }
-      const opacity = element.opacity / 100;
       group.setAttribute("stroke-linecap", "round");
 
       getShapeForElement(element)!.forEach((shape) => {
@@ -1256,14 +1325,24 @@ export const renderElementToSvg = (
         }
         group.appendChild(node);
       });
-      root.appendChild(group);
-      root.append(maskPath);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [group, maskPath],
+        exportingFrameId,
+      );
+      if (g) {
+        root.appendChild(g);
+      } else {
+        root.appendChild(group);
+        root.append(maskPath);
+      }
       break;
     }
     case "freedraw": {
       generateElementShape(element, generator);
       generateFreeDrawShape(element);
-      const opacity = element.opacity / 100;
       const shape = getShapeForElement(element);
       const node = shape
         ? roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT)
@@ -1283,7 +1362,15 @@ export const renderElementToSvg = (
       path.setAttribute("fill", element.strokeColor);
       path.setAttribute("d", getFreeDrawSvgPath(element));
       node.appendChild(path);
-      root.appendChild(node);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [node],
+        exportingFrameId,
+      );
+
+      g ? root.appendChild(g) : root.appendChild(node);
       break;
     }
     case "image": {
@@ -1319,6 +1406,7 @@ export const renderElementToSvg = (
 
         use.setAttribute("width", `${width}`);
         use.setAttribute("height", `${height}`);
+        use.setAttribute("opacity", `${opacity}`);
 
         // We first apply `scale` transforms (horizontal/vertical mirroring)
         // on the <use> element, then apply translation and rotation
@@ -1344,13 +1432,22 @@ export const renderElementToSvg = (
           }) rotate(${degree} ${cx} ${cy})`,
         );
 
-        root.appendChild(g);
+        const clipG = maybeWrapNodesInFrameClipPath(
+          element,
+          root,
+          [g],
+          exportingFrameId,
+        );
+        clipG ? root.appendChild(clipG) : root.appendChild(g);
       }
       break;
     }
+    // frames are not rendered and only acts as a container
+    case "frame": {
+      break;
+    }
     default: {
       if (isTextElement(element)) {
-        const opacity = element.opacity / 100;
         const node = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
         if (opacity !== 1) {
           node.setAttribute("stroke-opacity", `${opacity}`);
@@ -1395,7 +1492,15 @@ export const renderElementToSvg = (
           text.setAttribute("dominant-baseline", "text-before-edge");
           node.appendChild(text);
         }
-        root.appendChild(node);
+
+        const g = maybeWrapNodesInFrameClipPath(
+          element,
+          root,
+          [node],
+          exportingFrameId,
+        );
+
+        g ? root.appendChild(g) : root.appendChild(node);
       } else {
         // @ts-ignore
         throw new Error(`Unimplemented type ${element.type}`);
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 16ca3eb1..2ee853d9 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -10,6 +10,7 @@ import {
   NonDeleted,
   GroupId,
   ExcalidrawBindableElement,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import {
   getElementAbsoluteCoords,
@@ -36,6 +37,7 @@ import {
   isSelectedViaGroup,
   getSelectedGroupIds,
   getElementsInGroup,
+  selectGroupsFromGivenElements,
 } from "../groups";
 import { maxBindingGap } from "../element/collision";
 import {
@@ -44,18 +46,28 @@ import {
   isBindingEnabled,
 } from "../element/binding";
 import {
+  OMIT_SIDES_FOR_FRAME,
   shouldShowBoundingBox,
   TransformHandles,
   TransformHandleType,
 } from "../element/transformHandles";
-import { viewportCoordsToSceneCoords, throttleRAF } from "../utils";
+import {
+  viewportCoordsToSceneCoords,
+  throttleRAF,
+  isOnlyExportingSingleFrame,
+} from "../utils";
 import { UserIdleState } from "../types";
-import { THEME_FILTER } from "../constants";
+import { FRAME_STYLE, THEME_FILTER } from "../constants";
 import {
   EXTERNAL_LINK_IMG,
   getLinkHandleFromCoords,
 } from "../element/Hyperlink";
-import { isLinearElement } from "../element/typeChecks";
+import { isFrameElement, isLinearElement } from "../element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getTargetFrame,
+  isElementInFrame,
+} from "../frame";
 import "canvas-roundrect-polyfill";
 
 export const DEFAULT_SPACING = 2;
@@ -70,6 +82,8 @@ const strokeRectWithRotation = (
   cy: number,
   angle: number,
   fill: boolean = false,
+  /** should account for zoom */
+  radius: number = 0,
 ) => {
   context.save();
   context.translate(cx, cy);
@@ -77,7 +91,14 @@ const strokeRectWithRotation = (
   if (fill) {
     context.fillRect(x - cx, y - cy, width, height);
   }
-  context.strokeRect(x - cx, y - cy, width, height);
+  if (radius && context.roundRect) {
+    context.beginPath();
+    context.roundRect(x - cx, y - cy, width, height, radius);
+    context.stroke();
+    context.closePath();
+  } else {
+    context.strokeRect(x - cx, y - cy, width, height);
+  }
   context.restore();
 };
 
@@ -299,6 +320,34 @@ const renderLinearElementPointHighlight = (
   context.restore();
 };
 
+const frameClip = (
+  frame: ExcalidrawFrameElement,
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+) => {
+  context.translate(
+    frame.x + renderConfig.scrollX,
+    frame.y + renderConfig.scrollY,
+  );
+  context.beginPath();
+  if (context.roundRect && !renderConfig.isExporting) {
+    context.roundRect(
+      0,
+      0,
+      frame.width,
+      frame.height,
+      FRAME_STYLE.radius / renderConfig.zoom.value,
+    );
+  } else {
+    context.rect(0, 0, frame.width, frame.height);
+  }
+  context.clip();
+  context.translate(
+    -(frame.x + renderConfig.scrollX),
+    -(frame.y + renderConfig.scrollY),
+  );
+};
+
 export const _renderScene = ({
   elements,
   appState,
@@ -390,11 +439,51 @@ export const _renderScene = ({
       }),
     );
 
+    const groupsToBeAddedToFrame = new Set<string>();
+
+    visibleElements.forEach((element) => {
+      if (
+        element.groupIds.length > 0 &&
+        appState.frameToHighlight &&
+        appState.selectedElementIds[element.id] &&
+        (elementOverlapsWithFrame(element, appState.frameToHighlight) ||
+          element.groupIds.find((groupId) =>
+            groupsToBeAddedToFrame.has(groupId),
+          ))
+      ) {
+        element.groupIds.forEach((groupId) =>
+          groupsToBeAddedToFrame.add(groupId),
+        );
+      }
+    });
+
     let editingLinearElement: NonDeleted<ExcalidrawLinearElement> | undefined =
       undefined;
+
     visibleElements.forEach((element) => {
       try {
-        renderElement(element, rc, context, renderConfig, appState);
+        // - when exporting the whole canvas, we DO NOT apply clipping
+        // - when we are exporting a particular frame, apply clipping
+        //   if the containing frame is not selected, apply clipping
+        const frameId = element.frameId || appState.frameToHighlight?.id;
+
+        if (
+          frameId &&
+          ((renderConfig.isExporting && isOnlyExportingSingleFrame(elements)) ||
+            (!renderConfig.isExporting && appState.shouldRenderFrames))
+        ) {
+          context.save();
+
+          const frame = getTargetFrame(element, appState);
+
+          if (frame && isElementInFrame(element, elements, appState)) {
+            frameClip(frame, context, renderConfig);
+          }
+          renderElement(element, rc, context, renderConfig, appState);
+          context.restore();
+        } else {
+          renderElement(element, rc, context, renderConfig, appState);
+        }
         // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to
         // ShapeCache returns empty hence making sure that we get the
         // correct element from visible elements
@@ -443,7 +532,24 @@ export const _renderScene = ({
           renderBindingHighlight(context, renderConfig, suggestedBinding!);
         });
     }
+
+    if (appState.frameToHighlight) {
+      renderFrameHighlight(context, renderConfig, appState.frameToHighlight);
+    }
+
+    if (appState.elementsToHighlight) {
+      renderElementsBoxHighlight(
+        context,
+        renderConfig,
+        appState.elementsToHighlight,
+        appState,
+      );
+    }
+
     const locallySelectedElements = getSelectedElements(elements, appState);
+    const isFrameSelected = locallySelectedElements.some((element) =>
+      isFrameElement(element),
+    );
 
     // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to
     // ShapeCache returns empty hence making sure that we get the
@@ -613,7 +719,9 @@ export const _renderScene = ({
           0,
           renderConfig.zoom,
           "mouse",
-          OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
+          isFrameSelected
+            ? OMIT_SIDES_FOR_FRAME
+            : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
         );
         if (locallySelectedElements.some((element) => !element.locked)) {
           renderTransformHandles(context, renderConfig, transformHandles, 0);
@@ -974,6 +1082,7 @@ const renderBindingHighlightForBindableElement = (
     case "rectangle":
     case "text":
     case "image":
+    case "frame":
       strokeRectWithRotation(
         context,
         x1 - padding,
@@ -1011,6 +1120,82 @@ const renderBindingHighlightForBindableElement = (
   }
 };
 
+const renderFrameHighlight = (
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+  frame: NonDeleted<ExcalidrawFrameElement>,
+) => {
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  context.strokeStyle = "rgb(0,118,255)";
+  context.lineWidth = (FRAME_STYLE.strokeWidth * 2) / renderConfig.zoom.value;
+
+  context.save();
+  context.translate(renderConfig.scrollX, renderConfig.scrollY);
+  strokeRectWithRotation(
+    context,
+    x1,
+    y1,
+    width,
+    height,
+    x1 + width / 2,
+    y1 + height / 2,
+    frame.angle,
+    false,
+    FRAME_STYLE.radius / renderConfig.zoom.value,
+  );
+  context.restore();
+};
+
+const renderElementsBoxHighlight = (
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+  elements: NonDeleted<ExcalidrawElement>[],
+  appState: AppState,
+) => {
+  const individualElements = elements.filter(
+    (element) => element.groupIds.length === 0,
+  );
+
+  const elementsInGroups = elements.filter(
+    (element) => element.groupIds.length > 0,
+  );
+
+  const getSelectionFromElements = (elements: ExcalidrawElement[]) => {
+    const [elementX1, elementY1, elementX2, elementY2] =
+      getCommonBounds(elements);
+    return {
+      angle: 0,
+      elementX1,
+      elementX2,
+      elementY1,
+      elementY2,
+      selectionColors: ["rgb(0,118,255)"],
+      dashed: false,
+      cx: elementX1 + (elementX2 - elementX1) / 2,
+      cy: elementY1 + (elementY2 - elementY1) / 2,
+    };
+  };
+
+  const getSelectionForGroupId = (groupId: GroupId) => {
+    const groupElements = getElementsInGroup(elements, groupId);
+    return getSelectionFromElements(groupElements);
+  };
+
+  Object.entries(selectGroupsFromGivenElements(elementsInGroups, appState))
+    .filter(([id, isSelected]) => isSelected)
+    .map(([id, isSelected]) => id)
+    .map((groupId) => getSelectionForGroupId(groupId))
+    .concat(
+      individualElements.map((element) => getSelectionFromElements([element])),
+    )
+    .forEach((selection) =>
+      renderSelectionBorder(context, renderConfig, selection),
+    );
+};
+
 const renderBindingHighlightForSuggestedPointBinding = (
   context: CanvasRenderingContext2D,
   suggestedBinding: SuggestedPointBinding,
@@ -1092,7 +1277,7 @@ const renderLinkIcon = (
   }
 };
 
-const isVisibleElement = (
+export const isVisibleElement = (
   element: ExcalidrawElement,
   canvasWidth: number,
   canvasHeight: number,
@@ -1138,15 +1323,18 @@ export const renderSceneToSvg = (
     offsetX = 0,
     offsetY = 0,
     exportWithDarkMode = false,
+    exportingFrameId = null,
   }: {
     offsetX?: number;
     offsetY?: number;
     exportWithDarkMode?: boolean;
+    exportingFrameId?: string | null;
   } = {},
 ) => {
   if (!svgRoot) {
     return;
   }
+
   // render elements
   elements.forEach((element) => {
     if (!element.isDeleted) {
@@ -1159,6 +1347,7 @@ export const renderSceneToSvg = (
           element.x + offsetX,
           element.y + offsetY,
           exportWithDarkMode,
+          exportingFrameId,
         );
       } catch (error: any) {
         console.error(error);
diff --git a/src/scene/Scene.ts b/src/scene/Scene.ts
index e9fc98f8..06ce6813 100644
--- a/src/scene/Scene.ts
+++ b/src/scene/Scene.ts
@@ -2,9 +2,15 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawFrameElement,
 } from "../element/types";
-import { getNonDeletedElements, isNonDeletedElement } from "../element";
+import {
+  getNonDeletedElements,
+  getNonDeletedFrames,
+  isNonDeletedElement,
+} from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { isFrameElement } from "../element/typeChecks";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -12,6 +18,10 @@ type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
 type SceneStateCallbackRemover = () => void;
 
+// ideally this would be a branded type but it'd be insanely hard to work with
+// in our codebase
+export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
+
 const isIdKey = (elementKey: ElementKey): elementKey is ElementIdKey => {
   if (typeof elementKey === "string") {
     return true;
@@ -55,6 +65,8 @@ class Scene {
 
   private nonDeletedElements: readonly NonDeletedExcalidrawElement[] = [];
   private elements: readonly ExcalidrawElement[] = [];
+  private nonDeletedFrames: readonly NonDeleted<ExcalidrawFrameElement>[] = [];
+  private frames: readonly ExcalidrawFrameElement[] = [];
   private elementsMap = new Map<ExcalidrawElement["id"], ExcalidrawElement>();
 
   getElementsIncludingDeleted() {
@@ -65,6 +77,14 @@ class Scene {
     return this.nonDeletedElements;
   }
 
+  getFramesIncludingDeleted() {
+    return this.frames;
+  }
+
+  getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[] {
+    return this.nonDeletedFrames;
+  }
+
   getElement<T extends ExcalidrawElement>(id: T["id"]): T | null {
     return (this.elementsMap.get(id) as T | undefined) || null;
   }
@@ -110,12 +130,19 @@ class Scene {
 
   replaceAllElements(nextElements: readonly ExcalidrawElement[]) {
     this.elements = nextElements;
+    const nextFrames: ExcalidrawFrameElement[] = [];
     this.elementsMap.clear();
     nextElements.forEach((element) => {
+      if (isFrameElement(element)) {
+        nextFrames.push(element);
+      }
       this.elementsMap.set(element.id, element);
       Scene.mapElementToScene(element, this);
     });
     this.nonDeletedElements = getNonDeletedElements(this.elements);
+    this.frames = nextFrames;
+    this.nonDeletedFrames = getNonDeletedFrames(this.frames);
+
     this.informMutation();
   }
 
@@ -165,6 +192,29 @@ class Scene {
     this.replaceAllElements(nextElements);
   }
 
+  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0",
+      );
+    }
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      ...elements,
+      ...this.elements.slice(index),
+    ];
+
+    this.replaceAllElements(nextElements);
+  }
+
+  addNewElement = (element: ExcalidrawElement) => {
+    if (element.frameId) {
+      this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+    } else {
+      this.replaceAllElements([...this.elements, element]);
+    }
+  };
+
   getElementIndex(elementId: string) {
     return this.elements.findIndex((element) => element.id === elementId);
   }
diff --git a/src/scene/comparisons.ts b/src/scene/comparisons.ts
index b88c8b1e..ff73e83c 100644
--- a/src/scene/comparisons.ts
+++ b/src/scene/comparisons.ts
@@ -7,7 +7,8 @@ export const hasBackground = (type: string) =>
   type === "line" ||
   type === "freedraw";
 
-export const hasStrokeColor = (type: string) => type !== "image";
+export const hasStrokeColor = (type: string) =>
+  type !== "image" && type !== "frame";
 
 export const hasStrokeWidth = (type: string) =>
   type === "rectangle" ||
diff --git a/src/scene/export.ts b/src/scene/export.ts
index 6c5712be..78fc9b46 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -1,8 +1,8 @@
 import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { getCommonBounds } from "../element/bounds";
+import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
-import { distance } from "../utils";
+import { distance, isOnlyExportingSingleFrame } from "../utils";
 import { AppState, BinaryFiles } from "../types";
 import { DEFAULT_EXPORT_PADDING, SVG_NS, THEME_FILTER } from "../constants";
 import { getDefaultAppState } from "../appState";
@@ -11,6 +11,7 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
+import Scene from "./Scene";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -51,6 +52,8 @@ export const exportToCanvas = async (
     files,
   });
 
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
   renderScene({
     elements,
     appState,
@@ -59,8 +62,8 @@ export const exportToCanvas = async (
     canvas,
     renderConfig: {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      scrollX: -minX + exportPadding,
-      scrollY: -minY + exportPadding,
+      scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding),
+      scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding),
       zoom: defaultAppState.zoom,
       remotePointerViewportCoords: {},
       remoteSelectedElementIds: {},
@@ -88,6 +91,7 @@ export const exportToSvg = async (
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
+    renderFrame?: boolean;
   },
   files: BinaryFiles | null,
   opts?: {
@@ -140,6 +144,39 @@ export const exportToSvg = async (
     }
     assetPath = `${assetPath}/dist/excalidraw-assets/`;
   }
+
+  // do not apply clipping when we're exporting the whole scene
+  const isExportingWholeCanvas =
+    Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
+    elements.length;
+
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
+  const offsetX = -minX + (onlyExportingSingleFrame ? 0 : exportPadding);
+  const offsetY = -minY + (onlyExportingSingleFrame ? 0 : exportPadding);
+
+  const exportingFrame =
+    isExportingWholeCanvas || !onlyExportingSingleFrame
+      ? undefined
+      : elements.find((element) => element.type === "frame");
+
+  let exportingFrameClipPath = "";
+  if (exportingFrame) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(exportingFrame);
+    const cx = (x2 - x1) / 2 - (exportingFrame.x - x1);
+    const cy = (y2 - y1) / 2 - (exportingFrame.y - y1);
+
+    exportingFrameClipPath = `<clipPath id=${exportingFrame.id}>
+            <rect transform="translate(${exportingFrame.x + offsetX} ${
+      exportingFrame.y + offsetY
+    }) rotate(${exportingFrame.angle} ${cx} ${cy})"
+          width="${exportingFrame.width}"
+          height="${exportingFrame.height}"
+          >
+          </rect>
+        </clipPath>`;
+  }
+
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
@@ -154,8 +191,10 @@ export const exportToSvg = async (
         src: url("${assetPath}Cascadia.woff2");
       }
     </style>
+    ${exportingFrameClipPath}
   </defs>
   `;
+
   // render background rect
   if (appState.exportBackground && viewBackgroundColor) {
     const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
@@ -169,9 +208,10 @@ export const exportToSvg = async (
 
   const rsvg = rough.svg(svgRoot);
   renderSceneToSvg(elements, rsvg, svgRoot, files || {}, {
-    offsetX: -minX + exportPadding,
-    offsetY: -minY + exportPadding,
+    offsetX,
+    offsetY,
     exportWithDarkMode: appState.exportWithDarkMode,
+    exportingFrameId: exportingFrame?.id || null,
   });
 
   return svgRoot;
@@ -182,9 +222,36 @@ const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
 ): [number, number, number, number] => {
+  // we should decide if we are exporting the whole canvas
+  // if so, we are not clipping elements in the frame
+  // and therefore, we should not do anything special
+
+  const isExportingWholeCanvas =
+    Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
+    elements.length;
+
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
+  if (!isExportingWholeCanvas || onlyExportingSingleFrame) {
+    const frames = elements.filter((element) => element.type === "frame");
+
+    const exportedFrameIds = frames.reduce((acc, frame) => {
+      acc[frame.id] = true;
+      return acc;
+    }, {} as Record<string, true>);
+
+    // elements in a frame do not affect the canvas size if we're not exporting
+    // the whole canvas
+    elements = elements.filter(
+      (element) => !exportedFrameIds[element.frameId ?? ""],
+    );
+  }
+
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding + exportPadding;
+  const width =
+    distance(minX, maxX) + (onlyExportingSingleFrame ? 0 : exportPadding * 2);
+  const height =
+    distance(minY, maxY) + (onlyExportingSingleFrame ? 0 : exportPadding * 2);
 
   return [minX, minY, width, height];
 };
diff --git a/src/scene/selection.ts b/src/scene/selection.ts
index 20d787bc..5b8cb35b 100644
--- a/src/scene/selection.ts
+++ b/src/scene/selection.ts
@@ -5,17 +5,61 @@ import {
 import { getElementAbsoluteCoords, getElementBounds } from "../element";
 import { AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getContainingFrame,
+  getFrameElements,
+} from "../frame";
+
+/**
+ * Frames and their containing elements are not to be selected at the same time.
+ * Given an array of selected elements, if there are frames and their containing elements
+ * we only keep the frames.
+ * @param selectedElements
+ */
+export const excludeElementsInFramesFromSelection = <
+  T extends ExcalidrawElement,
+>(
+  selectedElements: readonly T[],
+) => {
+  const framesInSelection = new Set<T["id"]>();
+
+  selectedElements.forEach((element) => {
+    if (element.type === "frame") {
+      framesInSelection.add(element.id);
+    }
+  });
+
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
 
 export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
+  excludeElementsInFrames: boolean = true,
 ) => {
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(selection);
-  return elements.filter((element) => {
-    const [elementX1, elementY1, elementX2, elementY2] =
+
+  let elementsInSelection = elements.filter((element) => {
+    let [elementX1, elementY1, elementX2, elementY2] =
       getElementBounds(element);
 
+    const containingFrame = getContainingFrame(element);
+    if (containingFrame) {
+      const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
+
+      elementX1 = Math.max(fx1, elementX1);
+      elementY1 = Math.max(fy1, elementY1);
+      elementX2 = Math.min(fx2, elementX2);
+      elementY2 = Math.min(fy2, elementY2);
+    }
+
     return (
       element.locked === false &&
       element.type !== "selection" &&
@@ -26,6 +70,22 @@ export const getElementsWithinSelection = (
       selectionY2 >= elementY2
     );
   });
+
+  elementsInSelection = excludeElementsInFrames
+    ? excludeElementsInFramesFromSelection(elementsInSelection)
+    : elementsInSelection;
+
+  elementsInSelection = elementsInSelection.filter((element) => {
+    const containingFrame = getContainingFrame(element);
+
+    if (containingFrame) {
+      return elementOverlapsWithFrame(element, containingFrame);
+    }
+
+    return true;
+  });
+
+  return elementsInSelection;
 };
 
 export const isSomeElementSelected = (
@@ -56,14 +116,17 @@ export const getCommonAttributeOfSelectedElements = <T>(
 export const getSelectedElements = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: Pick<AppState, "selectedElementIds">,
-  includeBoundTextElement: boolean = false,
-) =>
-  elements.filter((element) => {
+  opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  },
+) => {
+  const selectedElements = elements.filter((element) => {
     if (appState.selectedElementIds[element.id]) {
       return element;
     }
     if (
-      includeBoundTextElement &&
+      opts?.includeBoundTextElement &&
       isBoundToContainer(element) &&
       appState.selectedElementIds[element?.containerId]
     ) {
@@ -72,10 +135,29 @@ export const getSelectedElements = (
     return null;
   });
 
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude: ExcalidrawElement[] = [];
+    selectedElements.forEach((element) => {
+      if (element.type === "frame") {
+        getFrameElements(elements, element.id).forEach((e) =>
+          elementsToInclude.push(e),
+        );
+      }
+      elementsToInclude.push(element);
+    });
+
+    return elementsToInclude;
+  }
+
+  return selectedElements;
+};
+
 export const getTargetElements = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: Pick<AppState, "selectedElementIds" | "editingElement">,
 ) =>
   appState.editingElement
     ? [appState.editingElement]
-    : getSelectedElements(elements, appState, true);
+    : getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+      });
diff --git a/src/shapes.tsx b/src/shapes.tsx
index a8b9b530..bb827995 100644
--- a/src/shapes.tsx
+++ b/src/shapes.tsx
@@ -83,6 +83,14 @@ export const SHAPES = [
     numericKey: KEYS["0"],
     fillable: false,
   },
+  // TODO: frame, create icon and set up numeric key
+  // {
+  //   icon: RectangleIcon,
+  //   value: "frame",
+  //   key: KEYS.F,
+  //   numericKey: KEYS.SUBTRACT,
+  //   fillable: false,
+  // },
 ] as const;
 
 export const findShapeByKey = (key: string) => {
diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index 6103c2f5..e2ed78b3 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -41,6 +41,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -247,6 +265,7 @@ Object {
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -285,14 +304,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -324,12 +346,14 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "g1": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -353,6 +377,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "solid",
+  "frameId": null,
   "groupIds": Array [
     "g1",
   ],
@@ -386,6 +411,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "solid",
+  "frameId": null,
   "groupIds": Array [
     "g1",
   ],
@@ -465,14 +491,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -503,10 +532,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -532,6 +563,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -590,6 +622,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -651,14 +684,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -689,10 +725,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -716,6 +754,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -747,6 +786,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -805,6 +845,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -847,6 +888,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -875,6 +917,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -917,6 +960,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -945,6 +989,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1006,14 +1051,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -1044,10 +1092,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -1071,6 +1121,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -1102,6 +1153,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1160,6 +1212,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1202,6 +1255,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1230,6 +1284,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -1272,6 +1327,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -1300,6 +1356,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1361,14 +1418,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -1399,10 +1459,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -1428,6 +1490,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1486,6 +1549,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1547,14 +1611,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -1583,10 +1650,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -1610,6 +1679,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1668,6 +1738,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1708,6 +1779,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1769,14 +1841,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -1807,10 +1882,12 @@ Object {
   "selectedElementIds": Object {
     "id0_copy": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -1834,6 +1911,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1865,6 +1943,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0_copy",
@@ -1923,6 +2002,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1965,6 +2045,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1993,6 +2074,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0_copy",
@@ -2054,14 +2136,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -2096,12 +2181,14 @@ Object {
     "id1": true,
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id3": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -2125,6 +2212,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -2158,6 +2246,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -2218,6 +2307,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2260,6 +2350,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2288,6 +2379,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2334,6 +2426,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -2364,6 +2457,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -2427,14 +2521,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -2465,10 +2562,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -2494,6 +2593,7 @@ Object {
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -2525,6 +2625,7 @@ Object {
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -2583,6 +2684,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2625,6 +2727,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2653,6 +2756,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2695,6 +2799,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2723,6 +2828,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2765,6 +2871,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2793,6 +2900,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2835,6 +2943,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2863,6 +2972,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2905,6 +3015,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2933,6 +3044,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2975,6 +3087,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3003,6 +3116,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3045,6 +3159,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3073,6 +3188,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3115,6 +3231,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3143,6 +3260,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3185,6 +3303,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3213,6 +3332,7 @@ Object {
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3274,14 +3394,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -3312,10 +3435,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -3339,6 +3464,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -3370,6 +3496,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -3428,6 +3555,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3470,6 +3598,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3498,6 +3627,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3540,6 +3670,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3568,6 +3699,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3629,14 +3761,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -3667,10 +3802,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -3694,6 +3831,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -3725,6 +3863,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -3783,6 +3922,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3825,6 +3965,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3853,6 +3994,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3895,6 +4037,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3923,6 +4066,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3984,14 +4128,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -4026,10 +4173,12 @@ Object {
     "id1": true,
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4053,6 +4202,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -4084,6 +4234,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -4142,6 +4293,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4184,6 +4336,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4212,6 +4365,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -4258,6 +4412,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -4288,6 +4443,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -4334,6 +4490,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4362,6 +4519,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -4436,6 +4594,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -4642,6 +4818,7 @@ Object {
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -4680,14 +4857,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -4724,10 +4904,12 @@ Object {
     "id2": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4751,6 +4933,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4782,6 +4965,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -4840,6 +5024,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4882,6 +5067,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4910,6 +5096,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -4984,6 +5171,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -5190,6 +5395,7 @@ Object {
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -5228,14 +5434,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -5272,12 +5481,14 @@ Object {
     "id2": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id4": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -5301,6 +5512,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -5334,6 +5546,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -5394,6 +5607,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5436,6 +5650,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5464,6 +5679,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5511,6 +5727,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -5541,6 +5758,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -5719,14 +5937,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -5755,10 +5976,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -5841,6 +6064,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -6047,6 +6288,7 @@ Object {
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6085,14 +6327,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -6123,10 +6368,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6185,6 +6432,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -6391,6 +6656,7 @@ Object {
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6429,14 +6695,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
@@ -6467,10 +6736,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6494,6 +6765,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -6525,6 +6797,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id0",
@@ -6556,6 +6829,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id1",
@@ -6614,6 +6888,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
diff --git a/src/tests/__snapshots__/dragCreate.test.tsx.snap b/src/tests/__snapshots__/dragCreate.test.tsx.snap
index 4508fd3c..b8d95d22 100644
--- a/src/tests/__snapshots__/dragCreate.test.tsx.snap
+++ b/src/tests/__snapshots__/dragCreate.test.tsx.snap
@@ -10,6 +10,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -56,6 +57,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -89,6 +91,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -122,6 +125,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -168,6 +172,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
diff --git a/src/tests/__snapshots__/export.test.tsx.snap b/src/tests/__snapshots__/export.test.tsx.snap
index f292d199..5f860150 100644
--- a/src/tests/__snapshots__/export.test.tsx.snap
+++ b/src/tests/__snapshots__/export.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`export exporting svg containing transformed images: svg export output 1
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
-  <g transform=\\"translate(30.710678118654755 30.710678118654755) rotate(315 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\"></use></g><g transform=\\"translate(130.71067811865476 30.710678118654755) rotate(45 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" transform=\\"scale(-1, 1) translate(-50 0)\\"></use></g><g transform=\\"translate(30.710678118654755 130.71067811865476) rotate(45 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" transform=\\"scale(1, -1) translate(0 -100)\\"></use></g><g transform=\\"translate(130.71067811865476 130.71067811865476) rotate(315 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" transform=\\"scale(-1, -1) translate(-50 -50)\\"></use></g></svg>"
+  <g transform=\\"translate(30.710678118654755 30.710678118654755) rotate(315 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" opacity=\\"1\\"></use></g><g transform=\\"translate(130.71067811865476 30.710678118654755) rotate(45 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" opacity=\\"1\\" transform=\\"scale(-1, 1) translate(-50 0)\\"></use></g><g transform=\\"translate(30.710678118654755 130.71067811865476) rotate(45 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" opacity=\\"1\\" transform=\\"scale(1, -1) translate(0 -100)\\"></use></g><g transform=\\"translate(130.71067811865476 130.71067811865476) rotate(315 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" opacity=\\"1\\" transform=\\"scale(-1, -1) translate(-50 -50)\\"></use></g></svg>"
 `;
diff --git a/src/tests/__snapshots__/move.test.tsx.snap b/src/tests/__snapshots__/move.test.tsx.snap
index b214243c..5084d150 100644
--- a/src/tests/__snapshots__/move.test.tsx.snap
+++ b/src/tests/__snapshots__/move.test.tsx.snap
@@ -6,6 +6,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0_copy",
@@ -37,6 +38,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -68,6 +70,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -104,6 +107,7 @@ Object {
     },
   ],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id0",
@@ -140,6 +144,7 @@ Object {
     },
   ],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 300,
   "id": "id1",
@@ -177,6 +182,7 @@ Object {
     "gap": 10,
   },
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 81.48231043525051,
   "id": "id2",
diff --git a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
index a1ce5636..0a6ae0cc 100644
--- a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
+++ b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 110,
   "id": "id0",
@@ -61,6 +62,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 110,
   "id": "id0",
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index 931a2db5..588dff76 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -28,14 +28,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -75,12 +78,14 @@ Object {
     "id2": true,
     "id7": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id5": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -104,6 +109,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -135,6 +141,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
   ],
@@ -168,6 +175,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
   ],
@@ -228,6 +236,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -270,6 +279,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -298,6 +308,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -340,6 +351,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -368,6 +380,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -396,6 +409,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -443,6 +457,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -471,6 +486,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -501,6 +517,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -564,14 +581,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -613,6 +633,7 @@ Object {
     "id5": true,
     "id6": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id0": true,
     "id1": true,
@@ -624,6 +645,7 @@ Object {
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -647,6 +669,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id1",
@@ -678,6 +701,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -711,6 +735,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -771,6 +796,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -813,6 +839,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -841,6 +868,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -883,6 +911,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -911,6 +940,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -939,6 +969,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -985,6 +1016,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -1013,6 +1045,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1043,6 +1076,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1106,14 +1140,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id10",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": false,
@@ -1145,10 +1182,12 @@ Object {
     "id12": true,
     "id7": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -1172,6 +1211,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
     "id10",
@@ -1206,6 +1246,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
     "id10",
@@ -1240,6 +1281,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id10",
   ],
@@ -1300,6 +1342,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -1342,6 +1385,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -1370,6 +1414,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -1417,6 +1462,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1447,6 +1493,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1492,6 +1539,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1522,6 +1570,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1566,6 +1615,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1596,6 +1646,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1626,6 +1677,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id7",
@@ -1674,6 +1726,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1705,6 +1758,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1736,6 +1790,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -1781,6 +1836,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1812,6 +1868,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1843,6 +1900,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -1888,6 +1946,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1919,6 +1978,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1950,6 +2010,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -2013,14 +2074,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -2054,10 +2118,12 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -2081,6 +2147,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -2139,6 +2206,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2182,6 +2250,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2243,14 +2312,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -2287,12 +2359,14 @@ Object {
     "id3": true,
     "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id5": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -2316,6 +2390,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -2347,6 +2422,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
   ],
@@ -2380,6 +2456,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
   ],
@@ -2440,6 +2517,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2482,6 +2560,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2510,6 +2589,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2552,6 +2632,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2580,6 +2661,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2608,6 +2690,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -2655,6 +2738,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2683,6 +2767,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -2713,6 +2798,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -2776,14 +2862,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -2817,10 +2906,12 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -2844,6 +2935,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0_copy",
@@ -2875,6 +2967,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -2933,6 +3026,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2976,6 +3070,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0_copy",
@@ -3004,6 +3099,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3065,14 +3161,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -3103,10 +3202,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -3130,6 +3231,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -3188,6 +3290,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3249,14 +3352,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -3290,10 +3396,12 @@ Object {
     "id1": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -3317,6 +3425,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id0",
@@ -3348,6 +3457,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id1",
@@ -3379,6 +3489,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 350,
   "id": "id2",
@@ -3437,6 +3548,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3479,6 +3591,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3507,6 +3620,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3549,6 +3663,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3577,6 +3692,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3605,6 +3721,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 350,
           "id": "id2",
@@ -3648,6 +3765,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3676,6 +3794,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3704,6 +3823,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 350,
           "id": "id2",
@@ -3765,14 +3885,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -3803,10 +3926,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -3830,6 +3955,7 @@ Object {
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -3888,6 +4014,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3930,6 +4057,7 @@ Object {
           "backgroundColor": "#ffec99",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3972,6 +4100,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4014,6 +4143,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4075,14 +4205,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -4116,10 +4249,12 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4143,6 +4278,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4201,6 +4337,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4244,6 +4381,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4305,14 +4443,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -4348,10 +4489,12 @@ Object {
     "id1": true,
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4375,6 +4518,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4433,6 +4577,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4476,6 +4621,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4520,6 +4666,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4581,14 +4728,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -4622,10 +4772,12 @@ Object {
     "id0": true,
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4649,6 +4801,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4680,6 +4833,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -4738,6 +4892,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4780,6 +4935,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4808,6 +4964,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -4869,14 +5026,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -4911,10 +5071,12 @@ Object {
     "id1": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -4938,6 +5100,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4969,6 +5132,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -5000,6 +5164,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id2",
@@ -5058,6 +5223,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5100,6 +5266,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5128,6 +5295,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5170,6 +5338,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5198,6 +5367,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5226,6 +5396,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -5290,6 +5461,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5314,14 +5486,17 @@ Object {
     "y": 500,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -5354,6 +5529,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -5361,6 +5537,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5385,6 +5562,7 @@ Object {
     "y": 500,
   },
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -5408,6 +5586,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -5439,6 +5618,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -5497,6 +5677,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5539,6 +5720,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5567,6 +5749,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5631,6 +5814,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5655,14 +5839,17 @@ Object {
     "y": 50,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -5695,10 +5882,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -5722,6 +5911,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -5753,6 +5943,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -5811,6 +6002,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5853,6 +6045,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5881,6 +6074,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5945,6 +6139,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id1",
@@ -5969,14 +6164,17 @@ Object {
     "y": 110,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -6007,6 +6205,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -6014,6 +6213,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id1",
@@ -6038,6 +6238,7 @@ Object {
     "y": 110,
   },
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6061,6 +6262,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -6119,6 +6321,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6180,14 +6383,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -6220,10 +6426,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6247,6 +6455,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id0",
@@ -6305,6 +6514,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -6366,14 +6576,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id3",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -6404,10 +6617,12 @@ Object {
   "selectedElementIds": Object {
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6431,6 +6646,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -6464,6 +6680,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -6497,6 +6714,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -6557,6 +6775,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6599,6 +6818,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6627,6 +6847,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -6669,6 +6890,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6697,6 +6919,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -6725,6 +6948,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -6771,6 +6995,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6801,6 +7026,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6831,6 +7057,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6894,14 +7121,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -6939,10 +7169,12 @@ Object {
     "id2": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -6966,6 +7198,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -6997,6 +7230,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -7055,6 +7289,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7097,6 +7332,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7125,6 +7361,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7170,6 +7407,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7198,6 +7436,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7259,14 +7498,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -7297,10 +7539,12 @@ Object {
   "selectedElementIds": Object {
     "id7": false,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -7324,6 +7568,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -7355,6 +7600,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -7386,6 +7632,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id2",
@@ -7419,6 +7666,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id3",
@@ -7465,6 +7713,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id4",
@@ -7511,6 +7760,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id5",
@@ -7564,6 +7814,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id6",
@@ -7615,6 +7866,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id7",
@@ -7695,6 +7947,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7737,6 +7990,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7765,6 +8019,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7807,6 +8062,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7835,6 +8091,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7863,6 +8120,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -7905,6 +8163,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7933,6 +8192,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7961,6 +8221,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -7991,6 +8252,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8046,6 +8308,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8074,6 +8337,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8102,6 +8366,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8132,6 +8397,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8175,6 +8441,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8230,6 +8497,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8258,6 +8526,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8286,6 +8555,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8316,6 +8586,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8359,6 +8630,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8402,6 +8674,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -8460,6 +8733,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8488,6 +8762,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8516,6 +8791,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8546,6 +8822,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8589,6 +8866,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8632,6 +8910,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -8694,6 +8973,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8722,6 +9002,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8750,6 +9031,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8780,6 +9062,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8823,6 +9106,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8866,6 +9150,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -8916,6 +9201,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id6",
@@ -8974,6 +9260,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9002,6 +9289,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -9030,6 +9318,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -9060,6 +9349,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -9103,6 +9393,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -9146,6 +9437,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -9196,6 +9488,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id6",
@@ -9258,6 +9551,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9286,6 +9580,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -9314,6 +9609,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -9344,6 +9640,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -9387,6 +9684,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -9430,6 +9728,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -9480,6 +9779,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id6",
@@ -9528,6 +9828,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id7",
@@ -9611,14 +9912,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -9654,10 +9958,12 @@ Object {
     "id1": true,
     "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -9681,6 +9987,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -9712,6 +10019,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id1",
@@ -9743,6 +10051,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id2",
@@ -9801,6 +10110,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9843,6 +10153,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9871,6 +10182,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -9913,6 +10225,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9941,6 +10254,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -9969,6 +10283,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -10030,14 +10345,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -10074,10 +10392,12 @@ Object {
     "id2": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -10101,6 +10421,7 @@ Object {
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 1000,
   "id": "id0",
@@ -10132,6 +10453,7 @@ Object {
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 1000,
   "id": "id1",
@@ -10190,6 +10512,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10232,6 +10555,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10260,6 +10584,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id1",
@@ -10321,14 +10646,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -10363,10 +10691,12 @@ Object {
     "id1": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -10390,6 +10720,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 1000,
   "id": "id0",
@@ -10421,6 +10752,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 500,
   "id": "id1",
@@ -10480,6 +10812,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10508,6 +10841,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10569,14 +10903,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -10612,10 +10949,12 @@ Object {
     "id2": true,
     "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -10639,6 +10978,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 1000,
   "id": "id0",
@@ -10670,6 +11010,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 500,
   "id": "id1",
@@ -10729,6 +11070,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10757,6 +11099,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10801,6 +11144,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10829,6 +11173,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10890,14 +11235,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -10928,10 +11276,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -10955,6 +11305,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -11013,6 +11364,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11074,14 +11426,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -11112,10 +11467,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -11139,6 +11496,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -11197,6 +11555,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11258,14 +11617,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -11296,10 +11658,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -11323,6 +11687,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -11381,6 +11746,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11442,14 +11808,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -11480,6 +11849,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -11507,6 +11877,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -11532,6 +11903,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -11605,6 +11977,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11679,14 +12052,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -11717,6 +12093,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -11744,6 +12121,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -11769,6 +12147,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -11842,6 +12221,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11916,14 +12296,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -11954,10 +12337,12 @@ Object {
   "selectedElementIds": Object {
     "id0": false,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -11981,6 +12366,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -12061,6 +12447,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12144,14 +12531,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -12182,6 +12572,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -12209,6 +12600,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -12234,6 +12626,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -12307,6 +12700,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12381,14 +12775,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -12419,10 +12816,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -12446,6 +12845,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -12504,6 +12904,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12565,14 +12966,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -12603,6 +13007,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -12630,6 +13035,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -12655,6 +13061,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -12728,6 +13135,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12802,14 +13210,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -12840,10 +13251,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -12867,6 +13280,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -12925,6 +13339,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12986,14 +13401,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -13024,10 +13442,12 @@ Object {
   "selectedElementIds": Object {
     "id0": false,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -13051,6 +13471,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -13131,6 +13552,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13214,14 +13636,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -13252,10 +13677,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -13279,6 +13706,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -13337,6 +13765,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13398,14 +13827,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -13445,12 +13877,14 @@ Object {
     "id3": true,
     "id5": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id4": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -13474,6 +13908,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4_copy",
   ],
@@ -13507,6 +13942,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4_copy",
   ],
@@ -13540,6 +13976,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4_copy",
   ],
@@ -13573,6 +14010,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -13606,6 +14044,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -13639,6 +14078,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -13699,6 +14139,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13741,6 +14182,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13769,6 +14211,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -13811,6 +14254,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13839,6 +14283,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -13867,6 +14312,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -13914,6 +14360,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -13944,6 +14391,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -13974,6 +14422,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14024,6 +14473,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -14054,6 +14504,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -14084,6 +14535,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -14114,6 +14566,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14144,6 +14597,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14174,6 +14628,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14237,14 +14692,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -14279,10 +14737,12 @@ Object {
     "id1": true,
     "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -14306,6 +14766,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -14337,6 +14798,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -14395,6 +14857,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14437,6 +14900,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14465,6 +14929,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -14526,14 +14991,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -14564,10 +15032,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -14637,14 +15107,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -14673,10 +15146,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -14746,14 +15221,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -14787,10 +15265,12 @@ Object {
     "id0": false,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -14814,6 +15294,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -14872,6 +15353,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14933,14 +15415,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -14980,10 +15465,12 @@ Object {
     "id3": true,
     "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -15007,6 +15494,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -15038,6 +15526,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -15096,6 +15585,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15138,6 +15628,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15166,6 +15657,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15212,6 +15704,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15240,6 +15733,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15301,14 +15795,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -15347,10 +15844,12 @@ Object {
     "id2": true,
     "id5": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -15374,6 +15873,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -15405,6 +15905,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -15436,6 +15937,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id2",
@@ -15494,6 +15996,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15536,6 +16039,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15564,6 +16068,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15606,6 +16111,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15634,6 +16140,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15662,6 +16169,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -15709,6 +16217,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15739,6 +16248,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15769,6 +16279,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15816,6 +16327,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15844,6 +16356,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15872,6 +16385,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -15933,14 +16447,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -15972,10 +16489,12 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -15999,6 +16518,7 @@ Object {
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -16057,6 +16577,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16099,6 +16620,7 @@ Object {
           "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16160,14 +16682,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -16207,12 +16732,14 @@ Object {
     "id5": true,
     "id6": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id10": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -16236,6 +16763,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
     "id10",
@@ -16270,6 +16798,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
     "id10",
@@ -16304,6 +16833,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id9",
     "id10",
@@ -16338,6 +16868,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id9",
     "id10",
@@ -16399,6 +16930,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16441,6 +16973,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16469,6 +17002,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -16516,6 +17050,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16546,6 +17081,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16590,6 +17126,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16620,6 +17157,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16650,6 +17188,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -16692,6 +17231,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16722,6 +17262,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16752,6 +17293,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -16780,6 +17322,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id6",
@@ -16827,6 +17370,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16857,6 +17401,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16887,6 +17432,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
           ],
@@ -16917,6 +17463,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
           ],
@@ -16966,6 +17513,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -16997,6 +17545,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -17028,6 +17577,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
             "id10",
@@ -17059,6 +17609,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
             "id10",
@@ -17123,14 +17674,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -17159,10 +17713,12 @@ Object {
   "scrollY": 60,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -17232,14 +17788,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id3",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -17272,10 +17831,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -17299,6 +17860,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -17332,6 +17894,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
     "id3",
@@ -17366,6 +17929,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id5",
     "id3",
@@ -17427,6 +17991,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17469,6 +18034,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17497,6 +18063,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id1",
@@ -17539,6 +18106,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17567,6 +18135,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id1",
@@ -17595,6 +18164,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id2",
@@ -17641,6 +18211,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17671,6 +18242,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17701,6 +18273,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17747,6 +18320,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17777,6 +18351,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17807,6 +18382,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17855,6 +18431,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17885,6 +18462,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17916,6 +18494,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17966,6 +18545,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17996,6 +18576,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -18027,6 +18608,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -18094,6 +18676,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id4",
@@ -18118,14 +18701,17 @@ Object {
     "y": 0,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -18160,6 +18746,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -18167,6 +18754,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id4",
@@ -18191,6 +18779,7 @@ Object {
     "y": 0,
   },
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -18214,6 +18803,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -18245,6 +18835,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id1",
@@ -18276,6 +18867,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id2",
@@ -18334,6 +18926,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18376,6 +18969,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18404,6 +18998,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -18446,6 +19041,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18474,6 +19070,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -18502,6 +19099,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -18566,6 +19164,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id2",
@@ -18590,14 +19189,17 @@ Object {
     "y": 0,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -18630,6 +19232,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -18637,6 +19240,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id2",
@@ -18661,6 +19265,7 @@ Object {
     "y": 0,
   },
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -18684,6 +19289,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -18715,6 +19321,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -18773,6 +19380,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18815,6 +19423,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18843,6 +19452,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -18904,14 +19514,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -18942,10 +19555,12 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -19015,14 +19630,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -19053,10 +19671,12 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -19080,6 +19700,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -19111,6 +19732,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -19144,6 +19766,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id2",
@@ -19206,6 +19829,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19234,6 +19858,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19264,6 +19889,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id2",
@@ -19326,6 +19952,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19354,6 +19981,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19384,6 +20012,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -19455,6 +20084,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19497,6 +20127,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19525,6 +20156,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19586,14 +20218,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -19622,10 +20257,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -19695,14 +20332,17 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
@@ -19731,10 +20371,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
diff --git a/src/tests/__snapshots__/selection.test.tsx.snap b/src/tests/__snapshots__/selection.test.tsx.snap
index 61c4dc97..fff176a6 100644
--- a/src/tests/__snapshots__/selection.test.tsx.snap
+++ b/src/tests/__snapshots__/selection.test.tsx.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -54,6 +55,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -98,6 +100,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -129,6 +132,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -160,6 +164,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
diff --git a/src/tests/data/__snapshots__/restore.test.ts.snap b/src/tests/data/__snapshots__/restore.test.ts.snap
index cfb57ecb..bb2303bc 100644
--- a/src/tests/data/__snapshots__/restore.test.ts.snap
+++ b/src/tests/data/__snapshots__/restore.test.ts.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-arrow01",
@@ -52,6 +53,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -87,6 +89,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -122,6 +125,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -157,6 +161,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": Array [],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 0,
   "id": "id-freedraw01",
@@ -194,6 +199,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-line01",
@@ -240,6 +246,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-draw01",
@@ -288,6 +295,7 @@ Object {
   "fillStyle": "hachure",
   "fontFamily": 1,
   "fontSize": 14,
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-text01",
@@ -328,6 +336,7 @@ Object {
   "fillStyle": "hachure",
   "fontFamily": 1,
   "fontSize": 10,
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-text01",
diff --git a/src/tests/fixtures/elementFixture.ts b/src/tests/fixtures/elementFixture.ts
index e9db6489..fb4d559f 100644
--- a/src/tests/fixtures/elementFixture.ts
+++ b/src/tests/fixtures/elementFixture.ts
@@ -15,6 +15,7 @@ const elementBase: Omit<ExcalidrawElement, "type"> = {
   roughness: 1,
   opacity: 100,
   groupIds: [],
+  frameId: null,
   roundness: null,
   seed: 1041657908,
   version: 120,
diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts
index 705180d6..7bba8bdd 100644
--- a/src/tests/helpers/api.ts
+++ b/src/tests/helpers/api.ts
@@ -37,8 +37,12 @@ export class API {
 
   static getSelectedElements = (
     includeBoundTextElement: boolean = false,
+    includeElementsInFrames: boolean = false,
   ): ExcalidrawElement[] => {
-    return getSelectedElements(h.elements, h.state, includeBoundTextElement);
+    return getSelectedElements(h.elements, h.state, {
+      includeBoundTextElement,
+      includeElementsInFrames,
+    });
   };
 
   static getSelectedElement = (): ExcalidrawElement => {
@@ -141,6 +145,7 @@ export class API {
       | "versionNonce"
       | "isDeleted"
       | "groupIds"
+      | "frameId"
       | "link"
       | "updated"
     > = {
diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index 98303fb7..b0fd58fc 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -28,8 +28,10 @@ Object {
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -37,6 +39,7 @@ Object {
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameToHighlight": null,
   "gridSize": null,
   "isBindingEnabled": true,
   "isLoading": false,
@@ -62,10 +65,12 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "shouldRenderFrames": true,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": false,
diff --git a/src/tests/queries/toolQueries.ts b/src/tests/queries/toolQueries.ts
index bc1e4928..c20e0d30 100644
--- a/src/tests/queries/toolQueries.ts
+++ b/src/tests/queries/toolQueries.ts
@@ -11,6 +11,7 @@ const toolMap = {
   freedraw: "freedraw",
   text: "text",
   eraser: "eraser",
+  frame: "frame",
 };
 
 export type ToolName = keyof typeof toolMap;
diff --git a/src/tests/scene/__snapshots__/export.test.ts.snap b/src/tests/scene/__snapshots__/export.test.ts.snap
index 8015ebc4..9f706ca0 100644
--- a/src/tests/scene/__snapshots__/export.test.ts.snap
+++ b/src/tests/scene/__snapshots__/export.test.ts.snap
@@ -32,6 +32,7 @@ exports[`exportToSvg with default arguments 1`] = `
     
     </style>
     
+    
   
   </defs>
   
@@ -88,6 +89,7 @@ exports[`exportToSvg with elements that have a link 1`] = `
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
   <a href=\\"excalidraw.com\\"><g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 107 107)\\"><path d=\\"M0 0 C0 0, 0 0, 0 0 M0 0 C0 0, 0 0, 0 0 M-0.81 6.83 C1.42 4.82, 3.76 1.52, 5.21 0.19 M-0.15 6.66 C1.8 4.06, 3.47 2.78, 5.22 0.73 M-0.29 10.96 C2.44 8.61, 6.86 4.4, 10.93 -0.91 M0.52 11.4 C3.45 8.64, 6.67 5.66, 10.55 0.52 M-0.73 16.51 C7.35 10.86, 13.5 3, 17.44 0.95 M0.2 18.45 C5.73 11.79, 11.18 5.08, 16.02 -0.18 M0.75 25.53 C5.82 17, 10.04 11.07, 20.53 0.11 M0.63 24.62 C6.15 16.7, 12.35 9.33, 21.67 -0.92 M-0.46 31.29 C10.67 19.56, 20.95 6.14, 26.3 0.97 M0.19 30.33 C6.15 22.94, 12.8 16.86, 26.48 0.56 M0.06 38.68 C9.21 29.05, 14.84 21.35, 32.64 0.53 M0.13 37.62 C11.7 22.94, 22.8 8.94, 31.86 0.17 M1.97 42.03 C14.26 29.52, 23.97 12.83, 36.26 1.93 M0.5 42.42 C7.49 34.15, 14.87 25.57, 36.32 -0.12 M-1.55 47.05 C9.52 36.22, 20.47 27.66, 42.25 0.23 M0.07 48.87 C15.17 30.66, 32.72 11.39, 42.55 -0.3 M1 53.34 C15.85 39.16, 30.2 22.36, 47.03 0.12 M0.83 54.24 C13.32 41.61, 24.32 26.03, 48.09 -0.05 M-1.51 60.18 C18.44 42.68, 33.89 21.16, 51.91 1.7 M0.58 61.04 C19.82 38.42, 41.63 15.34, 52.4 -0.74 M-2 68.97 C17.08 50.31, 33.78 31.07, 58 -1.79 M-0.57 67.89 C12.79 53.01, 23.57 38.56, 57.54 0.78 M-0.94 73.26 C17.3 51.99, 37.15 29.16, 63.79 1.79 M-0.34 73.88 C13.12 57.81, 25.23 44.29, 63.24 0.24 M-0.02 80.75 C25.47 53.17, 50.04 23.22, 68.13 1.24 M-0.31 79 C13.15 62.83, 27.89 46.91, 69.58 0.16 M-1.36 83.81 C22.43 62.66, 42.64 36.29, 75.7 -0.26 M0.49 84.94 C20.19 61.39, 38.84 39.35, 74.08 -0.14 M-0.44 93.19 C29.84 56.59, 58.57 21.34, 80.05 0.63 M0.23 91.29 C16.75 73.26, 34.07 51.65, 80.34 -0.29 M-1.32 96.52 C29.7 64.08, 56.68 31.83, 85.06 1.15 M-1.23 98.35 C28.8 63.78, 59.61 29.8, 85.15 -0.85 M1.68 104.37 C24.69 72.49, 52 43.21, 91.99 -1.81 M-0.48 103.54 C31.96 64.64, 64.99 27.22, 89.13 0.87 M-1.77 108.18 C36.54 67.37, 72.5 22.54, 96.92 -1.99 M-0.63 109.78 C22.47 82.36, 45.16 56.53, 95.84 -1.07 M-1.12 114.79 C38.49 70.57, 74.74 30, 101.81 -1.93 M1.19 116.33 C38.03 73.29, 76.06 29.97, 100.42 0.88 M2 120.2 C36.47 78.86, 73.59 37.62, 107.95 0.68 M0.39 120.97 C29.7 88.16, 58.99 53.35, 106.73 -0.13 M-1.32 128.06 C41.12 75.45, 86.81 26, 110.99 -1.18 M-0.57 128.82 C35.82 86.5, 72.74 44.1, 111.91 0.79 M-1.02 135.64 C43.91 82.98, 87.98 32.05, 117.79 -1.37 M-0.27 134.74 C26.27 106.76, 50.22 76.9, 116.93 1.16 M-1.8 139.9 C35.21 104.38, 65.53 62.78, 120.66 1.37 M-0.43 139.71 C38.55 95.61, 78.01 50.56, 122.46 -0.53 M1.76 147.91 C29.11 117.4, 55.37 85.99, 127.68 1.48 M0.53 145.69 C46.44 94.62, 91.7 39.92, 126.74 -0.41 M0.17 150.85 C33.17 115.83, 61.4 80.26, 131.64 0.9 M0.15 151.84 C53.25 90.23, 106.14 30.74, 132.16 -0.36 M-1.84 157.7 C37.59 114.01, 76.78 70.61, 136.63 -0.45 M0.35 158.99 C30.36 122.85, 60.89 88, 137.61 0.03 M-0.23 166.11 C29.43 128.1, 58.73 93.84, 143.89 -0.53 M-0.32 164.8 C28.62 130.08, 57.48 96.97, 144 -0.28 M0.58 169.48 C50.77 111.65, 102.4 55.59, 147.57 0.38 M0.18 171.37 C41.33 123.45, 81.86 77.61, 148.81 0.27 M-0.43 175.5 C42.41 129.13, 83.17 82.4, 153.98 0.49 M-0.38 176.58 C56.14 112.56, 110.58 48.82, 153.05 0 M0.7 184.05 C39.63 137.27, 77.83 89.07, 159.24 -1.15 M-0.04 183.65 C61.15 113.46, 120.25 43.45, 159.1 0.14 M0.78 189.08 C63.86 116.64, 126.59 42.93, 165.06 -0.83 M-0.1 189.24 C43.16 138.18, 87.83 86.83, 164.16 0.56 M1.24 193.84 C36.84 154.67, 72.19 113.57, 170.32 -1.11 M-0.39 194.15 C64.21 119.86, 128.3 45.54, 169.93 0.91 M-0.29 202.73 C49.19 146.43, 96.87 92.17, 176.44 -0.47 M0.13 200.67 C52.92 138.41, 108.19 74.96, 174.6 -0.26 M1.16 206.55 C59.57 139.38, 118.88 71.01, 179.33 -0.46 M-0.07 207.43 C53.03 145.16, 107.35 82.74, 180.4 0.42 M0.22 213.68 C60.95 141.62, 123.88 71.22, 187.21 0.77 M0.6 214.05 C46.1 157.63, 93.55 102.73, 185.97 0.53 M1.26 216.37 C45.53 168.31, 87.98 118.47, 190.76 -1.23 M3.04 216.09 C67.52 139.61, 132.76 63.4, 190.6 -0.35 M7.95 217.48 C67.06 150.79, 124.44 83.38, 196.32 1.03 M7.93 216.35 C53.89 161.92, 100.46 109.21, 196.09 -0.51 M12.62 217.33 C58.21 163, 105.7 107.92, 202.43 -0.59 M13.54 216.66 C71.71 147.52, 130.4 81.02, 201.49 0.82 M18.27 217.27 C66.39 160.5, 115.21 104.07, 208.36 0.27 M18.01 215.72 C58.01 168.33, 99.25 121.93, 206.76 -0.82 M24.9 216.54 C74.66 158.72, 125.24 98.12, 212.06 0.05 M23.39 216.76 C89.76 140.49, 156.61 64.23, 211.91 -0.02 M28.87 215.01 C94.99 140.87, 162.5 64.39, 216.64 2.5 M28.76 215.55 C79.01 159.87, 128.27 103.38, 215.68 1.25 M32.95 216.11 C83.19 160.31, 131.85 106.05, 216.52 8.63 M33.94 217.11 C75.45 168.61, 117.47 121.55, 216.54 8.14 M39.78 217.56 C92.26 159.75, 140.57 102.37, 215.58 12.68 M40.11 216.11 C90.9 157.88, 140.49 99.7, 215.33 14 M43.47 216.97 C104.46 148.92, 163.67 79.54, 215.48 18.1 M44.41 216.74 C89.24 164.57, 133.58 113.45, 215.55 19.53 M50.78 215.1 C93.5 164.92, 139.86 112.9, 214.41 26.53 M49.78 215.99 C110.29 149.66, 168.81 81.69, 215.73 26.76 M57.12 215.58 C107.36 155.81, 157.92 97.78, 215.19 31.92 M54.97 216.03 C113.66 149.14, 173.56 80.85, 215.38 32.06 M61.3 215.31 C95.1 175.75, 132.1 134.8, 216.98 38.89 M61.19 216.77 C109.52 160.05, 158.35 103.94, 216.2 38.35 M67.47 216.77 C115.11 158.21, 167.71 97.2, 216.63 45.21 M66.77 216.96 C102.08 174.52, 137.46 133.67, 215.1 44.3 M70.35 215.08 C103.39 179.45, 138.17 141.98, 216.94 49.42 M72.29 216.59 C103.33 179.45, 132.1 146.13, 215.3 50.78 M77.48 217.53 C112.79 176.25, 148.92 136.21, 214.87 56.96 M76.92 216.34 C126.01 159.84, 176.06 104.61, 216.09 56.89 M83.65 216.59 C109.9 184.76, 137.67 151.42, 216.82 64.24 M81.86 216.8 C115.56 177.43, 148.43 139.03, 215.35 63.31 M86.45 216.6 C117.96 179.57, 150.68 145.05, 215.64 67.24 M86.76 215.76 C133.59 164.04, 179.87 111.6, 216.32 67.66 M92.5 217.18 C130.08 175.3, 164.37 136.62, 217.67 75.31 M93.31 216.93 C121.12 183.96, 149.71 151.9, 216.67 74.37 M97.31 214.67 C122.26 188.24, 148.41 160.47, 217.8 78.71 M97.27 217.16 C133.41 175.31, 167.83 132.89, 216.35 79.87 M102.05 215.76 C128.77 182.73, 159.47 152.36, 217.64 85.73 M103.92 216.03 C140.06 172.81, 177.77 130.15, 216.44 86.54 M108.77 215.29 C145.82 169.8, 184.54 127.33, 214.48 93.3 M108.6 216.14 C152.4 169.17, 193.64 120.21, 215.53 93.61 M113.85 217.99 C138.74 189.67, 160.26 165.2, 215.6 100.97 M113.85 215.19 C144.51 180.53, 176.69 143.07, 215.68 99.56 M119.06 216.26 C139.68 192.15, 161.93 164.32, 216.54 104.97 M120.04 216.13 C141.97 189.71, 164.98 164.4, 216.3 104.47 M124.31 216.62 C147.59 192.15, 170.4 161.51, 217.92 112.68 M123.84 216.01 C151.85 183.74, 178.95 152.19, 216.63 110.91 M130.04 217.74 C153.81 189.32, 176.55 163.35, 216.49 116.35 M130.09 216.38 C146.84 196.06, 166.21 175.33, 216.35 118.08 M135.41 216.47 C160.47 188.02, 182.14 159.88, 213.93 123.66 M135.78 217.64 C155.48 194.76, 172.71 172.66, 216.06 124.66 M139.2 218.28 C157.86 195.92, 177.77 173.69, 215.14 127.67 M140.43 215.93 C161.4 191.88, 182.03 169.94, 215.2 129.17 M146.79 215.06 C162.71 194.09, 180.79 177.42, 214.55 136.84 M144.79 217.28 C160.2 199.12, 174.78 183.05, 215.91 136.41 M151.66 214.81 C171.28 196.29, 187.11 175.48, 216.92 141.52 M151.91 215.67 C176.44 188.45, 199.88 160.32, 215.56 142.26 M154.38 215.47 C172.69 198.01, 192.07 175.16, 216.36 147.74 M155.82 217.21 C174.84 196.04, 193.76 174.8, 215.32 147.85 M160.14 214.61 C179.82 197.41, 195.96 177.17, 217.2 155.66 M162.6 216.26 C174.04 201, 186.86 187.65, 214.67 154.44 M165.72 215.2 C184.79 196.83, 203.71 176.89, 216.23 161.56 M167.04 217.53 C178.06 204.41, 186.16 194.48, 215.28 159.73 M173.01 215.35 C189.21 198.76, 204.39 179.52, 216.99 167.92 M171.74 216.2 C188.55 197.71, 202.6 180.81, 214.93 166.35 M176 218.1 C188.62 206.57, 198.94 193.03, 214.63 173.83 M177.77 216.11 C190.55 201.92, 202.86 186.55, 215.97 172.6 M182.26 217.09 C193.97 201.5, 207.69 185.56, 214.91 176.8 M183.75 215.8 C191.36 207.78, 198.34 197.48, 215.95 178.7 M187.99 218.4 C199.34 205.7, 207.8 191.99, 215.03 183.22 M188.53 216.69 C197.17 205.82, 204.83 195.35, 216.1 185.58 M195.49 214.23 C197.72 209.17, 202.2 205.99, 217.9 190.4 M194.25 215.18 C202.02 207.92, 209.16 198.59, 215.2 191.28 M200.15 216.71 C206.55 209.28, 212.55 200.97, 214.47 196.53 M199.03 216.79 C205.41 210.03, 212.23 201.38, 215.53 197.34 M203.99 215.64 C207.37 213.36, 210.04 206.68, 216.48 203.13 M204.08 216.24 C207 212.46, 211.61 208.42, 215.41 201.74 M209.93 216.23 C210.58 213.66, 212.88 213.24, 215.79 209.03 M209.77 216.09 C211.32 214.48, 213.4 211.72, 215.64 208.76\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M-0.39 -0.88 C55.46 -0.97, 113.94 -0.3, 214.26 0.61 M-0.49 0.4 C84.22 -0.65, 169.11 -0.38, 213.87 0.66 M212.35 -0.69 C216.14 81.33, 216.66 160.36, 212.82 212.88 M213.44 -0.28 C214.34 52.63, 212.93 106.93, 213.51 214 M215.36 213.92 C153.36 215.01, 94.72 215.24, 0.66 215.17 M214.59 213.78 C136.22 216.39, 57.75 216.64, 0.1 213.77 M-1.71 215.7 C0.69 160.6, -0.19 109.87, -0.18 1.75 M0.58 213.93 C-0.62 147.47, -0.5 79.36, 0.52 0\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g></a>"
 `;
@@ -95,7 +97,7 @@ exports[`exportToSvg with elements that have a link 1`] = `
 exports[`exportToSvg with exportEmbedScene 1`] = `
 "
   <!-- svg-source:excalidraw -->
-  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SsW7CMFx1MDAxMN35iihdkUjSQChcdTAwMWItVVWpalx1MDAwN1x1MDAwNqRWXHUwMDFkTHxJrFx1MDAxONvEXHUwMDBlXHUwMDEwIf69tlx1MDAwM3GJXHUwMDE4O9aDpXt+7+58945cdTAwMDPP81UjwJ95Plx1MDAxY1JEXHSu0N5cdTAwMWZcdTAwMWF8XHUwMDA3lSSc6afIxpLXVWqZhVJiNlx1MDAxYVGuXHUwMDA1XHUwMDA1l6rlXHUwMDAzhVxyMCU140vHnne0t34h2Kh2q2r7Mc9KwnC0TTfJ22L+8mmllnTQnDiMu7gxhe+TLt5cdTAwMTOsXG6NhUHQYVx1MDAwNZC8UD1cdTAwMTCxnJo2XHUwMDFkXCJVxUt44pRXppG7wFx1MDAxZVd6jdIyr3jNsOOEY4TWmeNkhNKlamg7XHUwMDAwlFx1MDAxNnVcdTAwMDV+r8Lq0mJcdTAwMGbvdJLrXHUwMDAxO5UumVx1MDAxN1xmpLzScIFSoprer0x/4lx1MDAxNdvpfv/OwPA5XHUwMDAzqyl1hVx1MDAwMbDNXHUwMDEwh5Nx8lx1MDAxMEy7XHUwMDE3t9YwXG766DtndsVhOJ1cdTAwMDZBXHUwMDFjJZOOQeRCb1jZtFx1MDAxOaJcdTAwMTLc+ExcdTAwMTPPbvtXjdRcdTAwMDKjVuR+SFx0K/s8babyRu6LOTFBXHUwMDFizrBv8dPw31///vpTf1x1MDAwMaVESDj7S992XHUwMDA2Plx1MDAxMmKpdH5Nad3m71xi7Fx1MDAxZm/sM7PH6K07zT7BNHs8XHJOP7VXYMUifQ==<!-- payload-end -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SPW/CMFx1MDAxMN35XHUwMDE1UbpcIpGk4aNstFRcdTAwMTVS1Vx1MDAwZVxmSK06mPiSWHHsYDtAhPjvtVxyxCVi7oRcdTAwMDdLfvfu7vnuXHUwMDFkep7nq6ZcdTAwMDJ/6vmwT1x1MDAxMCVYoJ3fN/hcdTAwMTaEJJzpUGTfktdcIrHMXFypajpcdTAwMThQrlx1MDAxM3Iu1YlcdTAwMGZcdTAwMTRKYEpqxrd+e97B3jpCsMnarsTmc5ZcdTAwMTaE4WiTlOP3+ezty6Za0l5z4jBu341p/Dhu3zuCVa6xMFxiWixcdTAwMDeS5apcdTAwMDNcIpZRI9MhUlx0XsBcdTAwMGKnXFxcdTAwMTghXHUwMDBmgT2u9Vx1MDAxYSVFJnjNsOOEQ4TWqeOkhNKlauhpXHUwMDAwKMlrXHUwMDAxfqfD6lwisYO3eZLrXHUwMDAxuyzdMstcdTAwMTlIeZXDK5RcdTAwMTDVdH5l9FVcdTAwMGJsp/vjVFx0VMLCjJfVlP4tzPC58FVAXHUwMDAyYFs4XHUwMDBlR8PxUzBpI27bYVx1MDAxNHTRXHUwMDBmzuzmw3AyXHSCOFx1MDAxYY9aXHUwMDA2kXO9eGXLpohKcFM1XCJenSmuhNRcdTAwMTVGpyT3cUpY0eVpj1x1MDAxNTdqXzyLXHQqOcO+xY/9u+3utvtcdTAwMGbbXHUwMDAxpaSScLadvu1ofFRVS6Xra8rJhP6WwO75xppTe0y+Na1ZM1x1MDAxOLGHY+/4XHUwMDBiw1x1MDAwNmzTIn0=<!-- payload-end -->
   <defs>
     <style class=\\"style-fonts\\">
       @font-face {
@@ -107,6 +109,7 @@ exports[`exportToSvg with exportEmbedScene 1`] = `
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
   <g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 50 50)\\"><path d=\\"M0.32 50.63 C0.32 50.63, 0.32 50.63, 0.32 50.63 M0.32 50.63 C0.32 50.63, 0.32 50.63, 0.32 50.63 M1.31 55.08 C15.31 40.32, 29.59 22.37, 41.3 9.81 M2.95 54.67 C16.06 38.64, 28.38 26.08, 41.31 11.16 M5.17 55.28 C18.64 40.54, 34.59 23.3, 53.31 1.2 M6.19 55.83 C19.7 40.85, 33.94 25.36, 52.84 2.99 M8.12 57.33 C28.32 38.18, 46.32 16.69, 57.78 5.54 M9.05 59.26 C25.33 39.84, 41.83 20.42, 56.36 4.41 M12.23 63.33 C23.99 47.5, 34.76 34.04, 58.25 7.72 M12.1 62.42 C25.64 45.74, 39.58 29.47, 59.39 6.7 M14.29 65.31 C33.6 44.37, 51.89 21.73, 61.4 11.6 M14.95 64.35 C25.42 51.41, 36.81 39.88, 61.57 11.19 M17.44 69.69 C30.26 56.06, 39.46 44.26, 65.11 14.18 M17.51 68.63 C34.43 47.57, 51.04 27.25, 64.33 13.82 M21.98 70.02 C37.96 53.4, 51.32 32.51, 66.76 17.85 M20.5 70.41 C29.55 59.82, 39.04 48.82, 66.82 15.79 M21.73 71.26 C33.76 59.36, 45.61 49.75, 69.47 19.91 M23.35 73.09 C39.91 53.14, 58.94 32.17, 69.77 19.39 M26.91 74.54 C41.56 60.59, 55.7 44.03, 72.29 22.07 M26.74 75.44 C39.06 62.99, 49.89 47.62, 73.34 21.9 M27.68 77.61 C45.49 62.49, 58.86 43.36, 74.53 26.67 M29.77 78.46 C46.48 58.69, 65.8 38.46, 75.03 24.23 M29.82 83.37 C45.64 68.39, 59.09 52.88, 78 26.2 M31.24 82.29 C42.16 70.24, 50.48 58.61, 77.54 28.77 M33.5 84.64 C46.6 69.19, 61.43 52.15, 81.17 32.8 M34.1 85.27 C44.17 73.12, 52.8 63.6, 80.62 31.25 M37.69 88.37 C54.96 70.16, 71.4 49.55, 82.89 35.26 M37.41 86.61 C46.27 76.03, 56.22 65.63, 84.34 34.18 M38.98 88.4 C54.78 76.48, 66.88 59.43, 87.83 36.78 M40.83 89.54 C52.97 74.67, 64.21 61.17, 86.21 36.91 M43.18 94 C60.91 72.19, 77.04 51.45, 90.21 39.94 M43.86 92.11 C52.94 82.13, 62.98 68.89, 90.51 39.02 M44.93 94.32 C62.61 77.05, 76.42 59.94, 91.95 44.23 M45.02 96.15 C61.2 76.98, 78.3 58.77, 92.03 42.23 M50.55 99.15 C60.63 81.82, 75.04 67.37, 96.9 43.53 M48.39 98.32 C65.04 78.28, 81.92 59.44, 94.04 46.22 M50.38 99.19 C69.54 81.19, 85.85 58.94, 99.21 46.38 M51.53 100.79 C62.45 87.27, 73.41 74.93, 98.13 47.3\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M50.55 -1.01 C62.82 12.44, 78.03 26.68, 100.3 51.7 M50.44 0.46 C69.95 19.26, 89.63 39.73, 99.86 51.76 M98.12 50.21 C82.92 71.13, 65.15 88.19, 49.66 98.72 M99.37 50.68 C88.57 62.94, 74.79 76.37, 50.44 100 M52.55 99.9 C35.86 87.61, 23.16 74.12, 0.75 52.33 M51.67 99.75 C32.82 83.31, 13.73 65.72, 0.11 50.74 M-1.95 52.94 C13.84 37.62, 25.27 26.82, 50.8 2 M0.66 50.92 C16.45 35.71, 32.61 18.7, 51.59 0.01\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g><g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 50 50)\\"><path d=\\"M16.06 13.96 C16.06 13.96, 16.06 13.96, 16.06 13.96 M16.06 13.96 C16.06 13.96, 16.06 13.96, 16.06 13.96 M5.51 34 C13.17 23.26, 20.2 13.31, 28.19 8.96 M5.48 33.35 C12.13 25.41, 19.79 15.96, 26.45 7.6 M5.56 37.62 C16.59 25.63, 28.15 12.22, 38.46 2.39 M5.11 40.5 C16.67 26.96, 28.16 13.15, 36.64 1.59 M4.66 45.59 C13.25 35.02, 21.41 28.15, 39.56 4.69 M4.57 46.97 C11.96 37.32, 20.9 26.56, 40.44 3.42 M5.51 50.51 C13.89 43.35, 21.63 34.54, 46.26 4.75 M4.27 51.77 C16.66 37.46, 28.38 22.96, 44.97 4.33 M0.17 60.65 C18.76 40.92, 37.97 17.6, 49.71 5.16 M0.46 61.18 C19.32 40.86, 37.47 20.77, 50.84 4.21 M2.75 65.39 C21.01 45.29, 37.92 25.46, 57.52 4.43 M3.54 66.52 C18.04 48.78, 32.49 30.26, 55.79 4.21 M4.72 71.04 C27.28 44.43, 49.83 20.12, 62.05 5.19 M4.98 68.42 C25.81 45.48, 47.44 20.41, 60.72 5.33 M5.52 72.07 C22.65 55.25, 37.54 35.66, 64.61 5.49 M7.57 72.36 C23.86 52.77, 40.82 32.55, 67.4 4.05 M9.59 78.6 C21.66 63, 36.06 48.95, 71.76 7.03 M10.08 76.55 C27.55 55.62, 45.62 35.85, 70.49 7 M12.56 81.85 C25.42 62.46, 40.04 46.55, 72.17 9.63 M11.06 79.79 C28.06 60.16, 44.33 40.26, 73.94 7.75 M13.55 82.49 C28.83 65.98, 48.28 43.76, 76.92 11.53 M14.8 84.16 C33.23 60.15, 53.34 38.08, 77.01 9.5 M18.1 87.31 C40.08 56.47, 62.85 30.47, 80.4 12.36 M15.8 86.08 C37.59 61.7, 60.84 34.46, 80.7 12.46 M19 88.26 C40.74 67.47, 58.92 43.28, 83.23 13.91 M19.34 89.69 C44.04 60.94, 70.07 31.37, 84.33 14.92 M24.66 90.68 C46.24 63.97, 68.7 37.2, 88.49 16.36 M23.39 91.54 C41.48 71.33, 57.27 52.46, 87.46 15.92 M26.62 93.33 C42.62 75.25, 55.76 56.91, 91.37 20.55 M25.78 92.9 C44.69 72.7, 64.26 51.51, 91.05 19.89 M29.13 94.58 C54.77 68.16, 76.36 39.34, 89.98 24.69 M29.39 94.36 C49.44 73.98, 66.44 53.75, 91.98 23.72 M33.42 96.74 C47.73 82.49, 62.82 64.22, 92.32 25.67 M34.06 96.57 C55.92 72.5, 76.96 48.57, 93.62 28.4 M36.63 98.74 C60.32 74.26, 79.82 54.48, 97.25 30.51 M37.14 99.24 C54.89 79.32, 74.61 58.8, 96.4 30.94 M40.66 99.17 C55.88 83.45, 65.33 69.82, 99.98 34.12 M41.95 98.58 C59.45 80.37, 76.18 63.41, 98.97 34.44 M49.2 99.75 C62.61 81.39, 76.76 66.6, 99.71 40.34 M48.46 99.18 C68.17 76.49, 88.85 52.13, 101.44 39.52 M53.89 98.89 C65.67 88.12, 73.58 74.8, 99.93 45.65 M53.06 97.85 C64.12 87.68, 74.24 77.45, 101.28 44.38 M58.61 99.36 C71.02 84.02, 84.02 72.64, 100.47 49.9 M58.48 99.78 C74.3 82.44, 89.18 65.6, 101.07 49.98 M64.37 99.36 C78.85 81.75, 90.01 65.78, 99.33 56.12 M62.3 99.9 C77.88 84.17, 91.11 66.99, 99.88 56.12 M72.13 92.65 C79.7 86.54, 88.47 76.42, 98.79 63.47 M73.38 93.43 C80.92 86.16, 85.53 79.8, 99.02 64.85\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M38.1 1.46 C45.72 -1.06, 55.49 -0.08, 63.58 2.19 C71.68 4.46, 80.88 9.29, 86.67 15.09 C92.46 20.89, 96.33 29.02, 98.32 36.99 C100.32 44.97, 101 54.87, 98.62 62.96 C96.24 71.05, 90.17 79.66, 84.03 85.55 C77.89 91.43, 69.57 96.06, 61.79 98.28 C54 100.51, 45.12 100.97, 37.32 98.91 C29.52 96.84, 21.11 92.03, 14.99 85.89 C8.88 79.75, 2.75 70.16, 0.63 62.05 C-1.48 53.94, -0.22 45.19, 2.3 37.23 C4.82 29.28, 9.28 20.51, 15.77 14.3 C22.25 8.1, 36.21 2.25, 41.23 0.02 C46.25 -2.21, 45.49 0.09, 45.88 0.91 M40.94 1.53 C48.29 -0.28, 59.04 0.38, 66.96 3.27 C74.89 6.16, 83.12 12.22, 88.48 18.88 C93.85 25.53, 97.82 35.15, 99.18 43.21 C100.54 51.28, 99.41 59.58, 96.65 67.29 C93.89 74.99, 88.87 84.03, 82.63 89.47 C76.39 94.91, 67.44 98.55, 59.2 99.93 C50.97 101.3, 41.25 100.52, 33.2 97.7 C25.15 94.87, 16.16 89.68, 10.9 82.99 C5.64 76.3, 2.84 65.86, 1.64 57.57 C0.45 49.28, 0.99 40.72, 3.74 33.24 C6.5 25.76, 11.77 18.2, 18.18 12.7 C24.59 7.2, 38.36 1.99, 42.22 0.24 C46.09 -1.5, 41.49 1.56, 41.37 2.2\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g>"
 `;
diff --git a/src/types.ts b/src/types.ts
index 8354ced9..fd00578b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,6 +15,7 @@ import {
   ExcalidrawImageElement,
   Theme,
   StrokeRoundness,
+  ExcalidrawFrameElement,
 } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -85,7 +86,7 @@ export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 
 export type LastActiveTool =
   | {
-      type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+      type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
       customType: null;
     }
   | {
@@ -113,6 +114,10 @@ export type AppState = {
   isBindingEnabled: boolean;
   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
   suggestedBindings: SuggestedBinding[];
+  frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
+  shouldRenderFrames: boolean;
+  editingFrame: string | null;
+  elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
   // element being edited, but not necessarily added to elements array yet
   // (e.g. text element when typing into the input)
   editingElement: NonDeletedExcalidrawElement | null;
@@ -126,7 +131,7 @@ export type AppState = {
     locked: boolean;
   } & (
     | {
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
         customType: null;
       }
     | {
@@ -178,6 +183,7 @@ export type AppState = {
   lastPointerDownWith: PointerType;
   selectedElementIds: { [id: string]: boolean };
   previousSelectedElementIds: { [id: string]: boolean };
+  selectedElementsAreBeingDragged: boolean;
   shouldCacheIgnoreZoom: boolean;
   toast: { message: string; closable?: boolean; duration?: number } | null;
   zenModeEnabled: boolean;
@@ -532,6 +538,12 @@ export type ExcalidrawImperativeAPI = {
   setCursor: InstanceType<typeof App>["setCursor"];
   resetCursor: InstanceType<typeof App>["resetCursor"];
   toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+  /**
+   * Disables rendering of frames (including element clipping), but currently
+   * the frames are still interactive in edit mode. As such, this API should be
+   * used in conjunction with view mode (props.viewModeEnabled).
+   */
+  toggleFrameRendering: InstanceType<typeof App>["toggleFrameRendering"];
 };
 
 export type Device = Readonly<{
@@ -541,3 +553,22 @@ export type Device = Readonly<{
   canDeviceFitSidebar: boolean;
   isLandscape: boolean;
 }>;
+
+type FrameNameBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  angle: number;
+};
+
+export type FrameNameBoundsCache = {
+  get: (frameElement: ExcalidrawFrameElement) => FrameNameBounds | null;
+  _cache: Map<
+    string,
+    FrameNameBounds & {
+      zoom: AppState["zoom"]["value"];
+      versionNonce: ExcalidrawFrameElement["versionNonce"];
+    }
+  >;
+};
diff --git a/src/utils.ts b/src/utils.ts
index c1be211b..40bff959 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -10,7 +10,11 @@ import {
   THEME,
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
+import {
+  FontFamilyValues,
+  FontString,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
 import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { SHAPES } from "./shapes";
@@ -299,7 +303,7 @@ export const distance = (x: number, y: number) => Math.abs(x - y);
 export const updateActiveTool = (
   appState: Pick<AppState, "activeTool">,
   data: (
-    | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
+    | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" }
     | { type: "custom"; customType: string }
   ) & { lastActiveToolBeforeEraser?: LastActiveTool },
 ): AppState["activeTool"] => {
@@ -824,3 +828,16 @@ export const composeEventHandlers = <E>(
     }
   };
 };
+
+export const isOnlyExportingSingleFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+) => {
+  const frames = elements.filter((element) => element.type === "frame");
+
+  return (
+    frames.length === 1 &&
+    elements.every(
+      (element) => element.type === "frame" || element.frameId === frames[0].id,
+    )
+  );
+};
diff --git a/src/zindex.ts b/src/zindex.ts
index 4b96c8eb..7ccb38e5 100644
--- a/src/zindex.ts
+++ b/src/zindex.ts
@@ -1,36 +1,52 @@
 import { bumpVersion } from "./element/mutateElement";
+import { isFrameElement } from "./element/typeChecks";
 import { ExcalidrawElement } from "./element/types";
+import { groupByFrames } from "./frame";
 import { getElementsInGroup } from "./groups";
 import { getSelectedElements } from "./scene";
 import Scene from "./scene/Scene";
 import { AppState } from "./types";
 import { arrayToMap, findIndex, findLastIndex } from "./utils";
 
+// elements that do not belong to a frame are considered a root element
+const isRootElement = (element: ExcalidrawElement) => {
+  return !element.frameId;
+};
+
 /**
  * Returns indices of elements to move based on selected elements.
  * Includes contiguous deleted elements that are between two selected elements,
  *  e.g.: [0 (selected), 1 (deleted), 2 (deleted), 3 (selected)]
+ *
+ * Specified elements (elementsToBeMoved) take precedence over
+ * appState.selectedElementsIds
  */
 const getIndicesToMove = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
   let selectedIndices: number[] = [];
   let deletedIndices: number[] = [];
   let includeDeletedIndex = null;
   let index = -1;
   const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, true),
+    elementsToBeMoved
+      ? elementsToBeMoved
+      : getSelectedElements(elements, appState, {
+          includeBoundTextElement: true,
+        }),
   );
   while (++index < elements.length) {
-    if (selectedElementIds.get(elements[index].id)) {
+    const element = elements[index];
+    if (selectedElementIds.get(element.id)) {
       if (deletedIndices.length) {
         selectedIndices = selectedIndices.concat(deletedIndices);
         deletedIndices = [];
       }
       selectedIndices.push(index);
       includeDeletedIndex = index + 1;
-    } else if (elements[index].isDeleted && includeDeletedIndex === index) {
+    } else if (element.isDeleted && includeDeletedIndex === index) {
       includeDeletedIndex = index + 1;
       deletedIndices.push(index);
     } else {
@@ -168,8 +184,8 @@ const getTargetIndex = (
   return candidateIndex;
 };
 
-const getTargetElementsMap = (
-  elements: readonly ExcalidrawElement[],
+const getTargetElementsMap = <T extends ExcalidrawElement>(
+  elements: readonly T[],
   indices: number[],
 ) => {
   return indices.reduce((acc, index) => {
@@ -179,12 +195,13 @@ const getTargetElementsMap = (
   }, {} as Record<string, ExcalidrawElement>);
 };
 
-const shiftElements = (
-  appState: AppState,
+const _shiftElements = (
   elements: readonly ExcalidrawElement[],
+  appState: AppState,
   direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  const indicesToMove = getIndicesToMove(elements, appState);
+  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
 
@@ -246,7 +263,22 @@ const shiftElements = (
   });
 };
 
-const shiftElementsToEnd = (
+const shiftElements = (
+  appState: AppState,
+  elements: readonly ExcalidrawElement[],
+  direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) => {
+  return shift(
+    elements,
+    appState,
+    direction,
+    _shiftElements,
+    elementsToBeMoved,
+  );
+};
+
+const _shiftElementsToEnd = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
@@ -317,33 +349,108 @@ const shiftElementsToEnd = (
       ];
 };
 
+const shiftElementsToEnd = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) => {
+  return shift(
+    elements,
+    appState,
+    direction,
+    _shiftElementsToEnd,
+    elementsToBeMoved,
+  );
+};
+
+function shift(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  direction: "left" | "right",
+  shiftFunction: (
+    elements: ExcalidrawElement[],
+    appState: AppState,
+    direction: "left" | "right",
+    elementsToBeMoved?: readonly ExcalidrawElement[],
+  ) => ExcalidrawElement[] | readonly ExcalidrawElement[],
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) {
+  let rootElements = elements.filter((element) => isRootElement(element));
+  const frameElementsMap = groupByFrames(elements);
+
+  // shift the root elements first
+  rootElements = shiftFunction(
+    rootElements,
+    appState,
+    direction,
+    elementsToBeMoved,
+  ) as ExcalidrawElement[];
+
+  // shift the elements in frames if needed
+  frameElementsMap.forEach((frameElements, frameId) => {
+    if (!appState.selectedElementIds[frameId]) {
+      frameElementsMap.set(
+        frameId,
+        shiftFunction(
+          frameElements,
+          appState,
+          direction,
+          elementsToBeMoved,
+        ) as ExcalidrawElement[],
+      );
+    }
+  });
+
+  // return the final elements
+  let finalElements: ExcalidrawElement[] = [];
+
+  rootElements.forEach((element) => {
+    if (isFrameElement(element)) {
+      finalElements = [
+        ...finalElements,
+        ...(frameElementsMap.get(element.id) ?? []),
+        element,
+      ];
+    } else {
+      finalElements = [...finalElements, element];
+    }
+  });
+
+  return finalElements;
+}
+
 // public API
 // -----------------------------------------------------------------------------
 
 export const moveOneLeft = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "left");
+  return shiftElements(appState, elements, "left", elementsToBeMoved);
 };
 
 export const moveOneRight = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "right");
+  return shiftElements(appState, elements, "right", elementsToBeMoved);
 };
 
 export const moveAllLeft = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "left");
+  return shiftElementsToEnd(elements, appState, "left", elementsToBeMoved);
 };
 
 export const moveAllRight = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "right");
+  return shiftElementsToEnd(elements, appState, "right", elementsToBeMoved);
 };