From ed0bc979cd0bc936e465f890cf5721c5c5ab5a76 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 5 May 2026 17:01:12 +0530
Subject: [PATCH 01/12] feat: open scripts in external editor

---
 .../src/components/Controls/CodeEditor.vue    |  42 ++++++-
 .../components/PageClientScriptManager.vue    |   8 +-
 frontend/src/components/PageScript.vue        |  23 +++-
 .../src/components/Settings/GlobalCode.vue    |  17 ++-
 frontend/src/components/Settings/PageCode.vue |  11 +-
 frontend/src/composables/useExternalEditor.ts | 118 ++++++++++++++++++
 6 files changed, 202 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/composables/useExternalEditor.ts

diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index 6ef989fe8..edb1200b2 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -1,9 +1,26 @@
 <template>
-	<div class="code-editor relative flex flex-col gap-1">
-		<span class="text-p-sm font-medium text-ink-gray-8" v-show="label">
-			{{ label }}
-			<span v-if="isDirty" class="text-[10px] text-gray-600">●</span>
-		</span>
+	<div
+		class="code-editor relative flex flex-col gap-1"
+		:class="{
+			'-mt-6': isExternalEditorActive && !label,
+		}">
+		<div class="flex items-center justify-between">
+			<div>
+				<span class="text-p-sm font-medium text-ink-gray-8" v-show="label">
+					{{ label }}
+					<span v-if="isDirty" class="text-[10px] text-gray-600">●</span>
+				</span>
+			</div>
+			<BuilderButton
+				v-if="isExternalEditorActive && externalEditorContext"
+				@click="handleOpenInExternalEditor"
+				variant="ghost"
+				size="sm"
+				class="!gap-1 text-p-xs"
+				icon-right="arrow-up-right">
+				{{ `Open in ${editorName}` }}
+			</BuilderButton>
+		</div>
 		<div
 			:style="{
 				'min-height': height,
@@ -44,6 +61,8 @@
 <script setup lang="ts">
 import { ref, VNodeRef, watch } from "vue";
 import CodeMirrorEditor from "./CodeMirror/CodeMirrorEditor.vue";
+import { useExternalEditor, type OpenScriptRequest } from "@/composables/useExternalEditor";
+import { toast } from "vue-sonner";
 
 const props = withDefaults(
 	defineProps<{
@@ -62,6 +81,7 @@ const props = withDefaults(
 			icon: string;
 			handler: () => void;
 		};
+		externalEditorContext?: OpenScriptRequest;
 	}>(),
 	{
 		type: "JSON",
@@ -75,6 +95,18 @@ const props = withDefaults(
 	},
 );
 
+const { isExternalEditorActive, openInExternalEditor, editorName } = useExternalEditor();
+
+const handleOpenInExternalEditor = async () => {
+	if (!props.externalEditorContext) return;
+	const result = await openInExternalEditor(props.externalEditorContext);
+	if (!result.success) {
+		toast.error(result.error || `Failed to open in ${editorName.value}`);
+	} else {
+		toast.success(`Code opened in ${editorName.value}`);
+	}
+};
+
 const emit = defineEmits(["save", "update:modelValue"]);
 const editor = ref<VNodeRef | null>(null);
 
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index df0b8cc50..9b1985b9b 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -126,7 +126,8 @@
 				:autofocus="false"
 				:show-save-button="true"
 				@save="updateScript"
-				:show-line-numbers="true"></CodeEditor>
+				:show-line-numbers="true"
+				:external-editor-context="getEditorContext()"></CodeEditor>
 		</div>
 	</div>
 </template>
@@ -146,6 +147,7 @@ import CodeEditor from "./Controls/CodeEditor.vue";
 import CSSIcon from "./Icons/CSS.vue";
 import GripVertical from "./Icons/GripVertical.vue";
 import JavaScriptIcon from "./Icons/JavaScript.vue";
+import { createEditorContext } from "@/composables/useExternalEditor";
 
 const { capture } = useTelemetry();
 
@@ -207,6 +209,10 @@ const selectScript = (script: attachedScript) => {
 	});
 };
 
+const getEditorContext = () => {
+	return createEditorContext("Builder Client Script", activeScript.value?.script_name, "script");
+};
+
 const updateScript = (value: string) => {
 	if (!activeScript.value || builderStore.readOnlyMode) return;
 
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index b0555e4de..99e6ff759 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -79,7 +79,8 @@
 								:autofocus="true"
 								@save="savePageDataScript"
 								:showSaveButton="true"
-								:show-line-numbers="true"></CodeEditor>
+								:show-line-numbers="true"
+								:external-editor-context="getPageEditorContext('page_data_script')"></CodeEditor>
 							<CodeEditor
 								v-model="pageStore.pageData"
 								type="JSON"
@@ -109,9 +110,10 @@
 							@save="saveBlockClientScript"
 							:showSaveButton="true"
 							:show-line-numbers="true"
+							:external-editor-context="getBlockEditorContext('blockClientScript')"
 							description='Use Block Client Script to add interactivity to your block. You can access the current DOM node using the keyword `this`. All Block props are accessible using the read-only `props` object.<br>
-							<b>Example:</b> <pre style="display:inline; font-size: 11px;">this.addEventListener("click", () => { console.log(props) })</pre><br><br>
-							For more details on how to write data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.'></CodeEditor>
+						<b>Example:</b> <pre style="display:inline; font-size: 11px;">this.addEventListener("click", () => { console.log(props) })</pre><br><br>
+						For more details on how to write data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.'></CodeEditor>
 					</div>
 					<div v-else>
 						<div class="flex gap-4">
@@ -126,7 +128,8 @@
 								:autofocus="true"
 								@save="saveBlockDataScript"
 								:showSaveButton="true"
-								:show-line-numbers="true"></CodeEditor>
+								:show-line-numbers="true"
+								:external-editor-context="getBlockEditorContext('blockDataScript')"></CodeEditor>
 							<div class="-mt-5 w-1/3 p-4" height="calc(100% - 110px)">
 								<CodeEditor
 									v-model="blockData"
@@ -171,6 +174,7 @@ import Switch from "./Controls/Switch.vue";
 import TabButtons from "./Controls/TabButtons.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
 import PropsEditor from "./PropsEditor.vue";
+import { createEditorContext } from "@/composables/useExternalEditor";
 
 const { capture } = useTelemetry();
 
@@ -213,10 +217,19 @@ const blockData = computed(() => {
 		? blockDataStore.getBlockData(
 				blockController.getFirstSelectedBlock().blockId,
 				showInheritedBlockData.value ? "all" : "own",
-			) || {}
+		  ) || {}
 		: {};
 });
 
+const getPageEditorContext = (field: string) => {
+	return createEditorContext("Builder Page", props.page?.name, field);
+};
+
+const getBlockEditorContext = (blockField: "blockClientScript" | "blockDataScript") => {
+	const block = blockController.getFirstSelectedBlock();
+	return createEditorContext("Builder Page", props.page?.name, undefined, block?.blockId, blockField);
+};
+
 const savePageDataScript = (value: string) => {
 	webPages.setValue
 		.submit({
diff --git a/frontend/src/components/Settings/GlobalCode.vue b/frontend/src/components/Settings/GlobalCode.vue
index 403afc286..06631d828 100644
--- a/frontend/src/components/Settings/GlobalCode.vue
+++ b/frontend/src/components/Settings/GlobalCode.vue
@@ -8,7 +8,8 @@
 			height="100px"
 			class="shrink-0"
 			@update:modelValue="builderStore.updateBuilderSettings('head_html', $event)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('head_html')"></CodeEditor>
 		<CodeEditor
 			label="<body> HTML"
 			type="HTML"
@@ -17,7 +18,8 @@
 			height="100px"
 			class="shrink-0"
 			@update:modelValue="builderStore.updateBuilderSettings('body_html', $event)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('body_html')"></CodeEditor>
 		<CodeEditor
 			label="Client Script"
 			type="JavaScript"
@@ -26,7 +28,8 @@
 			height="100px"
 			class="shrink-0"
 			@update:modelValue="(code) => builderStore.updateBuilderSettings('script', code)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('script')"></CodeEditor>
 		<CodeEditor
 			label="Style"
 			type="CSS"
@@ -35,13 +38,19 @@
 			height="100px"
 			class="shrink-0"
 			@update:modelValue="(code) => builderStore.updateBuilderSettings('style', code)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('style')"></CodeEditor>
 	</div>
 </template>
 <script setup lang="ts">
 import CodeEditor from "@/components/Controls/CodeEditor.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
+import { createEditorContext } from "@/composables/useExternalEditor";
 
 const builderStore = useBuilderStore();
+
+const getEditorContext = (field: string) => {
+	return createEditorContext("Builder Settings", "Builder Settings", field);
+};
 </script>
diff --git a/frontend/src/components/Settings/PageCode.vue b/frontend/src/components/Settings/PageCode.vue
index 71ce45e83..a23019cf9 100644
--- a/frontend/src/components/Settings/PageCode.vue
+++ b/frontend/src/components/Settings/PageCode.vue
@@ -9,7 +9,8 @@
 			class="shrink-0"
 			:modelValue="pageStore.activePage?.head_html"
 			@update:modelValue="(val) => pageStore.updateActivePage('head_html', val)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('head_html')"></CodeEditor>
 		<CodeEditor
 			label="<body> HTML"
 			type="HTML"
@@ -19,17 +20,23 @@
 			height="200px"
 			class="shrink-0"
 			@update:modelValue="pageStore.updateActivePage('body_html', $event)"
-			:showLineNumbers="true"></CodeEditor>
+			:showLineNumbers="true"
+			:externalEditorContext="getEditorContext('body_html')"></CodeEditor>
 	</div>
 </template>
 <script setup lang="ts">
 import CodeEditor from "@/components/Controls/CodeEditor.vue";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
+import { createEditorContext } from "@/composables/useExternalEditor";
 
 const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 
+const getEditorContext = (field: string) => {
+	return createEditorContext("Builder Page", pageStore.activePage?.name, field);
+};
+
 // const libraryURL = ref("");
 // const builderStore = useBuilderStore();
 
diff --git a/frontend/src/composables/useExternalEditor.ts b/frontend/src/composables/useExternalEditor.ts
new file mode 100644
index 000000000..e9fceec7e
--- /dev/null
+++ b/frontend/src/composables/useExternalEditor.ts
@@ -0,0 +1,118 @@
+import { ref, onMounted } from "vue";
+
+const EXTERNAL_EDITOR_PORT_RANGE = { start: 59000, end: 59021 };
+
+interface ExternalEditorStatus {
+	active: boolean;
+	extension: string;
+	uriScheme: string;
+	name: string;
+}
+
+interface OpenScriptRequest {
+	site: string;
+	doctype: string;
+	docname: string;
+	field?: string;
+	blockId?: string;
+	blockField?: "blockClientScript" | "blockDataScript";
+}
+
+const isExternalEditorActive = ref(false);
+const externalEditorPort = ref<number | null>(null);
+const externalEditorUriScheme = ref<string>("vscode");
+const editorName = ref<string>("VS Code");
+
+async function checkExternalEditorStatus(): Promise<void> {
+	isExternalEditorActive.value = false;
+	externalEditorPort.value = null;
+
+	for (let port = EXTERNAL_EDITOR_PORT_RANGE.start; port <= EXTERNAL_EDITOR_PORT_RANGE.end; port++) {
+		try {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 500);
+
+			const response = await fetch(`http://127.0.0.1:${port}/status`, {
+				method: "GET",
+				signal: controller.signal,
+			});
+
+			clearTimeout(timeoutId);
+
+			if (response.ok) {
+				const data = (await response.json()) as ExternalEditorStatus;
+				if (data.active && data.extension === "frappe-script-editor") {
+					isExternalEditorActive.value = true;
+					externalEditorPort.value = port;
+					externalEditorUriScheme.value = data.uriScheme || "vscode";
+					editorName.value = data.name;
+					return;
+				}
+			}
+		} catch {
+			// Port not available or timeout, continue to next
+		}
+	}
+}
+
+async function openInExternalEditor(
+	request: OpenScriptRequest,
+): Promise<{ success: boolean; error?: string }> {
+	if (!isExternalEditorActive.value || !externalEditorPort.value) {
+		return { success: false, error: "External editor is not active" };
+	}
+
+	try {
+		const searchParams = new URLSearchParams();
+		searchParams.append("site", window.location.origin);
+		searchParams.append("doctype", request.doctype);
+		searchParams.append("docname", request.docname);
+
+		if (request.field) searchParams.append("field", request.field);
+		if (request.blockId) searchParams.append("blockId", request.blockId);
+		if (request.blockField) searchParams.append("blockField", request.blockField);
+
+		const uri = `${
+			externalEditorUriScheme.value
+		}://frappe.frappe-script-editor/open-script?${searchParams.toString()}`;
+		window.location.href = uri;
+
+		return { success: true };
+	} catch (err) {
+		const msg = err instanceof Error ? err.message : String(err);
+		return { success: false, error: msg };
+	}
+}
+
+export function useExternalEditor() {
+	onMounted(() => {
+		checkExternalEditorStatus();
+	});
+
+	return {
+		isExternalEditorActive,
+		openInExternalEditor,
+		editorName,
+	};
+}
+
+function createEditorContext(
+	doctype: string,
+	docname: string | undefined | null,
+	field?: string,
+	blockId?: string,
+	blockField?: "blockClientScript" | "blockDataScript",
+): OpenScriptRequest | undefined {
+	if (!docname) return undefined;
+	return {
+		site: window.location.origin,
+		doctype,
+		docname,
+		field,
+		blockId,
+		blockField,
+	};
+}
+
+export { createEditorContext };
+export type { OpenScriptRequest, ExternalEditorStatus };

From d1a13c14bb38a2bb0f68e7c402058769bdeffa08 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Thu, 7 May 2026 14:13:21 +0530
Subject: [PATCH 02/12] feat: add open in external editor in context menu

---
 frontend/src/components/BlockContextMenu.vue | 36 ++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 9b9823bb6..1c4417941 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -13,15 +13,19 @@ import NewComponent from "@/components/Modals/NewComponent.vue";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
+import usePageStore from "@/stores/pageStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy, triggerCopyEvent } from "@/utils/helpers";
 import { useStorage } from "@vueuse/core";
 import { Ref, inject, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
+import { useExternalEditor, createEditorContext } from "@/composables/useExternalEditor";
 
 const builderStore = useBuilderStore();
 const componentStore = useComponentStore();
 const canvasStore = useCanvasStore();
+const pageStore = usePageStore();
+const { isExternalEditorActive, openInExternalEditor, editorName } = useExternalEditor();
 
 const contextMenu = ref(null) as unknown as Ref<InstanceType<typeof ContextMenu>>;
 const triggeredFromLayersPanel = ref(false);
@@ -60,6 +64,28 @@ const pasteStyle = () => {
 	block.value.updateStyles(copiedStyle.value?.style as BlockStyleObjects);
 };
 
+const openScriptInExternalEditor = async (scriptType: "blockClientScript" | "blockDataScript") => {
+	if (!block.value.blockId) return;
+
+	const context = createEditorContext(
+		"Builder Page",
+		pageStore.selectedPage || pageStore.pageName,
+		undefined,
+		block.value.blockId,
+		scriptType,
+	);
+
+	if (!context) return;
+
+	const result = await openInExternalEditor(context);
+	const scriptName = scriptType === "blockClientScript" ? "Client Script" : "Data Script";
+	if (!result.success) {
+		toast.error(result.error || `Failed to open ${scriptName.toLowerCase()} in ${editorName.value}`);
+	} else {
+		toast.success(`${scriptName} opened in ${editorName.value}`);
+	}
+};
+
 const duplicateBlock = () => {
 	block.value.duplicateBlock();
 };
@@ -251,6 +277,16 @@ const contextMenuOptions: ContextMenuOption[] = [
 		condition: () => block.value.isExtendedFromComponent(),
 		disabled: () => builderStore.readOnlyMode,
 	},
+	{
+		label: `Open Client Script in ${editorName.value}`,
+		action: () => openScriptInExternalEditor("blockClientScript"),
+		condition: () => isExternalEditorActive.value && !block.value.isRoot(),
+	},
+	{
+		label: `Open Data Script in ${editorName.value}`,
+		action: () => openScriptInExternalEditor("blockDataScript"),
+		condition: () => isExternalEditorActive.value && !block.value.isRoot(),
+	},
 	{
 		label: "Save as Block Template",
 		action: () => {

From cbfed1c02932f157348cf4b1f7669b2961b214c0 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Mon, 11 May 2026 22:38:20 +0530
Subject: [PATCH 03/12] refactor: change extension uri

---
 frontend/src/composables/useExternalEditor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/composables/useExternalEditor.ts b/frontend/src/composables/useExternalEditor.ts
index e9fceec7e..53737b563 100644
--- a/frontend/src/composables/useExternalEditor.ts
+++ b/frontend/src/composables/useExternalEditor.ts
@@ -74,7 +74,7 @@ async function openInExternalEditor(
 
 		const uri = `${
 			externalEditorUriScheme.value
-		}://frappe.frappe-script-editor/open-script?${searchParams.toString()}`;
+		}://PratikBadhe.frappe-script-editor/open-script?${searchParams.toString()}`;
 		window.location.href = uri;
 
 		return { success: true };

From 3049ad6330cf22336ea8431aa8eee668b3ec11f1 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 12 May 2026 17:59:25 +0530
Subject: [PATCH 04/12] fix: editor label in context menu

---
 frontend/src/components/BlockContextMenu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 1c4417941..ba4af97ff 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -17,7 +17,7 @@ import usePageStore from "@/stores/pageStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy, triggerCopyEvent } from "@/utils/helpers";
 import { useStorage } from "@vueuse/core";
-import { Ref, inject, nextTick, ref } from "vue";
+import { Ref, inject, nextTick, ref, computed } from "vue";
 import { toast } from "vue-sonner";
 import { useExternalEditor, createEditorContext } from "@/composables/useExternalEditor";
 
@@ -90,7 +90,7 @@ const duplicateBlock = () => {
 	block.value.duplicateBlock();
 };
 
-const contextMenuOptions: ContextMenuOption[] = [
+const contextMenuOptions = computed((): ContextMenuOption[] => [
 	{
 		label: "Edit with AI",
 		action: () => {
@@ -353,7 +353,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		disabled: () => builderStore.readOnlyMode,
 	},
-];
+]);
 
 defineExpose({
 	showContextMenu,

From 8b9abbc8e5352d694c02f01d2794ff0ea3e09658 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Wed, 13 May 2026 15:19:41 +0530
Subject: [PATCH 05/12] fix: handle local network access popup gracefully

---
 .../components/Settings/GlobalDeveloper.vue   | 70 +++++++++++++---
 frontend/src/composables/useExternalEditor.ts | 81 +++++++++++++++----
 2 files changed, 124 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 96c3d68a9..95ee9dbc6 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -1,11 +1,19 @@
 <template>
 	<div class="flex flex-col gap-5">
-		<div class="flex justify-between">
-			<label class="w-fit shrink-0 text-p-base font-medium text-ink-gray-8">
-				Execute Block Client Scripts in Editor
-			</label>
+		<div class="flex justify-between gap-x-2.5">
+			<div class="flex flex-col gap-1">
+				<label class="w-fit shrink-0 text-p-base font-medium text-ink-gray-8">
+					Execute Block Client Scripts in Editor
+				</label>
+				<div class="flex flex-col gap-2">
+					<p class="text-p-sm text-ink-gray-7">
+						Block Scripts are executed in a sandboxed environment. This may have limitations and might not
+						perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
+					</p>
+				</div>
+			</div>
 			<Select
-				class="!w-[200px]"
+				class="h-max !w-[200px]"
 				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
 				@update:modelValue="
 					(value) => builderStore.updateBuilderSettings('execute_block_scripts_in_editor', value)
@@ -26,11 +34,48 @@
 					builderStore.updateBuilderSettings('restrict_click_handlers', val);
 				}
 			" />
-		<div class="flex flex-col gap-2">
-			<p class="text-p-sm text-ink-gray-7">
-				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not
-				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
-			</p>
+		<div class="flex justify-between gap-x-2.5">
+			<div class="flex flex-col gap-1">
+				<label class="text-p-base font-medium text-ink-gray-8">Integrate with External Editor</label>
+				<span v-if="lnaPermissionStatus === 'denied'" class="inline text-p-sm text-ink-gray-7">
+					Follow this
+					<a
+						href="https://docs.frappe.io/builder/external-editor"
+						target="_blank"
+						class="text-ink-blue-6 text-p-sm underline"
+						v-text="'guide'"></a>
+					to enable local network access.
+				</span>
+				<p v-else class="text-p-sm text-ink-gray-7">
+					Allow Builder to access your local network for integration with external editors like VS Code. Click
+					<a
+						href="https://docs.frappe.io/builder/external-editor"
+						target="_blank"
+						class="text-ink-blue-6 text-p-sm underline"
+						v-text="'here'"></a>
+					for more information.
+				</p>
+			</div>
+			<div class="flex shrink-0 gap-3">
+				<div v-if="['granted', 'denied', 'unsupported'].includes(lnaPermissionStatus)">
+					<span v-if="lnaPermissionStatus === 'granted'" class="text-p-sm text-ink-green-3">
+						Access Granted
+					</span>
+					<span v-else-if="lnaPermissionStatus === 'denied'" class="text-p-sm text-ink-red-4">
+						Access Denied
+					</span>
+					<span v-else-if="lnaPermissionStatus === 'unsupported'" class="text-p-sm text-ink-gray-7">
+						Unsupported
+					</span>
+				</div>
+				<Button
+					v-if="lnaPermissionStatus === 'prompt'"
+					@click="requestLocalNetworkAccess"
+					:loading="isRequestingAccess"
+					variant="subtle">
+					Request Access
+				</Button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -38,8 +83,9 @@
 import Switch from "@/components/Controls/Switch.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
-import { Select } from "frappe-ui";
-import InlineInput from "../Controls/InlineInput.vue";
+import { useExternalEditor } from "@/composables/useExternalEditor";
+import { Button, Select } from "frappe-ui";
 
 const builderStore = useBuilderStore();
+const { lnaPermissionStatus, isRequestingAccess, requestLocalNetworkAccess } = useExternalEditor();
 </script>
diff --git a/frontend/src/composables/useExternalEditor.ts b/frontend/src/composables/useExternalEditor.ts
index 53737b563..c60aac138 100644
--- a/frontend/src/composables/useExternalEditor.ts
+++ b/frontend/src/composables/useExternalEditor.ts
@@ -2,6 +2,8 @@ import { ref, onMounted } from "vue";
 
 const EXTERNAL_EDITOR_PORT_RANGE = { start: 59000, end: 59021 };
 
+type PermissionState = "granted" | "denied" | "prompt" | "unsupported";
+
 interface ExternalEditorStatus {
 	active: boolean;
 	extension: string;
@@ -22,15 +24,35 @@ const isExternalEditorActive = ref(false);
 const externalEditorPort = ref<number | null>(null);
 const externalEditorUriScheme = ref<string>("vscode");
 const editorName = ref<string>("VS Code");
+const lnaPermissionStatus = ref<PermissionState>("prompt");
+const isRequestingAccess = ref(false);
 
-async function checkExternalEditorStatus(): Promise<void> {
-	isExternalEditorActive.value = false;
-	externalEditorPort.value = null;
+async function checkLocalNetworkAccess(): Promise<void> {
+	try {
+		const result = await navigator.permissions.query({
+			name: "local-network-access" as PermissionName,
+		});
+		lnaPermissionStatus.value = result.state as PermissionState;
+		result.addEventListener("change", () => {
+			lnaPermissionStatus.value = result.state as PermissionState;
+		});
+	} catch {
+		lnaPermissionStatus.value = "unsupported";
+	}
+}
+
+async function scanPorts(
+	options: {
+		timeout?: number;
+		validateResponse?: (data: ExternalEditorStatus) => boolean;
+	} = {},
+): Promise<{ port: number; data?: ExternalEditorStatus } | null> {
+	const { timeout = 500, validateResponse } = options;
 
 	for (let port = EXTERNAL_EDITOR_PORT_RANGE.start; port <= EXTERNAL_EDITOR_PORT_RANGE.end; port++) {
 		try {
 			const controller = new AbortController();
-			const timeoutId = setTimeout(() => controller.abort(), 500);
+			const timeoutId = setTimeout(() => controller.abort(), timeout);
 
 			const response = await fetch(`http://127.0.0.1:${port}/status`, {
 				method: "GET",
@@ -41,17 +63,39 @@ async function checkExternalEditorStatus(): Promise<void> {
 
 			if (response.ok) {
 				const data = (await response.json()) as ExternalEditorStatus;
-				if (data.active && data.extension === "frappe-script-editor") {
-					isExternalEditorActive.value = true;
-					externalEditorPort.value = port;
-					externalEditorUriScheme.value = data.uriScheme || "vscode";
-					editorName.value = data.name;
-					return;
+				if (!validateResponse || validateResponse(data)) {
+					return { port, data };
 				}
 			}
-		} catch {
-			// Port not available or timeout, continue to next
-		}
+		} catch {}
+	}
+	return null;
+}
+
+async function requestLocalNetworkAccess(): Promise<void> {
+	isRequestingAccess.value = true;
+	try {
+		await scanPorts({ timeout: 300 });
+	} catch {}
+	await checkLocalNetworkAccess();
+	isRequestingAccess.value = false;
+}
+
+async function checkExternalEditorStatus(): Promise<void> {
+	isExternalEditorActive.value = false;
+	externalEditorPort.value = null;
+
+	if (lnaPermissionStatus.value === "denied") return;
+
+	const result = await scanPorts({
+		validateResponse: (data) => data.active && data.extension === "frappe-script-editor",
+	});
+
+	if (result) {
+		isExternalEditorActive.value = true;
+		externalEditorPort.value = result.port;
+		externalEditorUriScheme.value = result.data?.uriScheme || "vscode";
+		editorName.value = result.data?.name || "VS Code";
 	}
 }
 
@@ -85,14 +129,21 @@ async function openInExternalEditor(
 }
 
 export function useExternalEditor() {
-	onMounted(() => {
-		checkExternalEditorStatus();
+	onMounted(async () => {
+		await checkLocalNetworkAccess();
+		if (lnaPermissionStatus.value === "granted" || import.meta.env.DEV) {
+			await checkExternalEditorStatus();
+		}
 	});
 
 	return {
 		isExternalEditorActive,
 		openInExternalEditor,
 		editorName,
+		lnaPermissionStatus,
+		isRequestingAccess,
+		requestLocalNetworkAccess,
+		checkLocalNetworkAccess,
 	};
 }
 

From 39a0af1b5e4a7fa04df5b249777e468ca215a833 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 26 May 2026 11:38:11 +0530
Subject: [PATCH 06/12] fix: remove variable files

---
 .../builder_variable/gray_200/gray_200.json        | 14 --------------
 .../builder_variable/gray_400/gray_400.json        | 14 --------------
 .../builder_variable/gray_500/gray_500.json        | 14 --------------
 .../builder_variable/gray_600/gray_600.json        | 14 --------------
 .../builder_variable/gray_700/gray_700.json        | 14 --------------
 5 files changed, 70 deletions(-)
 delete mode 100644 builder/builder/builder_variable/gray_200/gray_200.json
 delete mode 100644 builder/builder/builder_variable/gray_400/gray_400.json
 delete mode 100644 builder/builder/builder_variable/gray_500/gray_500.json
 delete mode 100644 builder/builder/builder_variable/gray_600/gray_600.json
 delete mode 100644 builder/builder/builder_variable/gray_700/gray_700.json

diff --git a/builder/builder/builder_variable/gray_200/gray_200.json b/builder/builder/builder_variable/gray_200/gray_200.json
deleted file mode 100644
index 2b359c58e..000000000
--- a/builder/builder/builder_variable/gray_200/gray_200.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "creation": "2025-07-03 20:30:29.822822",
- "docstatus": 0,
- "doctype": "Builder Variable",
- "idx": 0,
- "is_standard": 1,
- "modified": "2025-07-04 15:19:30.412835",
- "modified_by": "Administrator",
- "name": "gray-200",
- "owner": "Administrator",
- "variable_name": "gray-200",
- "type": "Color",
- "value": "#EDEDED"
-}
diff --git a/builder/builder/builder_variable/gray_400/gray_400.json b/builder/builder/builder_variable/gray_400/gray_400.json
deleted file mode 100644
index cf8e8ea4f..000000000
--- a/builder/builder/builder_variable/gray_400/gray_400.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "creation": "2025-07-03 20:30:01.677360",
- "docstatus": 0,
- "doctype": "Builder Variable",
- "idx": 0,
- "is_standard": 1,
- "modified": "2025-07-04 15:19:30.425007",
- "modified_by": "Administrator",
- "name": "gray-400",
- "owner": "Administrator",
- "variable_name": "gray-400",
- "type": "Color",
- "value": "#C7C7C7"
-}
diff --git a/builder/builder/builder_variable/gray_500/gray_500.json b/builder/builder/builder_variable/gray_500/gray_500.json
deleted file mode 100644
index cf836c08e..000000000
--- a/builder/builder/builder_variable/gray_500/gray_500.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "creation": "2025-07-03 20:29:40.804845",
- "docstatus": 0,
- "doctype": "Builder Variable",
- "idx": 0,
- "is_standard": 1,
- "modified": "2025-07-04 15:19:30.429585",
- "modified_by": "Administrator",
- "name": "gray-500",
- "owner": "Administrator",
- "variable_name": "gray-500",
- "type": "Color",
- "value": "#999999"
-}
diff --git a/builder/builder/builder_variable/gray_600/gray_600.json b/builder/builder/builder_variable/gray_600/gray_600.json
deleted file mode 100644
index d6579e67f..000000000
--- a/builder/builder/builder_variable/gray_600/gray_600.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "creation": "2025-07-03 20:29:18.003824",
- "docstatus": 0,
- "doctype": "Builder Variable",
- "idx": 0,
- "is_standard": 1,
- "modified": "2025-07-04 15:19:30.436442",
- "modified_by": "Administrator",
- "name": "gray-600",
- "owner": "Administrator",
- "variable_name": "gray-600",
- "type": "Color",
- "value": "#7C7C7C"
-}
diff --git a/builder/builder/builder_variable/gray_700/gray_700.json b/builder/builder/builder_variable/gray_700/gray_700.json
deleted file mode 100644
index 397d8b229..000000000
--- a/builder/builder/builder_variable/gray_700/gray_700.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "creation": "2025-07-03 20:28:52.451410",
- "docstatus": 0,
- "doctype": "Builder Variable",
- "idx": 0,
- "is_standard": 1,
- "modified": "2025-07-04 15:19:30.455261",
- "modified_by": "Administrator",
- "name": "gray-700",
- "owner": "Administrator",
- "variable_name": "gray-700",
- "type": "Color",
- "value": "#525252"
-}

From 3d6a233f2b32647400e0c514caa5b274997184fb Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 00:10:37 +0530
Subject: [PATCH 07/12] feat: add realtime script sync

---
 .gitignore                                    |  1 +
 frontend/components.d.ts                      |  1 -
 .../src/components/Controls/CodeEditor.vue    | 12 ++-
 .../src/composables/useRealtimeDocSync.ts     | 84 +++++++++++++++++++
 4 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/composables/useRealtimeDocSync.ts

diff --git a/.gitignore b/.gitignore
index 3e19a5565..212b223f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ builder/public/page_scripts
 builder/public/page_styles
 builder/www/_builder.html
 builder/public/dist
+codedb.snapshot
\ No newline at end of file
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 1418d20c0..d2429f933 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -98,7 +98,6 @@ declare module 'vue' {
     Input: typeof import('./src/components/Controls/Input.vue')['default']
     InputLabel: typeof import('./src/components/Controls/InputLabel.vue')['default']
     JavaScript: typeof import('./src/components/Icons/JavaScript.vue')['default']
-    KeyboardShortcutsModal: typeof import('./src/components/KeyboardShortcutsModal.vue')['default']
     Layers: typeof import('./src/components/Icons/Layers.vue')['default']
     Loading: typeof import('./src/components/Icons/Loading.vue')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index edb1200b2..e90b9e45f 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -59,10 +59,11 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, VNodeRef, watch } from "vue";
+import { ref, VNodeRef, watch, computed } from "vue";
 import CodeMirrorEditor from "./CodeMirror/CodeMirrorEditor.vue";
 import { useExternalEditor, type OpenScriptRequest } from "@/composables/useExternalEditor";
-import { toast } from "vue-sonner";
+import { toast } from "frappe-ui";
+import { useRealtimeDocSync } from "@/composables/useRealtimeDocSync";
 
 const props = withDefaults(
 	defineProps<{
@@ -182,6 +183,13 @@ function resetEditor(resetHistory = false) {
 	isDirty.value = false;
 }
 
+const externalEditorContextRef = computed(() => props.externalEditorContext);
+
+useRealtimeDocSync(externalEditorContextRef, getModelValue, (newValue: string) => {
+	editor.value?.resetEditor?.({ content: newValue, resetHistory: false, autofocus: false });
+	isDirty.value = false;
+});
+
 watch(
 	() => props.modelValue,
 	() => {
diff --git a/frontend/src/composables/useRealtimeDocSync.ts b/frontend/src/composables/useRealtimeDocSync.ts
new file mode 100644
index 000000000..4001cb5e1
--- /dev/null
+++ b/frontend/src/composables/useRealtimeDocSync.ts
@@ -0,0 +1,84 @@
+import { type Ref, watchEffect } from "vue";
+import useBuilderStore from "@/stores/builderStore";
+import { call } from "frappe-ui";
+import type { OpenScriptRequest } from "./useExternalEditor";
+
+function findBlockById(blocks: Record<string, any>[], blockId: string): Record<string, any> | null {
+	for (const block of blocks) {
+		if (block.blockId === blockId) return block;
+		if (block.children?.length) {
+			const found = findBlockById(block.children, blockId);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+
+function hasValidContext(ctx: OpenScriptRequest | undefined): ctx is OpenScriptRequest {
+	if (!ctx) return false;
+	return !!(ctx.field || (ctx.blockId && ctx.blockField));
+}
+
+export function useRealtimeDocSync(
+	context: Ref<OpenScriptRequest | undefined>,
+	getCurrentValue: () => string,
+	onUpdate: (value: string) => void,
+) {
+	const builderStore = useBuilderStore();
+
+	watchEffect((onCleanup) => {
+		const ctx = context.value;
+		if (!hasValidContext(ctx)) return;
+
+		let isActive = true;
+
+		const key = `${ctx.doctype}:${ctx.docname}`;
+		const didSubscribe = !builderStore.realtime.open_docs.has(key);
+		if (didSubscribe) {
+			builderStore.realtime.doc_subscribe(ctx.doctype, ctx.docname);
+		}
+
+		const handleDocUpdate = async (data: { doctype: string; name: string }) => {
+			if (!isActive || data.doctype !== ctx.doctype || data.name !== ctx.docname) return;
+
+			let newValue: string;
+
+			try {
+				if (ctx.field) {
+					const result = await call("frappe.client.get_value", {
+						doctype: ctx.doctype,
+						filters: ctx.docname,
+						fieldname: ctx.field,
+					});
+					newValue = result?.[ctx.field] ?? "";
+				} else {
+					const result = await call("frappe.client.get_value", {
+						doctype: ctx.doctype,
+						filters: ctx.docname,
+						fieldname: ["draft_blocks", "blocks"],
+					});
+					const blocksJson = result?.draft_blocks ?? result?.blocks ?? "[]";
+					const blocks: Record<string, any>[] = JSON.parse(blocksJson);
+					const block = findBlockById(Array.isArray(blocks) ? blocks : [blocks], ctx.blockId!);
+					newValue = block?.[ctx.blockField!] ?? "";
+				}
+			} catch {
+				return;
+			}
+
+			if (newValue === getCurrentValue()) return;
+
+			onUpdate(newValue);
+		};
+
+		builderStore.realtime.on("doc_update", handleDocUpdate);
+
+		onCleanup(() => {
+			isActive = false;
+			builderStore.realtime.off("doc_update", handleDocUpdate);
+			if (didSubscribe) {
+				builderStore.realtime.doc_unsubscribe(ctx.doctype, ctx.docname);
+			}
+		});
+	});
+}

From 4189d0d6bd6db6b460b0cb25ebc5713dbbb97a41 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 11:06:49 +0530
Subject: [PATCH 08/12] fi: realtime sync enablement

---
 frontend/src/composables/useRealtimeDocSync.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/composables/useRealtimeDocSync.ts b/frontend/src/composables/useRealtimeDocSync.ts
index 4001cb5e1..645670268 100644
--- a/frontend/src/composables/useRealtimeDocSync.ts
+++ b/frontend/src/composables/useRealtimeDocSync.ts
@@ -1,6 +1,7 @@
 import { type Ref, watchEffect } from "vue";
 import useBuilderStore from "@/stores/builderStore";
 import { call } from "frappe-ui";
+import { useExternalEditor } from "./useExternalEditor";
 import type { OpenScriptRequest } from "./useExternalEditor";
 
 function findBlockById(blocks: Record<string, any>[], blockId: string): Record<string, any> | null {
@@ -25,9 +26,11 @@ export function useRealtimeDocSync(
 	onUpdate: (value: string) => void,
 ) {
 	const builderStore = useBuilderStore();
+	const { isExternalEditorActive } = useExternalEditor();
 
 	watchEffect((onCleanup) => {
 		const ctx = context.value;
+		if (!isExternalEditorActive.value) return;
 		if (!hasValidContext(ctx)) return;
 
 		let isActive = true;

From 9cd249d9c47f24c615dd830f19c44b0e732ff385 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 12:20:22 +0530
Subject: [PATCH 09/12] fix: recursive unsubscribe event bug

---
 .../src/composables/useRealtimeDocSync.ts     | 97 +++++++++----------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/frontend/src/composables/useRealtimeDocSync.ts b/frontend/src/composables/useRealtimeDocSync.ts
index 645670268..a7eb8b369 100644
--- a/frontend/src/composables/useRealtimeDocSync.ts
+++ b/frontend/src/composables/useRealtimeDocSync.ts
@@ -1,4 +1,4 @@
-import { type Ref, watchEffect } from "vue";
+import { type Ref, watch, toRaw, onUnmounted } from "vue";
 import useBuilderStore from "@/stores/builderStore";
 import { call } from "frappe-ui";
 import { useExternalEditor } from "./useExternalEditor";
@@ -25,63 +25,60 @@ export function useRealtimeDocSync(
 	getCurrentValue: () => string,
 	onUpdate: (value: string) => void,
 ) {
-	const builderStore = useBuilderStore();
+	const { realtime } = useBuilderStore();
 	const { isExternalEditorActive } = useExternalEditor();
 
-	watchEffect((onCleanup) => {
-		const ctx = context.value;
-		if (!isExternalEditorActive.value) return;
-		if (!hasValidContext(ctx)) return;
-
-		let isActive = true;
-
-		const key = `${ctx.doctype}:${ctx.docname}`;
-		const didSubscribe = !builderStore.realtime.open_docs.has(key);
-		if (didSubscribe) {
-			builderStore.realtime.doc_subscribe(ctx.doctype, ctx.docname);
-		}
+	watch(
+		[() => context.value, () => isExternalEditorActive.value],
+		([ctx]) => {
+			if (!isExternalEditorActive.value || !hasValidContext(ctx)) return;
 
-		const handleDocUpdate = async (data: { doctype: string; name: string }) => {
-			if (!isActive || data.doctype !== ctx.doctype || data.name !== ctx.docname) return;
+			const key = `${ctx.doctype}:${ctx.docname}`;
+			if (!realtime.open_docs.has(key)) {
+				realtime.doc_subscribe(ctx.doctype, ctx.docname);
+			}
 
-			let newValue: string;
+			const handleDocUpdate = async (data: { doctype: string; name: string }) => {
+				if (data.doctype !== ctx.doctype || data.name !== ctx.docname) return;
 
-			try {
-				if (ctx.field) {
-					const result = await call("frappe.client.get_value", {
-						doctype: ctx.doctype,
-						filters: ctx.docname,
-						fieldname: ctx.field,
-					});
-					newValue = result?.[ctx.field] ?? "";
-				} else {
-					const result = await call("frappe.client.get_value", {
-						doctype: ctx.doctype,
-						filters: ctx.docname,
-						fieldname: ["draft_blocks", "blocks"],
-					});
-					const blocksJson = result?.draft_blocks ?? result?.blocks ?? "[]";
-					const blocks: Record<string, any>[] = JSON.parse(blocksJson);
-					const block = findBlockById(Array.isArray(blocks) ? blocks : [blocks], ctx.blockId!);
-					newValue = block?.[ctx.blockField!] ?? "";
+				let newValue: string;
+				try {
+					if (ctx.field) {
+						const result = await call("frappe.client.get_value", {
+							doctype: ctx.doctype,
+							filters: ctx.docname,
+							fieldname: ctx.field,
+						});
+						newValue = result?.[ctx.field] ?? "";
+					} else {
+						const result = await call("frappe.client.get_value", {
+							doctype: ctx.doctype,
+							filters: ctx.docname,
+							fieldname: ["draft_blocks", "blocks"],
+						});
+						const blocksJson = result?.draft_blocks ?? result?.blocks ?? "[]";
+						const blocks: Record<string, any>[] = JSON.parse(blocksJson);
+						const block = findBlockById(Array.isArray(blocks) ? blocks : [blocks], ctx.blockId!);
+						newValue = block?.[ctx.blockField!] ?? "";
+					}
+				} catch {
+					return;
 				}
-			} catch {
-				return;
-			}
-
-			if (newValue === getCurrentValue()) return;
 
-			onUpdate(newValue);
-		};
+				if (newValue !== getCurrentValue()) onUpdate(newValue);
+			};
 
-		builderStore.realtime.on("doc_update", handleDocUpdate);
+			realtime.on("doc_update", handleDocUpdate);
+		},
+		{ immediate: true },
+	);
 
-		onCleanup(() => {
-			isActive = false;
-			builderStore.realtime.off("doc_update", handleDocUpdate);
-			if (didSubscribe) {
-				builderStore.realtime.doc_unsubscribe(ctx.doctype, ctx.docname);
-			}
-		});
+	onUnmounted(() => {
+		const ctx = context.value;
+		if (!isExternalEditorActive.value || !hasValidContext(ctx)) return;
+		const key = `${ctx.doctype}:${ctx.docname}`;
+		if (realtime.open_docs.has(key)) {
+			realtime.doc_unsubscribe(ctx.doctype, ctx.docname);
+		}
 	});
 }

From b7f4b72b134abc99d072484e4c1a229fbb4f7681 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 16:18:23 +0530
Subject: [PATCH 10/12] refactor: realtime sync logic

---
 frontend/src/App.vue                          |   3 +
 .../src/components/Controls/CodeEditor.vue    |  14 +--
 frontend/src/composables/useExternalEditor.ts |   2 +-
 frontend/src/composables/useLiveDocSync.ts    | 111 ++++++++++++++++++
 .../src/composables/useRealtimeDocSync.ts     |  84 -------------
 frontend/src/pages/PageBuilder.vue            |   3 +
 6 files changed, 121 insertions(+), 96 deletions(-)
 create mode 100644 frontend/src/composables/useLiveDocSync.ts
 delete mode 100644 frontend/src/composables/useRealtimeDocSync.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 481cc3597..a064f5219 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -12,6 +12,7 @@
 <script setup lang="ts">
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
+import { useBuilderSettingsSync } from "@/composables/useLiveDocSync";
 import { UseDark } from "@vueuse/components";
 import { useTitle } from "@vueuse/core";
 import { FrappeUIProvider } from "frappe-ui";
@@ -24,6 +25,8 @@ const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 const route = useRoute();
 
+useBuilderSettingsSync();
+
 provide("sessionUser", sessionUser);
 
 const title = computed(() => {
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index e544ee54e..ba5d112e7 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -11,7 +11,7 @@
 					<span v-if="isDirty" class="text-[10px] text-gray-600">●</span>
 				</span>
 			</div>
-			<BuilderButton
+			<Button
 				v-if="isExternalEditorActive && externalEditorContext"
 				@click="handleOpenInExternalEditor"
 				variant="ghost"
@@ -19,7 +19,7 @@
 				class="!gap-1 text-p-xs"
 				icon-right="arrow-up-right">
 				{{ `Open in ${editorName}` }}
-			</BuilderButton>
+			</Button>
 		</div>
 		<div
 			:style="{
@@ -59,11 +59,10 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, VNodeRef, watch, computed } from "vue";
+import { ref, VNodeRef, watch } from "vue";
 import CodeMirrorEditor from "./CodeMirror/CodeMirrorEditor.vue";
 import { useExternalEditor, type OpenScriptRequest } from "@/composables/useExternalEditor";
 import { toast } from "frappe-ui";
-import { useRealtimeDocSync } from "@/composables/useRealtimeDocSync";
 
 const props = withDefaults(
 	defineProps<{
@@ -183,13 +182,6 @@ function resetEditor(resetHistory = false) {
 	isDirty.value = false;
 }
 
-const externalEditorContextRef = computed(() => props.externalEditorContext);
-
-useRealtimeDocSync(externalEditorContextRef, getModelValue, (newValue: string) => {
-	editor.value?.resetEditor?.({ content: newValue, resetHistory: false, autofocus: false });
-	isDirty.value = false;
-});
-
 watch(
 	() => props.modelValue,
 	() => {
diff --git a/frontend/src/composables/useExternalEditor.ts b/frontend/src/composables/useExternalEditor.ts
index c60aac138..ce1228ec5 100644
--- a/frontend/src/composables/useExternalEditor.ts
+++ b/frontend/src/composables/useExternalEditor.ts
@@ -131,7 +131,7 @@ async function openInExternalEditor(
 export function useExternalEditor() {
 	onMounted(async () => {
 		await checkLocalNetworkAccess();
-		if (lnaPermissionStatus.value === "granted" || import.meta.env.DEV) {
+		if (!isExternalEditorActive.value && (lnaPermissionStatus.value === "granted" || import.meta.env.DEV)) {
 			await checkExternalEditorStatus();
 		}
 	});
diff --git a/frontend/src/composables/useLiveDocSync.ts b/frontend/src/composables/useLiveDocSync.ts
new file mode 100644
index 000000000..d0584bfc6
--- /dev/null
+++ b/frontend/src/composables/useLiveDocSync.ts
@@ -0,0 +1,111 @@
+import { onMounted, onUnmounted, watch } from "vue";
+import useBuilderStore from "@/stores/builderStore";
+import usePageStore from "@/stores/pageStore";
+import { builderSettings } from "@/data/builderSettings";
+import type { BuilderPage } from "@/types/doctypes";
+
+interface DocUpdatePayload {
+	doctype: string;
+	name: string;
+}
+
+export function useBuilderSettingsSync() {
+	const builderStore = useBuilderStore();
+	const { realtime } = builderStore;
+
+	const handler = (data: DocUpdatePayload) => {
+		if (data.doctype !== "Builder Settings") return;
+		builderSettings.reload();
+	};
+
+	onMounted(() => {
+		realtime.doc_subscribe("Builder Settings", "Builder Settings");
+		realtime.on("doc_update", handler);
+	});
+
+	onUnmounted(() => {
+		realtime.doc_unsubscribe("Builder Settings", "Builder Settings");
+		realtime.off("doc_update", handler);
+	});
+}
+
+export function useActivePageSync() {
+	const builderStore = useBuilderStore();
+	const pageStore = usePageStore();
+	const { realtime } = builderStore;
+
+	const handler = async (data: DocUpdatePayload) => {
+		if (data.doctype !== "Builder Page") return;
+		const activeName = pageStore.activePage?.name;
+		if (!activeName || data.name !== activeName) return;
+
+		if (pageStore.savingPage) return;
+		const fresh = await pageStore.fetchActivePage(activeName);
+
+		if (!fresh || pageStore.savingPage || pageStore.activePage?.name !== activeName) return;
+
+		const { draft_blocks: freshDraftBlocks, blocks: _blocks, ...meta } = fresh as BuilderPage;
+		Object.assign(pageStore.activePage, meta);
+
+		if (freshDraftBlocks) {
+			try {
+				const freshBlocks = JSON.parse(freshDraftBlocks as string);
+				const scriptMap = new Map<string, { blockClientScript?: string; blockDataScript?: string }>();
+
+				function collectScripts(
+					blocks: {
+						blockId: string;
+						blockClientScript?: string;
+						blockDataScript?: string;
+						children?: any[];
+					}[],
+				) {
+					for (const b of blocks) {
+						scriptMap.set(b.blockId, {
+							blockClientScript: b.blockClientScript,
+							blockDataScript: b.blockDataScript,
+						});
+						if (b.children?.length) collectScripts(b.children);
+					}
+				}
+				collectScripts(freshBlocks);
+
+				function applyScripts(
+					blocks: {
+						blockId: string;
+						blockClientScript?: string;
+						blockDataScript?: string;
+						children?: any[];
+					}[],
+				) {
+					for (const block of blocks) {
+						const scripts = scriptMap.get(block.blockId);
+						if (scripts) {
+							if (scripts.blockClientScript !== undefined)
+								block.blockClientScript = scripts.blockClientScript;
+							if (scripts.blockDataScript !== undefined) block.blockDataScript = scripts.blockDataScript;
+						}
+						if (block.children?.length) applyScripts(block.children);
+					}
+				}
+				applyScripts(pageStore.pageBlocks);
+			} catch {
+				// ignore JSON parse errors
+			}
+		}
+	};
+
+	realtime.on("doc_update", handler);
+
+	watch([() => pageStore.activePage, () => realtime.subscribing], () => {
+		if (realtime.subscribing) {
+			return;
+		}
+		realtime.doc_subscribe("Builder Page", pageStore.activePage?.name as string);
+	});
+
+	onUnmounted(() => {
+		realtime.doc_unsubscribe("Builder Page", pageStore.activePage?.name as string);
+		realtime.off("doc_update", handler);
+	});
+}
diff --git a/frontend/src/composables/useRealtimeDocSync.ts b/frontend/src/composables/useRealtimeDocSync.ts
deleted file mode 100644
index a7eb8b369..000000000
--- a/frontend/src/composables/useRealtimeDocSync.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { type Ref, watch, toRaw, onUnmounted } from "vue";
-import useBuilderStore from "@/stores/builderStore";
-import { call } from "frappe-ui";
-import { useExternalEditor } from "./useExternalEditor";
-import type { OpenScriptRequest } from "./useExternalEditor";
-
-function findBlockById(blocks: Record<string, any>[], blockId: string): Record<string, any> | null {
-	for (const block of blocks) {
-		if (block.blockId === blockId) return block;
-		if (block.children?.length) {
-			const found = findBlockById(block.children, blockId);
-			if (found) return found;
-		}
-	}
-	return null;
-}
-
-function hasValidContext(ctx: OpenScriptRequest | undefined): ctx is OpenScriptRequest {
-	if (!ctx) return false;
-	return !!(ctx.field || (ctx.blockId && ctx.blockField));
-}
-
-export function useRealtimeDocSync(
-	context: Ref<OpenScriptRequest | undefined>,
-	getCurrentValue: () => string,
-	onUpdate: (value: string) => void,
-) {
-	const { realtime } = useBuilderStore();
-	const { isExternalEditorActive } = useExternalEditor();
-
-	watch(
-		[() => context.value, () => isExternalEditorActive.value],
-		([ctx]) => {
-			if (!isExternalEditorActive.value || !hasValidContext(ctx)) return;
-
-			const key = `${ctx.doctype}:${ctx.docname}`;
-			if (!realtime.open_docs.has(key)) {
-				realtime.doc_subscribe(ctx.doctype, ctx.docname);
-			}
-
-			const handleDocUpdate = async (data: { doctype: string; name: string }) => {
-				if (data.doctype !== ctx.doctype || data.name !== ctx.docname) return;
-
-				let newValue: string;
-				try {
-					if (ctx.field) {
-						const result = await call("frappe.client.get_value", {
-							doctype: ctx.doctype,
-							filters: ctx.docname,
-							fieldname: ctx.field,
-						});
-						newValue = result?.[ctx.field] ?? "";
-					} else {
-						const result = await call("frappe.client.get_value", {
-							doctype: ctx.doctype,
-							filters: ctx.docname,
-							fieldname: ["draft_blocks", "blocks"],
-						});
-						const blocksJson = result?.draft_blocks ?? result?.blocks ?? "[]";
-						const blocks: Record<string, any>[] = JSON.parse(blocksJson);
-						const block = findBlockById(Array.isArray(blocks) ? blocks : [blocks], ctx.blockId!);
-						newValue = block?.[ctx.blockField!] ?? "";
-					}
-				} catch {
-					return;
-				}
-
-				if (newValue !== getCurrentValue()) onUpdate(newValue);
-			};
-
-			realtime.on("doc_update", handleDocUpdate);
-		},
-		{ immediate: true },
-	);
-
-	onUnmounted(() => {
-		const ctx = context.value;
-		if (!isExternalEditorActive.value || !hasValidContext(ctx)) return;
-		const key = `${ctx.doctype}:${ctx.docname}`;
-		if (realtime.open_docs.has(key)) {
-			realtime.doc_unsubscribe(ctx.doctype, ctx.docname);
-		}
-	});
-}
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index d5fb18b3b..e224f3749 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -136,6 +136,7 @@ import { getUsersInfo } from "@/usersInfo";
 import blockController from "@/utils/blockController";
 import { getBlockInstance, getBlockObject, getRootBlockTemplate } from "@/utils/helpers";
 import { useBuilderEvents } from "@/utils/useBuilderEvents";
+import { useActivePageSync } from "@/composables/useLiveDocSync";
 import { breakpointsTailwind, useBreakpoints, useDebounceFn, useEventListener } from "@vueuse/core";
 import { createResource, KeyboardShortcutsModal, useShortcut } from "frappe-ui";
 import { computed, onActivated, onDeactivated, onMounted, provide, ref, watch, watchEffect } from "vue";
@@ -163,6 +164,8 @@ const modifyBlockContext = ref<Record<string, any> | null>(null);
 const modifyBlockId = ref<string | null>(null);
 const isAIGenerating = ref(false);
 
+useActivePageSync();
+
 provide("showAIGenerator", () => {
 	aiMode.value = "generate";
 	modifyBlockContext.value = null;

From d1546f202364c42d389e2c63330fe86cd5640332 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 16:24:04 +0530
Subject: [PATCH 11/12] revert: builder variable deletion

---
 .../builder_variable/gray_200/gray_200.json        | 14 ++++++++++++++
 .../builder_variable/gray_400/gray_400.json        | 14 ++++++++++++++
 .../builder_variable/gray_500/gray_500.json        | 14 ++++++++++++++
 .../builder_variable/gray_600/gray_600.json        | 14 ++++++++++++++
 .../builder_variable/gray_700/gray_700.json        | 14 ++++++++++++++
 5 files changed, 70 insertions(+)
 create mode 100644 builder/builder/builder_variable/gray_200/gray_200.json
 create mode 100644 builder/builder/builder_variable/gray_400/gray_400.json
 create mode 100644 builder/builder/builder_variable/gray_500/gray_500.json
 create mode 100644 builder/builder/builder_variable/gray_600/gray_600.json
 create mode 100644 builder/builder/builder_variable/gray_700/gray_700.json

diff --git a/builder/builder/builder_variable/gray_200/gray_200.json b/builder/builder/builder_variable/gray_200/gray_200.json
new file mode 100644
index 000000000..1ce99ab63
--- /dev/null
+++ b/builder/builder/builder_variable/gray_200/gray_200.json
@@ -0,0 +1,14 @@
+{
+ "creation": "2025-07-03 20:30:29.822822",
+ "docstatus": 0,
+ "doctype": "Builder Variable",
+ "idx": 0,
+ "is_standard": 1,
+ "modified": "2025-07-04 15:19:30.412835",
+ "modified_by": "Administrator",
+ "name": "gray-200",
+ "owner": "Administrator",
+ "variable_name": "gray-200",
+ "type": "Color",
+ "value": "#EDEDED"
+}
\ No newline at end of file
diff --git a/builder/builder/builder_variable/gray_400/gray_400.json b/builder/builder/builder_variable/gray_400/gray_400.json
new file mode 100644
index 000000000..e7b04c68c
--- /dev/null
+++ b/builder/builder/builder_variable/gray_400/gray_400.json
@@ -0,0 +1,14 @@
+{
+ "creation": "2025-07-03 20:30:01.677360",
+ "docstatus": 0,
+ "doctype": "Builder Variable",
+ "idx": 0,
+ "is_standard": 1,
+ "modified": "2025-07-04 15:19:30.425007",
+ "modified_by": "Administrator",
+ "name": "gray-400",
+ "owner": "Administrator",
+ "variable_name": "gray-400",
+ "type": "Color",
+ "value": "#C7C7C7"
+}
\ No newline at end of file
diff --git a/builder/builder/builder_variable/gray_500/gray_500.json b/builder/builder/builder_variable/gray_500/gray_500.json
new file mode 100644
index 000000000..9205afd1a
--- /dev/null
+++ b/builder/builder/builder_variable/gray_500/gray_500.json
@@ -0,0 +1,14 @@
+{
+ "creation": "2025-07-03 20:29:40.804845",
+ "docstatus": 0,
+ "doctype": "Builder Variable",
+ "idx": 0,
+ "is_standard": 1,
+ "modified": "2025-07-04 15:19:30.429585",
+ "modified_by": "Administrator",
+ "name": "gray-500",
+ "owner": "Administrator",
+ "variable_name": "gray-500",
+ "type": "Color",
+ "value": "#999999"
+}
\ No newline at end of file
diff --git a/builder/builder/builder_variable/gray_600/gray_600.json b/builder/builder/builder_variable/gray_600/gray_600.json
new file mode 100644
index 000000000..ee835719c
--- /dev/null
+++ b/builder/builder/builder_variable/gray_600/gray_600.json
@@ -0,0 +1,14 @@
+{
+ "creation": "2025-07-03 20:29:18.003824",
+ "docstatus": 0,
+ "doctype": "Builder Variable",
+ "idx": 0,
+ "is_standard": 1,
+ "modified": "2025-07-04 15:19:30.436442",
+ "modified_by": "Administrator",
+ "name": "gray-600",
+ "owner": "Administrator",
+ "variable_name": "gray-600",
+ "type": "Color",
+ "value": "#7C7C7C"
+}
\ No newline at end of file
diff --git a/builder/builder/builder_variable/gray_700/gray_700.json b/builder/builder/builder_variable/gray_700/gray_700.json
new file mode 100644
index 000000000..c9f1e66d1
--- /dev/null
+++ b/builder/builder/builder_variable/gray_700/gray_700.json
@@ -0,0 +1,14 @@
+{
+ "creation": "2025-07-03 20:28:52.451410",
+ "docstatus": 0,
+ "doctype": "Builder Variable",
+ "idx": 0,
+ "is_standard": 1,
+ "modified": "2025-07-04 15:19:30.455261",
+ "modified_by": "Administrator",
+ "name": "gray-700",
+ "owner": "Administrator",
+ "variable_name": "gray-700",
+ "type": "Color",
+ "value": "#525252"
+}
\ No newline at end of file

From 953fc8ff83464c8f7a9b119359e55a29363b2259 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 2 Jun 2026 16:33:22 +0530
Subject: [PATCH 12/12] fix: restore variables using git

---
 builder/builder/builder_variable/gray_200/gray_200.json | 2 +-
 builder/builder/builder_variable/gray_400/gray_400.json | 2 +-
 builder/builder/builder_variable/gray_500/gray_500.json | 2 +-
 builder/builder/builder_variable/gray_600/gray_600.json | 2 +-
 builder/builder/builder_variable/gray_700/gray_700.json | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/builder/builder/builder_variable/gray_200/gray_200.json b/builder/builder/builder_variable/gray_200/gray_200.json
index 1ce99ab63..2b359c58e 100644
--- a/builder/builder/builder_variable/gray_200/gray_200.json
+++ b/builder/builder/builder_variable/gray_200/gray_200.json
@@ -11,4 +11,4 @@
  "variable_name": "gray-200",
  "type": "Color",
  "value": "#EDEDED"
-}
\ No newline at end of file
+}
diff --git a/builder/builder/builder_variable/gray_400/gray_400.json b/builder/builder/builder_variable/gray_400/gray_400.json
index e7b04c68c..cf8e8ea4f 100644
--- a/builder/builder/builder_variable/gray_400/gray_400.json
+++ b/builder/builder/builder_variable/gray_400/gray_400.json
@@ -11,4 +11,4 @@
  "variable_name": "gray-400",
  "type": "Color",
  "value": "#C7C7C7"
-}
\ No newline at end of file
+}
diff --git a/builder/builder/builder_variable/gray_500/gray_500.json b/builder/builder/builder_variable/gray_500/gray_500.json
index 9205afd1a..cf836c08e 100644
--- a/builder/builder/builder_variable/gray_500/gray_500.json
+++ b/builder/builder/builder_variable/gray_500/gray_500.json
@@ -11,4 +11,4 @@
  "variable_name": "gray-500",
  "type": "Color",
  "value": "#999999"
-}
\ No newline at end of file
+}
diff --git a/builder/builder/builder_variable/gray_600/gray_600.json b/builder/builder/builder_variable/gray_600/gray_600.json
index ee835719c..d6579e67f 100644
--- a/builder/builder/builder_variable/gray_600/gray_600.json
+++ b/builder/builder/builder_variable/gray_600/gray_600.json
@@ -11,4 +11,4 @@
  "variable_name": "gray-600",
  "type": "Color",
  "value": "#7C7C7C"
-}
\ No newline at end of file
+}
diff --git a/builder/builder/builder_variable/gray_700/gray_700.json b/builder/builder/builder_variable/gray_700/gray_700.json
index c9f1e66d1..397d8b229 100644
--- a/builder/builder/builder_variable/gray_700/gray_700.json
+++ b/builder/builder/builder_variable/gray_700/gray_700.json
@@ -11,4 +11,4 @@
  "variable_name": "gray-700",
  "type": "Color",
  "value": "#525252"
-}
\ No newline at end of file
+}