diff --git a/README.md b/README.md
index 4a66e1b..d3b0dc3 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,9 @@
 
 **A relatively complete formula editor.**
 
-![demo.png](demo.png)
+![demo-diagnostic.png](.demo-diagnostic.png)
+
+![demo-debug.png](.demo-debug.png)
 
 ### https://ideal-world.github.io/formula-editor/
 
diff --git a/demo-debug.png b/demo-debug.png
new file mode 100644
index 0000000..28311d4
Binary files /dev/null and b/demo-debug.png differ
diff --git a/demo-diagnostic.png b/demo-diagnostic.png
new file mode 100644
index 0000000..123361a
Binary files /dev/null and b/demo-diagnostic.png differ
diff --git a/demo.png b/demo.png
deleted file mode 100644
index 5626dae..0000000
Binary files a/demo.png and /dev/null differ
diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
index fba4e6a..8417045 100644
--- a/docs/.vitepress/cache/deps/_metadata.json
+++ b/docs/.vitepress/cache/deps/_metadata.json
@@ -1,83 +1,83 @@
 {
-  "hash": "5960b9d5",
-  "browserHash": "c88cf3b5",
+  "hash": "27c05b23",
+  "browserHash": "53ec19a0",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "aaae5c6f",
+      "fileHash": "e3785727",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "1d6ae4e8",
+      "fileHash": "289149f3",
       "needsInterop": false
     },
     "element-plus": {
       "src": "../../../../node_modules/element-plus/es/index.mjs",
       "file": "element-plus.js",
-      "fileHash": "95507b99",
+      "fileHash": "d3980430",
       "needsInterop": false
     },
     "@element-plus/icons-vue": {
       "src": "../../../../node_modules/@element-plus/icons-vue/dist/index.js",
       "file": "@element-plus_icons-vue.js",
-      "fileHash": "b875c724",
+      "fileHash": "3e0ba571",
       "needsInterop": false
     },
     "@codemirror/view": {
       "src": "../../../../node_modules/@codemirror/view/dist/index.js",
       "file": "@codemirror_view.js",
-      "fileHash": "a3188649",
+      "fileHash": "b622ec76",
       "needsInterop": false
     },
     "@codemirror/language": {
       "src": "../../../../node_modules/@codemirror/language/dist/index.js",
       "file": "@codemirror_language.js",
-      "fileHash": "873741f2",
+      "fileHash": "4cc6f4c1",
       "needsInterop": false
     },
     "@codemirror/autocomplete": {
       "src": "../../../../node_modules/@codemirror/autocomplete/dist/index.js",
       "file": "@codemirror_autocomplete.js",
-      "fileHash": "126df1e7",
+      "fileHash": "ae7712c3",
       "needsInterop": false
     },
     "@codemirror/search": {
       "src": "../../../../node_modules/@codemirror/search/dist/index.js",
       "file": "@codemirror_search.js",
-      "fileHash": "adeab99e",
+      "fileHash": "9d52bb8e",
       "needsInterop": false
     },
     "@codemirror/commands": {
       "src": "../../../../node_modules/@codemirror/commands/dist/index.js",
       "file": "@codemirror_commands.js",
-      "fileHash": "83ac45e2",
+      "fileHash": "98e2d553",
       "needsInterop": false
     },
     "vue-codemirror6": {
       "src": "../../../../node_modules/vue-codemirror6/dist/index.es.js",
       "file": "vue-codemirror6.js",
-      "fileHash": "9c2c9deb",
+      "fileHash": "b92c1740",
       "needsInterop": false
     },
     "@codemirror/lint": {
       "src": "../../../../node_modules/@codemirror/lint/dist/index.js",
       "file": "@codemirror_lint.js",
-      "fileHash": "5d101f9d",
+      "fileHash": "3e595235",
       "needsInterop": false
     },
     "eslint-linter-browserify": {
       "src": "../../../../node_modules/eslint-linter-browserify/linter.js",
       "file": "eslint-linter-browserify.js",
-      "fileHash": "f9f9e9db",
+      "fileHash": "5469b414",
       "needsInterop": true
     },
     "@codemirror/lang-javascript": {
       "src": "../../../../node_modules/@codemirror/lang-javascript/dist/index.js",
       "file": "@codemirror_lang-javascript.js",
-      "fileHash": "fe34867c",
+      "fileHash": "d8b8d41d",
       "needsInterop": false
     }
   },
diff --git a/docs/EditorDemo.vue b/docs/EditorDemo.vue
index a864609..bea3023 100644
--- a/docs/EditorDemo.vue
+++ b/docs/EditorDemo.vue
@@ -25,176 +25,186 @@ const targetVar: iwInterface.VarInfo = {
 }
 
 const materials : iwInterface.Namespace[] = [
-  {
+{
     name: 'field',
     label: '字段',
     isVar: true,
     showLabel: true,
     color: '#f8e3c5',
     items: [
-      {
-        name: 'applicant',
-        label: '申请人',
-        kind: iwInterface.VarKind.STRING,
-        note: '表单申请人姓名',
-        minLen: 2,
-        maxLen: 20,
-        cates: ['基础信息']
-      },
-      {
-        name: 'kind',
-        label: '申请类型',
-        kind: iwInterface.VarKind.STRING,
-        note: '申请类型',
-        minLen: 2,
-        maxLen: 20,
-        cates: ['基础信息']
-      },
-      {
-        name: 'age',
-        label: '年龄',
-        kind: iwInterface.VarKind.NUMBER,
-        note: '年龄',
-        minLen: 18,
-        maxLen: 60,
-        cates: ['基础信息']
-      }
+        {
+            name: 'applicant',
+            label: '申请人',
+            kind: iwInterface.VarKind.STRING,
+            note: '表单申请人姓名',
+            minLen: 2,
+            maxLen: 20,
+            cates: ['基础信息']
+        },
+        {
+            name: 'kind',
+            label: '申请类型',
+            kind: iwInterface.VarKind.STRING,
+            note: '申请类型',
+            minLen: 2,
+            maxLen: 20,
+            cates: ['基础信息']
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            kind: iwInterface.VarKind.NUMBER,
+            note: '年龄',
+            minLen: 18,
+            maxLen: 60,
+            defaultValue:36,
+            cates: ['基础信息']
+        }
     ]
-  },
-  {
+},
+{
     name: 'model',
     label: '模型',
     isVar: true,
     showLabel: true,
     color: '#e1f3d8',
     items: [
-      {
-        name: 'accountName',
-        label: '账号',
-        kind: iwInterface.VarKind.STRING,
-        note: '账号名',
-        minLen: 2,
-        maxLen: 20,
-        cates: ['账户']
-      },
-      {
-        name: 'phone',
-        label: '手机号',
-        kind: iwInterface.VarKind.STRING,
-        cates: ['账户']
-      },
-      {
-        name: 'roleName',
-        label: '角色名',
-        kind: iwInterface.VarKind.STRING,
-        cates: ['角色']
-      },
-      {
-        name: 'isAdmin',
-        label: '是否是管理员',
-        kind: iwInterface.VarKind.BOOLEAN,
-        cates: ['角色']
-      }
+        {
+            name: 'accountName',
+            label: '账号',
+            kind: iwInterface.VarKind.STRING,
+            note: '账号名',
+            minLen: 2,
+            maxLen: 20,
+            cates: ['账户']
+        },
+        {
+            name: 'phone',
+            label: '手机号',
+            kind: iwInterface.VarKind.STRING,
+            cates: ['账户']
+        },
+        {
+            name: 'roleName',
+            label: '角色名',
+            kind: iwInterface.VarKind.STRING,
+            cates: ['角色']
+        },
+        {
+            name: 'isAdmin',
+            label: '是否是管理员',
+            kind: iwInterface.VarKind.BOOLEAN,
+            cates: ['角色']
+        }
     ]
-  },
-  {
+},
+{
     name: 'fun',
     label: '函数',
     isVar: false,
     showLabel: false,
     color: '#d9ecff',
     items: [
-      {
-        name: 'sum',
-        label: '求和',
-        note: `获取一组数值的总和。
+        {
+            name: 'sum',
+            label: '求和',
+            note: `获取一组数值的总和。
 用法：SUM(数字1,数字2,...)。
 示例：SUM(语文成绩,数学成绩, 英语成绩)返回三门课程的总分。`,
-        input: [
-          {
-            kind: iwInterface.VarKind.NUMBER
-          }
-        ],
-        isVarLen: true,
-        isAsync: false,
-        output: {
-          kind: iwInterface.VarKind.NUMBER
+            input: [
+                {
+                    kind: iwInterface.VarKind.NUMBER
+                }
+            ],
+            isVarLen: true,
+            isAsync: false,
+            output: {
+                kind: iwInterface.VarKind.NUMBER
+            },
+            body: `return Array.from(arguments).reduce((a, b) => a + b)`,
+            cates: ['常用', '计算']
         },
-        cates: ['常用', '计算']
-      },
-      {
-        name: 'now',
-        label: '当前时间',
-        note: `返回当前时间戳`,
-        input: [],
-        isVarLen: false,
-        isAsync: false,
-        output: {
-          kind: iwInterface.VarKind.NUMBER
+        {
+            name: 'now',
+            label: '当前时间',
+            note: `返回当前时间戳`,
+            input: [],
+            isVarLen: false,
+            isAsync: false,
+            output: {
+                kind: iwInterface.VarKind.NUMBER
+            },
+            body: `return Date.now()`,
+            cates: ['常用', '日期处理']
         },
-        cates: ['常用', '日期处理']
-      },
-      {
-        name: 'concat',
-        label: '合并文本',
-        note: `将多个文本合并成一个文本。
+        {
+            name: 'concat',
+            label: '合并文本',
+            note: `将多个文本合并成一个文本。
 用法：CONCATENATE(文本1,文本2,...)。`,
-        input: [
-          {
-            kind: iwInterface.VarKind.ANY
-          }
-        ],
-        isVarLen: true,
-        isAsync: false,
-        output: {
-          kind: iwInterface.VarKind.STRING
+            input: [
+                {
+                    kind: iwInterface.VarKind.ANY
+                }
+            ],
+            isVarLen: true,
+            isAsync: false,
+            output: {
+                kind: iwInterface.VarKind.STRING
+            },
+            body: `return Array.from(arguments).join('')`,
+            cates: ['常用', '文本处理']
         },
-        cates: ['常用', '文本处理']
-      },
-      {
-        name: 'lower',
-        label: '转成小写',
-        note: `将一个文本中的所有大写字母转换为小写字母。
+        {
+            name: 'lower',
+            label: '转成小写',
+            note: `将一个文本中的所有大写字母转换为小写字母。
 用法：lower(文本)。`,
-        input: [
-          {
-            kind: iwInterface.VarKind.STRING
-          }
-        ],
-        isVarLen: false,
-        isAsync: false,
-        output: {
-          kind: iwInterface.VarKind.STRING
-        },
-        cates: ['文本处理']
-      }
+            input: [
+                {
+                    kind: iwInterface.VarKind.STRING
+                }
+            ],
+            isVarLen: false,
+            isAsync: false,
+            output: {
+                kind: iwInterface.VarKind.STRING
+            },
+            body: `return arguments[0].toLowerCase()`,
+            cates: ['文本处理']
+        }
     ]
-  },
-  {
+},
+{
     name: 'api',
     label: 'API',
     isVar: false,
     showLabel: true,
     color: '#d9ec00',
     items: [
-      {
-        name: 'getUserInfo',
-        label: '获取用户基础信息',
-        note: `根据用户Id获取用户信息`,
-        input: [
-          {
-            label: '用户Id',
-            kind: iwInterface.VarKind.STRING
-          }
-        ],
-        isVarLen: false,
-        isAsync: true,
-        output: {
-          kind: iwInterface.VarKind.ANY
-        },
-        cates: ['用户']
-      }
+        {
+            name: 'getUserInfo',
+            label: '获取用户信息',
+            note: `根据用户Id获取用户信息`,
+            input: [
+                {
+                    label: '用户Id',
+                    kind: iwInterface.VarKind.STRING
+                }
+            ],
+            isVarLen: false,
+            isAsync: true,
+            output: {
+                kind: iwInterface.VarKind.ANY
+            },
+            body: `return {
+        userId: arguments[0],
+        userName: '张三',
+        age: 18
+    }`,
+            cates: ['用户']
+        }
     ]
-  }
+}
 ]
 </script>
diff --git a/docs/index.md b/docs/index.md
index b7eb534..fe35715 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -8,8 +8,8 @@
 * Relatively comprehensive error prompts
 * Auto-completion prompts
 * Customizable variables and (synchronous/asynchronous) functions
-* Online debugging (TBD)
-* Advanced code mode (TBD)
+* Online debugging
+* Dynamic formula execution engine
 
 ## Setup
 
diff --git a/package.json b/package.json
index 8e135b1..b08b44b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@idealworld/formula-editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A relatively complete formula editor",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
diff --git a/src/components/Debug.vue b/src/components/Debug.vue
index e91666c..8925756 100644
--- a/src/components/Debug.vue
+++ b/src/components/Debug.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {computed, reactive, ref, watch} from 'vue'
-import {iwExecutor} from "../processes";
-import {Namespace, VarInfo} from "../processes/interface";
-import {VideoPlay} from "@element-plus/icons-vue";
+import { computed, reactive, ref, watch } from 'vue'
+import { iwExecutor } from '../processes'
+import { Namespace, VarInfo } from '../processes/interface'
+import { VideoPlay } from '@element-plus/icons-vue'
 
 interface Props {
   materials: Namespace[]
@@ -14,57 +14,64 @@ const props = withDefaults(defineProps<Props>(), {
   entrance: '$'
 })
 
-const inputParams = reactive<Map<string, any>>(new Map<string, any>())
+const inputParams = reactive({})
+const debugResult = ref<any>(null)
 
 const materialVars = computed(() => {
-  inputParams.clear()
-  return props.materials.filter((ns) => ns.isVar).map((ns) => {
-    let items = (ns.items as VarInfo[]).map((varInfo) => {
-      inputParams.set(props.entrance + '.' + ns.name + '.' + varInfo.name, varInfo.defaultValue)
+  debugResult.value = ''
+  Object.assign(inputParams, {})
+  return props.materials
+    .filter((ns) => ns.isVar)
+    .map((ns) => {
+      let items = (ns.items as VarInfo[]).map((varInfo) => {
+        inputParams[props.entrance + '.' + ns.name + '.' + varInfo.name] = varInfo.defaultValue
+        return {
+          name: varInfo.name!,
+          label: varInfo.label!,
+          note: varInfo.note
+        }
+      })
       return {
-        name: varInfo.name!,
-        label: varInfo.label!,
-        note: varInfo.note,
+        nsLabel: ns.label,
+        nsName: ns.name,
+        items
       }
     })
-    return {
-      nsLabel: ns.label,
-      nsName: ns.name,
-      items
-    }
-  })
 })
 
-const debugResult = ref<any>(null)
-
 async function debug() {
-  console.log('--------------' + props.materials)
+  let inputParamsMap = new Map<string, any>()
+  for (let key in inputParams) {
+    inputParamsMap.set(key, inputParams[key])
+  }
+  let spanDom = document.getElementsByClassName('iw-debug__result-span')[0] as HTMLElement
+  spanDom.classList.remove('iw-debug__result-span--ok', 'iw-debug__result-span--error')
   try {
-    debugResult.value = await iwExecutor.execute(inputParams, props.formulaValue, props.materials, props.entrance)
+    spanDom.classList.add('iw-debug__result-span--ok')
+    debugResult.value = await iwExecutor.execute(inputParamsMap, props.formulaValue, props.materials, props.entrance)
   } catch (e) {
+    spanDom.classList.add('iw-debug__result-span--error')
     debugResult.value = e.message
   }
 }
-
 </script>
 
 <template>
   <div class="iw-debug">
-    <el-form>
-      <el-form-item class="iw-debug__toolbar">
-        <el-button :icon="VideoPlay" link @click="debug">运行</el-button>
-      </el-form-item>
-      <template v-for="materialVar in materialVars">
-        <el-divider content-position="left">{{ materialVar.nsLabel }}</el-divider>
-        <template v-for="varInfo in materialVar.items">
-          <el-form-item :label="varInfo.label"  class="iw-debug__param">
-            <el-input v-model="inputParams[props.entrance+'.'+materialVar.nsName+'.'+varInfo.name]"/>
-          </el-form-item>
-        </template>
+    <p class="iw-debug__toolbar">
+      <el-button :icon="VideoPlay" link @click="debug">运行</el-button>
+    </p>
+    <template v-for="materialVar in materialVars">
+      <el-divider content-position="left">{{ materialVar.nsLabel }}</el-divider>
+      <template v-for="varInfo in materialVar.items">
+        <el-form-item :label="varInfo.label" class="iw-debug__param">
+          <el-input :placeholder="varInfo.note" v-model="inputParams[props.entrance + '.' + materialVar.nsName + '.' + varInfo.name]" />
+        </el-form-item>
       </template>
-      <p class="iw-debug__result">结果：{{ debugResult }}</p>
-
-    </el-form>
+    </template>
+    <p class="iw-debug__result">
+      结果：<span class="iw-debug__result-span">{{ debugResult }}</span>
+    </p>
   </div>
 </template>
 
@@ -94,11 +101,25 @@ async function debug() {
     border-bottom: 1px solid var(--el-border-color);
     padding: 4px;
   }
-}
 
+  @include e('result-span') {
+    @include m('ok') {
+      color: var(--el-color-success-dark-2);
+    }
+
+    @include m('error') {
+      color: var(--el-color-error-dark-2);
+    }
+  }
+}
 </style>
 
 <style lang="scss">
 @import '../assets/main.scss';
 
+@include b('debug') {
+  p {
+    margin: 0;
+  }
+}
 </style>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index d4b89ca..5c99a2f 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -36,7 +36,7 @@ const searchMaterialFunKey = ref<string>('')
 const formulaResult = reactive<FormulaResult>({
   materials: [], pass: false, value: ""
 })
-const openDebugPanel = ref<boolean>(true)
+const openDebugPanel = ref<boolean>(false)
 
 function findMaterials(isVar: boolean, filterName: string): Material[] {
   if (isVar) {
diff --git a/src/processes/example.ts b/src/processes/example.ts
index 1b43db1..c4ffeb9 100644
--- a/src/processes/example.ts
+++ b/src/processes/example.ts
@@ -42,6 +42,7 @@ export const exampleProps = {
                     note: '年龄',
                     minLen: 18,
                     maxLen: 60,
+                    defaultValue:36,
                     cates: ['基础信息']
                 }
             ]