diff --git a/apps/builder/package.json b/apps/builder/package.json
index ad737a3882..768e5f07c0 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "author": "illa Family",
   "license": "Apache-2.0",
-  "version": "0.0.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite --mode cloud",
     "build-cloud": "vite build --mode cloud",
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
index ea1acf02f5..d1037d09f5 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx
@@ -49,6 +49,9 @@ export const ActionTitleBar: FC<ActionTitleBarProps> = (props) => {
     }
   }
 
+  const renderButton =
+    runMode === "run" ? action.actionType !== "transformer" : true
+
   useEffect(() => {
     // Clear the previous result when changing the selected action
     onActionRun(undefined)
@@ -90,7 +93,7 @@ export const ActionTitleBar: FC<ActionTitleBarProps> = (props) => {
       >
         <Button colorScheme="grayBlue" leftIcon={<MoreIcon size="14px" />} />
       </Dropdown>
-      {action.actionType !== "transformer" && (
+      {renderButton && (
         <Button
           ml="8px"
           colorScheme="techPurple"
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
index de23f33126..212366b79d 100644
--- a/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
+++ b/apps/builder/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx
@@ -1,6 +1,5 @@
-import { FC } from "react"
-import { useDispatch, useSelector } from "react-redux"
-import { getSelectedAction } from "@/redux/config/configSelector"
+import { FC, useMemo } from "react"
+import { useDispatch } from "react-redux"
 import { configActions } from "@/redux/config/configSlice"
 import { CodeEditor } from "@/components/CodeEditor"
 import { TransformerAction } from "@/redux/currentApp/action/transformerAction"
@@ -17,13 +16,18 @@ export const TransformerPanel: FC<TransformerPanelProps> = props => {
   const action = props.action
   const dispatch = useDispatch()
   const { t } = useTranslation()
+  const finalValue = useMemo(() => {
+    return (
+      action?.content?.transformerString ||
+      "// Tip: assign your external references to variables instead of chaining off the curly brackets.\n" +
+        "return 5"
+    )
+  }, [action?.content?.transformerString])
+
   return (
     <div css={transformerPanelContainerStyle}>
       <CodeEditor
-        value={
-          "// Tip: assign your external references to variables instead of chaining off the curly brackets.\n" +
-          "return 5"
-        }
+        value={finalValue}
         css={transformerEditorStyle}
         lineNumbers
         height="88px"
diff --git a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
index f2b93d5f5a..46df88d0db 100644
--- a/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
+++ b/apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts
@@ -5,6 +5,7 @@ import {
   getDisplayNameAndAttrPath,
   getWidgetOrActionDynamicAttrPaths,
   isDynamicString,
+  wrapFunctionCode,
 } from "@/utils/evaluateDynamicString/utils"
 import { getSnippets } from "@/utils/evaluateDynamicString/dynamicConverter"
 import toposort from "toposort"
@@ -392,7 +393,23 @@ export class ExecutionTreeFactory {
                 return current
               }
             }
-            if (widgetOrAction.triggerMode === "automate") {
+            if (widgetOrAction.actionType === "transformer") {
+              const evaluateTransform = wrapFunctionCode(
+                widgetOrAction.content.transformerString,
+              )
+              const canEvalString = `{{${evaluateTransform}()}}`
+              let calcResult = ""
+              try {
+                calcResult = evaluateDynamicString("", canEvalString, current)
+                set(current, `${widgetOrAction.displayName}.value`, calcResult)
+              } catch (e) {
+                console.log(e)
+              }
+            }
+            if (
+              widgetOrAction.actionType !== "transformer" &&
+              widgetOrAction.triggerMode === "automate"
+            ) {
               const {
                 $actionId,
                 $resourceId,
diff --git a/illa-design b/illa-design
index 4bdd6afe9d..d2807b9ed8 160000
--- a/illa-design
+++ b/illa-design
@@ -1 +1 @@
-Subproject commit 4bdd6afe9d26330a87bf1ec16688486c1e29969b
+Subproject commit d2807b9ed8f866025fc9d8e5323646af991c84f1