diff --git a/packages/editor-preset-vision/src/editor.ts b/packages/editor-preset-vision/src/editor.ts
index ff447d36c..d8669460a 100644
--- a/packages/editor-preset-vision/src/editor.ts
+++ b/packages/editor-preset-vision/src/editor.ts
@@ -31,6 +31,51 @@ designer.project.onCurrentDocumentChange((doc) => {
   });
 });
 
+interface Variable {
+  type: 'variable';
+  variable: string;
+  value: any;
+}
+
+function isVariable(obj: any): obj is Variable {
+  return obj && obj.type === 'variable';
+}
+
+function upgradePropsReducer(props: any) {
+  if (!isPlainObject(props)) {
+    return props;
+  }
+  const newProps: any = {};
+  Object.entries<any>(props).forEach(([key, val]) => {
+    if (/^__slot__/.test(key) && val === true) {
+      return;
+    }
+    if (isJSBlock(val)) {
+      if (val.value.componentName === 'Slot') {
+        val = {
+          type: 'JSSlot',
+          title: (val.value.props as any)?.slotTitle,
+          value: val.value.children
+        };
+      } else {
+        val = val.value;
+      }
+    }
+    // todo: deep find
+    if (isVariable(val)) {
+      val = {
+        type: 'JSExpression',
+        value: val.variable,
+        mock: val.value,
+      };
+    }
+    newProps[key] = val;
+  });
+  return newProps;
+}
+// 升级 Props
+designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
+
 // 节点 props 初始化
 designer.addPropsReducer((props, node) => {
   // run initials
@@ -41,9 +86,13 @@ designer.addPropsReducer((props, node) => {
       // FIXME! this implements SettingTarget
       try {
         // FIXME! item.name could be 'xxx.xxx'
-        const v = item.initial(node as any, props[item.name]);
+        const ov = props[item.name];
+        const v = item.initial(node as any, isJSExpression(ov) ? ov.mock : ov);
         if (v !== undefined) {
-          newProps[item.name] = v;
+          newProps[item.name] = isJSExpression(ov) ? {
+            ...ov,
+            mock: v,
+          } : v;
         }
       } catch (e) {
         if (hasOwnProperty(props, item.name)) {
@@ -82,34 +131,6 @@ function filterReducer(props: any, node: Node): any {
 designer.addPropsReducer(filterReducer, TransformStage.Save);
 designer.addPropsReducer(filterReducer, TransformStage.Render);
 
-function upgradePropsReducer(props: any) {
-  if (!isPlainObject(props)) {
-    return props;
-  }
-  const newProps: any = {};
-  Object.entries<any>(props).forEach(([key, val]) => {
-    if (/^__slot__/.test(key) && val === true) {
-      return;
-    }
-    if (isJSBlock(val)) {
-      if (val.value.componentName === 'Slot') {
-        val = {
-          type: 'JSSlot',
-          title: (val.value.props as any)?.slotTitle,
-          value: val.value.children
-        };
-      } else {
-        val = val.value;
-      }
-    }
-    // todo: type: variable
-    newProps[key] = val;
-  });
-  return newProps;
-}
-// 升级 Props
-designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
-
 function compatiableReducer(props: any) {
   if (!isPlainObject(props)) {
     return props;