diff --git a/.gitignore b/.gitignore
index 196a03d2b..0bf2b37d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ builder/public/page_scripts
 builder/public/page_styles
 **/www/_builder.html
 builder/public/dist
+codedb.snapshot
\ No newline at end of file
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/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 6b476e875..e6f31b617 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -12,15 +12,19 @@ import { promptCreateComponent } from "@/utils/dialogs";
 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 { useExternalEditor, createEditorContext } from "@/composables/useExternalEditor";
 import { toast } from "frappe-ui";
 
 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);
@@ -58,11 +62,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: () => {
@@ -258,6 +284,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: () => {
@@ -324,7 +360,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 3db86f122..8469978cc 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-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>
+			<Button
+				v-if="isExternalEditorActive && externalEditorContext"
+				@click="handleOpenInExternalEditor"
+				variant="ghost"
+				size="sm"
+				class="!gap-1 text-p-xs"
+				icon-right="arrow-up-right">
+				{{ `Open in ${editorName}` }}
+			</Button>
+		</div>
 		<div
 			:style="{
 				'min-height': height,
@@ -25,7 +42,7 @@
 			<Button
 				@click="actionButton?.handler"
 				variant="subtle"
-				class="!h-6 !w-6 border !border-outline-gray-2 bg-surface-base [&>svg]:!h-3.5 [&>svg]:!w-3.5"
+				class="bg-surface-base !h-6 !w-6 border !border-outline-gray-2 [&>svg]:!h-3.5 [&>svg]:!w-3.5"
 				:icon="actionButton.icon"
 				:title="actionButton.label"
 				:disabled="readonly"></Button>
@@ -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 "frappe-ui";
 
 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 bbf39790b..d066c6783 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -122,7 +122,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>
@@ -140,6 +141,7 @@ import draggable from "vuedraggable";
 import CodeEditor from "./Controls/CodeEditor.vue";
 import CSSIcon from "./Icons/CSS.vue";
 import JavaScriptIcon from "./Icons/JavaScript.vue";
+import { createEditorContext } from "@/composables/useExternalEditor";
 
 const { capture } = useTelemetry();
 
@@ -196,6 +198,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 6eb40327c..ee3d96e1a 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -25,7 +25,7 @@
 			<div v-else class="mt-2 text-center text-sm text-ink-gray-6">Select a block to edit script</div>
 		</div>
 		<div
-			class="absolute bottom-0 left-0 box-border flex w-full items-center justify-between border-t bg-surface-base p-4 py-2">
+			class="bg-surface-base absolute bottom-0 left-0 box-border flex w-full items-center justify-between border-t p-4 py-2">
 			<h2 class="text-base text-ink-gray-6">Mode</h2>
 			<TabButtons
 				class="w-fit"
@@ -65,13 +65,14 @@
 								: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"
 								label="Data Preview"
 								:showLineNumbers="true"
-								class="-mt-5 w-1/3 [&>div>div]:bg-surface-base"
+								class="[&>div>div]:bg-surface-base -mt-5 w-1/3"
 								height="calc(100% - 110px)"
 								description='Use Data Script to provide dynamic data to your web page.<br>
 								<b>Example:</b> data.events = frappe.get_list("Event")<br><br>
@@ -117,6 +118,7 @@ import CodeEditor from "./Controls/CodeEditor.vue";
 import TabButtons from "./Controls/TabButtons.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
 import PropsEditor from "./PropsEditor.vue";
+import { createEditorContext } from "@/composables/useExternalEditor";
 import useCanvasStore from "@/stores/canvasStore.js";
 
 const { capture } = useTelemetry();
@@ -151,6 +153,15 @@ const blockClientScript = computed(() => {
 	return "";
 });
 
+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 f71221124..ad1359a04 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -5,7 +5,7 @@
 				Execute Block Client Scripts in Editor
 			</label>
 			<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,18 +26,57 @@
 					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>
 <script setup lang="ts">
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
-import { Select, Switch } from "frappe-ui";
+import { Button, Select } from "frappe-ui";
+import { useExternalEditor } from "@/composables/useExternalEditor";
 
 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..ce1228ec5
--- /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 (!isExternalEditorActive.value && (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 };
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/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 184f47a48..3a7c99c22 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -138,6 +138,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";
@@ -165,6 +166,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;