diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index bb1cbc2f7..cc9776850 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -19,7 +19,6 @@
   "home_page",
   "developer_options_section",
   "execute_block_scripts_in_editor",
-  "restrict_click_handlers",
   "ai_section",
   "ai_api_key",
   "persona_survey_done"
@@ -106,17 +105,11 @@
    "label": "Developer Options"
   },
   {
-   "default": "Restricted",
+   "default": "Enable",
    "fieldname": "execute_block_scripts_in_editor",
    "fieldtype": "Select",
-   "label": "Execute Block Scripts in Editor",
-   "options": "Don't Execute\nRestricted\nUnrestricted"
-  },
-  {
-   "default": "1",
-   "fieldname": "restrict_click_handlers",
-   "fieldtype": "Check",
-   "label": "Restrict Click Handlers"
+   "label": "Client Script Emulation",
+   "options": "Enable\nDisable"
   },
   {
    "fieldname": "ai_section",
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index c28489429..a57074f5c 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -23,11 +23,10 @@ class BuilderSettings(Document):
 		body_html: DF.Code | None
 		default_language: DF.Data | None
 		disable_auto_dark_mode: DF.Check
-		execute_block_scripts_in_editor: DF.Literal["Don't Execute", "Restricted", "Unrestricted"]
+		execute_block_scripts_in_editor: DF.Literal["Disable", "Enable"]
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		home_page: DF.Data | None
-		restrict_click_handlers: DF.Check
 		script: DF.Code | None
 		script_public_url: DF.ReadOnly | None
 		style: DF.Code | None
diff --git a/builder/builder/patches/migrate_client_script_emulation_setting.py b/builder/builder/patches/migrate_client_script_emulation_setting.py
new file mode 100644
index 000000000..557a6b82d
--- /dev/null
+++ b/builder/builder/patches/migrate_client_script_emulation_setting.py
@@ -0,0 +1,16 @@
+import frappe
+
+
+def execute():
+	current_value = frappe.db.get_single_value(
+		"Builder Settings",
+		"execute_block_scripts_in_editor",
+	)
+	value = "Disable" if current_value in {"Don't Execute", "Disable"} else "Enable"
+	frappe.db.set_value(
+		"Builder Settings",
+		None,
+		"execute_block_scripts_in_editor",
+		value,
+		update_modified=False,
+	)
diff --git a/builder/patches.txt b/builder/patches.txt
index 392fc318d..7c3fc0321 100644
--- a/builder/patches.txt
+++ b/builder/patches.txt
@@ -13,5 +13,6 @@ builder.builder.doctype.builder_client_script.patches.trigger_asset_compression
 builder.builder.patches.add_composite_index_to_web_page_view
 builder.builder.patches.refactor_builder_variables
 builder.builder.patches.reset_builder_page_clicks
+builder.builder.patches.migrate_client_script_emulation_setting
 execute:frappe.call("builder.builder_analytics.enqueue_web_page_view_ingesion")
-execute:frappe.call("builder.builder_analytics.setup_duckdb_table")
\ No newline at end of file
+execute:frappe.call("builder.builder_analytics.setup_duckdb_table")
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 197005627..c2bea1fa2 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -39,6 +39,7 @@ declare module 'vue' {
     BuilderBlock: typeof import('./src/components/BuilderBlock.vue')['default']
     BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
     BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
+    BuilderCanvasFrame: typeof import('./src/components/BuilderCanvasFrame.vue')['default']
     BuilderCommandPalette: typeof import('./src/components/BuilderCommandPalette.vue')['default']
     BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
     BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index a8023140e..1141ae5df 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -130,7 +130,7 @@ declare interface CanvasProps {
 	panning: boolean;
 	background: string;
 	settingCanvas: boolean;
-	overlayElement: HTMLElement | null;
+	frameRoots?: Map<string, HTMLElement>;
 	breakpoints: Breakpoint[];
 }
 
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index af93e4483..e31570a26 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="editor pointer-events-none fixed box-content select-none ring-2 ring-inset"
+		class="editor pointer-events-none fixed box-content select-none ring-4 ring-inset"
 		ref="editor"
 		:selected="isBlockSelected"
 		@click.stop="handleClick"
@@ -37,6 +37,12 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
+import {
+	elementFromEditorPoint,
+	getEventPointInDocument,
+	getEventPointInEditor,
+	startCanvasDrag,
+} from "@/utils/canvasFrameDom";
 import { addPxToNumber } from "@/utils/helpers";
 import { Ref, computed, inject, nextTick, onMounted, ref, watch, watchEffect } from "vue";
 import setGuides from "../utils/guidesTracker";
@@ -83,7 +89,7 @@ const props = withDefaults(
 const editor = ref(null) as unknown as Ref<HTMLElement>;
 const updateTracker = ref(() => {});
 const resizing = ref(false);
-const guides = setGuides(props.target, canvasProps);
+let guides: ReturnType<typeof setGuides>;
 const moving = ref(false);
 const preventCLick = ref(false);
 
@@ -201,6 +207,7 @@ const movable = computed(() => {
 });
 
 onMounted(() => {
+	guides = setGuides(props.target, canvasProps);
 	updateTracker.value = trackTarget(props.target, editor.value, canvasProps);
 });
 
@@ -217,14 +224,29 @@ const handleClick = (ev: MouseEvent) => {
 
 	const editorWrapper = editor.value;
 	editorWrapper.classList.add("pointer-events-none");
-	let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+	const editorPoint = getEventPointInEditor(ev);
+	let element = elementFromEditorPoint(editorPoint.x, editorPoint.y) as HTMLElement;
+	if (!element) return;
 	if (element.classList.contains("editor")) {
 		element.classList.remove("pointer-events-auto");
 		element.classList.add("pointer-events-none");
-		element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		element = elementFromEditorPoint(editorPoint.x, editorPoint.y) as HTMLElement;
 	}
 	if (element.classList.contains("__builder_component__")) {
-		element.dispatchEvent(new MouseEvent("click", ev));
+		const EventConstructor = element.ownerDocument.defaultView?.MouseEvent || MouseEvent;
+		const point = getEventPointInDocument(ev, element.ownerDocument);
+		element.dispatchEvent(
+			new EventConstructor("click", {
+				bubbles: true,
+				cancelable: true,
+				clientX: point.x,
+				clientY: point.y,
+				ctrlKey: ev.ctrlKey,
+				metaKey: ev.metaKey,
+				shiftKey: ev.shiftKey,
+				altKey: ev.altKey,
+			}),
+		);
 	}
 };
 
@@ -256,54 +278,41 @@ const handleMove = (ev: MouseEvent) => {
 	ev.stopPropagation();
 	const pauseId = canvasStore.activeCanvas?.history?.pause();
 	const target = ev.target as HTMLElement;
-	const startX = ev.clientX;
-	const startY = ev.clientY;
 	const startLeft = (props.target as HTMLElement).offsetLeft || 0;
 	const startTop = (props.target as HTMLElement).offsetTop || 0;
 
 	moving.value = true;
 	guides.showX();
-
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = "grabbing";
 	target.style.cursor = "grabbing";
 
-	const mousemove = async (mouseMoveEvent: MouseEvent) => {
-		if (canvasStore.isMarqueeActive) return;
-		const scale = canvasProps.scale;
-		const movementX = (mouseMoveEvent.clientX - startX) / scale;
-		const movementY = (mouseMoveEvent.clientY - startY) / scale;
-		let finalLeft = startLeft + movementX;
-		let finalTop = startTop + movementY;
-		props.block.setStyle("left", addPxToNumber(finalLeft));
-		props.block.setStyle("top", addPxToNumber(finalTop));
-		await nextTick();
-		const { leftOffset, rightOffset } = guides.getPositionOffset();
-		if (leftOffset !== 0) {
-			props.block.setStyle("left", addPxToNumber(finalLeft + leftOffset));
-		}
-		if (rightOffset !== 0) {
-			props.block.setStyle("left", addPxToNumber(finalLeft + rightOffset));
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: "grabbing",
+		onMove: async ({ event, movementX, movementY }) => {
+			if (canvasStore.isMarqueeActive) return;
+			const finalLeft = startLeft + movementX;
+			const finalTop = startTop + movementY;
+			props.block.setStyle("left", addPxToNumber(finalLeft));
+			props.block.setStyle("top", addPxToNumber(finalTop));
+			await nextTick();
+			const { leftOffset, rightOffset } = guides.getPositionOffset();
+			if (leftOffset !== 0) {
+				props.block.setStyle("left", addPxToNumber(finalLeft + leftOffset));
+			}
+			if (rightOffset !== 0) {
+				props.block.setStyle("left", addPxToNumber(finalLeft + rightOffset));
+			}
 
-		mouseMoveEvent.preventDefault();
-		preventCLick.value = true;
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
+			event.preventDefault();
+			preventCLick.value = true;
+		},
+		onEnd: (event) => {
 			moving.value = false;
-			document.body.style.cursor = docCursor;
 			target.style.cursor = "grab";
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 			guides.hideX();
 			canvasStore.activeCanvas?.history?.resume(pauseId, true);
 		},
-		{ once: true },
-	);
+	});
 };
 
 defineExpose({
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index adab3b15c..2d93ff50a 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		ref="handler"
-		class="border-radius-resize pointer-events-auto absolute h-[10px] w-[10px] cursor-pointer rounded-full border-2 border-blue-400 bg-white"
+		class="border-radius-resize pointer-events-auto absolute h-[12px] w-[12px] cursor-pointer rounded-full border-2 border-blue-400 bg-white"
 		:class="{
 			hidden: !isHandlerVisible,
 			'border-purple-400': targetBlock.isExtendedFromComponent(),
@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import type Block from "@/block";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
-import { useElementBounding } from "@vueuse/core";
 import type { Ref } from "vue";
 import { computed, inject, onMounted, reactive, ref, watchEffect } from "vue";
 
@@ -38,13 +38,21 @@ const handlerLeft = ref(10);
 const MIN_POSITION = { top: 10, left: 10 };
 const MIN_TARGET_SIZE = 25;
 
-const targetBounds = reactive(useElementBounding(props.target));
+const targetBounds = reactive({
+	width: 0,
+	height: 0,
+	update() {
+		const rect = props.target.getBoundingClientRect();
+		targetBounds.width = rect.width;
+		targetBounds.height = rect.height;
+	},
+});
 const maxDistance = computed(() => Math.min(targetBounds.width, targetBounds.height) / 2);
 
 const maxRadius = computed(() => {
 	props.targetBlock.getStyle("width");
 	props.targetBlock.getStyle("height");
-	const targetStyle = window.getComputedStyle(props.target);
+	const targetStyle = getComputedStyleFor(props.target);
 	return Math.min(parseInt(targetStyle.height, 10), parseInt(targetStyle.width, 10)) / 2;
 });
 
@@ -69,49 +77,43 @@ const setHandlerPosition = (radius: number) => {
 };
 
 const handleRounded = (ev: MouseEvent) => {
-	const startX = ev.clientX;
-	const startY = ev.clientY;
-	let lastX = startX;
-	let lastY = startY;
+	let lastPoint: { x: number; y: number } | null = null;
 	updating.value = true;
 
 	const handleDimensions = handler.value.getBoundingClientRect();
 
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		mouseMoveEvent.preventDefault();
-		const movementX = mouseMoveEvent.clientX - lastX;
-		const movementY = mouseMoveEvent.clientY - lastY;
-		const movement = ((movementX + movementY) / 2) * 2;
-
-		if (movement < 0) {
-			MIN_POSITION.top = -(handleDimensions.height / 2);
-			MIN_POSITION.left = -(handleDimensions.width / 2);
-		}
-
-		const radius = Math.round(
-			Math.max(0, Math.min(getNumberFromPx(props.target.style.borderRadius) + movement, maxRadius.value)),
-		);
-
-		borderRadius.value = radius;
-		setHandlerPosition(radius);
-		props.targetBlock.setStyle("borderRadius", `${radius}px`);
-
-		lastX = mouseMoveEvent.clientX;
-		lastY = mouseMoveEvent.clientY;
-	};
-
-	const mouseup = (mouseUpEvent: MouseEvent) => {
-		mouseUpEvent.preventDefault();
-		if (getNumberFromPx(props.targetBlock.getStyle("borderRadius")) < 10) {
-			handlerTop.value = MIN_POSITION.top;
-			handlerLeft.value = MIN_POSITION.left;
-		}
-		updating.value = false;
-		document.removeEventListener("mousemove", mousemove);
-	};
-
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener("mouseup", mouseup, { once: true });
+	startCanvasDrag(ev, props.target, {
+		onMove: ({ event, point, startPoint }) => {
+			const previousPoint = lastPoint || startPoint;
+			event.preventDefault();
+			const movementX = point.x - previousPoint.x;
+			const movementY = point.y - previousPoint.y;
+			const movement = ((movementX + movementY) / 2) * 2;
+
+			if (movement < 0) {
+				MIN_POSITION.top = -(handleDimensions.height / 2);
+				MIN_POSITION.left = -(handleDimensions.width / 2);
+			}
+
+			const radius = Math.round(
+				Math.max(0, Math.min(getNumberFromPx(props.target.style.borderRadius) + movement, maxRadius.value)),
+			);
+
+			borderRadius.value = radius;
+			setHandlerPosition(radius);
+			props.targetBlock.setStyle("borderRadius", `${radius}px`);
+
+			lastPoint = point;
+		},
+		onEnd: (event) => {
+			event.preventDefault();
+			if (getNumberFromPx(String(props.targetBlock.getStyle("borderRadius") || "")) < 10) {
+				handlerTop.value = MIN_POSITION.top;
+				handlerLeft.value = MIN_POSITION.left;
+			}
+			updating.value = false;
+		},
+	});
 };
 
 onMounted(() => {
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
index 95a179c66..3b9f25232 100644
--- a/frontend/src/components/BoxResizer.vue
+++ b/frontend/src/components/BoxResizer.vue
@@ -24,7 +24,7 @@
 		:class="{ 'cursor-ns-resize': true }"
 		@mousedown.stop="handleBottomResize" />
 	<div
-		class="pointer-events-auto absolute bottom-[-5px] right-[-5px] h-[12px] w-[12px] cursor-nwse-resize rounded-full border-[2.5px] border-blue-400 bg-white"
+		class="pointer-events-auto absolute bottom-[-5px] right-[-5px] h-[14px] w-[14px] cursor-nwse-resize rounded-full border-[2.5px] border-blue-400 bg-white"
 		:class="{
 			'border-purple-400': targetBlock.isExtendedFromComponent(),
 		}"
@@ -34,6 +34,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import { clamp } from "@vueuse/core";
 import { computed, inject, onMounted, ref, watch } from "vue";
@@ -73,137 +74,73 @@ watch(resizing, () => {
 
 const targetWidth = computed(() => {
 	props.targetBlock.getStyle("width"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("width")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("width")));
 });
 
 const targetHeight = computed(() => {
 	props.targetBlock.getStyle("height"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("height")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("height")));
 });
 
 const fontSize = computed(() => {
 	props.targetBlock.getStyle("fontSize"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("font-size")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("font-size")));
 });
 
-const handleRightResize = (ev: MouseEvent) => {
-	const startX = ev.clientX;
-	const startHeight = (props.target as HTMLElement).offsetHeight;
-	const startWidth = (props.target as HTMLElement).offsetWidth;
-	const blockStartWidth = props.targetBlock.getStyle("width") as string;
-	const blockStartHeight = props.targetBlock.getStyle("height") as string;
-	const startFontSize = fontSize.value || 0;
+type ResizeDirection = "right" | "bottom" | "corner";
 
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
-	resizing.value = true;
-	guides.showX();
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movement = (mouseMoveEvent.clientX - startX) / canvasProps.scale;
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movement, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setWidth(movement, startWidth, blockStartWidth);
-		if (mouseMoveEvent.shiftKey) {
-			setHeight(movement, startHeight, blockStartHeight);
-		}
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
-			resizing.value = false;
-			guides.hideX();
-		},
-		{ once: true },
-	);
-};
-
-const handleBottomResize = (ev: MouseEvent) => {
-	const startY = ev.clientY;
+const startResize = (ev: MouseEvent, direction: ResizeDirection) => {
 	const startHeight = (props.target as HTMLElement).offsetHeight;
 	const startWidth = (props.target as HTMLElement).offsetWidth;
 	const blockStartWidth = props.targetBlock.getStyle("width") as string;
 	const blockStartHeight = props.targetBlock.getStyle("height") as string;
 	const startFontSize = fontSize.value || 0;
 
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
 	resizing.value = true;
-	guides.showY();
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movement = (mouseMoveEvent.clientY - startY) / canvasProps.scale;
-
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movement, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setHeight(movement, startHeight, blockStartHeight);
-		if (mouseMoveEvent.shiftKey) {
-			setWidth(movement, startWidth, blockStartWidth);
-		}
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
-			resizing.value = false;
-			guides.hideY();
+	if (direction === "right") guides.showX();
+	if (direction === "bottom") guides.showY();
+
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(ev.target as Element).cursor,
+		onMove: ({ event, movementX, movementY }) => {
+			const primaryMovement = direction === "right" ? movementX : movementY;
+			if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
+				setFontSize(primaryMovement, startFontSize);
+				event.preventDefault();
+				return;
+			}
+
+			if (direction !== "bottom") {
+				setWidth(movementX, startWidth, blockStartWidth);
+			}
+			if (direction !== "right") {
+				setHeight(
+					direction === "corner" && event.shiftKey ? movementX : movementY,
+					startHeight,
+					blockStartHeight,
+				);
+			}
+			if (direction === "right" && event.shiftKey) {
+				setHeight(movementX, startHeight, blockStartHeight);
+			}
+			if (direction === "bottom" && event.shiftKey) {
+				setWidth(movementY, startWidth, blockStartWidth);
+			}
+			event.preventDefault();
 		},
-		{ once: true },
-	);
-};
-
-const handleBottomCornerResize = (ev: MouseEvent) => {
-	const startX = ev.clientX;
-	const startY = ev.clientY;
-	const startHeight = (props.target as HTMLElement).offsetHeight;
-	const startWidth = (props.target as HTMLElement).offsetWidth;
-	const blockStartWidth = props.targetBlock.getStyle("width") as string;
-	const blockStartHeight = props.targetBlock.getStyle("height") as string;
-	const startFontSize = fontSize.value || 0;
-
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
-	resizing.value = true;
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movementX = (mouseMoveEvent.clientX - startX) / canvasProps.scale;
-		const movementY = (mouseMoveEvent.clientY - startY) / canvasProps.scale;
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movementY, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setWidth(movementX, startWidth, blockStartWidth);
-		setHeight(mouseMoveEvent.shiftKey ? movementX : movementY, startHeight, blockStartHeight);
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
+		onEnd: (event) => {
+			event.preventDefault();
 			resizing.value = false;
+			if (direction === "right") guides.hideX();
+			if (direction === "bottom") guides.hideY();
 		},
-		{ once: true },
-	);
+	});
 };
 
+const handleRightResize = (ev: MouseEvent) => startResize(ev, "right");
+const handleBottomResize = (ev: MouseEvent) => startResize(ev, "bottom");
+const handleBottomCornerResize = (ev: MouseEvent) => startResize(ev, "corner");
+
 const setWidth = (movementX: number, startWidth: number, blockStartWidth: string) => {
 	const finalWidth = Math.round(startWidth + movementX);
 	if (blockStartWidth?.includes("%")) {
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index f1df8ff27..513e5d68a 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -25,8 +25,8 @@
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
 	</component>
 	<teleport
-		:to="canvasProps?.overlayElement"
-		v-if="canvasProps?.overlayElement && !preview && Boolean(canvasProps)">
+		:to="canvasRoot"
+		v-if="canvasRoot && !preview && Boolean(canvasProps)">
 		<!-- prettier-ignore -->
 		<BlockEditor
 			ref="editor"
@@ -49,7 +49,8 @@ import useComponentStore from "@/stores/componentStore";
 import usePageStore from "@/stores/pageStore";
 import { setFont } from "@/utils/fontManager";
 import { extractComponentId, getDataForKey, getParentProps, getPropValue } from "@/utils/helpers";
-import type { BlockClientScriptEmulator } from "@/utils/scriptSandbox";
+import { isElementLike } from "@/utils/canvasFrameDom";
+import type { BlockClientScriptEmulator } from "@/utils/scriptEmulation";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import {
 	computed,
@@ -179,16 +180,16 @@ const getComponentDataValue = (path: string): any => {
 };
 
 const attributes = computed(() => {
-	const RESTRICTED_ATTRIBS = ["data-block-id", "data-block-uid", "data-breakpoint"];
+	const RESERVED_ATTRIBUTES = ["data-block-id", "data-block-uid", "data-breakpoint"];
 	let additionalAttributes: Record<string, any> = {};
 
-	if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
+	if (builderSettings.doc?.execute_block_scripts_in_editor !== "Disable") {
 		additionalAttributes = props.block.getCustomAttributes();
 	}
 
 	Object.keys(additionalAttributes).forEach((key) => {
 		const trimmedKey = key.trim();
-		if (RESTRICTED_ATTRIBS.includes(trimmedKey) || trimmedKey === "") {
+		if (RESERVED_ATTRIBUTES.includes(trimmedKey) || trimmedKey === "") {
 			delete additionalAttributes[key];
 		} else if (trimmedKey !== key) {
 			additionalAttributes[trimmedKey] = additionalAttributes[key];
@@ -278,6 +279,7 @@ const attributes = computed(() => {
 });
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
+const canvasRoot = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 const emulateBlockClientScript = inject<BlockClientScriptEmulator>(
 	"emulateBlockClientScript",
 	() => () => {},
@@ -285,8 +287,8 @@ const emulateBlockClientScript = inject<BlockClientScriptEmulator>(
 
 const target = computed(() => {
 	if (!component.value) return null;
-	if (component.value instanceof HTMLElement || component.value instanceof SVGElement) {
-		return component.value;
+	if (isElementLike(component.value)) {
+		return component.value as HTMLElement | SVGElement;
 	} else {
 		return component.value.component;
 	}
@@ -412,7 +414,7 @@ watchEffect(() => {
 			parent = parent.getParentBlock();
 		}
 	}
-	setFont(fontFamily, fontWeight);
+	setFont(fontFamily, fontWeight, target.value?.ownerDocument || document);
 });
 
 onMounted(async () => {
@@ -437,43 +439,22 @@ onUnmounted(() => {
 });
 
 const allResolvedProps = computed(() => {
-	const defaultProps = Object.entries(props.defaultProps || {}).reduce(
-		(acc, [key, value]) => {
-			acc[key] = value.value;
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
+		acc[key] = value.value;
+		return acc;
+	}, {} as Record<string, any>);
 
 	const blockProps = Object.entries({
 		...props.block.getBlockProps(),
-	}).reduce(
-		(acc, [key]) => {
-			acc[key] = getPropValue(
-				key,
-				props.block,
-				getDataScriptValue,
-				props.defaultProps,
-				getComponentDataValue,
-			);
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	}).reduce((acc, [key]) => {
+		acc[key] = getPropValue(key, props.block, getDataScriptValue, props.defaultProps, getComponentDataValue);
+		return acc;
+	}, {} as Record<string, any>);
 
-	const parentProps = Object.entries(getParentProps(props.block)).reduce(
-		(acc, [key, value]) => {
-			acc[key] = getPropValue(
-				key,
-				value.block!,
-				getDataScriptValue,
-				props.defaultProps,
-				getComponentDataValue,
-			);
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	const parentProps = Object.entries(getParentProps(props.block)).reduce((acc, [key, value]) => {
+		acc[key] = getPropValue(key, value.block!, getDataScriptValue, props.defaultProps, getComponentDataValue);
+		return acc;
+	}, {} as Record<string, any>);
 
 	return {
 		...parentProps,
@@ -534,11 +515,12 @@ watch(
 		blockClientScript,
 		resolvedComponentData,
 		allResolvedProps,
+		() => builderStore.runCanvasScripts,
 		() => builderSettings.doc?.execute_block_scripts_in_editor,
 		() => pageStore.settingPage,
 		componentDataReady,
 	],
-	([element, clientScript, componentData, resolvedProps, , settingPage, dataReady], _, onCleanup) => {
+	([element, clientScript, componentData, resolvedProps, , , settingPage, dataReady], _, onCleanup) => {
 		if (!element || !clientScript) return;
 		const waitsForComponentData = Boolean(props.block.extendedFromComponent);
 		const cleanup = emulateBlockClientScript({
@@ -549,7 +531,7 @@ watch(
 			javascript:
 				settingPage || (waitsForComponentData && !editingComponentId.value && !dataReady)
 					? ""
-					: (clientScript.javascript ?? ""),
+					: clientScript.javascript ?? "",
 			componentData: componentData ?? {},
 			props: resolvedProps,
 		});
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index f6d3ba9f6..64de9158e 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -4,7 +4,6 @@
 		:data-builder-canvas="canvasId"
 		@click="handleClick"
 		@mousedown="handleMarqueeStart">
-		<component :is="'style'" v-if="blockClientStyles" v-text="blockClientStyles" />
 		<Transition name="fade">
 			<div
 				class="absolute bottom-0 left-0 right-0 top-0 grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
@@ -15,17 +14,51 @@
 		<BlockSnapGuides></BlockSnapGuides>
 		<div
 			class="fixed flex gap-40"
-			:class="{
-				'scheme-dark': builderStore.canvasDarkMode,
-			}"
 			ref="canvas"
 			:style="{
 				transformOrigin: 'top center',
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
 				'--canvas-scale': canvasProps.scale,
-				colorScheme: builderStore.canvasDarkMode ? 'dark' : 'light',
 			}">
 			<div class="absolute right-0 top-[-60px] flex rounded-md bg-surface-base px-3">
+				<Tooltip
+					:text="
+						emulationDisabled
+							? 'Client script emulation is disabled in Builder Settings'
+							: 'Run scripts in canvas'
+					"
+					:hoverDelay="0.6">
+					<div
+						data-testid="run-canvas-scripts"
+						v-show="!canvasProps.scaling && !canvasProps.panning"
+						class="w-auto p-2"
+						:class="emulationDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'"
+						@click.stop="toggleCanvasScripts">
+						<span
+							:class="[
+								builderStore.runCanvasScripts ? 'lucide-square' : 'lucide-play',
+								'h-8 w-6 text-ink-gray-8',
+							]"
+							aria-hidden="true" />
+					</div>
+				</Tooltip>
+				<Tooltip text="Refresh canvas scripts" :hoverDelay="0.6">
+					<div
+						data-testid="refresh-canvas-scripts"
+						v-show="
+							builderStore.runCanvasScripts &&
+							!emulationDisabled &&
+							!canvasProps.scaling &&
+							!canvasProps.panning
+						"
+						class="w-auto cursor-pointer p-2"
+						@click.stop="refreshCanvasScripts">
+						<span class="lucide-refresh-cw h-8 w-6 text-ink-gray-8" aria-hidden="true" />
+					</div>
+				</Tooltip>
+				<div
+					v-show="!canvasProps.scaling && !canvasProps.panning"
+					class="m-2 my-3 w-px bg-[var(--outline-gray-2)]"></div>
 				<Tooltip text="Toggle Canvas Dark Mode" :hoverDelay="0.6">
 					<div
 						v-show="!canvasProps.scaling && !canvasProps.panning"
@@ -55,13 +88,7 @@
 				</div>
 			</div>
 			<div
-				class="canvas relative flex h-full bg-surface-base shadow-xl contain-layout"
-				:data-breakpoint="breakpoint.device"
-				:style="{
-					...canvasStyles,
-					background: canvasProps.background,
-					width: `${breakpoint.width}px`,
-				}"
+				class="relative bg-surface-base shadow-xl"
 				v-for="breakpoint in renderedBreakpoints"
 				v-show="breakpoint.visible"
 				:key="breakpoint.device">
@@ -75,15 +102,36 @@
 					@click="activeBreakpoint = breakpoint.device">
 					{{ breakpoint.displayName }}
 				</div>
-				<BuilderBlock
-					class="h-full min-h-[inherit]"
-					:block="block"
-					:style="variables"
-					:key="block.blockId"
-					:readonly="builderStore.readOnlyMode"
-					v-if="showBlocks"
+				<BuilderCanvasFrame
+					:key="`${breakpoint.device}:${frameEpoch}`"
 					:breakpoint="breakpoint.device"
-					:data="pageStore.pageData" />
+					:width="breakpoint.width"
+					:background="canvasProps.background"
+					:canvas-id="canvasId"
+					:canvas-styles="{ ...canvasStyles, '--canvas-scale': canvasProps.scale, cursor: cursorStyle }"
+					:dark="builderStore.canvasDarkMode"
+					@ready="registerFrame"
+					@dispose="unregisterFrame">
+					<component
+						:is="'style'"
+						v-if="pageClientStyles"
+						data-builder-page-client-styles
+						v-text="pageClientStyles" />
+					<component
+						:is="'style'"
+						v-if="blockClientStyles"
+						data-builder-client-styles
+						v-text="blockClientStyles" />
+					<BuilderBlock
+						class="h-full min-h-[inherit]"
+						:block="block"
+						:style="variables"
+						:key="block.blockId"
+						:readonly="builderStore.readOnlyMode"
+						v-if="showBlocks"
+						:breakpoint="breakpoint.device"
+						:data="pageStore.pageData" />
+				</BuilderCanvasFrame>
 			</div>
 		</div>
 		<div
@@ -94,11 +142,6 @@
 				<FitScreenIcon />
 			</div>
 		</div>
-		<div
-			class="overlay absolute"
-			:class="{ 'pointer-events-none': isOverDropZone }"
-			id="overlay"
-			ref="overlay" />
 		<div v-show="marquee.visible" class="pointer-events-none fixed z-[200]" :style="marqueeStyle" />
 		<div class="absolute top-0 order-1 w-full">
 			<slot name="header"></slot>
@@ -118,19 +161,21 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
+import BuilderCanvasFrame from "@/components/BuilderCanvasFrame.vue";
 import DraggablePopup from "@/components/Controls/DraggablePopup.vue";
 import SearchBlock from "@/components/Controls/SearchBlock.vue";
 import LoadingIcon from "@/components/Icons/Loading.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
-import { BreakpointConfig, CanvasHistory } from "@/types/Builder/BuilderCanvas";
+import { BreakpointConfig, CanvasHistory, CanvasProps } from "@/types/Builder/BuilderCanvas";
+import { elementFromEditorPoint, forwardFrameEvents } from "@/utils/canvasFrameDom";
 import { getBlockObject, isCtrlOrCmd } from "@/utils/helpers";
 import {
 	type BlockClientScriptRuntime,
-	executeClientScriptRestricted,
-	executeClientScriptUnrestricted,
-} from "@/utils/scriptSandbox";
+	executeClientScript,
+	executePageClientScript,
+} from "@/utils/scriptEmulation";
 import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
@@ -139,7 +184,20 @@ import { useCanvasEvents } from "@/utils/useCanvasEvents";
 import { useCanvasMarqueeSelection } from "@/utils/useCanvasMarqueeSelection";
 import { useCanvasUtils } from "@/utils/useCanvasUtils";
 import { Tooltip } from "frappe-ui";
-import { Ref, computed, onMounted, onUnmounted, provide, reactive, ref, useId, watch } from "vue";
+import {
+	type EffectScope,
+	Ref,
+	computed,
+	effectScope,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	provide,
+	reactive,
+	ref,
+	useId,
+	watch,
+} from "vue";
 import setPanAndZoom from "../utils/panAndZoom";
 import BlockSnapGuides from "./BlockSnapGuides.vue";
 import BuilderBlock from "./BuilderBlock.vue";
@@ -162,8 +220,14 @@ const resizingBlock = ref(false);
 const canvasContainer = ref(null) as Ref<HTMLElement | null>;
 const canvas = ref(null);
 const showBlocks = ref(false);
-const overlay = ref(null);
 const blockStyles = reactive(new Map<string, string>());
+const frameRoots = reactive(new Map<string, HTMLElement>());
+const frameEpoch = ref(0);
+const frameRegistrations = new Map<
+	string,
+	{ document: Document; scope: EffectScope; stopForwarding: () => void }
+>();
+const cursorStyle = ref("default");
 
 const props = withDefaults(
 	defineProps<{
@@ -177,7 +241,26 @@ const props = withDefaults(
 
 const block = ref(props.blockData) as Ref<Block>;
 const history = ref(null) as Ref<null> | CanvasHistory;
-const blockClientStyles = computed(() => Array.from(blockStyles.values()).join("\n"));
+const emulationDisabled = computed(() => builderSettings.doc?.execute_block_scripts_in_editor === "Disable");
+const blockClientStyles = computed(() => {
+	const css = Array.from(blockStyles.values()).filter(Boolean).join("\n");
+	return css ? `@layer builder-authored {\n${css}\n}` : "";
+});
+const pageClientStyles = computed(() => {
+	if (!builderStore.runCanvasScripts || emulationDisabled.value) return "";
+	return pageStore.activePageScripts
+		.filter((script) => script.script_type === "CSS")
+		.map((script) => script.script)
+		.filter(Boolean)
+		.join("\n");
+});
+const pageJavaScripts = computed(() =>
+	pageStore.activePageScripts.filter((script) => script.script_type === "JavaScript"),
+);
+const pageJavaScriptSignature = computed(() =>
+	JSON.stringify(pageJavaScripts.value.map(({ name, script }) => [name, script])),
+);
+const pageDataSignature = computed(() => JSON.stringify(pageStore.pageData));
 
 const activeBreakpoint = ref("desktop") as Ref<string | null>;
 const hoveredBreakpoint = ref("desktop") as Ref<string | null>;
@@ -193,8 +276,7 @@ const {
 	selectedBlocks,
 } = useBlockSelection(block);
 
-const canvasProps = reactive({
-	overlayElement: null,
+const canvasProps = reactive<CanvasProps>({
 	background: "#fff",
 	scale: 1,
 	translateX: 0,
@@ -202,6 +284,7 @@ const canvasProps = reactive({
 	settingCanvas: true,
 	scaling: false,
 	panning: false,
+	frameRoots,
 	breakpoints: [
 		{
 			icon: "lucide-monitor",
@@ -250,6 +333,7 @@ const {
 const { marquee, marqueeStyle, suppressNextClick, handleMarqueeStart, cleanupMarqueeListeners } =
 	useCanvasMarqueeSelection({
 		canvasContainer,
+		frameRoots,
 		canvasProps,
 		activeBreakpoint,
 		selectedBlockIds,
@@ -258,16 +342,9 @@ const { marquee, marqueeStyle, suppressNextClick, handleMarqueeStart, cleanupMar
 		setHoveredBreakpoint,
 	});
 
-const { isOverDropZone } = useCanvasDropZone(
-	canvasContainer as unknown as Ref<HTMLElement>,
-	block,
-	findBlock,
-);
-
 onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
 	const canvasEl = canvas.value as unknown as HTMLElement;
-	canvasProps.overlayElement = overlay.value;
 	setScaleAndTranslate();
 	showBlocks.value = true;
 	setupHistory();
@@ -293,6 +370,7 @@ onMounted(() => {
 
 onUnmounted(() => {
 	cleanupMarqueeListeners();
+	frameRegistrations.forEach(({ document }, breakpoint) => unregisterFrame(breakpoint, document));
 });
 
 const handleClick = (ev: MouseEvent) => {
@@ -301,7 +379,7 @@ const handleClick = (ev: MouseEvent) => {
 		return;
 	}
 
-	const target = document.elementFromPoint(ev.clientX, ev.clientY);
+	const target = elementFromEditorPoint(ev.clientX, ev.clientY);
 	// hack to ensure if click is on canvas-container
 	// TODO: Still clears selection if space handlers are dragged over canvas-container
 	if (target?.classList.contains("canvas-container")) {
@@ -309,6 +387,59 @@ const handleClick = (ev: MouseEvent) => {
 	}
 };
 
+function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, iframe: HTMLIFrameElement) {
+	unregisterFrame(breakpoint);
+	frameRoots.set(breakpoint, root);
+
+	const scope = effectScope();
+	frameRegistrations.set(breakpoint, {
+		document: doc,
+		scope,
+		stopForwarding: forwardFrameEvents(doc, iframe),
+	});
+	scope.run(() => {
+		const { isOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
+		watch(isOverDropZone, (isOver) => root.toggleAttribute("data-drop-active", isOver), { immediate: true });
+		watch(
+			[() => builderStore.runCanvasScripts, () => pageStore.settingPage],
+			([runScripts, settingPage], _, onCleanup) => {
+				if (!runScripts || settingPage || emulationDisabled.value) return;
+				onCleanup(executePageClientScripts(root));
+			},
+			{ immediate: true, flush: "post" },
+		);
+	});
+	if (canvasProps.settingCanvas) {
+		nextTick(setScaleAndTranslate);
+	}
+}
+
+function unregisterFrame(breakpoint: string, doc: Document | null = null) {
+	const registration = frameRegistrations.get(breakpoint);
+	if (doc && registration && registration.document !== doc) return;
+
+	registration?.stopForwarding();
+	registration?.scope.stop();
+	frameRegistrations.delete(breakpoint);
+	frameRoots.get(breakpoint)?.removeAttribute("data-drop-active");
+	frameRoots.delete(breakpoint);
+}
+
+onMounted(() => {
+	if (!canvasContainer.value) return;
+
+	const observer = new MutationObserver(() => {
+		cursorStyle.value = canvasContainer.value?.style.cursor || "default";
+	});
+
+	observer.observe(canvasContainer.value, {
+		attributes: true,
+		attributeFilter: ["style"],
+	});
+
+	onUnmounted(() => observer.disconnect());
+});
+
 function searchBlock(searchTerm: string, targetBlock: null | Block, limit: number = 5): Block[] {
 	const results: Block[] = [];
 
@@ -376,6 +507,43 @@ watch(
 	},
 );
 
+watch(
+	() => builderSettings.doc?.execute_block_scripts_in_editor,
+	(mode, previousMode) => {
+		const scriptsWereRunning = builderStore.runCanvasScripts;
+		if (mode === "Disable" && scriptsWereRunning) {
+			builderStore.runCanvasScripts = false;
+		}
+		if (previousMode && mode !== previousMode && scriptsWereRunning) {
+			frameEpoch.value++;
+		}
+	},
+);
+
+watch(
+	[pageJavaScriptSignature, pageDataSignature],
+	([scriptSignature, dataSignature], [previousScriptSignature, previousDataSignature]) => {
+		if (
+			(scriptSignature === previousScriptSignature && dataSignature === previousDataSignature) ||
+			!pageJavaScripts.value.length ||
+			!builderStore.runCanvasScripts ||
+			pageStore.settingPage ||
+			emulationDisabled.value
+		)
+			return;
+		frameEpoch.value++;
+	},
+);
+
+watch(
+	() => pageStore.settingPage,
+	(settingPage, wasSettingPage) => {
+		if (!settingPage && wasSettingPage && builderStore.runCanvasScripts && !emulationDisabled.value) {
+			frameEpoch.value++;
+		}
+	},
+);
+
 provide("canvasProps", canvasProps);
 provide("emulateBlockClientScript", emulateBlockClientScript);
 
@@ -444,6 +612,17 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 	}
 }
 
+function toggleCanvasScripts() {
+	if (emulationDisabled.value) return;
+	builderStore.runCanvasScripts = !builderStore.runCanvasScripts;
+	frameEpoch.value++;
+}
+
+function refreshCanvasScripts() {
+	if (!builderStore.runCanvasScripts || emulationDisabled.value) return;
+	frameEpoch.value++;
+}
+
 function escapeAttributeValue(value: string) {
 	return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
@@ -453,19 +632,17 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 	const selector = `[data-builder-canvas="${canvasId}"] [data-block-uid="${escapeAttributeValue(
 		script.key,
 	)}"][data-breakpoint="${escapeAttributeValue(script.breakpoint)}"]`;
-	blockStyles.set(registrationKey, script.css ? `${selector} { ${script.css} }` : "");
 
-	const mode = builderSettings.doc?.execute_block_scripts_in_editor ?? "Restricted";
+	const shouldEmulate = builderStore.runCanvasScripts && !emulationDisabled.value;
+	blockStyles.set(registrationKey, shouldEmulate && script.css ? `${selector} { ${script.css} }` : "");
+
 	let cleanup = () => {};
-	if (mode !== "Don't Execute" && script.javascript.trim()) {
+	if (shouldEmulate && script.javascript.trim()) {
 		const context = {
 			componentData: script.componentData,
 			props: script.props,
 		};
-		cleanup =
-			mode === "Unrestricted"
-				? executeClientScriptUnrestricted(script.element, script.javascript, context)
-				: executeClientScriptRestricted(script.element, canvasContainer.value, script.javascript, context);
+		cleanup = executeClientScript(script.element, script.javascript, context);
 	}
 
 	return () => {
@@ -477,6 +654,16 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 	};
 }
 
+function executePageClientScripts(root: HTMLElement) {
+	const cleanups = pageJavaScripts.value.map(({ script }) =>
+		executePageClientScript(root, script, pageStore.pageData),
+	);
+
+	return () => {
+		cleanups.reverse().forEach((cleanup) => cleanup());
+	};
+}
+
 const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>
 <style>
@@ -510,4 +697,8 @@ const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) =
 		line-height: revert;
 	}
 }
+
+.canvas[data-drop-active] > .editor {
+	pointer-events: none;
+}
 </style>
diff --git a/frontend/src/components/BuilderCanvasFrame.vue b/frontend/src/components/BuilderCanvasFrame.vue
new file mode 100644
index 000000000..7493417c3
--- /dev/null
+++ b/frontend/src/components/BuilderCanvasFrame.vue
@@ -0,0 +1,160 @@
+<template>
+	<iframe
+		ref="iframe"
+		:srcdoc="FRAME_DOCUMENT"
+		:title="`Canvas frame for ${breakpoint}`"
+		:data-canvas-breakpoint="breakpoint"
+		class="block border-0 bg-transparent"
+		:style="{
+			width: `${width}px`,
+			height: `${height}px`,
+			background,
+			colorScheme: dark ? 'dark' : 'light',
+		}" />
+	<Teleport v-if="target" :to="target">
+		<div
+			ref="canvasRoot"
+			class="canvas canvas-container relative flex w-full contain-layout"
+			:class="{ 'scheme-dark': dark }"
+			:data-breakpoint="breakpoint"
+			:data-builder-canvas="canvasId"
+			:style="rootStyle">
+			<slot />
+		</div>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+
+const FRAME_DOCUMENT = "<!doctype html><html><head></head><body></body></html>";
+
+const props = withDefaults(
+	defineProps<{
+		breakpoint: string;
+		width: number;
+		background: string;
+		canvasId: string;
+		canvasStyles?: Record<string, any>;
+		dark?: boolean;
+	}>(),
+	{
+		canvasStyles: () => ({}),
+		dark: false,
+	},
+);
+
+const emit = defineEmits<{
+	ready: [breakpoint: string, doc: Document, root: HTMLElement, iframe: HTMLIFrameElement];
+	dispose: [breakpoint: string, doc: Document | null];
+}>();
+
+const iframe = ref<HTMLIFrameElement | null>(null);
+const canvasRoot = ref<HTMLElement | null>(null);
+const target = ref<HTMLElement | null>(null);
+const height = ref(1);
+let resizeObserver: ResizeObserver | null = null;
+let editorObserver: MutationObserver | null = null;
+let currentDocument: Document | null = null;
+
+const rootStyle = computed(() => ({
+	...props.canvasStyles,
+	background: props.background,
+	minHeight: props.canvasStyles.minHeight || "100%",
+}));
+
+function syncDocumentChrome(doc: Document) {
+	doc.documentElement.dataset.theme = document.documentElement.dataset.theme || "";
+	doc.documentElement.className = document.documentElement.className;
+	doc.body.className = document.body.className;
+	doc.body.style.margin = "0";
+	doc.body.style.width = "100%";
+	doc.body.style.minHeight = "100%";
+	doc.body.style.overflow = "visible";
+}
+
+function cloneEditorStyles(doc: Document) {
+	doc.head.querySelectorAll("[data-builder-frame-style]").forEach((node) => node.remove());
+	document.head
+		.querySelectorAll<HTMLLinkElement | HTMLStyleElement>("link[rel='stylesheet'], style")
+		.forEach((source) => {
+			const clone = source.cloneNode(true) as HTMLLinkElement | HTMLStyleElement;
+			clone.setAttribute("data-builder-frame-style", "");
+			doc.head.appendChild(clone);
+		});
+}
+
+function updateHeight() {
+	const doc = currentDocument;
+	if (!doc || !canvasRoot.value) return;
+	height.value = Math.max(
+		1,
+		Math.ceil(canvasRoot.value.scrollHeight),
+		Math.ceil(doc.body.scrollHeight),
+		Math.ceil(doc.documentElement.scrollHeight),
+	);
+}
+
+function cleanupFrame() {
+	resizeObserver?.disconnect();
+	resizeObserver = null;
+	editorObserver?.disconnect();
+	editorObserver = null;
+	if (currentDocument) emit("dispose", props.breakpoint, currentDocument);
+	currentDocument = null;
+	target.value = null;
+}
+
+async function attachFrame() {
+	cleanupFrame();
+	const frame = iframe.value;
+	const doc = frame?.contentDocument;
+	if (!frame || !doc || doc.readyState === "loading") return;
+
+	currentDocument = doc;
+	syncDocumentChrome(doc);
+	cloneEditorStyles(doc);
+	target.value = doc.body;
+	await nextTick();
+	if (!canvasRoot.value) return;
+
+	const FrameResizeObserver = doc.defaultView?.ResizeObserver || ResizeObserver;
+	resizeObserver = new FrameResizeObserver(updateHeight);
+	resizeObserver.observe(canvasRoot.value);
+	resizeObserver.observe(doc.body);
+	updateHeight();
+
+	editorObserver = new MutationObserver((mutations) => {
+		if (!currentDocument) return;
+		if (mutations.some(({ target }) => document.head.contains(target))) {
+			cloneEditorStyles(currentDocument);
+		}
+		if (mutations.some(({ type }) => type === "attributes")) {
+			syncDocumentChrome(currentDocument);
+		}
+	});
+	editorObserver.observe(document.head, { childList: true, subtree: true, characterData: true });
+	editorObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"],
+	});
+	editorObserver.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+
+	emit("ready", props.breakpoint, doc, canvasRoot.value, frame);
+}
+
+watch(
+	iframe,
+	(frame, previous) => {
+		previous?.removeEventListener("load", attachFrame);
+		frame?.addEventListener("load", attachFrame);
+		attachFrame();
+	},
+	{ flush: "post" },
+);
+
+onBeforeUnmount(() => {
+	iframe.value?.removeEventListener("load", attachFrame);
+	cleanupFrame();
+});
+</script>
diff --git a/frontend/src/components/MarginHandler.vue b/frontend/src/components/MarginHandler.vue
index c58440660..b535b6c87 100644
--- a/frontend/src/components/MarginHandler.vue
+++ b/frontend/src/components/MarginHandler.vue
@@ -115,6 +115,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { computed, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 const props = withDefaults(
@@ -132,11 +133,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize } =
-	useSpacingHandler(
-		() => props.targetBlock,
-		() => props.breakpoint,
-	);
+const {
+	canvasProps,
+	updating,
+	blockStyles,
+	handleBorderWidth,
+	longHandleSize,
+	sideHandleSize,
+	canvasPixelsForScreenScale,
+} = useSpacingHandler(
+	() => props.targetBlock,
+	() => props.breakpoint,
+);
 
 watchEffect(() => {
 	emit("update", updating.value);
@@ -146,32 +154,32 @@ const topMarginHandlerHeight = computed(() => {
 	blockStyles.value.marginTop;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginTop = window.getComputedStyle(props.target).marginTop;
-	let value = getNumberFromPx(marginTop) * canvasProps.scale;
+	let marginTop = getComputedStyleFor(props.target).marginTop;
+	let value = getNumberFromPx(marginTop);
 	return value;
 });
 const bottomMarginHandlerHeight = computed(() => {
 	blockStyles.value.marginBottom;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginBottom = window.getComputedStyle(props.target).marginBottom;
-	let value = getNumberFromPx(marginBottom) * canvasProps.scale;
+	let marginBottom = getComputedStyleFor(props.target).marginBottom;
+	let value = getNumberFromPx(marginBottom);
 	return value;
 });
 const leftMarginHandlerWidth = computed(() => {
 	blockStyles.value.marginLeft;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginLeft = window.getComputedStyle(props.target).marginLeft;
-	let value = getNumberFromPx(marginLeft) * canvasProps.scale;
+	let marginLeft = getComputedStyleFor(props.target).marginLeft;
+	let value = getNumberFromPx(marginLeft);
 	return value;
 });
 const rightMarginHandlerWidth = computed(() => {
 	blockStyles.value.marginRight;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginRight = window.getComputedStyle(props.target).marginRight;
-	let value = getNumberFromPx(marginRight) * canvasProps.scale;
+	let marginRight = getComputedStyleFor(props.target).marginRight;
+	let value = getNumberFromPx(marginRight);
 	return value;
 });
 
@@ -180,7 +188,7 @@ const topHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(0px, calc(4px * ${canvasProps.scale}), 12px)`,
+		bottom: `${canvasPixelsForScreenScale(4, 0, 12)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -190,7 +198,7 @@ const bottomHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(-16px, calc(-8px * ${canvasProps.scale}), 2px)`,
+		bottom: `${canvasPixelsForScreenScale(-8, -16, 2)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -200,7 +208,7 @@ const leftHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(0px, calc(4px * ${canvasProps.scale}), 12px)`,
+		right: `${canvasPixelsForScreenScale(4, 0, 12)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -210,7 +218,7 @@ const rightHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(-16px, calc(-8px * ${canvasProps.scale}), 2px)`,
+		right: `${canvasPixelsForScreenScale(-8, -16, 2)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -219,68 +227,58 @@ const handleMargin = (ev: MouseEvent, position: Position) => {
 	if (props.disableHandlers) return;
 	ev.preventDefault();
 	updating.value = true;
-	const startY = ev.clientY;
-	const startX = ev.clientX;
 	const target = ev.target as HTMLElement;
 
-	const startTop = getNumberFromPx(blockStyles.value.marginTop) || 0;
-	const startBottom = getNumberFromPx(blockStyles.value.marginBottom) || 0;
-	const startLeft = getNumberFromPx(blockStyles.value.marginLeft) || 0;
-	const startRight = getNumberFromPx(blockStyles.value.marginRight) || 0;
-
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(target).cursor;
+	const startTop = getNumberFromPx(String(blockStyles.value.marginTop || "")) || 0;
+	const startBottom = getNumberFromPx(String(blockStyles.value.marginBottom || "")) || 0;
+	const startLeft = getNumberFromPx(String(blockStyles.value.marginLeft || "")) || 0;
+	const startRight = getNumberFromPx(String(blockStyles.value.marginRight || "")) || 0;
 
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		let movement = 0;
-		let affectingAxis = null;
-		props.onUpdate && props.onUpdate();
-		if (position === Position.Top) {
-			movement = Math.max(startTop + mouseMoveEvent.clientY - startY, 0);
-			props.targetBlock.setStyle("marginTop", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + mouseMoveEvent.clientY - startY, 0);
-			props.targetBlock.setStyle("marginBottom", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + mouseMoveEvent.clientX - startX, 0);
-			props.targetBlock.setStyle("marginLeft", movement + "px");
-			affectingAxis = "x";
-		} else if (position === Position.Right) {
-			movement = Math.max(startRight + mouseMoveEvent.clientX - startX, 0);
-			props.targetBlock.setStyle("marginRight", movement + "px");
-			affectingAxis = "x";
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(target).cursor,
+		onMove: ({ event, point, startPoint }) => {
+			let movement = 0;
+			let affectingAxis = null;
+			props.onUpdate?.();
+			if (position === Position.Top) {
+				movement = Math.max(startTop + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("marginTop", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Bottom) {
+				movement = Math.max(startBottom + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("marginBottom", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Left) {
+				movement = Math.max(startLeft + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("marginLeft", movement + "px");
+				affectingAxis = "x";
+			} else if (position === Position.Right) {
+				movement = Math.max(startRight + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("marginRight", movement + "px");
+				affectingAxis = "x";
+			}
 
-		if (mouseMoveEvent.shiftKey) {
-			props.targetBlock.setStyle("marginTop", movement + "px");
-			props.targetBlock.setStyle("marginBottom", movement + "px");
-			props.targetBlock.setStyle("marginLeft", movement + "px");
-			props.targetBlock.setStyle("marginRight", movement + "px");
-		} else if (mouseMoveEvent.altKey) {
-			if (affectingAxis === "y") {
+			if (event.shiftKey) {
 				props.targetBlock.setStyle("marginTop", movement + "px");
 				props.targetBlock.setStyle("marginBottom", movement + "px");
-			} else if (affectingAxis === "x") {
 				props.targetBlock.setStyle("marginLeft", movement + "px");
 				props.targetBlock.setStyle("marginRight", movement + "px");
+			} else if (event.altKey) {
+				if (affectingAxis === "y") {
+					props.targetBlock.setStyle("marginTop", movement + "px");
+					props.targetBlock.setStyle("marginBottom", movement + "px");
+				} else if (affectingAxis === "x") {
+					props.targetBlock.setStyle("marginLeft", movement + "px");
+					props.targetBlock.setStyle("marginRight", movement + "px");
+				}
 			}
-		}
 
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
+			event.preventDefault();
+		},
+		onEnd: (event) => {
 			updating.value = false;
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 		},
-		{ once: true },
-	);
+	});
 };
 </script>
diff --git a/frontend/src/components/PaddingHandler.vue b/frontend/src/components/PaddingHandler.vue
index bc3e06dbf..18ae5383f 100644
--- a/frontend/src/components/PaddingHandler.vue
+++ b/frontend/src/components/PaddingHandler.vue
@@ -111,6 +111,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { computed, ref, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 
@@ -131,11 +132,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize } =
-	useSpacingHandler(
-		() => props.targetBlock,
-		() => props.breakpoint,
-	);
+const {
+	canvasProps,
+	updating,
+	blockStyles,
+	handleBorderWidth,
+	longHandleSize,
+	sideHandleSize,
+	canvasPixelsForScreenScale,
+} = useSpacingHandler(
+	() => props.targetBlock,
+	() => props.breakpoint,
+);
 
 watchEffect(() => {
 	emit("update", updating.value);
@@ -163,7 +171,7 @@ const getPadding = (side: "Top" | "Left" | "Right" | "Bottom") => {
 	blockStyles.value.paddingBottom;
 	blockStyles.value.paddingLeft;
 	blockStyles.value.padding;
-	return getNumberFromPx(getComputedStyle(props.target)[`padding${side}`]) * canvasProps.scale;
+	return getNumberFromPx(getComputedStyleFor(props.target)[`padding${side}`]);
 };
 
 const topHandle = computed(() => {
@@ -171,7 +179,7 @@ const topHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		bottom: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -181,7 +189,7 @@ const bottomHandle = computed(() => {
 	return {
 		width,
 		height,
-		top: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		top: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -191,7 +199,7 @@ const leftHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		right: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -201,7 +209,7 @@ const rightHandle = computed(() => {
 	return {
 		width,
 		height,
-		left: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		left: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -215,70 +223,60 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	// 	messageShown.value = true;
 	// }
 	updating.value = true;
-	const startY = ev.clientY;
-	const startX = ev.clientX;
 	const target = ev.target as HTMLElement;
 
-	const startTop = getNumberFromPx(blockStyles.value.paddingTop) || 5;
-	const startBottom = getNumberFromPx(blockStyles.value.paddingBottom) || 5;
-	const startLeft = getNumberFromPx(blockStyles.value.paddingLeft) || 5;
-	const startRight = getNumberFromPx(blockStyles.value.paddingRight) || 5;
-
-	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(target).cursor;
+	const startTop = getNumberFromPx(String(blockStyles.value.paddingTop || "")) || 5;
+	const startBottom = getNumberFromPx(String(blockStyles.value.paddingBottom || "")) || 5;
+	const startLeft = getNumberFromPx(String(blockStyles.value.paddingLeft || "")) || 5;
+	const startRight = getNumberFromPx(String(blockStyles.value.paddingRight || "")) || 5;
 
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		let movement = 0;
-		let affectingAxis = null;
-		props.onUpdate && props.onUpdate();
-		if (position === Position.Top) {
-			movement = Math.max(startTop + mouseMoveEvent.clientY - startY, 0);
-			props.targetBlock.setStyle("paddingTop", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + startY - mouseMoveEvent.clientY, 0);
-			props.targetBlock.setStyle("paddingBottom", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + mouseMoveEvent.clientX - startX, 0);
-			props.targetBlock.setStyle("paddingLeft", movement + "px");
-			affectingAxis = "x";
-		} else if (position === Position.Right) {
-			movement = Math.max(startRight + startX - mouseMoveEvent.clientX, 0);
-			props.targetBlock.setStyle("paddingRight", movement + "px");
-			affectingAxis = "x";
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(target).cursor,
+		onMove: ({ event, point, startPoint }) => {
+			let movement = 0;
+			let affectingAxis = null;
+			props.onUpdate?.();
+			if (position === Position.Top) {
+				movement = Math.max(startTop + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("paddingTop", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Bottom) {
+				movement = Math.max(startBottom + startPoint.y - point.y, 0);
+				props.targetBlock.setStyle("paddingBottom", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Left) {
+				movement = Math.max(startLeft + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("paddingLeft", movement + "px");
+				affectingAxis = "x";
+			} else if (position === Position.Right) {
+				movement = Math.max(startRight + startPoint.x - point.x, 0);
+				props.targetBlock.setStyle("paddingRight", movement + "px");
+				affectingAxis = "x";
+			}
 
-		if (mouseMoveEvent.altKey) {
-			if (affectingAxis === "y") {
+			if (event.altKey) {
+				if (affectingAxis === "y") {
+					props.targetBlock.setStyle("paddingTop", movement + "px");
+					props.targetBlock.setStyle("paddingBottom", movement + "px");
+				} else if (affectingAxis === "x") {
+					props.targetBlock.setStyle("paddingLeft", movement + "px");
+					props.targetBlock.setStyle("paddingRight", movement + "px");
+				}
+			} else if (event.shiftKey) {
 				props.targetBlock.setStyle("paddingTop", movement + "px");
 				props.targetBlock.setStyle("paddingBottom", movement + "px");
-			} else if (affectingAxis === "x") {
 				props.targetBlock.setStyle("paddingLeft", movement + "px");
 				props.targetBlock.setStyle("paddingRight", movement + "px");
 			}
-		} else if (mouseMoveEvent.shiftKey) {
-			props.targetBlock.setStyle("paddingTop", movement + "px");
-			props.targetBlock.setStyle("paddingBottom", movement + "px");
-			props.targetBlock.setStyle("paddingLeft", movement + "px");
-			props.targetBlock.setStyle("paddingRight", movement + "px");
-		}
 
-		mouseMoveEvent.preventDefault();
-		mouseMoveEvent.stopPropagation();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		onEnd: (event) => {
 			updating.value = false;
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 		},
-		{ once: true },
-	);
+	});
 };
 
 let showToast = () =>
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index bbf39790b..645d1eb6f 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -52,7 +52,7 @@
 										},
 										{
 											label: 'Remove Script',
-											onClick: () => deleteScript(script.name),
+											onClick: () => deleteScript(script),
 											icon: 'lucide-trash',
 										},
 									]">
@@ -161,6 +161,19 @@ const props = defineProps<{
 	page: BuilderPage;
 }>();
 
+function syncActivePageScripts(scripts: attachedScript[]) {
+	const currentScripts = new Map(pageStore.activePageScripts.map((script) => [script.name, script]));
+	pageStore.activePageScripts = scripts.map(
+		({ script_name, script, script_type }) =>
+			({
+				...currentScripts.get(script_name),
+				name: script_name,
+				script,
+				script_type,
+			} as BuilderClientScript),
+	);
+}
+
 const attachedScriptResource = createListResource({
 	doctype: "Builder Page Client Script",
 	parent: "Builder Page",
@@ -176,6 +189,7 @@ const attachedScriptResource = createListResource({
 	orderBy: "`tabBuilder Page Client Script`.idx asc",
 	auto: true,
 	onSuccess: (data: attachedScript[]) => {
+		syncActivePageScripts(data || []);
 		if (data && data.length > 0 && !activeScript.value) {
 			selectScript(data[0]);
 		}
@@ -204,13 +218,6 @@ const updateScript = (value: string) => {
 		return;
 	}
 
-	pageStore.activePageScripts = pageStore.activePageScripts.map((script: BuilderClientScript) => {
-		if (script.name === activeScript.value?.script_name) {
-			script.script = value;
-		}
-		return script;
-	});
-
 	clientScriptResource.setValue
 		.submit({
 			name: activeScript.value.script_name,
@@ -257,7 +264,6 @@ const addScript = (scriptType: "JavaScript" | "CSS") => {
 							selectScript(script);
 						}
 					});
-					pageStore.activePageScripts.push(res);
 				});
 		});
 };
@@ -283,44 +289,32 @@ const attachScript = (builder_script_name: string) => {
 		});
 };
 
-const deleteScript = (scriptName: string) => {
+const deleteScript = async (script: attachedScript) => {
 	if (builderStore.readOnlyMode) return;
 
 	activeScript.value = null;
-	attachedScriptResource.delete.submit(scriptName).then(() => {
-		attachedScriptResource.reload();
-	});
-	pageStore.activePageScripts = pageStore.activePageScripts.filter(
-		(script: BuilderClientScript) => script.name !== scriptName,
-	);
+	await attachedScriptResource.delete.submit(script.name);
+	await attachedScriptResource.reload();
 };
 
 const updateScriptName = async (newName: string, script: attachedScript) => {
 	if (!newName || builderStore.readOnlyMode) return;
 	script.editable = false;
-	pageStore.activePageScripts = pageStore.activePageScripts.map((_script: BuilderClientScript) => {
-		if (_script.name === script.name) {
-			script.name = newName;
-		}
-		return script;
-	});
+	const oldName = script.script_name;
 	return createResource({
 		url: "frappe.client.rename_doc",
 	})
 		.submit({
 			doctype: "Builder Client Script",
-			old_name: script?.script_name,
+			old_name: oldName,
 			new_name: newName,
 		})
 		.then(async () => {
-			attachedScriptResource.data = attachedScriptResource.data.map(
-				(s: { script_name: string; script: string }) => {
-					if (s.script_name === script.script_name) {
-						s.script_name = newName;
-					}
-					return s;
-				},
+			await Promise.all([attachedScriptResource.reload(), clientScriptResource.reload()]);
+			const renamedScript = attachedScriptResource.data?.find(
+				(attached: attachedScript) => attached.script_name === newName,
 			);
+			if (renamedScript) selectScript(renamedScript);
 		});
 };
 
@@ -331,26 +325,27 @@ const clientScriptOptions = computed(() =>
 	})),
 );
 
-const onScriptReorder = () => {
+const onScriptReorder = async () => {
 	if (!attachedScriptResource.data) return;
 
 	const scriptOrder = attachedScriptResource.data.map((script: attachedScript) => script.name);
 
-	createResource({
-		url: "builder.api.reorder_client_scripts",
-	})
-		.submit({
+	try {
+		await createResource({
+			url: "builder.api.reorder_client_scripts",
+		}).submit({
 			script_order: scriptOrder,
-		})
-		.then(() => {
-			toast.success("Script order updated");
-		})
-		.catch((e: { message: string; exc: string }) => {
-			const error_message = e.exc.split("\n").slice(-2)[0];
-			toast.error("Failed to update script order", {
-				description: error_message,
-			});
 		});
+		syncActivePageScripts(attachedScriptResource.data);
+		toast.success("Script order updated");
+	} catch (e) {
+		await attachedScriptResource.reload();
+		const error_message =
+			(e as { exc?: string }).exc?.split("\n").slice(-2)[0] || "Could not save script order";
+		toast.error("Failed to update script order", {
+			description: error_message,
+		});
+	}
 };
 
 watch(
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index f71221124..cde8c9e9a 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -1,9 +1,7 @@
 <template>
 	<div class="flex flex-col gap-5">
 		<div class="flex justify-between">
-			<label class="text-p-base-medium w-fit shrink-0 text-ink-gray-8">
-				Execute Block Client Scripts in Editor
-			</label>
+			<label class="text-p-base-medium w-fit shrink-0 text-ink-gray-8">Client Script Emulation</label>
 			<Select
 				class="!w-[200px]"
 				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
@@ -11,25 +9,13 @@
 					(value) => builderStore.updateBuilderSettings('execute_block_scripts_in_editor', value)
 				"
 				:options="[
-					{ label: 'Don\'t Execute', value: 'Don\'t Execute' },
-					{ label: 'Restricted', value: 'Restricted' },
-					{ label: 'Unrestricted', value: 'Unrestricted' },
+					{ label: 'Enable', value: 'Enable' },
+					{ label: 'Disable', value: 'Disable' },
 				]" />
 		</div>
-		<Switch
-			size="sm"
-			label="Prevent Click Emulation"
-			description="Prevents click events from being emulated in the editor for blocks with Block Client Scripts."
-			:modelValue="Boolean(builderSettings.doc?.restrict_click_handlers)"
-			@update:modelValue="
-				(val: Boolean) => {
-					builderStore.updateBuilderSettings('restrict_click_handlers', val);
-				}
-			" />
 		<div class="flex flex-col gap-2">
 			<p class="text-p-sm text-ink-gray-7">
-				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not
-				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
+				Client scripts run inside the isolated canvas document. Only enable emulation for scripts you trust.
 			</p>
 		</div>
 	</div>
@@ -37,7 +23,7 @@
 <script setup lang="ts">
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
-import { Select, Switch } from "frappe-ui";
+import { Select } from "frappe-ui";
 
 const builderStore = useBuilderStore();
 </script>
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 98259df11..9f08fbdd4 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -2,11 +2,11 @@
 	<component :is="block.getTag()" ref="component" :key="editor" class="__text_block__">
 		<div v-html="textContent" v-show="!editor && textContent" @click="handleClick"></div>
 		<TextBlockBubbleMenu
-			v-if="editor"
+			v-if="editor && canvasRoot"
 			:block="block"
 			:editor="editor"
 			:canvas-props="canvasProps"
-			:overlay-element="overlayElement"
+			:overlay-element="canvasRoot"
 			:is-editable="isEditable"
 			ref="bubbleMenu" />
 		<editor-content
@@ -41,14 +41,13 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { StarterKit } from "@tiptap/starter-kit";
 import { Editor, EditorContent, Extension } from "@tiptap/vue-3";
 import { vOnClickOutside } from "@vueuse/components";
-import { Ref, computed, inject, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
+import { Ref, computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 const canvasStore = useCanvasStore();
 
 const dataChanged = ref(false);
 const component = ref(null) as Ref<HTMLElement | null>;
 const bubbleMenu = ref(null) as Ref<{ handleKeydown: (e: KeyboardEvent) => void } | null>;
-const overlayElement = document.querySelector("#overlay") as HTMLElement;
 let editor: Ref<Editor | null> = ref(null);
 let selectionTriggered = false as boolean;
 
@@ -71,6 +70,7 @@ const props = withDefaults(
 );
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
+const canvasRoot = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 
 const FontFamilyPasteRule = Extension.create({
 	name: "fontFamilyPasteRule",
@@ -182,9 +182,9 @@ const showEditor = computed(() => {
 	return !((props.block.isLink() || props.block.isButton()) && props.block.hasChildren());
 });
 
-onBeforeMount(() => {
+onMounted(() => {
 	let html = props.block.getInnerHTML() || "";
-	setFontFromHTML(html);
+	setFontFromHTML(html, component.value?.ownerDocument || document);
 });
 
 let pauseId: PauseId | undefined = undefined;
@@ -353,7 +353,7 @@ const handleEscKey = () => {
 };
 
 const handleClickOutside = (e: MouseEvent) => {
-	if ((e.target as HTMLElement).closest(".canvas-container")) {
+	if ((e.target as HTMLElement).closest(".canvas, .canvas-container")) {
 		canvasStore.editableBlock = null;
 	}
 };
diff --git a/frontend/src/composables/useSpacingHandler.ts b/frontend/src/composables/useSpacingHandler.ts
index cbb4f9a94..1cc4d1e44 100644
--- a/frontend/src/composables/useSpacingHandler.ts
+++ b/frontend/src/composables/useSpacingHandler.ts
@@ -30,19 +30,30 @@ export function useSpacingHandler(getTargetBlock: () => Block, getBreakpoint: ()
 		return styles;
 	});
 
-	const handleBorderWidth = computed(() => `${clamp(1 * canvasProps.scale, 1, 2)}px`);
+	const canvasPixelsForScreenScale = (size: number, min: number, max: number) =>
+		clamp(size * canvasProps.scale, min, max) / canvasProps.scale;
+
+	const handleBorderWidth = computed(() => `${canvasPixelsForScreenScale(1, 1, 2)}px`);
 
 	// Long-edge handles (top/bottom) are wide and short; side handles (left/right)
 	// are tall and narrow. The dimensions are identical for margin and padding;
 	// only the offsets (set per-component) differ.
 	const longHandleSize = computed(() => ({
-		width: clamp(16 * canvasProps.scale, 8, 32),
-		height: clamp(4 * canvasProps.scale, 2, 8),
+		width: canvasPixelsForScreenScale(16, 8, 32),
+		height: canvasPixelsForScreenScale(4, 2, 8),
 	}));
 	const sideHandleSize = computed(() => ({
-		width: clamp(4 * canvasProps.scale, 2, 8),
-		height: clamp(16 * canvasProps.scale, 8, 32),
+		width: canvasPixelsForScreenScale(4, 2, 8),
+		height: canvasPixelsForScreenScale(16, 8, 32),
 	}));
 
-	return { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize };
+	return {
+		canvasProps,
+		updating,
+		blockStyles,
+		handleBorderWidth,
+		longHandleSize,
+		sideHandleSize,
+		canvasPixelsForScreenScale,
+	};
 }
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index fa3519057..f13775309 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -46,6 +46,7 @@ const useBuilderStore = defineStore("builderStore", {
 			attribute: "data-theme",
 		}),
 		canvasDarkMode: useStorage("canvasDarkMode", false),
+		runCanvasScripts: false,
 		highlightBlocksWithClientScripts: false,
 		showSettingsDialog: false,
 		settingsActiveTab: <string>"page_general",
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 8aff08ed6..540e86ab4 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -255,18 +255,19 @@ const useCanvasStore = defineStore("canvasStore", {
 			// to avoid re-rendering the whole canvas
 			if (this.dropTarget.placeholder) return;
 
-			let element = document.createElement("div");
-			element.id = "placeholder";
+			const breakpoint = this.activeCanvas?.hoveredBreakpoint || this.activeCanvas?.activeBreakpoint;
+			const frameRoot = breakpoint ? this.activeCanvas?.canvasProps.frameRoots?.get(breakpoint) : null;
+			const root = frameRoot?.querySelector(".__builder_component__[data-block-id='root']");
+			if (!root) return;
 
-			const root = document.querySelector(".__builder_component__[data-block-id='root']");
-			if (root) {
-				this.dropTarget.placeholder = root.appendChild(element);
-			}
+			let element = root.ownerDocument.createElement("div");
+			element.id = "placeholder";
+			this.dropTarget.placeholder = root.appendChild(element);
 			return this.dropTarget.placeholder;
 		},
 
 		removeDropPlaceholder() {
-			const placeholder = document.getElementById("placeholder");
+			const placeholder = this.dropTarget.placeholder;
 			if (placeholder) {
 				placeholder.remove();
 			}
diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index 0b8796500..390bc0a20 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -81,7 +81,12 @@ const usePageStore = defineStore("pageStore", {
 				});
 
 				await scriptsResource.list.promise;
-				this.activePageScripts = scriptsResource.data as BuilderClientScript[];
+				const scriptsByName = new Map(
+					((scriptsResource.data || []) as BuilderClientScript[]).map((script) => [script.name, script]),
+				);
+				this.activePageScripts = page.client_scripts
+					.map(({ builder_script }) => scriptsByName.get(builder_script))
+					.filter((script): script is BuilderClientScript => Boolean(script));
 			} else {
 				this.activePageScripts = [];
 			}
diff --git a/frontend/src/types/Builder/BuilderCanvas.ts b/frontend/src/types/Builder/BuilderCanvas.ts
index e70a25cfd..ba72c3194 100644
--- a/frontend/src/types/Builder/BuilderCanvas.ts
+++ b/frontend/src/types/Builder/BuilderCanvas.ts
@@ -11,7 +11,6 @@ export interface BreakpointConfig {
 }
 
 export interface CanvasProps {
-	overlayElement: HTMLElement | null;
 	background: string;
 	scale: number;
 	translateX: number;
@@ -20,6 +19,7 @@ export interface CanvasProps {
 	scaling: boolean;
 	panning: boolean;
 	breakpoints: BreakpointConfig[];
+	frameRoots?: Map<string, HTMLElement>;
 }
 
 export type CanvasHistory = Ref<ReturnType<typeof useCanvasHistory>>;
diff --git a/frontend/src/types/doctypes.ts b/frontend/src/types/doctypes.ts
index f768d96c0..9d529e989 100644
--- a/frontend/src/types/doctypes.ts
+++ b/frontend/src/types/doctypes.ts
@@ -37,10 +37,8 @@ export interface BuilderSettings extends DocType {
   head_html?: string;
   /** Body HTML: Code */
   body_html?: string;
-  /** Execute Block Scripts in Editor: Select */
-  execute_block_scripts_in_editor?: 'Don\'t Execute' | 'Restricted' | 'Unrestricted';
-  /** Restrict Click Handlers: Check */
-  restrict_click_handlers: 0 | 1;
+  /** Client Script Emulation: Select */
+  execute_block_scripts_in_editor?: 'Enable' | 'Disable';
   /** AI API Key: Password */
   ai_api_key?: string;
 }
diff --git a/frontend/src/utils/canvasFrameDom.ts b/frontend/src/utils/canvasFrameDom.ts
new file mode 100644
index 000000000..679250c0e
--- /dev/null
+++ b/frontend/src/utils/canvasFrameDom.ts
@@ -0,0 +1,302 @@
+export type CanvasFramePoint = {
+	x: number;
+	y: number;
+};
+
+type CanvasDragMove = {
+	event: MouseEvent;
+	point: CanvasFramePoint;
+	startPoint: CanvasFramePoint;
+	movementX: number;
+	movementY: number;
+};
+
+type CanvasDragOptions = {
+	cursor?: string;
+	onMove: (move: CanvasDragMove) => void;
+	onEnd?: (event: MouseEvent) => void;
+};
+
+const forwardedEventSources = new WeakMap<Event, Event>();
+
+export function getElementDocument(element: Element | null): Document {
+	return element?.ownerDocument || document;
+}
+
+export function getElementWindow(element: Element | null): Window {
+	return getElementDocument(element).defaultView || window;
+}
+
+export function getComputedStyleFor(element: Element): CSSStyleDeclaration {
+	return getElementWindow(element).getComputedStyle(element);
+}
+
+export function getFrameElement(doc: Document): HTMLIFrameElement | null {
+	const frame = doc.defaultView?.frameElement;
+	return frame && frame.tagName === "IFRAME" ? (frame as HTMLIFrameElement) : null;
+}
+
+export function getElementRectInEditor(element: Element): DOMRect {
+	const rect = element.getBoundingClientRect();
+	const frame = getFrameElement(element.ownerDocument);
+	if (!frame) return rect;
+
+	const frameRect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? frameRect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? frameRect.height / frame.clientHeight : 1;
+
+	return new DOMRect(
+		frameRect.left + rect.left * scaleX,
+		frameRect.top + rect.top * scaleY,
+		rect.width * scaleX,
+		rect.height * scaleY,
+	);
+}
+
+export function framePointToEditor(doc: Document, point: CanvasFramePoint): CanvasFramePoint {
+	const frame = getFrameElement(doc);
+	if (!frame) return point;
+
+	const frameRect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? frameRect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? frameRect.height / frame.clientHeight : 1;
+	return {
+		x: frameRect.left + point.x * scaleX,
+		y: frameRect.top + point.y * scaleY,
+	};
+}
+
+export function editorPointToFrame(frame: HTMLIFrameElement, point: CanvasFramePoint): CanvasFramePoint {
+	const rect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? rect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? rect.height / frame.clientHeight : 1;
+	return {
+		x: (point.x - rect.left) / scaleX,
+		y: (point.y - rect.top) / scaleY,
+	};
+}
+
+export function getEventSource(event: Event): Event {
+	return forwardedEventSources.get(event) || event;
+}
+
+export function getEventTarget(event: Event): EventTarget | null {
+	return getEventSource(event).target || event.target;
+}
+
+export function getEventDocument(event: Event): Document {
+	const target = getEventTarget(event) as { nodeType?: number; ownerDocument?: Document } | null;
+	if (target?.nodeType === 9) return target as unknown as Document;
+	return target?.ownerDocument || document;
+}
+
+export function getEventPointInEditor(event: MouseEvent): CanvasFramePoint {
+	const source = getEventSource(event) as MouseEvent;
+	return framePointToEditor(getEventDocument(event), {
+		x: source.clientX,
+		y: source.clientY,
+	});
+}
+
+export function getEventPointInDocument(event: MouseEvent, doc: Document): CanvasFramePoint {
+	const point = getEventPointInEditor(event);
+	const frame = getFrameElement(doc);
+	return frame ? editorPointToFrame(frame, point) : point;
+}
+
+export function startCanvasDrag(
+	startEvent: MouseEvent,
+	target: Element,
+	{ cursor, onMove, onEnd }: CanvasDragOptions,
+) {
+	const targetDocument = getElementDocument(target);
+	const listenerDocument = getFrameElement(targetDocument)?.ownerDocument || targetDocument;
+	const startPoint = getEventPointInDocument(startEvent, targetDocument);
+	const previousCursor = targetDocument.body.style.cursor;
+
+	if (cursor) targetDocument.body.style.cursor = cursor;
+
+	const stop = () => {
+		listenerDocument.removeEventListener("mousemove", handleMove);
+		listenerDocument.removeEventListener("mouseup", handleEnd);
+		if (cursor) targetDocument.body.style.cursor = previousCursor;
+	};
+	const handleMove = (event: MouseEvent) => {
+		const point = getEventPointInDocument(event, targetDocument);
+		onMove({
+			event,
+			point,
+			startPoint,
+			movementX: point.x - startPoint.x,
+			movementY: point.y - startPoint.y,
+		});
+	};
+	const handleEnd = (event: MouseEvent) => {
+		stop();
+		onEnd?.(event);
+	};
+
+	listenerDocument.addEventListener("mousemove", handleMove);
+	listenerDocument.addEventListener("mouseup", handleEnd);
+	return stop;
+}
+
+export function elementFromEditorPoint(x: number, y: number): Element | null {
+	const outerElement = document.elementFromPoint(x, y);
+	if (!(outerElement instanceof HTMLIFrameElement)) return outerElement;
+
+	const frameDocument = outerElement.contentDocument;
+	if (!frameDocument) return outerElement;
+	const point = editorPointToFrame(outerElement, { x, y });
+	return frameDocument.elementFromPoint(point.x, point.y) || outerElement;
+}
+
+export function isElementLike(value: unknown): value is Element {
+	return Boolean(
+		value &&
+			typeof value === "object" &&
+			"nodeType" in value &&
+			(value as { nodeType: number }).nodeType === Node.ELEMENT_NODE,
+	);
+}
+
+const bubblingMouseEventTypes = [
+	"auxclick",
+	"click",
+	"contextmenu",
+	"dblclick",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+] as const;
+
+const keyboardEventTypes = ["keydown", "keypress", "keyup"] as const;
+const clipboardEventTypes = ["copy", "cut", "paste"] as const;
+const dragEventTypes = [
+	"drag",
+	"dragend",
+	"dragenter",
+	"dragleave",
+	"dragover",
+	"dragstart",
+	"drop",
+] as const;
+
+function getForwardedMouseEventInit(event: MouseEvent, doc: Document): MouseEventInit {
+	const point = framePointToEditor(doc, { x: event.clientX, y: event.clientY });
+	return {
+		bubbles: true,
+		cancelable: event.cancelable,
+		composed: true,
+		view: window,
+		detail: event.detail,
+		screenX: event.screenX,
+		screenY: event.screenY,
+		clientX: point.x,
+		clientY: point.y,
+		ctrlKey: event.ctrlKey,
+		altKey: event.altKey,
+		shiftKey: event.shiftKey,
+		metaKey: event.metaKey,
+		button: event.button,
+		buttons: event.buttons,
+		relatedTarget: event.relatedTarget,
+	};
+}
+
+export function forwardFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
+	const frameTarget: EventTarget = doc.defaultView || doc;
+
+	const forward = (source: Event, forwarded: Event) => {
+		forwardedEventSources.set(forwarded, source);
+		if (source.target) {
+			// Outer listeners and third-party shortcuts should still see the original editable target.
+			Object.defineProperty(forwarded, "target", {
+				configurable: true,
+				value: source.target,
+			});
+		}
+		if (!iframe.dispatchEvent(forwarded)) source.preventDefault();
+	};
+
+	const forwardMouse = (event: MouseEvent) => {
+		forward(event, new MouseEvent(event.type, getForwardedMouseEventInit(event, doc)));
+	};
+
+	const forwardWheel = (event: WheelEvent) => {
+		forward(
+			event,
+			new WheelEvent(event.type, {
+				...getForwardedMouseEventInit(event, doc),
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaZ: event.deltaZ,
+				deltaMode: event.deltaMode,
+			}),
+		);
+	};
+
+	const forwardDrag = (event: DragEvent) => {
+		forward(
+			event,
+			new DragEvent(event.type, {
+				...getForwardedMouseEventInit(event, doc),
+				dataTransfer: event.dataTransfer,
+			}),
+		);
+	};
+
+	const forwardKeyboard = (event: KeyboardEvent) => {
+		forward(
+			event,
+			new KeyboardEvent(event.type, {
+				bubbles: true,
+				cancelable: event.cancelable,
+				composed: true,
+				key: event.key,
+				code: event.code,
+				location: event.location,
+				repeat: event.repeat,
+				isComposing: event.isComposing,
+				ctrlKey: event.ctrlKey,
+				altKey: event.altKey,
+				shiftKey: event.shiftKey,
+				metaKey: event.metaKey,
+			}),
+		);
+	};
+
+	const forwardClipboard = (event: ClipboardEvent) => {
+		forward(
+			event,
+			new ClipboardEvent(event.type, {
+				bubbles: true,
+				cancelable: event.cancelable,
+				composed: true,
+				clipboardData: event.clipboardData,
+			}),
+		);
+	};
+
+	const listeners: Array<
+		[types: readonly string[], listener: EventListener, options?: AddEventListenerOptions]
+	> = [
+		[bubblingMouseEventTypes, forwardMouse as EventListener],
+		[["wheel"], forwardWheel as EventListener, { passive: false }],
+		[dragEventTypes, forwardDrag as EventListener],
+		[keyboardEventTypes, forwardKeyboard as EventListener],
+		[clipboardEventTypes, forwardClipboard as EventListener],
+	];
+
+	listeners.forEach(([types, listener, options]) => {
+		types.forEach((type) => frameTarget.addEventListener(type, listener, options));
+	});
+
+	return () => {
+		listeners.forEach(([types, listener, options]) => {
+			types.forEach((type) => frameTarget.removeEventListener(type, listener, options));
+		});
+	};
+}
diff --git a/frontend/src/utils/fontManager.ts b/frontend/src/utils/fontManager.ts
index 94d7ca0a8..b6d1cbf88 100644
--- a/frontend/src/utils/fontManager.ts
+++ b/frontend/src/utils/fontManager.ts
@@ -20,13 +20,14 @@ const WEIGHT_LABELS: Record<FontWeight, string> = {
 };
 
 const GF_CSS = "https://fonts.googleapis.com/css2";
-const fontCache = new Map<string, Promise<string>>();
+const fontCache = new WeakMap<Document, Map<string, Promise<string>>>();
 
-function loadCustomFont(font: string, url: string): Promise<string> {
-	return new FontFace(font, `url("${url}")`)
+function loadCustomFont(font: string, url: string, targetDocument: Document): Promise<string> {
+	const FontFaceConstructor = targetDocument.defaultView?.FontFace || FontFace;
+	return new FontFaceConstructor(font, `url("${url}")`)
 		.load()
 		.then((face) => {
-			document.fonts.add(face);
+			targetDocument.fonts.add(face);
 			return font;
 		})
 		.catch(() => {
@@ -35,12 +36,17 @@ function loadCustomFont(font: string, url: string): Promise<string> {
 		});
 }
 
-function loadGoogleFont(font: string, weight?: string): Promise<string> {
+function loadGoogleFont(font: string, weight: string | undefined, targetDocument: Document): Promise<string> {
 	const familyParam = weight ? `${encodeURIComponent(font)}:wght@${weight}` : encodeURIComponent(font);
 
 	return new Promise<string>((resolve) => {
 		const id = `gf-${font.replace(/\s+/g, "-")}${weight ? `-${weight}` : ""}`;
-		const link = document.createElement("link");
+		const existing = targetDocument.getElementById(id);
+		if (existing) {
+			resolve(font);
+			return;
+		}
+		const link = targetDocument.createElement("link");
 		link.id = id;
 		link.rel = "stylesheet";
 		link.crossOrigin = "anonymous";
@@ -54,14 +60,23 @@ function loadGoogleFont(font: string, weight?: string): Promise<string> {
 			},
 			{ once: true },
 		);
-		document.head.appendChild(link);
+		targetDocument.head.appendChild(link);
 	});
 }
 
-export function setFont(font: string | null, weight?: string): Promise<string> {
+export function setFont(
+	font: string | null,
+	weight?: string,
+	targetDocument: Document = document,
+): Promise<string> {
 	if (!font) return Promise.resolve("");
 	const cacheKey = weight ? `${font}:${weight}` : font;
-	if (fontCache.has(cacheKey)) return fontCache.get(cacheKey)!;
+	let documentCache = fontCache.get(targetDocument);
+	if (!documentCache) {
+		documentCache = new Map();
+		fontCache.set(targetDocument, documentCache);
+	}
+	if (documentCache.has(cacheKey)) return documentCache.get(cacheKey)!;
 
 	// userFont list resource may not have loaded yet (e.g. a page rendered right
 	// after navigation); fall back to treating it as a Google font until it does.
@@ -69,18 +84,20 @@ export function setFont(font: string | null, weight?: string): Promise<string> {
 		(f: { font_name: string; font_file: string }) => f.font_name === font,
 	);
 
-	const promise = customFont ? loadCustomFont(font, customFont.font_file) : loadGoogleFont(font, weight);
+	const promise = customFont
+		? loadCustomFont(font, customFont.font_file, targetDocument)
+		: loadGoogleFont(font, weight, targetDocument);
 
-	fontCache.set(cacheKey, promise);
+	documentCache.set(cacheKey, promise);
 	return promise;
 }
 
-export function setFontFromHTML(html: string): void {
+export function setFontFromHTML(html: string, targetDocument: Document = document): void {
 	const matches = html.match(/font-family:\s*([^;"]+)[";]/g) ?? [];
 	matches
 		.map((m) => m.replace(/font-family:\s*([^;"]+)[";]/, "$1").trim())
 		.filter(Boolean)
-		.forEach((font) => setFont(font));
+		.forEach((font) => setFont(font, undefined, targetDocument));
 }
 
 export function getFontWeightOptions(font: string): WeightOption[] {
diff --git a/frontend/src/utils/guidesTracker.ts b/frontend/src/utils/guidesTracker.ts
index 77a119ed5..b99b3d062 100644
--- a/frontend/src/utils/guidesTracker.ts
+++ b/frontend/src/utils/guidesTracker.ts
@@ -1,6 +1,5 @@
 import useCanvasStore from "@/stores/canvasStore";
-import { useElementBounding } from "@vueuse/core";
-import { reactive } from "vue";
+import { getElementRectInEditor } from "./canvasFrameDom";
 const canvasStore = useCanvasStore();
 const tracks = [
 	{
@@ -27,11 +26,10 @@ const tracks = [
 
 function setGuides(target: HTMLElement | SVGElement, canvasProps: CanvasProps) {
 	const threshold = 10;
-	// TODO: Remove canvas dependency
 	const canvasElement = target.closest(".canvas") as HTMLElement;
-	const canvasBounds = reactive(useElementBounding(canvasElement));
-	const targetBounds = reactive(useElementBounding(target));
-	const parentBounds = reactive(useElementBounding(target.parentElement as HTMLElement));
+	const canvasBounds = createBounds(canvasElement);
+	const targetBounds = createBounds(target);
+	const parentBounds = createBounds(target.parentElement as HTMLElement);
 
 	const getFinalWidth = (calculatedWidth: number) => {
 		targetBounds.update();
@@ -161,4 +159,31 @@ function setGuides(target: HTMLElement | SVGElement, canvasProps: CanvasProps) {
 	};
 }
 
+function createBounds(element: Element) {
+	let rect = getElementRectInEditor(element);
+	return {
+		get left() {
+			return rect.left;
+		},
+		get right() {
+			return rect.right;
+		},
+		get top() {
+			return rect.top;
+		},
+		get bottom() {
+			return rect.bottom;
+		},
+		get width() {
+			return rect.width;
+		},
+		get height() {
+			return rect.height;
+		},
+		update() {
+			rect = getElementRectInEditor(element);
+		},
+	};
+}
+
 export default setGuides;
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index b74b16510..6f3942275 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -4,6 +4,7 @@ import { BuilderPage } from "@/types/doctypes";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { dialog, FileUploadHandler, toast } from "frappe-ui";
 import { reactive, toRaw } from "vue";
+import { getEventTarget, isElementLike } from "./canvasFrameDom";
 import { getRGB, HexToHSV, HSVToHex } from "./colors";
 import {
 	addPxToNumber,
@@ -128,10 +129,10 @@ function isJSONString(str: string) {
 }
 
 function isTargetEditable(e: Event) {
-	const target = e.target as HTMLElement;
-	const isEditable = target.isContentEditable;
-	const isInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
-	return isEditable || isInput;
+	const target = getEventTarget(e) as HTMLElement | null;
+	const isEditable = target?.isContentEditable;
+	const isInput = target?.tagName === "INPUT" || target?.tagName === "TEXTAREA";
+	return Boolean(isEditable || isInput);
 }
 
 function getDataForKey(datum: Object, key: string) {
@@ -504,10 +505,8 @@ function generateId() {
 }
 
 function isBlock(e: MouseEvent) {
-	return (
-		(e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
-		e.target.closest(".__builder_component__")
-	);
+	const target = getEventTarget(e);
+	return isElementLike(target) && target.closest(".__builder_component__");
 }
 
 type BlockInfo = {
@@ -516,7 +515,11 @@ type BlockInfo = {
 };
 
 function getBlockInfo(e: MouseEvent) {
-	const target = (e.target as HTMLElement)?.closest(".__builder_component__") as HTMLElement;
+	const eventTarget = getEventTarget(e);
+	const target = isElementLike(eventTarget)
+		? (eventTarget.closest(".__builder_component__") as HTMLElement)
+		: null;
+	if (!target) return {} as BlockInfo;
 	return target.dataset as BlockInfo;
 }
 
diff --git a/frontend/src/utils/scriptEmulation.ts b/frontend/src/utils/scriptEmulation.ts
new file mode 100644
index 000000000..3e3908586
--- /dev/null
+++ b/frontend/src/utils/scriptEmulation.ts
@@ -0,0 +1,129 @@
+export type ScriptCleanup = () => void;
+export type BlockClientScriptRuntime = {
+	key: string;
+	element: HTMLElement;
+	breakpoint: string;
+	css: string;
+	javascript: string;
+	componentData: Record<string, any>;
+	props: Record<string, any>;
+};
+export type BlockClientScriptEmulator = (script: BlockClientScriptRuntime) => ScriptCleanup;
+
+type ScriptContext = {
+	componentData?: Record<string, any>;
+	props?: Record<string, any>;
+};
+
+type PageScriptContext = {
+	pageData?: Record<string, any>;
+};
+
+function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
+	const CustomEventConstructor = (targetWindow as any).CustomEvent as typeof CustomEvent;
+	return {
+		dispatch(name: string, data: any, target: EventTarget = defaultTarget) {
+			target.dispatchEvent(new CustomEventConstructor(name, { detail: data }));
+		},
+		listen(name: string, callback: (data: any, event: Event) => void, target: EventTarget = defaultTarget) {
+			const handler = (event: Event) => callback((event as CustomEvent).detail, event);
+			target.addEventListener(name, handler);
+			return () => target.removeEventListener(name, handler);
+		},
+	};
+}
+
+function createScriptFunction(userScript: string, targetWindow: Window, pageScript = false) {
+	const FunctionConstructor = (targetWindow as any).Function as FunctionConstructor;
+	const parameters = pageScript ? "" : "component_data, props";
+	const callArguments = pageScript ? "thisRef" : "thisRef, component_data, props";
+	return new FunctionConstructor(
+		"context",
+		`with (context) {
+			return (async function(${parameters}) { ${userScript} })
+				.call(${callArguments});
+		}`,
+	);
+}
+
+function createScriptCleanup(result: unknown, thisArg: unknown): ScriptCleanup {
+	let disposed = false;
+	let resolvedCleanup: unknown;
+
+	const runCleanup = (cleanup: unknown) => {
+		if (typeof cleanup !== "function") return;
+		try {
+			cleanup.call(thisArg);
+		} catch (error) {
+			console.error("Error cleaning up client script:", error);
+		}
+	};
+
+	Promise.resolve(result).then(
+		(value) => {
+			resolvedCleanup = value;
+			if (disposed) runCleanup(value);
+		},
+		(error) => console.error("Error executing client script:", error),
+	);
+
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		runCleanup(resolvedCleanup);
+	};
+}
+
+function executeClientScript(
+	thisElement: HTMLElement | null,
+	userScript: string,
+	{ componentData = {}, props = {} }: ScriptContext = {},
+	pageContext: PageScriptContext | null = null,
+): ScriptCleanup {
+	if (!thisElement || !userScript.trim()) return () => {};
+
+	try {
+		const targetDocument = thisElement.ownerDocument;
+		const targetWindow = targetDocument.defaultView || window;
+		const events = createEvents(targetDocument, targetWindow);
+		const isPageScript = pageContext !== null;
+		const thisRef = isPageScript ? targetWindow : thisElement;
+		const context = isPageScript
+			? {
+					document: targetDocument,
+					events,
+					page_data: pageContext.pageData ?? {},
+					thisRef,
+			  }
+			: {
+					component_data: componentData,
+					document: targetDocument,
+					events,
+					props,
+					thisRef,
+			  };
+
+		if (isPageScript) {
+			Object.assign(targetWindow, {
+				events,
+				page_data: pageContext.pageData ?? {},
+			});
+		}
+
+		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
+		return createScriptCleanup(fn(context), thisRef);
+	} catch (error) {
+		console.error("Error executing client script:", error);
+		return () => {};
+	}
+}
+
+function executePageClientScript(
+	canvasRoot: HTMLElement | null,
+	userScript: string,
+	pageData: Record<string, any>,
+) {
+	return executeClientScript(canvasRoot, userScript, {}, { pageData });
+}
+
+export { executeClientScript, executePageClientScript };
diff --git a/frontend/src/utils/scriptSandbox.ts b/frontend/src/utils/scriptSandbox.ts
deleted file mode 100644
index 1aba8af32..000000000
--- a/frontend/src/utils/scriptSandbox.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import { builderSettings } from "@/data/builderSettings";
-
-export type ScriptCleanup = () => void;
-export type BlockClientScriptRuntime = {
-	key: string;
-	element: HTMLElement;
-	breakpoint: string;
-	css: string;
-	javascript: string;
-	componentData: Record<string, any>;
-	props: Record<string, any>;
-};
-export type BlockClientScriptEmulator = (script: BlockClientScriptRuntime) => ScriptCleanup;
-
-type ScriptContext = {
-	componentData?: Record<string, any>;
-	props?: Record<string, any>;
-};
-
-function createEvents(defaultTarget: EventTarget) {
-	return {
-		dispatch(name: string, data: any, target: EventTarget = defaultTarget) {
-			target.dispatchEvent(new CustomEvent(name, { detail: data }));
-		},
-		listen(name: string, callback: (data: any, event: Event) => void, target: EventTarget = defaultTarget) {
-			const handler = (event: Event) => callback((event as CustomEvent).detail, event);
-			target.addEventListener(name, handler);
-			return () => target.removeEventListener(name, handler);
-		},
-	};
-}
-
-function createScriptFunction(userScript: string) {
-	return new Function(
-		"context",
-		`with (context) {
-			return (async function(component_data, props) { ${userScript} })
-				.call(thisRef, component_data, props);
-		}`,
-	);
-}
-
-function executeClientScriptUnrestricted(
-	thisElement: HTMLElement | null,
-	userScript: string,
-	{ componentData = {}, props = {} }: ScriptContext = {},
-): ScriptCleanup {
-	if (!thisElement || !userScript.trim()) return () => {};
-
-	try {
-		const fn = createScriptFunction(userScript);
-		const cleanup = fn({
-			component_data: componentData,
-			document,
-			events: createEvents(document),
-			props,
-			thisRef: thisElement,
-		});
-		if (typeof cleanup !== "function") return () => {};
-		return () => {
-			try {
-				cleanup.call(thisElement);
-			} catch (error) {
-				console.error("Error cleaning up user script (unrestricted):", error);
-			}
-		};
-	} catch (error) {
-		console.error("Error in user script (unrestricted):", error);
-		return () => {};
-	}
-}
-
-/**
- * Executes a user script with the canvas exposed as document and proxies DOM values
- * to restrict common escape hatches into the broader editor document.
- */
-function executeClientScriptRestricted(
-	thisElement: HTMLElement | null,
-	sandboxRoot: HTMLElement | null,
-	userScript: string,
-	{ componentData = {}, props = {} }: ScriptContext = {},
-): ScriptCleanup {
-	if (!thisElement || !sandboxRoot || !userScript.trim()) return () => {};
-
-	const cache = new WeakMap<object, any>();
-	const rawValues = new WeakMap<object, object>();
-	const eventListeners: Array<{
-		target: Element;
-		type: string;
-		listener: EventListenerOrEventListenerObject;
-		options?: boolean | AddEventListenerOptions;
-	}> = [];
-
-	const BLOCKED_GET = new Set([
-		"ownerDocument",
-		"document",
-		"defaultView",
-		"window",
-		"globalThis",
-		"parentElement",
-		"parentNode",
-		"innerHTML",
-		"outerHTML",
-	]);
-
-	const BLOCKED_SET = new Set(["innerHTML", "outerHTML"]);
-
-	function wrap(value: any): any {
-		if (value === null || typeof value !== "object") return value;
-		if (cache.has(value)) return cache.get(value);
-
-		const proxy = new Proxy(value, handler);
-		cache.set(value, proxy);
-		rawValues.set(proxy, value);
-		return proxy;
-	}
-
-	function unwrap(value: any) {
-		return value !== null && typeof value === "object" ? rawValues.get(value) || value : value;
-	}
-
-	const handler = {
-		get(target: Element, prop: string | symbol) {
-			if (typeof prop === "string" && BLOCKED_GET.has(prop)) return undefined;
-
-			// Always pass `target` (not the proxy) as the receiver so that native DOM
-			// getters (e.g. tagName, nodeType, children) run with the correct `this`.
-			// Passing the Proxy as receiver causes "Illegal invocation" in those cases.
-			const val = Reflect.get(target, prop, target);
-
-			// Wrap DOM returns
-			if (val instanceof Node) return wrap(val);
-			if (val instanceof NamedNodeMap || val instanceof DOMTokenList || val instanceof CSSStyleDeclaration)
-				return wrap(val as any);
-
-			if (val instanceof NodeList || val instanceof HTMLCollection) {
-				return Array.from(val, wrap);
-			}
-
-			// Wrap functions (methods)
-			if (typeof val === "function") {
-				if (prop === "addEventListener" || prop === "removeEventListener") {
-					return (
-						type: string,
-						listener: EventListenerOrEventListenerObject,
-						options?: boolean | AddEventListenerOptions,
-					) => {
-						if (builderSettings.doc?.restrict_click_handlers && (type === "click" || type === "dblclick")) {
-							throw new Error(`Blocked: cannot add/remove ${type} event listeners`);
-						}
-						const realListener = unwrap(listener);
-						const result = val.call(target, type, realListener, options);
-						if (prop === "addEventListener") {
-							eventListeners.push({ target, type, listener: realListener, options });
-						}
-						return result;
-					};
-				}
-				return (...args: any[]) => {
-					const realArgs = args.map(unwrap);
-
-					// Do not allow inserting nodes outside the sandbox
-					for (const a of realArgs) {
-						if (a instanceof Node && !sandboxRoot.contains(a)) {
-							throw new Error("Blocked: external node insertion");
-						}
-					}
-
-					const result = val.apply(target, realArgs);
-					return wrap(result);
-				};
-			}
-
-			return val; // primitive allowed
-		},
-
-		set(target: Element, prop: string | symbol, value: any) {
-			if (typeof prop === "string" && BLOCKED_SET.has(prop)) {
-				throw new Error(`Blocked: cannot set ${String(prop)}`);
-			}
-
-			// Allow normal DOM props like src, value, className, id, etc.
-			try {
-				return Reflect.set(target, prop, unwrap(value), target);
-			} catch {
-				return false;
-			}
-		},
-	};
-
-	const proxiedRoot = wrap(sandboxRoot);
-	const proxiedThis = wrap(thisElement);
-
-	const context = {
-		document: proxiedRoot,
-		events: createEvents(proxiedRoot),
-		thisRef: proxiedThis,
-		props,
-		component_data: componentData,
-		// Escape hatches blocked
-		window: undefined,
-		globalThis: undefined,
-		eval: undefined,
-		Function: undefined,
-		setTimeout: undefined,
-		setInterval: undefined,
-	};
-
-	try {
-		const fn = createScriptFunction(userScript);
-		const userCleanup = fn(context);
-		return () => {
-			eventListeners.forEach(({ target, type, listener, options }) => {
-				target.removeEventListener(type, listener, options);
-			});
-			if (typeof userCleanup === "function") {
-				try {
-					userCleanup.call(proxiedThis);
-				} catch (error) {
-					console.error("Error cleaning up user script (restricted):", error);
-				}
-			}
-		};
-	} catch (error) {
-		console.error("Error in user script (restricted):", error);
-		return () => {
-			eventListeners.forEach(({ target, type, listener, options }) => {
-				target.removeEventListener(type, listener, options);
-			});
-		};
-	}
-}
-
-export { executeClientScriptRestricted, executeClientScriptUnrestricted };
diff --git a/frontend/src/utils/trackTarget.ts b/frontend/src/utils/trackTarget.ts
index 295bfa374..674d71e75 100644
--- a/frontend/src/utils/trackTarget.ts
+++ b/frontend/src/utils/trackTarget.ts
@@ -1,36 +1,35 @@
-import { useElementBounding } from "@vueuse/core";
 import { nextTick, onScopeDispose, reactive, watch, watchEffect } from "vue";
 import { addPxToNumber } from "./helpers";
+import { getElementRectInEditor } from "./canvasFrameDom";
 
-// All tracked targets share one MutationObserver on the canvas container. It is
-// created when the first target registers and disconnected once the last one is
-// removed, so it survives individual BlockEditor remounts (a component-scoped
-// observer would die with whichever editor happened to create it) without leaking
-// stale updaters across the session.
-const updateList = new Set<() => void>();
-let observer: MutationObserver | null = null;
-
-function startObserver(container: HTMLElement) {
-	observer = new MutationObserver(() => {
-		nextTick(() => updateList.forEach((fn) => fn()));
+function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvasProps: CanvasProps) {
+	const targetBounds = reactive({
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0,
+		update() {
+			const rect =
+				target.ownerDocument === host.ownerDocument
+					? target.getBoundingClientRect()
+					: getElementRectInEditor(target);
+			targetBounds.width = rect.width;
+			targetBounds.height = rect.height;
+			targetBounds.top = rect.top;
+			targetBounds.left = rect.left;
+		},
 	});
-	observer.observe(container, {
+	const observer = new MutationObserver(() => nextTick(targetBounds.update));
+	observer.observe(target.ownerDocument.body, {
 		attributes: true,
 		childList: true,
 		subtree: true,
 		attributeFilter: ["style", "class"],
 		characterData: true,
 	});
-}
-
-function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvasProps: CanvasProps) {
-	const targetBounds = reactive(useElementBounding(target));
-	const container = target.closest(".canvas-container") as HTMLElement | null;
-
-	updateList.add(targetBounds.update);
-	if (container && !observer) {
-		startObserver(container);
-	}
+	const resizeObserver = new ResizeObserver(() => targetBounds.update());
+	resizeObserver.observe(target);
+	targetBounds.update();
 
 	watch(canvasProps, () => nextTick(targetBounds.update), { deep: true });
 
@@ -42,11 +41,8 @@ function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvas
 	});
 
 	onScopeDispose(() => {
-		updateList.delete(targetBounds.update);
-		if (updateList.size === 0 && observer) {
-			observer.disconnect();
-			observer = null;
-		}
+		observer.disconnect();
+		resizeObserver.disconnect();
 	});
 
 	return targetBounds.update;
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index c50963e73..344e18343 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -2,85 +2,101 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { getBlock, getBlockInfo, isBlock } from "@/utils/helpers";
-import { useEventListener } from "@vueuse/core";
+import { getEventDocument, getEventPointInDocument } from "@/utils/canvasFrameDom";
 import { nextTick } from "vue";
 
 const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
 
 export function useBlockEventHandlers(target: HTMLElement) {
-	useEventListener(target, "click", handleClick);
-	useEventListener(target, "dblclick", handleDoubleClick);
-	useEventListener(target, "contextmenu", triggerContextMenu);
+	target.addEventListener("click", handleBlockClick);
+	target.addEventListener("dblclick", handleBlockDoubleClick);
+	target.addEventListener("contextmenu", handleBlockContextMenu);
 
-	function handleClick(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		if (canvasStore.preventClick) {
-			e.stopPropagation();
-			e.preventDefault();
-			canvasStore.preventClick = false;
-			return;
-		}
-		selectBlock(e);
+	return () => {
+		target.removeEventListener("click", handleBlockClick);
+		target.removeEventListener("dblclick", handleBlockDoubleClick);
+		target.removeEventListener("contextmenu", handleBlockContextMenu);
+	};
+}
+
+export function handleBlockClick(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	if (canvasStore.preventClick) {
 		e.stopPropagation();
 		e.preventDefault();
+		canvasStore.preventClick = false;
+		return;
 	}
+	selectBlock(e);
+	e.stopPropagation();
+	e.preventDefault();
+}
 
-	function handleDoubleClick(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		canvasStore.editableBlock = null;
-		const block = getBlock(e);
-		if (!block) return;
-		if (block.isImage()) {
-			nextTick(() => {
-				builderStore.openImageUpload = true;
-			});
-			e.stopPropagation();
-			return;
-		}
-		if (block.isText() || block.isLink() || block.isButton()) {
-			canvasStore.editableBlock = block;
-			e.stopPropagation();
-		}
-
-		// dblclick on container adds text block or selects text block if only one child
-		let children = block.getChildren();
-		if (block.isHTML()) {
-			document
-				.querySelector(`.editor[data-block-id="${block.blockId}"]`)
-				?.dispatchEvent(new MouseEvent("dblclick", e));
-			e.stopPropagation();
-		} else if (block.isContainer()) {
-			if (!children.length) {
-				const child = getBlockTemplate("text");
-				block.setBaseStyle("alignItems", "center");
-				block.setBaseStyle("justifyContent", "center");
-				const childBlock = block.addChild(child);
-				childBlock.makeBlockEditable();
-			} else if (children.length === 1 && children[0].isText()) {
-				const child = children[0];
-				child.makeBlockEditable();
-			}
-			e.stopPropagation();
-		}
+export function handleBlockDoubleClick(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	canvasStore.editableBlock = null;
+	const block = getBlock(e);
+	if (!block) return;
+	if (block.isImage()) {
+		nextTick(() => {
+			builderStore.openImageUpload = true;
+		});
+		e.stopPropagation();
+		return;
+	}
+	if (block.isText() || block.isLink() || block.isButton()) {
+		canvasStore.editableBlock = block;
+		e.stopPropagation();
 	}
 
-	function triggerContextMenu(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		const block = getBlock(e);
-		const { blockId } = getBlockInfo(e);
-		if (block && block.isRoot()) return;
+	// dblclick on container adds text block or selects text block if only one child
+	let children = block.getChildren();
+	if (block.isHTML()) {
+		const eventDocument = getEventDocument(e);
+		const EventConstructor = eventDocument.defaultView?.MouseEvent || MouseEvent;
+		eventDocument
+			.querySelector(`.editor[data-block-id="${block.blockId}"]`)
+			?.dispatchEvent(new EventConstructor("dblclick", { bubbles: true, cancelable: true }));
+		e.stopPropagation();
+	} else if (block.isContainer()) {
+		if (!children.length) {
+			const child = getBlockTemplate("text");
+			block.setBaseStyle("alignItems", "center");
+			block.setBaseStyle("justifyContent", "center");
+			const childBlock = block.addChild(child);
+			childBlock.makeBlockEditable();
+		} else if (children.length === 1 && children[0].isText()) {
+			const child = children[0];
+			child.makeBlockEditable();
+		}
 		e.stopPropagation();
-		e.preventDefault();
-		selectBlock(e);
-		nextTick(() => {
-			document
-				.querySelector(`.editor[data-block-id="${blockId}"]`)
-				?.dispatchEvent(new MouseEvent("contextmenu", e));
-		});
 	}
 }
 
+export function handleBlockContextMenu(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	const block = getBlock(e);
+	const { blockId } = getBlockInfo(e);
+	if (block && block.isRoot()) return;
+	e.stopPropagation();
+	e.preventDefault();
+	selectBlock(e);
+	const eventDocument = getEventDocument(e);
+	const point = getEventPointInDocument(e, eventDocument);
+	const EventConstructor = eventDocument.defaultView?.MouseEvent || MouseEvent;
+	nextTick(() => {
+		eventDocument.querySelector(`.editor[data-block-id="${blockId}"]`)?.dispatchEvent(
+			new EventConstructor("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX: point.x,
+				clientY: point.y,
+			}),
+		);
+	});
+}
+
 const isEditable = (e: MouseEvent) => {
 	const { blockId, breakpoint } = getBlockInfo(e);
 	// to ensure it is right block and not on different breakpoint
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index d49f787fd..34851a4ed 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -15,6 +15,7 @@ import { useDropZone } from "@vueuse/core";
 import { useTelemetry } from "frappe-ui/frappe";
 import { Ref } from "vue";
 import blockController from "./blockController";
+import { getComputedStyleFor } from "./canvasFrameDom";
 
 const { capture } = useTelemetry();
 const builderStore = useBuilderStore();
@@ -69,7 +70,9 @@ export function useCanvasDropZone(
 	});
 
 	const getInitialParentBlock = (ev: DragEvent) => {
-		const element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		const ownerDocument = (ev.currentTarget as Element | null)?.ownerDocument || document;
+		const element = ownerDocument.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		if (!element) return block.value as Block | null;
 		const targetElement = element.closest(".__builder_component__") as HTMLElement;
 
 		// set the hoveredBreakpoint from the target element to show placeholder at the correct breakpoint canvas
@@ -97,7 +100,8 @@ export function useCanvasDropZone(
 	const getBlockElement = (block: Block) => {
 		const breakpoint =
 			canvasStore.activeCanvas?.hoveredBreakpoint || canvasStore.activeCanvas?.activeBreakpoint;
-		return document.querySelector(
+		const root = breakpoint ? canvasStore.activeCanvas?.canvasProps?.frameRoots?.get(breakpoint) : null;
+		return root?.querySelector(
 			`.__builder_component__[data-block-id="${block.blockId}"][data-breakpoint="${breakpoint}"]`,
 		) as HTMLElement;
 	};
@@ -158,7 +162,7 @@ export function useCanvasDropZone(
 	};
 
 	const getLayoutDirection = (element: HTMLElement): LayoutDirection => {
-		const style = window.getComputedStyle(element);
+		const style = getComputedStyleFor(element);
 		const display = style.display;
 		if (display === "flex" || display === "inline-flex") {
 			return style.flexDirection.includes("row") ? "row" : "column";
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
index 97f85ffe4..39cf6c95c 100644
--- a/frontend/src/utils/useCanvasEvents.ts
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -3,6 +3,12 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import getBlockTemplate from "@/utils/blockTemplate";
+import {
+	getComputedStyleFor,
+	getEventDocument,
+	getEventPointInDocument,
+	startCanvasDrag,
+} from "@/utils/canvasFrameDom";
 import {
 	addPxToNumber,
 	getBlock,
@@ -30,15 +36,15 @@ export function useCanvasEvents(
 		if (builderStore.mode === "move") {
 			return;
 		}
-		const initialX = ev.clientX;
-		const initialY = ev.clientY;
 		if (builderStore.mode === "select") {
 			return;
 		} else {
 			if (builderStore.readOnlyMode) return;
 			const pauseId = canvasHistory.value?.pause();
 			ev.stopPropagation();
-			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+			const ownerDocument = getEventDocument(ev);
+			const initialPoint = getEventPointInDocument(ev, ownerDocument);
+			let element = ownerDocument.elementFromPoint(initialPoint.x, initialPoint.y) as HTMLElement;
 			let block = getRootBlock();
 			if (element) {
 				if (element.dataset.blockId) {
@@ -46,25 +52,29 @@ export function useCanvasEvents(
 				}
 			}
 			let parentBlock = getRootBlock();
-			if (element.dataset.blockId) {
+			if (element?.dataset.blockId) {
 				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
 				while (parentBlock && !parentBlock.canHaveChildren()) {
 					parentBlock = parentBlock.getParentBlock() || getRootBlock();
 				}
 			}
 			const child = getBlockTemplate(builderStore.mode);
-			const parentElement = document.body.querySelector(
+			const parentElement = ownerDocument.body.querySelector(
 				`.canvas [data-block-id="${parentBlock.blockId}"]`,
 			) as HTMLElement;
+			if (!parentElement) {
+				pauseId && canvasHistory.value?.resume(pauseId);
+				return;
+			}
 			const parentOldPosition = parentBlock.getStyle("position");
 			if (parentOldPosition === "static" || parentOldPosition === "inherit" || !parentOldPosition) {
 				parentBlock.setBaseStyle("position", "relative");
 			}
 			const parentElementBounds = parentElement.getBoundingClientRect();
-			let x = (ev.x - parentElementBounds.left) / canvasProps.scale;
-			let y = (ev.y - parentElementBounds.top) / canvasProps.scale;
-			const parentWidth = getNumberFromPx(getComputedStyle(parentElement).width);
-			const parentHeight = getNumberFromPx(getComputedStyle(parentElement).height);
+			let x = initialPoint.x - parentElementBounds.left;
+			let y = initialPoint.y - parentElementBounds.top;
+			const parentWidth = getNumberFromPx(getComputedStyleFor(parentElement).width);
+			const parentHeight = getNumberFromPx(getComputedStyleFor(parentElement).height);
 
 			const childBlock = parentBlock.addChild(child);
 			childBlock.setBaseStyle("position", "absolute");
@@ -76,26 +86,19 @@ export function useCanvasEvents(
 				counter++;
 			}
 
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				if (builderStore.mode === "text") {
-					return;
-				} else {
-					mouseMoveEvent.preventDefault();
-					let width = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-					let height = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
+			startCanvasDrag(ev, parentElement, {
+				onMove: ({ event, movementX, movementY }) => {
+					if (builderStore.mode === "text") return;
+					event.preventDefault();
+					let width = movementX;
+					let height = movementY;
 					width = clamp(width, 0, parentWidth);
 					height = clamp(height, 0, parentHeight);
 					const setFullWidth = width === parentWidth;
 					childBlock.setBaseStyle("width", setFullWidth ? "100%" : addPxToNumber(width));
 					childBlock.setBaseStyle("height", addPxToNumber(height));
-				}
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+				},
+				onEnd: () => {
 					parentBlock.setBaseStyle("position", parentOldPosition || "static");
 					childBlock.setBaseStyle("position", "static");
 					childBlock.setBaseStyle("top", "auto");
@@ -113,10 +116,10 @@ export function useCanvasEvents(
 						childBlock.setStyle("width", "auto");
 						childBlock.setStyle("height", "100%");
 					} else {
-						if (getNumberFromPx(childBlock.getStyle("width")) < 100) {
+						if (getNumberFromPx(String(childBlock.getStyle("width") || "")) < 100) {
 							childBlock.setBaseStyle("width", "100%");
 						}
-						if (getNumberFromPx(childBlock.getStyle("height")) < 100) {
+						if (getNumberFromPx(String(childBlock.getStyle("height") || "")) < 100) {
 							childBlock.setBaseStyle("height", "200px");
 						}
 					}
@@ -125,35 +128,25 @@ export function useCanvasEvents(
 						builderStore.openImageUpload = true;
 					}
 				},
-				{ once: true },
-			);
+			});
 		}
 	});
 
 	useEventListener(container, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			container.value.style.cursor = "grabbing";
-			const initialX = ev.clientX;
-			const initialY = ev.clientY;
 			const initialTranslateX = canvasProps.translateX;
 			const initialTranslateY = canvasProps.translateY;
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				mouseMoveEvent.preventDefault();
-				const diffX = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-				const diffY = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
-				canvasProps.translateX = initialTranslateX + diffX;
-				canvasProps.translateY = initialTranslateY + diffY;
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+			startCanvasDrag(ev, container.value, {
+				onMove: ({ event, movementX, movementY }) => {
+					event.preventDefault();
+					canvasProps.translateX = initialTranslateX + movementX / canvasProps.scale;
+					canvasProps.translateY = initialTranslateY + movementY / canvasProps.scale;
+				},
+				onEnd: () => {
 					container.value.style.cursor = "grab";
 				},
-				{ once: true },
-			);
+			});
 			ev.stopPropagation();
 			ev.preventDefault();
 		}
diff --git a/frontend/src/utils/useCanvasMarqueeSelection.ts b/frontend/src/utils/useCanvasMarqueeSelection.ts
index 652df5437..24e011a00 100644
--- a/frontend/src/utils/useCanvasMarqueeSelection.ts
+++ b/frontend/src/utils/useCanvasMarqueeSelection.ts
@@ -2,6 +2,7 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import type { CanvasProps } from "@/types/Builder/BuilderCanvas";
+import { getElementRectInEditor, getEventPointInEditor, getEventTarget } from "@/utils/canvasFrameDom";
 import { computed, reactive, ref, type Ref } from "vue";
 
 const MIN_MARQUEE_DRAG = 5;
@@ -19,6 +20,7 @@ const setsEqual = (a: Set<string>, b: Set<string>): boolean => {
 
 type UseCanvasMarqueeSelectionOptions = {
 	canvasContainer: Ref<HTMLElement | null>;
+	frameRoots: Map<string, HTMLElement>;
 	canvasProps: CanvasProps;
 	activeBreakpoint: Ref<string | null>;
 	selectedBlockIds: Ref<Set<string>>;
@@ -30,6 +32,7 @@ type UseCanvasMarqueeSelectionOptions = {
 export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOptions) {
 	const {
 		canvasContainer,
+		frameRoots,
 		canvasProps,
 		activeBreakpoint,
 		selectedBlockIds,
@@ -110,13 +113,16 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 
 		marquee.active = true;
 		marquee.visible = false;
-		marquee.startX = ev.clientX;
-		marquee.startY = ev.clientY;
-		marquee.currentX = ev.clientX;
-		marquee.currentY = ev.clientY;
+		const point = getEventPointInEditor(ev);
+		marquee.startX = point.x;
+		marquee.startY = point.y;
+		marquee.currentX = point.x;
+		marquee.currentY = point.y;
 		marqueeAdditiveSelection.value = ev.shiftKey || ev.metaKey || ev.ctrlKey;
 		marqueeInitialSelection.value = new Set(selectedBlockIds.value);
-		marqueeBreakpoint.value = getBreakpointAtPoint(ev.clientX, ev.clientY);
+		marqueeBreakpoint.value =
+			(getEventTarget(ev) as HTMLElement | null)?.closest(".canvas")?.getAttribute("data-breakpoint") ||
+			getBreakpointAtPoint(point.x, point.y);
 
 		window.addEventListener("mousemove", handleMarqueeMove);
 		window.addEventListener("mouseup", handleMarqueeEnd);
@@ -125,10 +131,10 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 	};
 
 	const snapshotBlockRects = (): BlockRectSnapshot[] => {
-		const container = canvasContainer.value;
-		if (!container) return [];
 		const target = marqueeBreakpoint.value || activeBreakpoint.value;
-		const elements = container.querySelectorAll<HTMLElement>(
+		const root = target ? frameRoots.get(target) : null;
+		if (!root) return [];
+		const elements = root.querySelectorAll<HTMLElement>(
 			".__builder_component__[data-block-id][data-breakpoint]",
 		);
 		const result: BlockRectSnapshot[] = [];
@@ -136,7 +142,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 			if ((el.dataset.breakpoint || null) !== target) continue;
 			const blockId = el.dataset.blockId;
 			if (!blockId || blockId === "root") continue;
-			const rect = el.getBoundingClientRect();
+			const rect = getElementRectInEditor(el);
 			if (!rect.width || !rect.height) continue;
 			const block = findBlock(blockId);
 			if (!block) continue;
@@ -169,8 +175,9 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		if (!marquee.active) return;
 
 		// Always capture the latest position — even if a rAF is already pending
-		marquee.currentX = ev.clientX;
-		marquee.currentY = ev.clientY;
+		const point = getEventPointInEditor(ev);
+		marquee.currentX = point.x;
+		marquee.currentY = point.y;
 
 		if (rafId !== null) return; // coalesce: only one rAF per frame
 
@@ -231,7 +238,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		if (builderStore.readOnlyMode) return false;
 		if (canvasStore.isDragging || canvasProps.panning || canvasProps.scaling) return false;
 
-		const target = ev.target as HTMLElement | null;
+		const target = getEventTarget(ev) as HTMLElement | null;
 		if (!target) return false;
 
 		if (target.closest("input, textarea, select, button, a, [contenteditable='true']")) {
@@ -247,13 +254,15 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 			return activeBreakpoint.value;
 		}
 
-		const canvases = Array.from(container.querySelectorAll(".canvas[data-breakpoint]")) as HTMLElement[];
+		const canvases = Array.from(
+			container.querySelectorAll("iframe[data-canvas-breakpoint]"),
+		) as HTMLIFrameElement[];
 
 		for (const canvasElement of canvases) {
 			const rect = canvasElement.getBoundingClientRect();
 			if (!rect.width || !rect.height) continue;
 			if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-				return canvasElement.dataset.breakpoint || activeBreakpoint.value;
+				return canvasElement.dataset.canvasBreakpoint || activeBreakpoint.value;
 			}
 		}