diff --git a/.talismanrc b/.talismanrc
index 0d131438..97637673 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -5,7 +5,7 @@ fileignoreconfig:
     - filename: README.md
       checksum: 568289bbe7c088967493db246dbf29e465382648ac574c1b1236be57d5662a38
     - filename: CHANGELOG.md
-      checksum: be8ee3f933a1e11d3d3f77339f982f0eca5a76311389d5a20da8645f83194b42
+      checksum: 09ed2613ba45ee13b6dbb4fc178911e93674d4e5c40af026d66266ea172374a4
     - filename: src/visualBuilder/components/__test__/fieldToolbar.test.tsx
       checksum: 3badd6a142456b6a361569e6fc546349a38ac6b366bef7fd5255d1e93220444e
     - filename: src/visualBuilder/components/Collab/ThreadPopup/__test__/CommentTextArea.test.tsx
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b2b5a45..3ab06bca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,49 @@
 # Changelog
 
+## [v3.2.5](https://github.com/contentstack/live-preview-sdk/compare/v3.2.4...v3.2.5)
+
+> 9 July 2025
+
+### Fixes
+
+- fix(VE-6459): psuedo-editable height collapse (Faraaz Biyabani - [#451](https://github.com/contentstack/live-preview-sdk/pull/451))
+- fix: start editing button not rendering (Sahil Chalke - [#447](https://github.com/contentstack/live-preview-sdk/pull/447))
+
+### General Changes
+
+- Optimisation: `init` to emit postMessage on `DOMContentLoaded` (Ayush Dubey - [#448](https://github.com/contentstack/live-preview-sdk/pull/448))
+- VE-6559:add isOpenInBuilder utility function and integrate into VisualBuilder components (Sahil Chalke - [#446](https://github.com/contentstack/live-preview-sdk/pull/446))
+
+### New Features
+
+- feat: add isOpenInBuilder utility function and integrate into VisualBuilder components (SahilCs15 - [8e80517](https://github.com/contentstack/live-preview-sdk/commit/8e80517437e979fd143a162cc5b293cabb84e94e))
+
+### Fixes
+
+- fix: extract the overriding function and improve unit tests (Faraaz Biyabani - [e8388d0](https://github.com/contentstack/live-preview-sdk/commit/e8388d05c49464ab3352cd566ca9a1976ff5f6b1))
+- fix: psuedo-editable height collapse (Faraaz Biyabani - [f28d629](https://github.com/contentstack/live-preview-sdk/commit/f28d629d362d5820b8583f748b42bd98d464c180))
+- fix: changed DOM events (csAyushDubey - [8e433b4](https://github.com/contentstack/live-preview-sdk/commit/8e433b41328acefd969ba157d25cf6f6ad5cc351))
+- fix: test fix (csAyushDubey - [af6acf5](https://github.com/contentstack/live-preview-sdk/commit/af6acf5eba9236ba3fb13bb32da8fdade9063d51))
+
+### Chores And Housekeeping
+
+- chore: update README.md to reference ContentstackLivePreview version 3.2.5 (hiteshshetty-dev - [e063d6e](https://github.com/contentstack/live-preview-sdk/commit/e063d6ef8fd95faaef612981f4586b4db66f9e4d))
+
 ## [v3.2.4](https://github.com/contentstack/live-preview-sdk/compare/v3.2.3...v3.2.4)
 
-> 10 June 2025
+> 16 June 2025
 
 ### General Changes
 
+- Release - 12th June (merge `stage_v3`) (Hitesh Shetty - [#445](https://github.com/contentstack/live-preview-sdk/pull/445))
+- Staging develop_v3 (Ayush Dubey - [#444](https://github.com/contentstack/live-preview-sdk/pull/444))
 - Revert 441 revert 439 collab (diwakarmk7 - [#443](https://github.com/contentstack/live-preview-sdk/pull/443))
 
+### Chores And Housekeeping
+
+- chore: talismanrc update (csAyushDubey - [c9c9bda](https://github.com/contentstack/live-preview-sdk/commit/c9c9bda746467c15da4cba9ac22f6428bbc7e1ef))
+- chore: readme update (csAyushDubey - [76bb848](https://github.com/contentstack/live-preview-sdk/commit/76bb84894055450762aa64df0c2a453d0f7782cd))
+
 ### General Changes
 
 - Revert "Revert "Collab"" (diwakarmk7 - [087ab2a](https://github.com/contentstack/live-preview-sdk/commit/087ab2aa818897ce409c61c2472f4b03cbf9762b))
diff --git a/README.md b/README.md
index 79f3a344..dea08ca9 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 
 ```html
 <script type='module'  integrity='sha384-b6G+ggU20rGxqCqsgaS6zludFgj5N11xsuXhMEIARMuQY2PtyDS04TU0H5goP+32' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.4';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.5';
 
      ContentstackLivePreview.init({
         stackDetails: {
diff --git a/package-lock.json b/package-lock.json
index 9c3f3650..11bc3a7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.2.4",
+    "version": "3.2.5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@contentstack/live-preview-utils",
-            "version": "3.2.4",
+            "version": "3.2.5",
             "license": "MIT",
             "dependencies": {
                 "@preact/compat": "17.1.2",
diff --git a/package.json b/package.json
index ef28d398..90997057 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.2.4",
+    "version": "3.2.5",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",
diff --git a/src/livePreview/__test__/live-preview.test.ts b/src/livePreview/__test__/live-preview.test.ts
index c2c362c8..dfdcce7d 100644
--- a/src/livePreview/__test__/live-preview.test.ts
+++ b/src/livePreview/__test__/live-preview.test.ts
@@ -460,7 +460,7 @@ describe("testing window event listeners", () => {
         document.body.appendChild(descPara);
         document.body.appendChild(linkPara);
 
-        addEventListenerMock = vi.spyOn(window, "addEventListener");
+        addEventListenerMock = vi.spyOn(document, "addEventListener");
     });
 
     afterEach(() => {
@@ -482,7 +482,7 @@ describe("testing window event listeners", () => {
         livePreviewInstance = new LivePreview();
 
         expect(addEventListenerMock).toBeCalledWith(
-            "load",
+            "DOMContentLoaded",
             expect.any(Function)
         );
         readyState.mockRestore();
diff --git a/src/livePreview/live-preview.ts b/src/livePreview/live-preview.ts
index 5b3b9a93..243f9272 100644
--- a/src/livePreview/live-preview.ts
+++ b/src/livePreview/live-preview.ts
@@ -39,10 +39,13 @@ export default class LivePreview {
 
         if (config.enable) {
             if (
-                typeof document !== undefined &&
-                document.readyState === "complete"
+                typeof document !== undefined
             ) {
-                this.requestDataSync();
+                if(document.readyState === "interactive" || document.readyState === "complete"){
+                    this.requestDataSync();
+                } else {
+                    document.addEventListener("DOMContentLoaded", this.requestDataSync);
+                }
             } else {
                 window.addEventListener("load", this.requestDataSync);
             }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4030ca0d..97b91903 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -27,4 +27,13 @@ export function isOpeningInTimeline(): boolean {
         return !!previewTimestamp;
     }
     return false;
-}
\ No newline at end of file
+}
+
+export function isOpenInBuilder(): boolean {
+    if (hasWindow()) {
+        const urlParams = new URLSearchParams(window.location.search);
+        const builder = urlParams.get("builder");
+        return !!builder;
+    }
+    return false;
+}
diff --git a/src/visualBuilder/__test__/click/fields/boolean.test.tsx b/src/visualBuilder/__test__/click/fields/boolean.test.tsx
index 9d68237e..15c66c92 100644
--- a/src/visualBuilder/__test__/click/fields/boolean.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/boolean.test.tsx
@@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(booleanField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                booleanField
+            );
         });
 
         afterAll(() => {
@@ -147,7 +159,6 @@ describe("When an element is clicked in visual builder mode", () => {
         });
 
         test("should send a focus field message to parent", async () => {
-
             await waitFor(() => {
                 expect(visualBuilderPostMessage?.send).toBeCalledWith(
                     VisualBuilderPostMessageEvents.FOCUS_FIELD,
diff --git a/src/visualBuilder/__test__/click/fields/date.test.tsx b/src/visualBuilder/__test__/click/fields/date.test.tsx
index 2fd2c808..ede2493c 100644
--- a/src/visualBuilder/__test__/click/fields/date.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/date.test.tsx
@@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(dateField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, dateField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                dateField
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/file.test.tsx b/src/visualBuilder/__test__/click/fields/file.test.tsx
index e4a1c63f..ddeba7cc 100644
--- a/src/visualBuilder/__test__/click/fields/file.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/file.test.tsx
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -105,7 +114,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(fileField);
             document.body.appendChild(imageField);
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, fileField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                fileField
+            );
         });
 
         afterAll(() => {
@@ -202,7 +214,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/group.test.tsx b/src/visualBuilder/__test__/click/fields/group.test.tsx
index 59d708ac..29e85aa5 100644
--- a/src/visualBuilder/__test__/click/fields/group.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/group.test.tsx
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -98,7 +107,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(groupField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, groupField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                groupField
+            );
         });
 
         afterAll(() => {
@@ -190,7 +202,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx
index df4cf553..a1dc4146 100644
--- a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -96,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => {
             );
             document.body.appendChild(htmlRteField);
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, htmlRteField)
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                htmlRteField
+            );
         });
 
         afterAll(() => {
@@ -177,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
         afterAll(() => {
             visualBuilder.destroy();
diff --git a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx
index db4198a6..d59f60b0 100644
--- a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     let mouseClickEvent: Event;
 
@@ -97,7 +106,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(jsonRteField);
             visualBuilder = new VisualBuilder();
 
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, jsonRteField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                jsonRteField
+            );
         });
 
         afterAll(() => {
@@ -178,7 +190,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/link.test.tsx b/src/visualBuilder/__test__/click/fields/link.test.tsx
index 39555366..f715526c 100644
--- a/src/visualBuilder/__test__/click/fields/link.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/link.test.tsx
@@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     beforeAll(() => {
         FieldSchemaMap.setFieldSchema(
@@ -91,7 +100,10 @@ describe("When an element is clicked in visual builder mode", () => {
 
             document.body.appendChild(linkField);
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, linkField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                linkField
+            );
         });
 
         afterAll(() => {
@@ -173,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/markdown.test.tsx b/src/visualBuilder/__test__/click/fields/markdown.test.tsx
index 1c9c67ef..1ac38aa0 100644
--- a/src/visualBuilder/__test__/click/fields/markdown.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/markdown.test.tsx
@@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
-describe("When an element is clicked in visual builder mode", () => {
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
 
+describe("When an element is clicked in visual builder mode", () => {
     beforeAll(() => {
         FieldSchemaMap.setFieldSchema(
             "all_fields",
@@ -93,7 +101,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(markdownField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, markdownField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                markdownField
+            );
         });
 
         afterAll(() => {
@@ -174,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
index d4bb1c79..5892dcd7 100644
--- a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx
@@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
-describe("When an element is clicked in visual builder mode", () => {
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
 
+describe("When an element is clicked in visual builder mode", () => {
     beforeAll(async () => {
         FieldSchemaMap.setFieldSchema(
             "all_fields",
@@ -115,7 +123,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(multiLineField);
             visualBuilder = new VisualBuilder();
 
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, multiLineField)
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                multiLineField
+            );
         });
 
         afterAll(() => {
@@ -222,12 +233,15 @@ describe("When an element is clicked in visual builder mode", () => {
                 audienceMode: false,
             };
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
             visualBuilder.destroy();
-        })
+        });
         test("should have outline", () => {
             expect(container.classList.contains("cslp-edit-mode"));
         });
@@ -252,7 +266,6 @@ describe("When an element is clicked in visual builder mode", () => {
                     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
                 );
             });
-
         });
 
         test("container should not contain a contenteditable attribute but the children can", async () => {
diff --git a/src/visualBuilder/__test__/click/fields/number.test.tsx b/src/visualBuilder/__test__/click/fields/number.test.tsx
index 2ac743d2..66669c22 100644
--- a/src/visualBuilder/__test__/click/fields/number.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/number.test.tsx
@@ -53,6 +53,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is clicked in visual builder mode", () => {
     beforeAll(async () => {
         FieldSchemaMap.setFieldSchema(
@@ -118,7 +127,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(numberField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, numberField)
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                numberField
+            );
         });
 
         afterAll(() => {
@@ -214,7 +226,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container)
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/reference.test.tsx b/src/visualBuilder/__test__/click/fields/reference.test.tsx
index d15b8798..980ae7f5 100644
--- a/src/visualBuilder/__test__/click/fields/reference.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/reference.test.tsx
@@ -9,7 +9,11 @@ import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage";
 import { vi } from "vitest";
 import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types";
 import { VisualBuilder } from "../../../index";
-import { mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction } from "../../../../__test__/utils";
+import {
+    mockGetBoundingClientRect,
+    sleep,
+    triggerAndWaitForClickAction,
+} from "../../../../__test__/utils";
 
 vi.mock("../../../components/FieldToolbar", () => {
     return {
@@ -49,8 +53,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
-describe("When an element is clicked in visual builder mode", () => {
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
 
+describe("When an element is clicked in visual builder mode", () => {
     beforeAll(async () => {
         FieldSchemaMap.setFieldSchema(
             "all_fields",
@@ -93,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(referenceField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, referenceField)
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                referenceField
+            );
         });
 
         afterAll(() => {
@@ -105,10 +120,13 @@ describe("When an element is clicked in visual builder mode", () => {
                 "[data-testid='visual-builder__overlay--outline']"
             );
             await waitFor(() => {
-                expect(hoverOutline).toHaveAttribute("style")
+                expect(hoverOutline).toHaveAttribute("style");
             });
-            
-            expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);");
+
+            expect(hoverOutline).toHaveAttribute(
+                "style",
+                "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"
+            );
         });
 
         test("should have an overlay", () => {
@@ -180,7 +198,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
@@ -192,9 +213,12 @@ describe("When an element is clicked in visual builder mode", () => {
                 "[data-testid='visual-builder__overlay--outline']"
             );
             await waitFor(() => {
-                expect(hoverOutline).toHaveAttribute("style")
+                expect(hoverOutline).toHaveAttribute("style");
             });
-            expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);");
+            expect(hoverOutline).toHaveAttribute(
+                "style",
+                "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"
+            );
         });
 
         test("should have an overlay", () => {
diff --git a/src/visualBuilder/__test__/click/fields/select.test.tsx b/src/visualBuilder/__test__/click/fields/select.test.tsx
index 06613e3e..658ebff4 100644
--- a/src/visualBuilder/__test__/click/fields/select.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/select.test.tsx
@@ -54,8 +54,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
-describe("When an element is clicked in visual builder mode", () => {
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
 
+describe("When an element is clicked in visual builder mode", () => {
     beforeAll(() => {
         FieldSchemaMap.setFieldSchema(
             "all_fields",
@@ -97,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(selectField);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, selectField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                selectField
+            );
         });
 
         afterAll(() => {
@@ -178,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(container);
 
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/click/fields/single-line.test.tsx b/src/visualBuilder/__test__/click/fields/single-line.test.tsx
index 2e96ef95..a85720ea 100644
--- a/src/visualBuilder/__test__/click/fields/single-line.test.tsx
+++ b/src/visualBuilder/__test__/click/fields/single-line.test.tsx
@@ -55,8 +55,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
-describe("When an element is clicked in visual builder mode", () => {
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
 
+describe("When an element is clicked in visual builder mode", () => {
     beforeAll(() => {
         FieldSchemaMap.setFieldSchema(
             "all_fields",
@@ -134,12 +142,15 @@ describe("When an element is clicked in visual builder mode", () => {
                 audienceMode: false,
             };
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, singleLineField);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                singleLineField
+            );
         });
 
         afterAll(() => {
             visualBuilder.destroy();
-        })
+        });
 
         test("should have outline", () => {
             expect(singleLineField.classList.contains("cslp-edit-mode"));
@@ -210,7 +221,7 @@ describe("When an element is clicked in visual builder mode", () => {
                     return Promise.resolve({});
                 }
             );
-        
+
             container = document.createElement("div");
             container.setAttribute(
                 "data-cslp",
@@ -243,7 +254,10 @@ describe("When an element is clicked in visual builder mode", () => {
                 audienceMode: false,
             };
             visualBuilder = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, container);
+            await triggerAndWaitForClickAction(
+                visualBuilderPostMessage,
+                container
+            );
         });
 
         afterAll(() => {
diff --git a/src/visualBuilder/__test__/hover/fields/boolean.test.ts b/src/visualBuilder/__test__/hover/fields/boolean.test.ts
index 585919f9..5fb7c0a8 100644
--- a/src/visualBuilder/__test__/hover/fields/boolean.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/boolean.test.ts
@@ -1,12 +1,16 @@
 import { screen } from "@testing-library/preact";
 import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap";
-import { waitForBuilderSDKToBeInitialized, waitForHoverOutline } from "../../../../__test__/utils";
+import {
+    waitForBuilderSDKToBeInitialized,
+    waitForHoverOutline,
+} from "../../../../__test__/utils";
 import Config from "../../../../configManager/configManager";
 import { VisualBuilder } from "../../../index";
 import { FieldSchemaMap } from "../../../utils/fieldSchemaMap";
 import { mockDomRect } from "./mockDomRect";
 import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage";
 import { act } from "@testing-library/preact";
+import { isOpenInBuilder } from "../../../../utils";
 
 vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     const { getAllContentTypes } = await vi.importActual<
@@ -28,6 +32,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -91,7 +104,10 @@ describe("When an element is hovered in visual builder mode", () => {
                 booleanField.dispatchEvent(mousemoveEvent);
             });
             await waitForHoverOutline();
-            expect(booleanField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.boolean");
+            expect(booleanField).toHaveAttribute(
+                "data-cslp",
+                "all_fields.bltapikey.en-us.boolean"
+            );
             expect(booleanField).not.toHaveAttribute("contenteditable");
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
diff --git a/src/visualBuilder/__test__/hover/fields/date.test.ts b/src/visualBuilder/__test__/hover/fields/date.test.ts
index 054c017d..7a885c71 100644
--- a/src/visualBuilder/__test__/hover/fields/date.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/date.test.ts
@@ -26,6 +26,17 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", () => {
+    return {
+        __esModule: true,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+        isOpeningInTimeline: vi.fn().mockReturnValue(false),
+        hasWindow: vi.fn().mockReturnValue(true),
+        addLivePreviewQueryTags: vi.fn(),
+        addParamsToUrl: vi.fn(),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -89,7 +100,10 @@ describe("When an element is hovered in visual builder mode", () => {
                 dataField.dispatchEvent(mousemoveEvent);
             });
             await waitForHoverOutline();
-            expect(dataField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.date");
+            expect(dataField).toHaveAttribute(
+                "data-cslp",
+                "all_fields.bltapikey.en-us.date"
+            );
             expect(dataField).not.toHaveAttribute("contenteditable");
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
diff --git a/src/visualBuilder/__test__/hover/fields/file.test.ts b/src/visualBuilder/__test__/hover/fields/file.test.ts
index 1e1d3912..50483592 100644
--- a/src/visualBuilder/__test__/hover/fields/file.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/file.test.ts
@@ -26,18 +26,32 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 const convertToPx = (value: number) => {
-    return `${value}px`
-}
+    return `${value}px`;
+};
 const matchDimensions = (element: HTMLElement, hoverOutline: HTMLElement) => {
-    const elementDimensions = element.getBoundingClientRect()
+    const elementDimensions = element.getBoundingClientRect();
     // @ts-expect-error - TS doesn't know that style is a CSSStyleDeclaration
-    const hoverOutlineDimensions = hoverOutline?.style?._values as CSSStyleDeclaration;
+    const hoverOutlineDimensions = hoverOutline?.style
+        ?._values as CSSStyleDeclaration;
     expect(convertToPx(elementDimensions.x)).toBe(hoverOutlineDimensions.left);
     expect(convertToPx(elementDimensions.y)).toBe(hoverOutlineDimensions.top);
-    expect(convertToPx(elementDimensions.width)).toBe(hoverOutlineDimensions.width);
-    expect(convertToPx(elementDimensions.height)).toBe(hoverOutlineDimensions.height);
-}
+    expect(convertToPx(elementDimensions.width)).toBe(
+        hoverOutlineDimensions.width
+    );
+    expect(convertToPx(elementDimensions.height)).toBe(
+        hoverOutlineDimensions.height
+    );
+};
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
@@ -117,12 +131,12 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
-            expect(customCursor).toHaveAttribute('data-icon', 'file');
+            expect(customCursor).toHaveAttribute("data-icon", "file");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -135,13 +149,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'file');
+            expect(customCursor).toHaveAttribute("data-icon", "file");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -224,12 +238,12 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
-            expect(customCursor?.getAttribute('data-icon')).toBe('file');
+            expect(customCursor?.getAttribute("data-icon")).toBe("file");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -241,16 +255,15 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             ) as HTMLElement;
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             matchDimensions(firstFileField, hoverOutline);
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
-            expect(customCursor?.getAttribute('data-icon')).toBe('file');
+            expect(customCursor?.getAttribute("data-icon")).toBe("file");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
-            
         });
 
         test("should have outline and custom cursor on the url", async () => {
@@ -261,7 +274,7 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             ) as HTMLElement;
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
             matchDimensions(firstImageField, hoverOutline);
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
diff --git a/src/visualBuilder/__test__/hover/fields/group.test.ts b/src/visualBuilder/__test__/hover/fields/group.test.ts
index 9626054a..91fedae0 100644
--- a/src/visualBuilder/__test__/hover/fields/group.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/group.test.ts
@@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
@@ -104,13 +113,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'group');
+            expect(customCursor).toHaveAttribute("data-icon", "group");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -134,13 +143,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'singleline');
+            expect(customCursor).toHaveAttribute("data-icon", "singleline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -215,13 +224,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'group');
+            expect(customCursor).toHaveAttribute("data-icon", "group");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
 
             await act(async () => {
@@ -232,7 +241,7 @@ describe("When an element is hovered in visual builder mode", () => {
             const newCustomCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
-            expect(newCustomCursor).toHaveAttribute('data-icon', 'multiline');
+            expect(newCustomCursor).toHaveAttribute("data-icon", "multiline");
             expect(newCustomCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts
index f71092e5..7850d9d5 100644
--- a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts
@@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'html_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "html_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'html_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "html_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'html_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "html_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts
index 835cba9a..4b1ad7a4 100644
--- a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts
@@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'json_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "json_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'json_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "json_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'json_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "json_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/link.test.ts b/src/visualBuilder/__test__/hover/fields/link.test.ts
index 88044fb5..bd9ca996 100644
--- a/src/visualBuilder/__test__/hover/fields/link.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/link.test.ts
@@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -98,7 +107,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'link');
+            expect(customCursor).toHaveAttribute("data-icon", "link");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -162,7 +171,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'link');
+            expect(customCursor).toHaveAttribute("data-icon", "link");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -180,7 +189,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'link');
+            expect(customCursor).toHaveAttribute("data-icon", "link");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/markdown.test.ts b/src/visualBuilder/__test__/hover/fields/markdown.test.ts
index 2595450c..04a3bba9 100644
--- a/src/visualBuilder/__test__/hover/fields/markdown.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/markdown.test.ts
@@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
@@ -93,13 +102,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "markdown_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -160,13 +169,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "markdown_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -178,13 +187,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte');
+            expect(customCursor).toHaveAttribute("data-icon", "markdown_rte");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts
index d47ead2e..e86b9d26 100644
--- a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts
@@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
@@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = screen.getByTestId(
                 "visual-builder__hover-outline"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'multiline');
+            expect(customCursor).toHaveAttribute("data-icon", "multiline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -158,13 +167,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'multiline');
+            expect(customCursor).toHaveAttribute("data-icon", "multiline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -176,13 +185,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'multiline');
+            expect(customCursor).toHaveAttribute("data-icon", "multiline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/number.test.ts b/src/visualBuilder/__test__/hover/fields/number.test.ts
index 4d4f6854..0732bdda 100644
--- a/src/visualBuilder/__test__/hover/fields/number.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/number.test.ts
@@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'number');
+            expect(customCursor).toHaveAttribute("data-icon", "number");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -156,13 +165,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'number');
+            expect(customCursor).toHaveAttribute("data-icon", "number");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -174,13 +183,13 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveAttribute('style');
+            expect(hoverOutline).toHaveAttribute("style");
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'number');
+            expect(customCursor).toHaveAttribute("data-icon", "number");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/reference.test.ts b/src/visualBuilder/__test__/hover/fields/reference.test.ts
index c37a5bf4..f7076cce 100644
--- a/src/visualBuilder/__test__/hover/fields/reference.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/reference.test.ts
@@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -89,7 +98,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 referenceField.dispatchEvent(mousemoveEvent);
             });
             await waitForHoverOutline();
-            
+
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
@@ -99,7 +108,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'reference');
+            expect(customCursor).toHaveAttribute("data-icon", "reference");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
@@ -165,7 +174,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'reference');
+            expect(customCursor).toHaveAttribute("data-icon", "reference");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -183,7 +192,7 @@ describe("When an element is hovered in visual builder mode", () => {
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'reference');
+            expect(customCursor).toHaveAttribute("data-icon", "reference");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/hover/fields/select.test.ts b/src/visualBuilder/__test__/hover/fields/select.test.ts
index adf80857..34c54d37 100644
--- a/src/visualBuilder/__test__/hover/fields/select.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/select.test.ts
@@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
diff --git a/src/visualBuilder/__test__/hover/fields/single-line.test.ts b/src/visualBuilder/__test__/hover/fields/single-line.test.ts
index 14ceba69..63694781 100644
--- a/src/visualBuilder/__test__/hover/fields/single-line.test.ts
+++ b/src/visualBuilder/__test__/hover/fields/single-line.test.ts
@@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
     disconnect: vi.fn(),
 }));
 
+vi.mock("../../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("When an element is hovered in visual builder mode", () => {
     let mousemoveEvent: Event;
 
@@ -90,7 +99,9 @@ describe("When an element is hovered in visual builder mode", () => {
             const hoverOutline = screen.getByTestId(
                 "visual-builder__hover-outline"
             );
-            expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;");
+            expect(hoverOutline).toHaveStyle(
+                "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"
+            );
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
@@ -124,7 +135,7 @@ describe("When an element is hovered in visual builder mode", () => {
 
         test("should have outline and custom cursor", async () => {
             await act(() => {
-              singleLineField.dispatchEvent(mousemoveEvent);
+                singleLineField.dispatchEvent(mousemoveEvent);
             });
             await waitForHoverOutline();
             expect(singleLineField).not.toHaveAttribute("style");
@@ -189,18 +200,20 @@ describe("When an element is hovered in visual builder mode", () => {
             });
             container.dispatchEvent(mousemoveEvent);
             await waitForHoverOutline();
-            expect(container).not.toHaveAttribute('style');
+            expect(container).not.toHaveAttribute("style");
 
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveStyle("top: 34px; left: 34px; width: 828px; height: 54.3984375px;");
+            expect(hoverOutline).toHaveStyle(
+                "top: 34px; left: 34px; width: 828px; height: 54.3984375px;"
+            );
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'singleline');
+            expect(customCursor).toHaveAttribute("data-icon", "singleline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
 
@@ -209,17 +222,19 @@ describe("When an element is hovered in visual builder mode", () => {
                 firstSingleLineField.dispatchEvent(mousemoveEvent);
             });
             await waitForHoverOutline();
-            expect(firstSingleLineField).not.toHaveAttribute('style');
+            expect(firstSingleLineField).not.toHaveAttribute("style");
             const hoverOutline = document.querySelector(
                 "[data-testid='visual-builder__hover-outline']"
             );
-            expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;");
+            expect(hoverOutline).toHaveStyle(
+                "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"
+            );
 
             const customCursor = document.querySelector(
                 `[data-testid="visual-builder__cursor"]`
             );
 
-            expect(customCursor).toHaveAttribute('data-icon', 'singleline');
+            expect(customCursor).toHaveAttribute("data-icon", "singleline");
             expect(customCursor?.classList.contains("visible")).toBeTruthy();
         });
     });
diff --git a/src/visualBuilder/__test__/index.test.ts b/src/visualBuilder/__test__/index.test.ts
index 4eba7789..571902d0 100644
--- a/src/visualBuilder/__test__/index.test.ts
+++ b/src/visualBuilder/__test__/index.test.ts
@@ -1,6 +1,13 @@
 import crypto from "crypto";
 import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap";
-import { getElementBytestId, mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized, waitForToolbaxToBeVisible } from "../../__test__/utils";
+import {
+    getElementBytestId,
+    mockGetBoundingClientRect,
+    sleep,
+    triggerAndWaitForClickAction,
+    waitForBuilderSDKToBeInitialized,
+    waitForToolbaxToBeVisible,
+} from "../../__test__/utils";
 import Config from "../../configManager/configManager";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import { waitFor, screen, cleanup } from "@testing-library/preact";
@@ -32,184 +39,251 @@ vi.mock("../utils/visualBuilderPostMessage", async () => {
     };
 });
 
+vi.mock("../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 Object.defineProperty(globalThis, "crypto", {
     value: {
         getRandomValues: (arr: Array<any>) => crypto.randomBytes(arr.length),
-        randomUUID: () => crypto.randomUUID()
+        randomUUID: () => crypto.randomUUID(),
     },
 });
 // Increase the timeout for the test
-describe("Visual builder", () => {
-    beforeAll(() => {
-        FieldSchemaMap.setFieldSchema(
-            "all_fields",
-            getFieldSchemaMap().all_fields
-        );
-        Config.set("mode", 2);
-        vi.spyOn(
-            document.documentElement,
-            "clientWidth",
-            "get"
-        ).mockReturnValue(100);
-        vi.spyOn(
-            document.documentElement,
-            "clientHeight",
-            "get"
-        ).mockReturnValue(100);
-        vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
-    });
-
-    beforeEach(() => {
-        (visualBuilderPostMessage?.send as Mock).mockClear();
-        document.getElementsByTagName("html")[0].innerHTML = "";
-        cleanup();
-    });
-
-    afterAll(() => {
-        FieldSchemaMap.clear();
-    });
-
-    test("should append a visual builder container to the DOM", async () => {
-        let visualBuilderDOM = document.querySelector(
-            ".visual-builder__container"
-        );
-
-        expect(visualBuilderDOM).toBeNull();
-
-        const x = new VisualBuilder();
-        await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage);
-
-        visualBuilderDOM = document.querySelector(
-            `[data-testid="visual-builder__container"]`
-        );
-
-        expect(document.querySelector('[data-testid="visual-builder__cursor"]')).toBeInTheDocument();
-        expect(document.querySelector('[data-testid="visual-builder__focused-toolbar"]')).toBeInTheDocument();
-        expect(document.querySelector('[data-testid="visual-builder__hover-outline"]')).toBeInTheDocument();
-        expect(document.querySelector('[data-testid="visual-builder__overlay__wrapper"]')).toBeInTheDocument();
-        x.destroy();
-    }, { timeout: 20 * 1000 });
-
-    test("should add overlay to DOM when clicked", async () => {
-        const h1Tag = document.createElement("h1");
-        h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE;
-        h1Tag.setAttribute(
-            "data-cslp",
-            "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
-        );
-        document.body.appendChild(h1Tag);
-        mockGetBoundingClientRect(h1Tag);
-        const x = new VisualBuilder();
-        await triggerAndWaitForClickAction(visualBuilderPostMessage, h1Tag);
-        await waitFor(() => {
-            const overlayOutline = document.querySelector('[data-testid="visual-builder__overlay--outline"]');
-            expect(overlayOutline).toHaveStyle({
-                top: "10px",
-                left: "10px",
-                width: "10px",
-                height: "5px",
-                "outline-color": "rgb(113, 92, 221)"
-            });
-        })
-        x.destroy();
-    }, { timeout: 20 * 1000 });
+describe(
+    "Visual builder",
+    () => {
+        beforeAll(() => {
+            FieldSchemaMap.setFieldSchema(
+                "all_fields",
+                getFieldSchemaMap().all_fields
+            );
+            Config.set("mode", 2);
+            vi.spyOn(
+                document.documentElement,
+                "clientWidth",
+                "get"
+            ).mockReturnValue(100);
+            vi.spyOn(
+                document.documentElement,
+                "clientHeight",
+                "get"
+            ).mockReturnValue(100);
+            vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
+        });
 
-    describe("on click, the sdk", () => {
-        afterEach(() => {
+        beforeEach(() => {
+            (visualBuilderPostMessage?.send as Mock).mockClear();
             document.getElementsByTagName("html")[0].innerHTML = "";
+            cleanup();
         });
 
-        test("should do nothing if data-cslp not available", async () => {
-            const h1 = document.createElement("h1");
+        afterAll(() => {
+            FieldSchemaMap.clear();
+        });
 
-            document.body.appendChild(h1);
-            const x = new VisualBuilder();
-            await triggerAndWaitForClickAction(visualBuilderPostMessage, h1, {skipWaitForFieldType: true});
+        test(
+            "should append a visual builder container to the DOM",
+            async () => {
+                let visualBuilderDOM = document.querySelector(
+                    ".visual-builder__container"
+                );
 
-            expect(h1).not.toHaveAttribute("contenteditable");
-            expect(h1).not.toHaveAttribute("data-cslp-field-type");
-            x.destroy();
-        });
+                expect(visualBuilderDOM).toBeNull();
 
-        describe("inline elements must be contenteditable", () => {
-            let visualBuilder: VisualBuilder;
-            let h1: HTMLHeadingElement
-            beforeAll(() => {
-                (visualBuilderPostMessage?.send as Mock).mockImplementation(
-                    (eventName: string, args) => {
-                        if (
-                            eventName ===
-                            VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                        ) {
-                            const values: Record<string, any> = {
-                                single_line: INLINE_EDITABLE_FIELD_VALUE,
-                                multi_line: INLINE_EDITABLE_FIELD_VALUE,
-                                file: {
-                                    uid: "fileUid",
-                                },
-                            };
-                            return Promise.resolve({
-                                fieldData: values[args.entryPath],
-                            });
-                        } else if (
-                            eventName ===
-                            VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
-                        ) {
-                            const names: Record<string, string> = {
-                                "all_fields.blt58a50b4cebae75c5.en-us.single_line":
-                                    "Single Line",
-                                "all_fields.blt58a50b4cebae75c5.en-us.multi_line":
-                                    "Multi Line",
-                                "all_fields.blt58a50b4cebae75c5.en-us.file":
-                                    "File",
-                            };
-                            return Promise.resolve({
-                                [args.cslp]: names[args.cslp],
-                            });
-                        }
-                        return Promise.resolve({});
-                    }
+                const x = new VisualBuilder();
+                await waitForBuilderSDKToBeInitialized(
+                    visualBuilderPostMessage
                 );
-            });
 
-            beforeEach(async () => {
-                document.getElementsByTagName("html")[0].innerHTML = "";
-                h1 = document.createElement("h1");
-                h1.textContent = INLINE_EDITABLE_FIELD_VALUE;
-                mockGetBoundingClientRect(h1);
-                h1.setAttribute(
+                visualBuilderDOM = document.querySelector(
+                    `[data-testid="visual-builder__container"]`
+                );
+
+                expect(
+                    document.querySelector(
+                        '[data-testid="visual-builder__cursor"]'
+                    )
+                ).toBeInTheDocument();
+                expect(
+                    document.querySelector(
+                        '[data-testid="visual-builder__focused-toolbar"]'
+                    )
+                ).toBeInTheDocument();
+                expect(
+                    document.querySelector(
+                        '[data-testid="visual-builder__hover-outline"]'
+                    )
+                ).toBeInTheDocument();
+                expect(
+                    document.querySelector(
+                        '[data-testid="visual-builder__overlay__wrapper"]'
+                    )
+                ).toBeInTheDocument();
+                x.destroy();
+            },
+            { timeout: 20 * 1000 }
+        );
+
+        test(
+            "should add overlay to DOM when clicked",
+            async () => {
+                const h1Tag = document.createElement("h1");
+                h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE;
+                h1Tag.setAttribute(
                     "data-cslp",
-                    "all_fields.blt58a50b4cebae75c5.en-us.single_line"
+                    "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
+                );
+                document.body.appendChild(h1Tag);
+                mockGetBoundingClientRect(h1Tag);
+                const x = new VisualBuilder();
+                await triggerAndWaitForClickAction(
+                    visualBuilderPostMessage,
+                    h1Tag
                 );
+                await waitFor(() => {
+                    const overlayOutline = document.querySelector(
+                        '[data-testid="visual-builder__overlay--outline"]'
+                    );
+                    expect(overlayOutline).toHaveStyle({
+                        top: "10px",
+                        left: "10px",
+                        width: "10px",
+                        height: "5px",
+                        "outline-color": "rgb(113, 92, 221)",
+                    });
+                });
+                x.destroy();
+            },
+            { timeout: 20 * 1000 }
+        );
 
-                document.body.appendChild(h1);
-                visualBuilder = new VisualBuilder();
-            })
+        describe("on click, the sdk", () => {
             afterEach(() => {
-                visualBuilder.destroy();
-            })
-            test("single line should be contenteditable", async () => {
-                await triggerAndWaitForClickAction(visualBuilderPostMessage, h1);
+                document.getElementsByTagName("html")[0].innerHTML = "";
+            });
 
-                await waitFor(() => {
-                    expect(h1).toHaveAttribute("contenteditable");
-                    expect(h1).toHaveAttribute("data-cslp-field-type", "singleline");
-                })
-            }, { timeout: 40 * 1000 });
+            test("should do nothing if data-cslp not available", async () => {
+                const h1 = document.createElement("h1");
 
-            test("multi line should be contenteditable", async () => {
-                h1.setAttribute(
-                    "data-cslp",
-                    "all_fields.blt58a50b4cebae75c5.en-us.multi_line"
+                document.body.appendChild(h1);
+                const x = new VisualBuilder();
+                await triggerAndWaitForClickAction(
+                    visualBuilderPostMessage,
+                    h1,
+                    { skipWaitForFieldType: true }
                 );
-                await triggerAndWaitForClickAction(visualBuilderPostMessage, h1);
 
-                await waitFor(() => {
-                    expect(h1).toHaveAttribute("contenteditable");
-                    expect(h1).toHaveAttribute("data-cslp-field-type", "multiline");
-                })
-            }, { timeout: 40 * 1000 });
+                expect(h1).not.toHaveAttribute("contenteditable");
+                expect(h1).not.toHaveAttribute("data-cslp-field-type");
+                x.destroy();
+            });
+
+            describe("inline elements must be contenteditable", () => {
+                let visualBuilder: VisualBuilder;
+                let h1: HTMLHeadingElement;
+                beforeAll(() => {
+                    (visualBuilderPostMessage?.send as Mock).mockImplementation(
+                        (eventName: string, args) => {
+                            if (
+                                eventName ===
+                                VisualBuilderPostMessageEvents.GET_FIELD_DATA
+                            ) {
+                                const values: Record<string, any> = {
+                                    single_line: INLINE_EDITABLE_FIELD_VALUE,
+                                    multi_line: INLINE_EDITABLE_FIELD_VALUE,
+                                    file: {
+                                        uid: "fileUid",
+                                    },
+                                };
+                                return Promise.resolve({
+                                    fieldData: values[args.entryPath],
+                                });
+                            } else if (
+                                eventName ===
+                                VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
+                            ) {
+                                const names: Record<string, string> = {
+                                    "all_fields.blt58a50b4cebae75c5.en-us.single_line":
+                                        "Single Line",
+                                    "all_fields.blt58a50b4cebae75c5.en-us.multi_line":
+                                        "Multi Line",
+                                    "all_fields.blt58a50b4cebae75c5.en-us.file":
+                                        "File",
+                                };
+                                return Promise.resolve({
+                                    [args.cslp]: names[args.cslp],
+                                });
+                            }
+                            return Promise.resolve({});
+                        }
+                    );
+                });
 
+                beforeEach(async () => {
+                    document.getElementsByTagName("html")[0].innerHTML = "";
+                    h1 = document.createElement("h1");
+                    h1.textContent = INLINE_EDITABLE_FIELD_VALUE;
+                    mockGetBoundingClientRect(h1);
+                    h1.setAttribute(
+                        "data-cslp",
+                        "all_fields.blt58a50b4cebae75c5.en-us.single_line"
+                    );
+
+                    document.body.appendChild(h1);
+                    visualBuilder = new VisualBuilder();
+                });
+                afterEach(() => {
+                    visualBuilder.destroy();
+                });
+                test(
+                    "single line should be contenteditable",
+                    async () => {
+                        await triggerAndWaitForClickAction(
+                            visualBuilderPostMessage,
+                            h1
+                        );
+
+                        await waitFor(() => {
+                            expect(h1).toHaveAttribute("contenteditable");
+                            expect(h1).toHaveAttribute(
+                                "data-cslp-field-type",
+                                "singleline"
+                            );
+                        });
+                    },
+                    { timeout: 40 * 1000 }
+                );
+
+                test(
+                    "multi line should be contenteditable",
+                    async () => {
+                        h1.setAttribute(
+                            "data-cslp",
+                            "all_fields.blt58a50b4cebae75c5.en-us.multi_line"
+                        );
+                        await triggerAndWaitForClickAction(
+                            visualBuilderPostMessage,
+                            h1
+                        );
+
+                        await waitFor(() => {
+                            expect(h1).toHaveAttribute("contenteditable");
+                            expect(h1).toHaveAttribute(
+                                "data-cslp-field-type",
+                                "multiline"
+                            );
+                        });
+                    },
+                    { timeout: 40 * 1000 }
+                );
+            });
         });
-    });
-}, { timeout: 20 * 1000 });
+    },
+    { timeout: 20 * 1000 }
+);
diff --git a/src/visualBuilder/__test__/withoutIframe.test.ts b/src/visualBuilder/__test__/withoutIframe.test.ts
index 251c7d3a..1a61c115 100644
--- a/src/visualBuilder/__test__/withoutIframe.test.ts
+++ b/src/visualBuilder/__test__/withoutIframe.test.ts
@@ -1,8 +1,12 @@
 import crypto from "crypto";
 
-import { triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized } from "../../__test__/utils";
+import {
+    triggerAndWaitForClickAction,
+    waitForBuilderSDKToBeInitialized,
+} from "../../__test__/utils";
 import { VisualBuilder } from "../index";
 import Config from "../../configManager/configManager";
+import { isOpenInBuilder } from "../../utils";
 
 vi.mock("../utils/visualBuilderPostMessage", async () => {
     const { getAllContentTypes } = await vi.importActual<
@@ -24,6 +28,16 @@ vi.mock("../utils/visualBuilderPostMessage", async () => {
         },
     };
 });
+
+vi.mock("../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
 import { act, fireEvent, waitFor, screen } from "@testing-library/preact";
 
diff --git a/src/visualBuilder/components/VisualBuilder.tsx b/src/visualBuilder/components/VisualBuilder.tsx
index f44aa7f7..867db23e 100644
--- a/src/visualBuilder/components/VisualBuilder.tsx
+++ b/src/visualBuilder/components/VisualBuilder.tsx
@@ -5,13 +5,18 @@ import {
     VisualBuilderGlobalStyles,
 } from "../visualBuilder.style";
 import React from "preact/compat";
+import { isOpenInBuilder } from "../../utils";
 
 interface VisualBuilderProps {
     visualBuilderContainer: HTMLDivElement | null;
     resizeObserver: ResizeObserver;
 }
 
-function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element {
+function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {
+    if (!isOpenInBuilder()) {
+        return null;
+    }
+
     return (
         <>
             {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}
diff --git a/src/visualBuilder/components/__test__/visualBuilder.test.tsx b/src/visualBuilder/components/__test__/visualBuilder.test.tsx
index 794a14d5..c6f137d0 100644
--- a/src/visualBuilder/components/__test__/visualBuilder.test.tsx
+++ b/src/visualBuilder/components/__test__/visualBuilder.test.tsx
@@ -3,6 +3,7 @@ import { hideOverlay } from "../../generators/generateOverlay";
 import { VisualBuilder } from "../..";
 import VisualBuilderComponent from "../VisualBuilder";
 import { asyncRender } from "../../../__test__/utils";
+import * as utils from "../../../utils";
 
 vi.mock("../../generators/generateOverlay", () => ({
     hideOverlay: vi.fn(),
@@ -14,13 +15,23 @@ const mockResizeObserver = {
     disconnect: vi.fn(),
 };
 
+vi.mock("../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 describe("VisualBuilderComponent", () => {
     beforeEach(() => {
         document.body.innerHTML = "";
-    })
+        vi.clearAllMocks();
+    });
     afterEach(() => {
         cleanup();
-    })
+    });
     test("renders VisualBuilderComponent correctly", async () => {
         const { getByTestId } = await asyncRender(
             <VisualBuilderComponent
@@ -94,4 +105,87 @@ describe("VisualBuilderComponent", () => {
         const overlayWrapper = getByTestId("visual-builder__overlay__wrapper");
         fireEvent.click(overlayWrapper);
     });
+
+    test("does not render VisualBuilderComponent when not in builder mode", async () => {
+        vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false);
+        const { queryByTestId } = await asyncRender(
+            <VisualBuilderComponent
+                visualBuilderContainer={document.createElement("div")}
+                resizeObserver={mockResizeObserver}
+            />
+        );
+
+        expect(queryByTestId("visual-builder__cursor")).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__overlay__wrapper")
+        ).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__focused-toolbar")
+        ).not.toBeInTheDocument();
+    });
+
+    test("does not render any overlay sections when not in builder mode", async () => {
+        vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false);
+        const { queryByTestId } = await asyncRender(
+            <VisualBuilderComponent
+                visualBuilderContainer={document.createElement("div")}
+                resizeObserver={mockResizeObserver}
+            />
+        );
+
+        expect(
+            queryByTestId("visual-builder__overlay--top")
+        ).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__overlay--left")
+        ).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__overlay--right")
+        ).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__overlay--bottom")
+        ).not.toBeInTheDocument();
+        expect(
+            queryByTestId("visual-builder__overlay--outline")
+        ).not.toBeInTheDocument();
+    });
+
+    test("does not render hover outline when not in builder mode", async () => {
+        vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false);
+        const { queryByTestId } = await asyncRender(
+            <VisualBuilderComponent
+                visualBuilderContainer={document.createElement("div")}
+                resizeObserver={mockResizeObserver}
+            />
+        );
+
+        expect(
+            queryByTestId("visual-builder__hover-outline")
+        ).not.toBeInTheDocument();
+    });
+
+    test("does not call hideOverlay when not in builder mode", async () => {
+        vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false);
+        const visualBuilderContainer = document.createElement("div");
+        await asyncRender(
+            <VisualBuilderComponent
+                visualBuilderContainer={visualBuilderContainer}
+                resizeObserver={mockResizeObserver}
+            />
+        );
+
+        expect(hideOverlay).not.toHaveBeenCalled();
+    });
+
+    test("does not observe elements when not in builder mode", async () => {
+        vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false);
+        await asyncRender(
+            <VisualBuilderComponent
+                visualBuilderContainer={document.createElement("div")}
+                resizeObserver={mockResizeObserver}
+            />
+        );
+
+        expect(mockResizeObserver.observe).not.toHaveBeenCalled();
+    });
 });
diff --git a/src/visualBuilder/components/index.tsx b/src/visualBuilder/components/index.tsx
index ede594be..6c08da3a 100644
--- a/src/visualBuilder/components/index.tsx
+++ b/src/visualBuilder/components/index.tsx
@@ -2,6 +2,7 @@ import { render } from "preact";
 import VisualBuilderComponent from "./VisualBuilder";
 import { visualBuilderStyles } from "../visualBuilder.style";
 import React from "preact/compat";
+import { isOpenInBuilder } from "../../utils";
 
 interface InitUIParams {
     resizeObserver: ResizeObserver;
@@ -11,7 +12,10 @@ function initUI(props: InitUIParams): void {
     const visualBuilderDOM = document.querySelector(
         `.visual-builder__container`
     );
-    if (!visualBuilderDOM) {
+
+    const isInBuilder = isOpenInBuilder();
+
+    if (!visualBuilderDOM && isInBuilder) {
         const visualBuilderContainer = document.createElement("div");
         visualBuilderContainer.classList.add(
             visualBuilderStyles()["visual-builder__container"],
diff --git a/src/visualBuilder/generators/generateStartEditingButton.tsx b/src/visualBuilder/generators/generateStartEditingButton.tsx
index ca868f9e..63af95ae 100644
--- a/src/visualBuilder/generators/generateStartEditingButton.tsx
+++ b/src/visualBuilder/generators/generateStartEditingButton.tsx
@@ -5,21 +5,25 @@ import StartEditingButtonComponent from "../components/startEditingButton";
 /**
  * Generates a start editing button for the visual builder.
  *
- * @param visualBuilderContainer - The HTMLDivElement that wraps the visual builder.
- * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the visualBuilderContainer is null.
+ * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the button cannot be created.
  */
-export function generateStartEditingButton(
-    visualBuilderContainer: HTMLDivElement | null
-): HTMLAnchorElement | undefined {
-    if (!visualBuilderContainer) {
-        PublicLogger.warn("Visual builder overlay not found.");
-        return;
+export function generateStartEditingButton(): HTMLAnchorElement | undefined {
+    const existingButton = document.querySelector(
+        ".visual-builder__start-editing-btn"
+    ) as HTMLAnchorElement;
+
+    if (existingButton) {
+        return existingButton;
     }
 
     const wrapper = document.createDocumentFragment();
     render(<StartEditingButtonComponent />, wrapper);
 
-    visualBuilderContainer?.appendChild(wrapper);
+    if (wrapper.children.length === 0) {
+        return undefined;
+    }
+
+    document.body.appendChild(wrapper);
 
     const startEditingButton = document.querySelector(
         ".visual-builder__start-editing-btn"
diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts
index d06f1d3f..2843bf54 100644
--- a/src/visualBuilder/index.ts
+++ b/src/visualBuilder/index.ts
@@ -383,7 +383,7 @@ export class VisualBuilder {
             })
             .catch(() => {
                 if (!inIframe()) {
-                    generateStartEditingButton(this.visualBuilderContainer);
+                    generateStartEditingButton();
                 }
             });
     }
diff --git a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts
index c963c3d4..1d80c172 100644
--- a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts
+++ b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts
@@ -13,7 +13,7 @@ import { mockMultipleLinkFieldSchema } from "../../../__test__/data/fields";
 // this is probably because of cyclic dependencies
 import { VisualBuilder } from "../..";
 import { screen } from "@testing-library/preact";
-
+import { isOpenInBuilder } from "../../../utils";
 vi.mock("../visualBuilderPostMessage", () => {
     return {
         __esModule: true,
@@ -31,6 +31,15 @@ vi.mock("../handleIndividualFields", () => {
     };
 });
 
+vi.mock("../../../utils/index.ts", async () => {
+    const actual = await vi.importActual("../../../utils");
+    return {
+        __esModule: true,
+        ...actual,
+        isOpenInBuilder: vi.fn().mockReturnValue(true),
+    };
+});
+
 const mockResizeObserver = {
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -78,14 +87,17 @@ describe("addFocusOverlay", () => {
             "data-cslp",
             "all_fields.blt58a50b4cebae75c5.en-us.title"
         );
-        targetElement.getBoundingClientRect = vi.fn(() => ({
-            left: 10,
-            right: 20,
-            top: 10,
-            bottom: 20,
-            height: 10,
-            width: 10
-        } as DOMRect)) as any;
+        targetElement.getBoundingClientRect = vi.fn(
+            () =>
+                ({
+                    left: 10,
+                    right: 20,
+                    top: 10,
+                    bottom: 20,
+                    height: 10,
+                    width: 10,
+                }) as DOMRect
+        ) as any;
 
         visualBuilderContainer.appendChild(targetElement);
     });
@@ -138,8 +150,10 @@ describe("addFocusOverlay", () => {
 
         const overlayOutline = document.querySelector(
             `[data-testid="visual-builder__overlay--outline"]`
-        )
-        expect(overlayOutline).toHaveStyle("top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);");
+        );
+        expect(overlayOutline).toHaveStyle(
+            "top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"
+        );
     });
 });
 
@@ -286,7 +300,7 @@ describe("hideFocusOverlay", () => {
             visualBuilderOverlayWrapper: focusOverlayWrapper,
             focusedToolbar: document.querySelector(".visual-builder__toolbar"),
             resizeObserver: mockResizeObserver,
-            noTrigger: false
+            noTrigger: false,
         });
 
         expect(focusOverlayWrapper.classList.contains("visible")).toBe(false);
diff --git a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts
index 238d89fe..e652fffe 100644
--- a/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts
+++ b/src/visualBuilder/utils/__test__/generateStartEditingButton.test.ts
@@ -1,41 +1,41 @@
 import { getDefaultConfig } from "../../../configManager/config.default";
-import { PublicLogger } from "../../../logger/logger";
 import { IConfig } from "../../../types/types";
 import { generateStartEditingButton } from "./../../generators/generateStartEditingButton";
 
 describe("generateStartEditingButton", () => {
     let config: IConfig;
-    let visualBuilderContainer: HTMLDivElement;
 
     beforeEach(() => {
         config = getDefaultConfig();
 
         config.stackDetails.apiKey = "bltapikey";
         config.stackDetails.environment = "bltenvironment";
-
-        visualBuilderContainer = document.createElement("div");
-        document.body.appendChild(visualBuilderContainer);
     });
 
     afterEach(() => {
         vi.clearAllMocks();
-        document.body.removeChild(visualBuilderContainer);
+        const existingButton = document.querySelector(
+            ".visual-builder__start-editing-btn"
+        );
+        if (existingButton) {
+            existingButton.remove();
+        }
     });
 
-    test("should  return an anchor tag", () => {
-        const button = generateStartEditingButton(visualBuilderContainer);
+    test("should return an anchor tag", () => {
+        const button = generateStartEditingButton();
         expect(button).toBeInstanceOf(HTMLAnchorElement);
     });
 
-    test("should append the button within visualBuilderContainer", () => {
-        expect(visualBuilderContainer.children.length).toBe(0);
-        generateStartEditingButton(visualBuilderContainer);
+    test("should append the button within document.body", () => {
+        const initialBodyChildren = document.body.children.length;
+        generateStartEditingButton();
 
-        expect(visualBuilderContainer.children.length).toBe(1);
+        expect(document.body.children.length).toBe(initialBodyChildren + 1);
     });
 
     test("should update the href when clicked", () => {
-        const button = generateStartEditingButton(visualBuilderContainer);
+        const button = generateStartEditingButton();
         button?.click();
 
         expect(button?.getAttribute("href")).toBe(
@@ -43,7 +43,7 @@ describe("generateStartEditingButton", () => {
         );
     });
 
-    test("should get the href detal from cslp attribute if present", () => {
+    test("should get the href detail from cslp attribute if present", () => {
         const h1 = document.createElement("h1");
 
         h1.setAttribute(
@@ -53,19 +53,11 @@ describe("generateStartEditingButton", () => {
 
         document.body.appendChild(h1);
 
-        const button = generateStartEditingButton(visualBuilderContainer);
+        const button = generateStartEditingButton();
         button?.click();
 
         expect(button?.getAttribute("href")).toBe(
             "https://app.contentstack.com/#!/stack//visual-builder?branch=main&target-url=http%3A%2F%2Flocalhost%3A3000%2F&locale=en-us"
         );
     });
-
-    test("should throw a warning if visualBuilderContainer is not found", () => {
-        const spiedWarn = vi.spyOn(PublicLogger, "warn");
-
-        generateStartEditingButton(null);
-
-        expect(spiedWarn).toHaveBeenCalledTimes(1);
-    });
 });
diff --git a/src/visualBuilder/utils/__test__/getPsuedoEditableEssentialStyles.test.ts b/src/visualBuilder/utils/__test__/getPsuedoEditableEssentialStyles.test.ts
new file mode 100644
index 00000000..bc0a098c
--- /dev/null
+++ b/src/visualBuilder/utils/__test__/getPsuedoEditableEssentialStyles.test.ts
@@ -0,0 +1,118 @@
+import { getPsuedoEditableEssentialStyles } from "../getPsuedoEditableEssentialStyles";
+
+describe("getPsuedoEditableEssentialStyles", () => {
+    const mockRect: DOMRect = {
+        top: 50,
+        left: 30,
+        width: 200,
+        height: 100,
+        bottom: 150,
+        right: 230,
+        x: 30,
+        y: 50,
+        toJSON: () => ({}),
+    };
+
+    const mockScrollX = 100;
+    const mockScrollY = 200;
+
+    beforeEach(() => {
+        // Mock window.scrollX and window.scrollY using vitest spies
+        vi.spyOn(window, "scrollX", "get").mockReturnValue(mockScrollX);
+        vi.spyOn(window, "scrollY", "get").mockReturnValue(mockScrollY);
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    test("returns styles with kebab-case properties when camelCase is false", () => {
+        const result = getPsuedoEditableEssentialStyles({
+            rect: mockRect,
+            camelCase: false,
+        });
+
+        expect(result).toEqual({
+            position: "absolute",
+            top: `${mockRect.top + mockScrollY}px`,
+            left: `${mockRect.left + mockScrollX}px`,
+            height: "auto",
+            "min-height": `${Math.abs(mockRect.height)}px`,
+            "white-space": "normal",
+            "text-transform": "none",
+            "text-wrap-mode": "wrap",
+            "text-overflow": "visible",
+        });
+    });
+
+    test("returns styles with kebab-case properties when camelCase is undefined", () => {
+        const result = getPsuedoEditableEssentialStyles({
+            rect: mockRect,
+            camelCase: undefined,
+        });
+
+        expect(result).toEqual({
+            position: "absolute",
+            top: `${mockRect.top + mockScrollY}px`,
+            left: `${mockRect.left + mockScrollX}px`,
+            height: "auto",
+            "min-height": `${Math.abs(mockRect.height)}px`,
+            "white-space": "normal",
+            "text-transform": "none",
+            "text-wrap-mode": "wrap",
+            "text-overflow": "visible",
+        });
+    });
+
+    test("returns styles with camelCase properties when camelCase is true", () => {
+        const result = getPsuedoEditableEssentialStyles({
+            rect: mockRect,
+            camelCase: true,
+        });
+
+        expect(result).toEqual({
+            position: "absolute",
+            top: `${mockRect.top + mockScrollY}px`,
+            left: `${mockRect.left + mockScrollX}px`,
+            height: "auto",
+            minHeight: `${Math.abs(mockRect.height)}px`,
+            whiteSpace: "normal",
+            textTransform: "none",
+            textWrapMode: "wrap",
+            textOverflow: "visible",
+        });
+    });
+
+    test("calculates correct positioning with scroll offset", () => {
+        const customScrollX = 50;
+        const customScrollY = 150;
+
+        // Override the default mock values for this test
+        vi.spyOn(window, "scrollX", "get").mockReturnValue(customScrollX);
+        vi.spyOn(window, "scrollY", "get").mockReturnValue(customScrollY);
+
+        const result = getPsuedoEditableEssentialStyles({
+            rect: mockRect,
+            camelCase: false,
+        });
+
+        expect(result.top).toBe(`${mockRect.top + customScrollY}px`);
+        expect(result.left).toBe(`${mockRect.left + customScrollX}px`);
+    });
+
+    test("handles negative rect heights correctly", () => {
+        const negativeHeightRect: DOMRect = {
+            ...mockRect,
+            height: -50,
+        };
+
+        const result = getPsuedoEditableEssentialStyles({
+            rect: negativeHeightRect,
+            camelCase: false,
+        });
+
+        expect(result["min-height"]).toBe(
+            `${Math.abs(negativeHeightRect.height)}px`
+        );
+    });
+});
diff --git a/src/visualBuilder/utils/__test__/getPsuedoEditableStylesElement.test.ts b/src/visualBuilder/utils/__test__/getPsuedoEditableStylesElement.test.ts
index 43427177..cb904326 100644
--- a/src/visualBuilder/utils/__test__/getPsuedoEditableStylesElement.test.ts
+++ b/src/visualBuilder/utils/__test__/getPsuedoEditableStylesElement.test.ts
@@ -2,57 +2,78 @@ import { describe, it, expect, vi, Mock } from "vitest";
 import { getPsuedoEditableElementStyles } from "../getPsuedoEditableStylesElement";
 import getCamelCaseStyles from "../getCamelCaseStyles";
 import getStyleOfAnElement from "../getStyleOfAnElement";
+import { getPsuedoEditableEssentialStyles } from "../getPsuedoEditableEssentialStyles";
 
 vi.mock("../getCamelCaseStyles");
 vi.mock("../getStyleOfAnElement");
+vi.mock("../getPsuedoEditableEssentialStyles");
 
 describe("getPsuedoEditableElementStyles", () => {
-    it("should return styles with absolute position and correct top and left values", () => {
+    it("should return merged styles from getStyleOfAnElement and getPsuedoEditableEssentialStyles", () => {
         const mockElement = {
             getBoundingClientRect: vi.fn().mockReturnValue({
                 top: 100,
                 left: 200,
+                height: 50,
             }),
         } as unknown as HTMLElement;
 
-        window.scrollY = 50;
-        window.scrollX = 30;
-
         const mockStyles = {
             color: "red",
-            fontSize: "16px",
+            "font-size": "16px",
+        };
+
+        const mockEssentialStyles = {
+            position: "absolute",
+            top: "150px",
+            left: "230px",
+            height: "auto",
+            "white-space": "normal",
+            "text-transform": "none",
+            "text-overflow": "visible",
+            "text-wrap-mode": "wrap",
+            "min-height": "50px",
         };
 
         (getStyleOfAnElement as Mock).mockReturnValue(mockStyles);
+        (getPsuedoEditableEssentialStyles as Mock).mockReturnValue(
+            mockEssentialStyles
+        );
 
         const result = getPsuedoEditableElementStyles(mockElement);
 
+        expect(getPsuedoEditableEssentialStyles).toHaveBeenCalledWith({
+            rect: { top: 100, left: 200, height: 50 },
+            camelCase: undefined,
+        });
+
         expect(result).toEqual({
             color: "red",
-            fontSize: "16px",
+            "font-size": "16px",
             position: "absolute",
             top: "150px",
             left: "230px",
             height: "auto",
-            whiteSpace: "pre-line",
-            textTransform: "none",
+            "white-space": "normal",
+            "text-transform": "none",
+            "text-overflow": "visible",
+            "text-wrap-mode": "wrap",
+            "min-height": "50px",
         });
     });
 
-    it("should return camel case styles if camelCase is true", () => {
+    it("should apply camelCase conversion when camelCase is true", () => {
         const mockElement = {
             getBoundingClientRect: vi.fn().mockReturnValue({
                 top: 100,
                 left: 200,
+                height: 50,
             }),
         } as unknown as HTMLElement;
 
-        window.scrollY = 50;
-        window.scrollX = 30;
-
         const mockStyles = {
             color: "red",
-            fontSize: "16px",
+            "font-size": "16px",
         };
 
         const mockCamelCaseStyles = {
@@ -60,11 +81,32 @@ describe("getPsuedoEditableElementStyles", () => {
             fontSize: "16px",
         };
 
+        const mockEssentialStyles = {
+            position: "absolute",
+            top: "150px",
+            left: "230px",
+            height: "auto",
+            whiteSpace: "normal",
+            textTransform: "none",
+            textOverflow: "visible",
+            textWrapMode: "wrap",
+            minHeight: "50px",
+        };
+
         (getStyleOfAnElement as Mock).mockReturnValue(mockStyles);
         (getCamelCaseStyles as Mock).mockReturnValue(mockCamelCaseStyles);
+        (getPsuedoEditableEssentialStyles as Mock).mockReturnValue(
+            mockEssentialStyles
+        );
 
         const result = getPsuedoEditableElementStyles(mockElement, true);
 
+        expect(getCamelCaseStyles).toHaveBeenCalledWith(mockStyles);
+        expect(getPsuedoEditableEssentialStyles).toHaveBeenCalledWith({
+            rect: { top: 100, left: 200, height: 50 },
+            camelCase: true,
+        });
+
         expect(result).toEqual({
             color: "red",
             fontSize: "16px",
@@ -72,8 +114,51 @@ describe("getPsuedoEditableElementStyles", () => {
             top: "150px",
             left: "230px",
             height: "auto",
-            whiteSpace: "pre-line",
+            whiteSpace: "normal",
             textTransform: "none",
+            textOverflow: "visible",
+            textWrapMode: "wrap",
+            minHeight: "50px",
+        });
+    });
+
+    it("should handle merging where essential styles override element styles", () => {
+        const mockElement = {
+            getBoundingClientRect: vi.fn().mockReturnValue({
+                top: 100,
+                left: 200,
+                height: 50,
+            }),
+        } as unknown as HTMLElement;
+
+        const mockStyles = {
+            color: "red",
+            position: "relative", // This should be overridden by essential styles
+            height: "100px", // This should be overridden by essential styles
+        };
+
+        const mockEssentialStyles = {
+            position: "absolute",
+            top: "150px",
+            left: "230px",
+            height: "auto",
+            "min-height": "50px",
+        };
+
+        (getStyleOfAnElement as Mock).mockReturnValue(mockStyles);
+        (getPsuedoEditableEssentialStyles as Mock).mockReturnValue(
+            mockEssentialStyles
+        );
+
+        const result = getPsuedoEditableElementStyles(mockElement);
+
+        expect(result).toEqual({
+            color: "red",
+            position: "absolute", // Overridden by essential styles
+            top: "150px",
+            left: "230px",
+            height: "auto", // Overridden by essential styles
+            "min-height": "50px",
         });
     });
-});
\ No newline at end of file
+});
diff --git a/src/visualBuilder/utils/getPsuedoEditableEssentialStyles.ts b/src/visualBuilder/utils/getPsuedoEditableEssentialStyles.ts
new file mode 100644
index 00000000..fe7a6cad
--- /dev/null
+++ b/src/visualBuilder/utils/getPsuedoEditableEssentialStyles.ts
@@ -0,0 +1,22 @@
+import getCamelCaseStyles from "./getCamelCaseStyles";
+
+export function getPsuedoEditableEssentialStyles({
+    rect,
+    camelCase,
+}: {
+    rect: DOMRect;
+    camelCase: boolean | undefined;
+}) {
+    const overrides = {
+        position: "absolute",
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+        height: "auto",
+        "min-height": `${Math.abs(rect.height)}px`,
+        "white-space": "normal",
+        "text-transform": "none",
+        "text-wrap-mode": "wrap",
+        "text-overflow": "visible",
+    };
+    return camelCase ? getCamelCaseStyles(overrides) : overrides;
+}
diff --git a/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
index e2369d64..5ff44ee9 100644
--- a/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
+++ b/src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
@@ -1,4 +1,5 @@
 import getCamelCaseStyles from "./getCamelCaseStyles";
+import { getPsuedoEditableEssentialStyles } from "./getPsuedoEditableEssentialStyles";
 import getStyleOfAnElement from "./getStyleOfAnElement";
 
 export function getPsuedoEditableElementStyles(
@@ -6,21 +7,13 @@ export function getPsuedoEditableElementStyles(
     camelCase?: boolean
 ): { [key: string]: string } {
     let styles = getStyleOfAnElement(psuedoEditableElement);
-    if (camelCase) {
-        styles = getCamelCaseStyles(styles);
-    }
     // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
     // The pseudo editable element is positioned absolutely at the same location as the editable element
     const rect = psuedoEditableElement.getBoundingClientRect();
 
-    styles.position = "absolute";
-    styles.top = `${rect.top + window.scrollY}px`;
-    styles.left = `${rect.left + window.scrollX}px`;
-    // setting height to auto so that the element can grow based on the content
-    // and the resize observer can detect the change in height
-    styles.height = "auto";
-    styles.whiteSpace = "pre-line";
-    styles.textTransform = "none";
-
-    return styles;
+    if (camelCase) {
+        styles = getCamelCaseStyles(styles);
+    }
+    const overrides = getPsuedoEditableEssentialStyles({ rect, camelCase });
+    return { ...styles, ...overrides };
 }