diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index b783af5c..de5eaa2f 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -57,39 +57,55 @@ const EmptyComp = {
 const target = {
   active_id: false as any,
   comp_id: false as any,
-  comp_item_id: false as any,
+  instance_comp_id: false as any,
+  instance_item_id: false as any,
 };
 export const active = {
   hover_id: "",
+  prop_name: "",
   get item_id() {
     if (target.active_id === false) {
       target.active_id = localStorage.getItem("prasi-active-id") || "";
     }
-    return target.active_id;
+    return target.active_id || "";
   },
   set item_id(val: string) {
-    localStorage.setItem("prasi-active-id", val);
-    target.active_id = val;
+    localStorage.setItem("prasi-active-id", val || "");
+    target.active_id = val || "";
   },
   get comp_id() {
     if (target.comp_id === false) {
       target.comp_id = localStorage.getItem("prasi-comp-id") || "";
     }
-    return target.comp_id;
+    return target.comp_id || "";
   },
   set comp_id(val: string) {
-    localStorage.setItem("prasi-comp-id", val);
-    target.comp_id = val;
+    localStorage.setItem("prasi-comp-id", val || "");
+    target.comp_id = val || "";
   },
-  get comp_item_id() {
-    if (target.comp_item_id === false) {
-      target.comp_item_id = localStorage.getItem("prasi-comp-item-id") || "";
-    }
-    return target.comp_item_id;
-  },
-  set comp_item_id(val: string) {
-    localStorage.setItem("prasi-comp-item-id", val);
-    target.comp_item_id = val;
+  instance: {
+    get comp_id() {
+      if (target.instance_comp_id === false) {
+        target.instance_comp_id =
+          localStorage.getItem("prasi-instance-comp-id") || "";
+      }
+      return target.instance_comp_id || "";
+    },
+    set comp_id(val: string) {
+      localStorage.setItem("prasi-instance-comp-id", val || "");
+      target.instance_comp_id = val || "";
+    },
+    get item_id() {
+      if (target.instance_item_id === false) {
+        target.instance_item_id =
+          localStorage.getItem("prasi-instance-item-id") || "";
+      }
+      return target.instance_item_id || "";
+    },
+    set item_id(val: string) {
+      localStorage.setItem("prasi-instance-item-id", val || "");
+      target.instance_item_id = val || "";
+    },
   },
 };
 
diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
index 9b5ba3b8..f27f05b2 100644
--- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -66,12 +66,19 @@ export const ScriptMonaco = () => {
 
   const item = meta.item;
   const adv = item.adv || {};
-  const val: string = (
+  let val: string = (
     typeof adv[p.ui.popup.script.mode] === "string"
       ? adv[p.ui.popup.script.mode]
       : ""
   ) as any;
 
+  if (active.prop_name && item.type === "item" && item.component) {
+    const prop = item.component.props[active.prop_name];
+    if (prop) {
+      val = prop.value;
+    }
+  }
+
   const doEdit = async (newval: string, all?: boolean) => {
     if (local.editor && jscript.prettier.standalone) {
       const text = trim(
@@ -155,40 +162,8 @@ export const ScriptMonaco = () => {
             )
           );
           editor.setModel(model);
-          monaco.editor.registerEditorOpener({
-            openCodeEditor(source, r, selectionOrPosition) {
-              const cpath = r.path.substring(`scope~`.length).split("__");
-              const comp_id = cpath[0];
-              if (cpath[1]) {
-                const path = cpath[1].split("~");
-                const type = path[0] as "prop" | "passprop" | "local";
-                const id = path[path.length - 1].replace(".d.ts", "");
 
-                if (type === "prop") {
-                  return false;
-                }
-
-                if (comp_id) {
-                  let meta = p.page.meta[id];
-                  if (active.comp_id) {
-                    meta = p.comp.list[active.comp_id].meta[id];
-                  }
-
-                  if (meta && meta.item.originalId) {
-                    active.item_id = meta.item.originalId;
-                  }
-                  active.comp_id = comp_id;
-                } else {
-                  active.item_id = id;
-                }
-                p.render();
-              }
-
-              return false;
-            },
-          });
-
-          await jsMount(editor, monaco);
+          await jsMount(editor, monaco, p);
           await monacoTypings(
             {
               site_dts: p.site_dts,
diff --git a/app/web/src/nova/ed/panel/popup/script/scope.tsx b/app/web/src/nova/ed/panel/popup/script/scope.tsx
index 022d20eb..56d64197 100644
--- a/app/web/src/nova/ed/panel/popup/script/scope.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/scope.tsx
@@ -45,10 +45,13 @@ export const declareScope = async (
   });
 
   spreadScope(p, s, (arg) => {
+    let { prev } = arg;
     if (arg.type !== "local") {
       addScope(
         monaco,
-        `${arg.comp_id || ""}__${arg.type}~${arg.name}~${arg.id}`,
+        `${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
+          arg.type
+        }~${arg.name}~${arg.id}`,
         `\
 export const {};
 declare global {
@@ -58,7 +61,9 @@ declare global {
     } else {
       addScope(
         monaco,
-        `${arg.comp_id || ""}__${arg.type}~${arg.id}`,
+        `${arg.comp_id || ""}~${prev?.comp_id || ""}~${prev?.item_id || ""}__${
+          arg.type
+        }~${arg.id}`,
         `\
 export const {};
 const __val = ${arg.value};
@@ -81,6 +86,7 @@ type IEachArgScope = {
   index?: number;
   is_prop?: boolean;
   comp_id?: string;
+  prev?: { comp_id: string; item_id: string };
 };
 const spreadScope = (
   p: PG,
@@ -115,8 +121,9 @@ const spreadScope = (
   const mergeScopes = (
     parents: string[],
     each: (arg: IEachArgScope) => void,
-    comp_id?: string
+    arg: { comp_id?: string; prev?: { comp_id: string; item_id: string } }
   ) => {
+    let { comp_id, prev } = arg;
     for (const parent_id of parents) {
       let item = null as null | ISingleScope;
       if (layout && layout_scope[layout_id]) {
@@ -138,7 +145,10 @@ const spreadScope = (
       if (item) {
         if (item.c) {
           comp_id = item.c;
-          mergeScopes(item.p, each, item.c);
+          mergeScopes(item.p, each, {
+            comp_id: item.c,
+            prev: { item_id: parent_id, comp_id: arg.comp_id || "" },
+          });
         }
 
         const scope = item.s;
@@ -152,6 +162,7 @@ const spreadScope = (
               name: scope.local.name,
               value: scope.local?.value,
               index: scope.local?.index,
+              prev,
             });
 
           if (scope.passprop) {
@@ -164,6 +175,7 @@ const spreadScope = (
                 name: k,
                 value: v.value,
                 index: v.index,
+                prev,
               });
             }
           }
@@ -178,6 +190,7 @@ const spreadScope = (
                 name: k,
                 value: v.value,
                 is_prop: true,
+                prev,
               });
             }
           }
@@ -186,7 +199,7 @@ const spreadScope = (
     }
   };
 
-  mergeScopes(parents, each);
+  mergeScopes(parents, each, {});
 };
 
 const addScope = (monaco: Monaco, id: string, source: string) => {
diff --git a/app/web/src/nova/ed/panel/popup/script/script.tsx b/app/web/src/nova/ed/panel/popup/script/script.tsx
index 55f334d7..fef6a5ab 100644
--- a/app/web/src/nova/ed/panel/popup/script/script.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/script.tsx
@@ -2,7 +2,7 @@ import { useGlobal } from "web-utils";
 import { jscript } from "../../../../../utils/script/jscript";
 import { Loading } from "../../../../../utils/ui/loading";
 import { Modal } from "../../../../../utils/ui/modal";
-import { EDGlobal } from "../../../logic/ed-global";
+import { EDGlobal, active } from "../../../logic/ed-global";
 import { ScriptWorkbench } from "./workbench";
 
 export const EdPopScript = () => {
@@ -14,6 +14,7 @@ export const EdPopScript = () => {
         onOpenChange={(open) => {
           if (!open) {
             p.ui.popup.script.open = false;
+            active.prop_name = "";
             p.render();
           }
         }}
diff --git a/app/web/src/nova/ed/panel/popup/script/workbench.tsx b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
index 914e0635..185b2ff2 100644
--- a/app/web/src/nova/ed/panel/popup/script/workbench.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/workbench.tsx
@@ -1,6 +1,6 @@
 import { useGlobal } from "web-utils";
 import { ScriptMonaco } from "./monaco";
-import { EDGlobal } from "../../../logic/ed-global";
+import { EDGlobal, active } from "../../../logic/ed-global";
 
 export const ScriptWorkbench = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -8,36 +8,42 @@ export const ScriptWorkbench = () => {
     <div className="flex flex-1 items-stretch">
       <div className="flex flex-1 flex-col ">
         <div className="flex p-2 border-b space-x-2">
-          {[
-            { type: "js", color: "#e9522c" },
-            { type: "css", color: "#188228" },
-            { type: "html", color: "#2c3e83" },
-          ].map((e) => {
-            return (
-              <div
-                key={e.type}
-                className={cx(
-                  css`
-                    color: ${e.color};
-                    border: 1px solid ${e.color};
-                  `,
-                  "uppercase text-white text-[12px] cursor-pointer transition-all hover:opacity-100 w-[40px] text-center",
-                  p.ui.popup.script.mode === e.type
-                    ? css`
-                        background: ${e.color};
-                        color: white;
-                      `
-                    : "opacity-30"
-                )}
-                onClick={() => {
-                  p.ui.popup.script.mode = e.type as any;
-                  p.render();
-                }}
-              >
-                {e.type}
-              </div>
-            );
-          })}
+          {active.prop_name ? (
+            <div className="text-[12px]">{active.prop_name}</div>
+          ) : (
+            <>
+              {[
+                { type: "js", color: "#e9522c" },
+                { type: "css", color: "#188228" },
+                { type: "html", color: "#2c3e83" },
+              ].map((e) => {
+                return (
+                  <div
+                    key={e.type}
+                    className={cx(
+                      css`
+                        color: ${e.color};
+                        border: 1px solid ${e.color};
+                      `,
+                      "uppercase text-white text-[12px] cursor-pointer transition-all hover:opacity-100 w-[40px] text-center",
+                      p.ui.popup.script.mode === e.type
+                        ? css`
+                            background: ${e.color};
+                            color: white;
+                          `
+                        : "opacity-30"
+                    )}
+                    onClick={() => {
+                      p.ui.popup.script.mode = e.type as any;
+                      p.render();
+                    }}
+                  >
+                    {e.type}
+                  </div>
+                );
+              })}
+            </>
+          )}
         </div>
         <div className="relative flex flex-1">
           <ScriptMonaco />
diff --git a/app/web/src/nova/ed/panel/tree/node/item/action.tsx b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
index 79d3a807..8a257808 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/action.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
@@ -75,13 +75,19 @@ export const EdTreeAction = ({
 
                   const comp_id = comp.id;
                   if (comp_id) {
-                    active.comp_id = comp_id;
-                    active.comp_item_id = item.id;
+                    active.instance.item_id = item.id;
+                    active.instance.comp_id = active.comp_id;
+                    console.log(
+                      active.instance.comp_id,
+                      active.instance.item_id
+                    );
+
+                    active.comp_id = comp_id || "";
                     const root = p.comp.list[comp_id].tree.find(
                       (e) => e.parent === "root"
                     );
                     if (root && typeof root.id === "string") {
-                      active.item_id = root.id;
+                      active.item_id = root.id || "";
                     }
 
                     p.render();
@@ -102,9 +108,10 @@ export const EdTreeAction = ({
                     e.preventDefault();
 
                     if (active.comp_id) {
-                      active.comp_id = "";
-                      active.item_id = active.comp_item_id;
-                      active.comp_item_id = "";
+                      active.comp_id = active.instance.comp_id || "";
+                      active.item_id = active.instance.item_id || "";
+                      active.instance.comp_id = "";
+                      active.instance.item_id = "";
                       p.render();
                     }
                   }}
diff --git a/app/web/src/utils/script/mount.tsx b/app/web/src/utils/script/mount.tsx
index 889f8dac..4c2f33b8 100644
--- a/app/web/src/utils/script/mount.tsx
+++ b/app/web/src/utils/script/mount.tsx
@@ -5,6 +5,7 @@ import {
   getWorker,
 } from "monaco-jsx-syntax-highlight-v2";
 import { jscript } from "./jscript";
+import { PG, active } from "../../nova/ed/logic/ed-global";
 
 export type MonacoEditor = Parameters<OnMount>[0];
 type Monaco = Parameters<OnMount>[1];
@@ -12,7 +13,7 @@ type CompilerOptions = Parameters<
   Parameters<OnMount>[1]["languages"]["typescript"]["typescriptDefaults"]["setCompilerOptions"]
 >[0];
 
-export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
+export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p: PG) => {
   const m = monaco as any;
   if (!m.customJSMounted) {
     m.customJSMounted = true;
@@ -32,6 +33,58 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
     moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
   };
 
+  monaco.editor.registerEditorOpener({
+    openCodeEditor(source, r, selectionOrPosition) {
+      p.ui.popup.script.mode === "js";
+      const cpath = r.path.substring(`scope~`.length).split("__");
+      const [comp_id, prev_comp_id, prev_item_id] = cpath[0].split("~");
+      if (cpath[1]) {
+        const path = cpath[1].split("~");
+        const type = path[0] as "prop" | "passprop" | "local";
+        const id = path[path.length - 1].replace(".d.ts", "");
+
+        if (type === "prop") {
+          active.prop_name = path[1];
+
+          if (
+            !prev_comp_id &&
+            !prev_item_id &&
+            active.instance.item_id &&
+            active.comp_id
+          ) {
+            active.item_id = active.instance.item_id;
+            active.comp_id = active.instance.comp_id;
+            active.instance.item_id = "";
+            active.instance.comp_id = "";
+            p.render();
+          }
+
+          return false;
+        }
+
+        if (comp_id) {
+          let meta = p.page.meta[id];
+          if (active.comp_id) {
+            meta = p.comp.list[active.comp_id].meta[id];
+          }
+
+          active.instance.comp_id = prev_comp_id;
+          active.instance.item_id = prev_item_id;
+
+          if (meta && meta.item.originalId) {
+            active.item_id = meta.item.originalId;
+          }
+          active.comp_id = comp_id;
+        } else {
+          active.item_id = id;
+        }
+        p.render();
+      }
+
+      return false;
+    },
+  });
+
   monaco.languages.registerDocumentFormattingEditProvider("typescript", {
     async provideDocumentFormattingEdits(model, options, token) {
       const prettier = jscript.prettier.standalone;