diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index d3310ec3..f539dd4b 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -128,6 +128,7 @@ export type EdMeta = {
   /** script related meta **/
   jsx_scope_id?: string;
   propval?: Record<string, any>;
+  propvis?: Record<string, boolean>;
   indexed_scope: Record<string, any>;
   memoize?: Record<
     string,
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 a3c48911..da381345 100644
--- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -131,7 +131,10 @@ export const ScriptMonaco = () => {
     }
   }
 
-  if (p.ui.popup.script.type === "prop-master") {
+  if (
+    p.ui.popup.script.type === "prop-master" ||
+    p.ui.popup.script.type === "prop-instance"
+  ) {
     const mprops = mitem?.get("component")?.get("props");
     if (mprops) {
       const mprop = mprops.get(p.ui.popup.script.prop_name);
diff --git a/app/web/src/nova/ed/panel/popup/script/pop-script.tsx b/app/web/src/nova/ed/panel/popup/script/pop-script.tsx
index 350ee391..929c9f02 100644
--- a/app/web/src/nova/ed/panel/popup/script/pop-script.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/pop-script.tsx
@@ -16,7 +16,10 @@ export const EdPopScript = () => {
           if (!open) {
             p.ui.popup.script.open = false;
 
-            if (p.ui.popup.script.prop_name) {
+            if (
+              p.ui.popup.script.prop_name &&
+              p.ui.popup.script.type === "prop-master"
+            ) {
               propPopover.name = p.ui.popup.script.prop_name;
             }
 
diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx
index d2acd9be..97ec45df 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx
@@ -13,6 +13,7 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
   const local = useLocal({
     rightClickEvent: null as any,
     reset: { mprop: null as any, name: "" },
+    showJSX: false,
   });
 
   const item = meta?.item as IItem;
@@ -31,6 +32,15 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
     mcprops.forEach((m, key) => {
       let mprop = mprops.get(key);
 
+      const type = m.get("meta")?.get("type") || "text";
+      if (meta.propvis) {
+        if (meta.propvis[key] === false) return;
+      }
+
+      if (!local.showJSX && type === "content-element") {
+        return;
+      }
+
       if (!mprop) {
         const json = m.toJSON();
         const map = new Y.Map() as any;
diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
index c69d4909..4043fafa 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
@@ -53,7 +53,7 @@ export const EdPropInstanceText: FC<{
       )}
       <AutoHeightTextarea
         className="flex-1 outline-none border-l p-1 ml-1 overflow-hidden focus:bg-blue-50"
-        value={local.value}
+        value={local.value || ""}
         spellCheck={false}
         onChange={(e) => {
           local.value = e.currentTarget.value;
diff --git a/app/web/src/nova/view/render/meta/script/comp-propval.tsx b/app/web/src/nova/view/render/meta/script/comp-propval.tsx
index 8d136e70..86927517 100644
--- a/app/web/src/nova/view/render/meta/script/comp-propval.tsx
+++ b/app/web/src/nova/view/render/meta/script/comp-propval.tsx
@@ -105,8 +105,31 @@ export const compPropVal = (
         }
 
         result[name] = value;
-        meta.propval = result;
       }
+      meta.propval = result;
+
+      const propvis: any = {};
+      for (const [name, _prop] of cprops) {
+        const prop = props[name] || _prop;
+        if (prop.visible) {
+          const finalArgs = { ...args, ...result };
+          try {
+            const fn = new Function(
+              ...Object.keys(finalArgs),
+              `return ${_prop.visible}`
+            );
+            propvis[name] = fn(...Object.values(finalArgs));
+          } catch (e) {
+            const cname = meta.item.name;
+            console.warn(e);
+            console.warn(
+              `ERROR in Component [${cname}], in prop [${name}]:\n ` +
+                prop.visible
+            );
+          }
+        }
+      }
+      meta.propvis = propvis;
     }
   }
 };
diff --git a/app/web/src/utils/script/mount.tsx b/app/web/src/utils/script/mount.tsx
index d907a05c..86df05d2 100644
--- a/app/web/src/utils/script/mount.tsx
+++ b/app/web/src/utils/script/mount.tsx
@@ -47,6 +47,8 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
 
             if (type === "prop") {
               p.ui.popup.script.prop_name = path[1];
+              p.ui.popup.script.type = "prop-instance";
+              p.ui.popup.script.prop_kind = "value";
 
               if (
                 !prev_comp_id &&
@@ -62,6 +64,8 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
               }
 
               return false;
+            } else {
+              p.ui.popup.script.type = "item";
             }
 
             if (comp_id) {