diff --git a/app/web/src/nova/ed/panel/tree/node/render.tsx b/app/web/src/nova/ed/panel/tree/node/render.tsx
index 2696a3ff..0c745327 100644
--- a/app/web/src/nova/ed/panel/tree/node/render.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/render.tsx
@@ -28,36 +28,29 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
     );
   }
 
-  if (
-    node.data?.jsx_prop?.name &&
-    node.data?.jsx_prop?.name &&
-    node.data?.parent?.instance_id
-  ) {
-    const prop_name = node.data?.jsx_prop?.name;
-    const meta = getMetaById(p, node.data.parent.instance_id);
+  if (node.data?.jsx_prop?.is_root) {
+    let hide = true;
+    const comp = p.comp.loaded[node.data.jsx_prop.comp_id];
+    if (comp) {
+      const prop_name = node.data?.jsx_prop?.name;
+      const cprop = comp.comp.component?.props[prop_name];
+      if (cprop && node.data.parent?.instance_id) {
+        const meta = getMetaById(p, node.data.parent.instance_id);
+        if (meta && prop_name) {
+          const props = meta.scope.def?.props;
+          if (props) {
+            const prop = props[prop_name];
+            if (prop && prop.visible === true) {
+              hide = false;
+            }
+          }
+        }
+      }
+    }
 
-    // if (meta && prop_name && !active.comp_id) {
-    //   if (!meta.propvis) {
-    //     if (!meta.parent_mcomp) {
-    //       setTimeout(local.render, 100);
-    //       const id = meta.item.originalId || meta.item.id;
-    //       if (!jsxPropVis[id] || jsxPropVis[id] === prop_name) {
-    //         jsxPropVis[id] = prop_name;
-    //         return (
-    //           <div
-    //             className={"relative border-b flex items-stretch  min-h-[26px]"}
-    //           >
-    //             <Loading backdrop={false} />
-    //           </div>
-    //         );
-    //       } else {
-    //         return <></>;
-    //       }
-    //     }
-    //   } else {
-    //     if (meta.propvis[prop_name] === false) return <></>;
-    //   }
-    // }
+    if (hide) {
+      return <></>;
+    }
   }
 
   return (
diff --git a/app/web/src/nova/vi/render/render.tsx b/app/web/src/nova/vi/render/render.tsx
index 29935496..5ac7c96d 100644
--- a/app/web/src/nova/vi/render/render.tsx
+++ b/app/web/src/nova/vi/render/render.tsx
@@ -2,6 +2,7 @@ import { FC, ReactNode } from "react";
 import { IMeta } from "../../ed/logic/ed-global";
 import { ViContext, viParts } from "./parts";
 import { ViScript } from "./script";
+import { ErrorBox } from "../utils/error-box";
 
 export const ViRender: FC<{
   ctx: ViContext;
@@ -11,7 +12,11 @@ export const ViRender: FC<{
   if (!meta) return null;
 
   if (meta.item.adv?.js || meta.item.component?.id) {
-    return <ViScript ctx={ctx} meta={meta} />;
+    return (
+      <ErrorBox>
+        <ViScript ctx={ctx} meta={meta} />
+      </ErrorBox>
+    );
   }
 
   const parts = viParts(meta);
@@ -23,7 +28,11 @@ export const ViRender: FC<{
       : meta.item.childs?.map((item) => {
           if (!item) return null;
           const { id } = item;
-          return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />;
+          return (
+            <ErrorBox key={id}>
+              <ViRender ctx={ctx} meta={ctx.meta[id]} />
+            </ErrorBox>
+          );
         });
   }
 
diff --git a/app/web/src/nova/vi/render/script.tsx b/app/web/src/nova/vi/render/script.tsx
index b82ef09b..4ee7de09 100644
--- a/app/web/src/nova/vi/render/script.tsx
+++ b/app/web/src/nova/vi/render/script.tsx
@@ -1,29 +1,46 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { IMeta } from "../../ed/logic/ed-global";
 import { ViContext, viParts } from "./parts";
 import { ViRender } from "./render";
+import { ErrorBox } from "../utils/error-box";
+import { ViLocal } from "./script/local";
+import { viScopeUpward } from "./script/upward";
 
 export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({
   ctx,
   meta,
 }) => {
+  viEvalScript(ctx, meta);
+  if (meta.script) return <ErrorBox>{meta.script.el}</ErrorBox>;
+  return null;
+};
+
+export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
   const childs = meta.item.childs;
   const parts = viParts(meta);
 
-  let renderChild = undefined;
+  let children = undefined;
   if (parts.shouldRenderChild) {
-    renderChild =
+    children =
       Array.isArray(childs) &&
       childs.map(({ id }) => {
         return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />;
       });
   }
 
-  return (
-    <div {...parts.props} className={parts.className}>
-      {renderChild}
-    </div>
-  );
-};
+  const scope = viScopeUpward(ctx, meta);
 
-export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {};
+  const arg = {
+    ...scope,
+    children,
+    props: parts.props,
+    Local: ViLocal,
+    newElement: () => {},
+    render: (jsx: ReactNode) => {
+      meta.script = { el: jsx };
+    },
+  };
+
+  const fn = new Function(...Object.keys(arg), meta.item.adv?.jsBuilt || "");
+  fn(...Object.values(arg));
+};
diff --git a/app/web/src/nova/vi/render/script/local.tsx b/app/web/src/nova/vi/render/script/local.tsx
new file mode 100644
index 00000000..f7531ec7
--- /dev/null
+++ b/app/web/src/nova/vi/render/script/local.tsx
@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+
+export const ViLocal: FC<{ children: ReactNode }> = ({ children }) => {
+  return children;
+};
diff --git a/app/web/src/nova/vi/render/script/upward.ts b/app/web/src/nova/vi/render/script/upward.ts
new file mode 100644
index 00000000..7c790299
--- /dev/null
+++ b/app/web/src/nova/vi/render/script/upward.ts
@@ -0,0 +1,15 @@
+import { IMeta } from "../../../ed/logic/ed-global";
+import { ViContext } from "../parts";
+
+export const viScopeUpward = (ctx: ViContext, meta: IMeta) => {
+  let cur = meta;
+
+  // while (cur.parent) {
+  //   if (cur.scope.def) {
+  //     console.log(cur.item.id, cur.item.name, cur.scope);
+  //   }
+  //   cur = ctx.meta[cur.parent.id];
+  // }
+
+  return {};
+};
diff --git a/app/web/src/nova/view/logic/meta/comp.tsx b/app/web/src/nova/view/logic/meta/comp.tsx
index 43fdf73a..a15a8dd6 100644
--- a/app/web/src/nova/view/logic/meta/comp.tsx
+++ b/app/web/src/nova/view/logic/meta/comp.tsx
@@ -60,17 +60,29 @@ export const genComp = (
           if (meta.scope.def?.props) {
             meta.scope.def.props[name] = {
               value: prop.valueBuilt,
-              visible: true,
+              type: {
+                "": "text",
+                "content-element": "jsx",
+                option: "opt",
+                text: "text",
+              }[prop.meta?.type || ""] as any,
+              visible: false,
             };
           }
           props[name] = { value: prop.valueBuilt, visible: prop.visible };
-          if (prop.meta?.type === "content-element" && prop.content) {
+          const comp_id = item.component?.id;
+          if (
+            prop.meta?.type === "content-element" &&
+            prop.content &&
+            comp_id
+          ) {
             genMeta(p, {
               item: prop.content,
               mitem: mprop?.get("content"),
               is_root: false,
               jsx_prop: {
                 is_root: true,
+                comp_id,
                 name,
               },
               parent: {
@@ -90,7 +102,7 @@ export const genComp = (
       if (vis && meta.scope.def?.props) {
         for (const [k, v] of Object.entries(vis)) {
           if (meta.scope.def.props[k]) {
-            meta.scope.def.props[k].visible = !!v;
+            meta.scope.def.props[k].visible = v === false;
           }
         }
       }
diff --git a/app/web/src/nova/view/logic/meta/comp/eval-prop-vis.ts b/app/web/src/nova/view/logic/meta/comp/eval-prop-vis.ts
index 8ffb059c..55d05671 100644
--- a/app/web/src/nova/view/logic/meta/comp/eval-prop-vis.ts
+++ b/app/web/src/nova/view/logic/meta/comp/eval-prop-vis.ts
@@ -2,18 +2,19 @@ export const evalPropVis = (
   props: Record<string, { value: string; visible?: string }>
 ) => {
   try {
-    const fn = new Function(`
-${Object.entries(props)
-  .map(([k, v]) => `const ${k} = ${v.value};`)
-  .join("\n")}
-
-return {
-  ${Object.entries(props)
-    .filter(([k, v]) => v.visible)
-    .map(([k, v]) => `${k}: ${v},`)
-    .join("\n")}
-}
-`);
+    const src = `
+    ${Object.entries(props)
+      .map(([k, v]) => `const ${k} = ${v.value}`)
+      .join("\n")}
+    
+    return {
+      ${Object.entries(props)
+        .filter(([_, v]) => v.visible)
+        .map(([k, v]) => `${k}: ${v.visible},`)
+        .join("\n")}
+    }
+    `;
+    const fn = new Function(src);
 
     return fn() as Record<string, boolean>;
   } catch (e) {}
diff --git a/app/web/src/nova/view/logic/meta/types.ts b/app/web/src/nova/view/logic/meta/types.ts
index 901b02f3..283898ec 100644
--- a/app/web/src/nova/view/logic/meta/types.ts
+++ b/app/web/src/nova/view/logic/meta/types.ts
@@ -59,12 +59,19 @@ export type IMeta = {
   };
   jsx_prop?: {
     name: string;
+    comp_id: string;
     is_root: boolean;
   };
+  script?: {
+    el: ReactNode;
+  };
   scope: {
     val?: any;
     def?: {
-      props?: Record<string, { value: string; visible: boolean }>;
+      props?: Record<
+        string,
+        { value: string; type: "jsx" | "text" | "opt"; visible: boolean }
+      >;
       local?: {
         name: string;
         idx: number;