diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 9b9823bb6..ba4af97ff 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 { Ref, inject, nextTick, ref, computed } 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,11 +64,33 @@ 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();
 };
 
-const contextMenuOptions: ContextMenuOption[] = [
+const contextMenuOptions = computed((): ContextMenuOption[] => [
 	{
 		label: "Edit with AI",
 		action: () => {
@@ -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: () => {
@@ -317,7 +353,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		disabled: () => builderStore.readOnlyMode,
 	},
-];
+]);
 
 defineExpose({
 	showContextMenu,
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/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/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..c60aac138
--- /dev/null
+++ b/frontend/src/composables/useExternalEditor.ts
@@ -0,0 +1,169 @@
+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;
+	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");
+const lnaPermissionStatus = ref<PermissionState>("prompt");
+const isRequestingAccess = ref(false);
+
+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(), timeout);
+
+			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 (!validateResponse || validateResponse(data)) {
+					return { port, data };
+				}
+			}
+		} 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";
+	}
+}
+
+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
+		}://PratikBadhe.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(async () => {
+		await checkLocalNetworkAccess();
+		if (lnaPermissionStatus.value === "granted" || import.meta.env.DEV) {
+			await checkExternalEditorStatus();
+		}
+	});
+
+	return {
+		isExternalEditorActive,
+		openInExternalEditor,
+		editorName,
+		lnaPermissionStatus,
+		isRequestingAccess,
+		requestLocalNetworkAccess,
+		checkLocalNetworkAccess,
+	};
+}
+
+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 };