diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index fa3090914a..2c6212bf2b 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -46,9 +46,9 @@ const Page: FC = () => {
         /*
         * TODO: for debug.
         * 2 directAnswer 3: llm 5: questionClassifier
-        * 7 Code
+        * 7 Code, 8 TemplateTransform
         */
-        selectedNodeId='7'
+        selectedNodeId='8'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
index e684d74b9e..1a40602ec6 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
@@ -1,15 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { CodeLanguage } from '../../../code/types'
 import Base from './base'
 
 type Props = {
   value: string
   onChange: (value: string) => void
   title: JSX.Element
-  codeLanguage: string
-  onCodeLanguageChange: (codeLanguage: CodeLanguage) => void
 }
 
 const CodeEditor: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 83ebab7d8b..b37bf11a62 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -57,8 +57,6 @@ const Panel: FC = () => {
         }
         value={inputs.code}
         onChange={handleCodeChange}
-        codeLanguage={inputs.code_language}
-        onCodeLanguageChange={handleCodeLanguageChange}
       />
       <Split />
     </div>
diff --git a/web/app/components/workflow/nodes/template-transform/mock.ts b/web/app/components/workflow/nodes/template-transform/mock.ts
new file mode 100644
index 0000000000..59b2186417
--- /dev/null
+++ b/web/app/components/workflow/nodes/template-transform/mock.ts
@@ -0,0 +1,18 @@
+import type { TemplateTransformNodeType } from './types'
+
+export const mockData: TemplateTransformNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  variables: [
+    {
+      variable: 'name',
+      value_selector: ['aaa', 'name'],
+    },
+    {
+      variable: 'age',
+      value_selector: ['bbb', 'b', 'c'],
+    },
+  ],
+  template: 'print("hello world")',
+}
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 6e401a9a4e..cedf7ed3e7 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -1,8 +1,59 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
+import AddButton from '@/app/components/base/button/add-button'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+
+const i18nPrefix = 'workflow.nodes.templateTransform'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleCodeChange,
+  } = useConfig(mockData)
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2 px-4 space-y-4'>
+      <Field
+        title={t(`${i18nPrefix}.inputVars`)}
+        operations={
+          <AddButton onClick={handleAddVariable} />
+        }
+      >
+        <VarList
+          readonly={readOnly}
+          list={inputs.variables}
+          onChange={handleVarListChange}
+        />
+      </Field>
+      <Split />
+      <CodeEditor
+        title={
+          <div>{t(`${i18nPrefix}.code`)}</div>
+        }
+        value={inputs.template}
+        onChange={handleCodeChange}
+      />
+      <Split />
+      <OutputVars>
+        <>
+          <VarItem
+            name='output'
+            type='string'
+            description={t(`${i18nPrefix}.outputVars.output`)}
+          />
+        </>
+      </OutputVars>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/template-transform/use-config.ts b/web/app/components/workflow/nodes/template-transform/use-config.ts
new file mode 100644
index 0000000000..1c520a5404
--- /dev/null
+++ b/web/app/components/workflow/nodes/template-transform/use-config.ts
@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react'
+import useVarList from '../_base/hooks/use-var-list'
+import type { TemplateTransformNodeType } from './types'
+
+const useConfig = (initInputs: TemplateTransformNodeType) => {
+  const [inputs, setInputs] = useState<TemplateTransformNodeType>(initInputs)
+  const { handleVarListChange, handleAddVariable } = useVarList<TemplateTransformNodeType>({
+    inputs,
+    setInputs,
+  })
+
+  const handleCodeChange = useCallback((template: string) => {
+    setInputs(prev => ({ ...prev, template }))
+  }, [setInputs])
+
+  return {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleCodeChange,
+  }
+}
+
+export default useConfig
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 0d27634fe0..5dc7ef156f 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -22,6 +22,13 @@ const translation = {
     code: {
       inputVars: 'Input Variables',
     },
+    templateTransform: {
+      inputVars: 'Input Variables',
+      code: 'Code',
+      outputVars: {
+        output: 'Transformed content',
+      },
+    },
   },
 }
 
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index 816139894f..cd3798db0f 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -21,6 +21,13 @@ const translation = {
       code: {
         inputVars: '输入变量',
       },
+      templateTransform: {
+        inputVars: '输入变量',
+        code: '代码',
+        outputVars: {
+          output: '转换后内容',
+        },
+      },
     },
   },
 }