diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 663f83ff78..fa3090914a 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -46,8 +46,9 @@ const Page: FC = () => {
         /*
         * TODO: for debug.
         * 2 directAnswer 3: llm 5: questionClassifier
+        * 7 Code
         */
-        selectedNodeId='5'
+        selectedNodeId='7'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-var-list.ts b/web/app/components/workflow/nodes/_base/hooks/use-var-list.ts
new file mode 100644
index 0000000000..0cb287fcb4
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/hooks/use-var-list.ts
@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import produce from 'immer'
+import type { Variable } from '@/app/components/workflow/types'
+
+type Params<T> = {
+  inputs: T
+  setInputs: (newInputs: T) => void
+  varKey?: string
+}
+function useVarList<T>({
+  inputs,
+  setInputs,
+  varKey = 'variables',
+}: Params<T>) {
+  const handleVarListChange = useCallback((newList: Variable[]) => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft[varKey] = newList
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs, varKey])
+
+  const handleAddVariable = useCallback(() => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft[varKey].push({
+        variable: '',
+        value_selector: [],
+      })
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs, varKey])
+  return {
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useVarList
diff --git a/web/app/components/workflow/nodes/code/mock.ts b/web/app/components/workflow/nodes/code/mock.ts
new file mode 100644
index 0000000000..5a108d7d81
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/mock.ts
@@ -0,0 +1,26 @@
+import { CodeLanguage } from './types'
+import type { CodeNodeType } from './types'
+
+export const mockData: CodeNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  variables: [
+    {
+      variable: 'name',
+      value_selector: ['aaa', 'name'],
+    },
+    {
+      variable: 'age',
+      value_selector: ['bbb', 'b', 'c'],
+    },
+  ],
+  code_language: CodeLanguage.python3,
+  code: 'print("hello world")',
+  outputs: [
+    {
+      variable: 'output',
+      variable_type: 'string',
+    },
+  ],
+}
diff --git a/web/app/components/workflow/nodes/code/node.tsx b/web/app/components/workflow/nodes/code/node.tsx
index 0f57083f17..09b5acfb1f 100644
--- a/web/app/components/workflow/nodes/code/node.tsx
+++ b/web/app/components/workflow/nodes/code/node.tsx
@@ -2,7 +2,8 @@ import type { FC } from 'react'
 
 const Node: FC = () => {
   return (
-    <div>code</div>
+    // No summary content
+    <div></div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 6e401a9a4e..9b7fed9f18 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -1,8 +1,37 @@
 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'
+
+const i18nPrefix = 'workflow.nodes.code'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+  } = 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>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/code/types.ts b/web/app/components/workflow/nodes/code/types.ts
new file mode 100644
index 0000000000..977286e578
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/types.ts
@@ -0,0 +1,16 @@
+import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
+
+export enum CodeLanguage {
+  python3 = 'python3',
+  javascript = 'javascript',
+}
+
+export type CodeNodeType = CommonNodeType & {
+  variables: Variable[]
+  code_language: CodeLanguage
+  code: string
+  outputs: {
+    variable: string
+    variable_type: string
+  }[]
+}
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
new file mode 100644
index 0000000000..0f09ad1d85
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -0,0 +1,19 @@
+import { useState } from 'react'
+import useVarList from '../_base/hooks/use-var-list'
+import type { CodeNodeType } from './types'
+
+const useConfig = (initInputs: CodeNodeType) => {
+  const [inputs, setInputs] = useState<CodeNodeType>(initInputs)
+  const { handleVarListChange, handleAddVariable } = useVarList<CodeNodeType>({
+    inputs,
+    setInputs,
+  })
+
+  return {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useConfig
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 254df3363b..a63ac9d72b 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import produce from 'immer'
-import type { Variable } from '../../types'
+import useVarList from '../_base/hooks/use-var-list'
 import type { LLMNodeType } from './types'
 
 const useConfig = (initInputs: LLMNodeType) => {
@@ -24,22 +24,10 @@ const useConfig = (initInputs: LLMNodeType) => {
   }, [inputs, setInputs])
 
   // variables
-  const handleVarListChange = useCallback((newList: Variable[]) => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables = newList
-    })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
-
-  const handleAddVariable = useCallback(() => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables.push({
-        variable: '',
-        value_selector: [],
-      })
-    })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
+  const { handleVarListChange, handleAddVariable } = useVarList<LLMNodeType>({
+    inputs,
+    setInputs,
+  })
 
   // context
   const toggleContextEnabled = useCallback(() => {
diff --git a/web/app/components/workflow/nodes/template-transform/types.ts b/web/app/components/workflow/nodes/template-transform/types.ts
new file mode 100644
index 0000000000..6e4115e754
--- /dev/null
+++ b/web/app/components/workflow/nodes/template-transform/types.ts
@@ -0,0 +1,6 @@
+import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
+
+export type TemplateTransformNodeType = CommonNodeType & {
+  variables: Variable[]
+  template: string
+}
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 66df102eb5..0d27634fe0 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -19,6 +19,9 @@ const translation = {
         usage: 'Model Usage Information',
       },
     },
+    code: {
+      inputVars: 'Input Variables',
+    },
   },
 }
 
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index 69115ce64d..816139894f 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -18,6 +18,9 @@ const translation = {
         output: '生成内容',
         usage: '模型用量信息',
       },
+      code: {
+        inputVars: '输入变量',
+      },
     },
   },
 }