diff --git a/apps/desktop/src/renderer/components.d.ts b/apps/desktop/src/renderer/components.d.ts
index 8f3bf183d..680c10dca 100644
--- a/apps/desktop/src/renderer/components.d.ts
+++ b/apps/desktop/src/renderer/components.d.ts
@@ -63,6 +63,7 @@ declare module 'vue' {
     ScriptFunctionView: typeof import('./../../../../packages/ui/src/components/script/function/View.vue')['default']
     ScriptSaveDialog: typeof import('./../../../../packages/ui/src/components/script/SaveDialog.vue')['default']
     ScriptSchemaEditor: typeof import('./../../../../packages/ui/src/components/script/schema/Editor.vue')['default']
+    ScriptSchemaTest: typeof import('./../../../../packages/ui/src/components/script/schema/Test.vue')['default']
     ScriptSchemaView: typeof import('./../../../../packages/ui/src/components/script/schema/View.vue')['default']
     ScriptView: typeof import('./../../../../packages/ui/src/components/script/View.vue')['default']
     SettingsCliDownloadProgress: typeof import('./src/components/settings/cli/DownloadProgress.vue')['default']
diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
index 131ec8d6c..ddf436410 100644
--- a/apps/web/components.d.ts
+++ b/apps/web/components.d.ts
@@ -62,6 +62,7 @@ declare module 'vue' {
     ScriptFunctionView: typeof import('./../../packages/ui/src/components/script/function/View.vue')['default']
     ScriptSaveDialog: typeof import('./../../packages/ui/src/components/script/SaveDialog.vue')['default']
     ScriptSchemaEditor: typeof import('./../../packages/ui/src/components/script/schema/Editor.vue')['default']
+    ScriptSchemaTest: typeof import('./../../packages/ui/src/components/script/schema/Test.vue')['default']
     ScriptSchemaView: typeof import('./../../packages/ui/src/components/script/schema/View.vue')['default']
     ScriptView: typeof import('./../../packages/ui/src/components/script/View.vue')['default']
     SettingsView: typeof import('./../../packages/ui/src/components/SettingsView.vue')['default']
diff --git a/packages/ui/components.d.ts b/packages/ui/components.d.ts
index 1222c9590..060e5975d 100644
--- a/packages/ui/components.d.ts
+++ b/packages/ui/components.d.ts
@@ -60,6 +60,7 @@ declare module 'vue' {
     ScriptFunctionView: typeof import('./src/components/script/function/View.vue')['default']
     ScriptSaveDialog: typeof import('./src/components/script/SaveDialog.vue')['default']
     ScriptSchemaEditor: typeof import('./src/components/script/schema/Editor.vue')['default']
+    ScriptSchemaTest: typeof import('./src/components/script/schema/Test.vue')['default']
     ScriptSchemaView: typeof import('./src/components/script/schema/View.vue')['default']
     ScriptView: typeof import('./src/components/script/View.vue')['default']
     SettingsView: typeof import('./src/components/SettingsView.vue')['default']
diff --git a/packages/ui/src/components/MonacoEditor.vue b/packages/ui/src/components/MonacoEditor.vue
index a01158340..1a41f4052 100644
--- a/packages/ui/src/components/MonacoEditor.vue
+++ b/packages/ui/src/components/MonacoEditor.vue
@@ -32,7 +32,6 @@ const editorRef = ref<HTMLElement | null>(null)
 let editor: monaco.editor.IStandaloneCodeEditor | null = null
 
 const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
-  lineHeight: 1,
   fontSize: 14,
   tabSize: 2,
   automaticLayout: true,
diff --git a/packages/ui/src/components/script/function/Editor.vue b/packages/ui/src/components/script/function/Editor.vue
index a4b9fcc97..19411ce87 100644
--- a/packages/ui/src/components/script/function/Editor.vue
+++ b/packages/ui/src/components/script/function/Editor.vue
@@ -29,9 +29,8 @@ const inUseScript = computed(() => {
   return false
 })
 
-const defaultFunction: Record<string, { input: string, content: string }> = {
+const defaultFunction: Record<string, { content: string }> = {
   javascript: {
-    input: JSON.stringify({ msg: 'hello' }, null, 2),
     content: `/**
 * @description: default script
 * @param {string} message - Message payload
diff --git a/packages/ui/src/components/script/function/Test.vue b/packages/ui/src/components/script/function/Test.vue
index 5c2d4934e..d59cfd053 100644
--- a/packages/ui/src/components/script/function/Test.vue
+++ b/packages/ui/src/components/script/function/Test.vue
@@ -16,10 +16,15 @@ const {
   monacoEditorLangugage: resultMonacoEditorLangugage,
 } = usePayloadConverter()
 
-resultString.value = ''
-resultPayloadType.value = 'Plaintext'
+function resetResults() {
+  resultString.value = ''
+  resultPayloadType.value = 'Plaintext'
+}
+
+resetResults()
 
 function handleTest(payload: string) {
+  resetResults()
   if (currentLang.value === 'javascript') {
     executeScript({
       script: currentFunctionContent.value,
diff --git a/packages/ui/src/components/script/schema/Editor.vue b/packages/ui/src/components/script/schema/Editor.vue
index ee3a4274f..c83994711 100644
--- a/packages/ui/src/components/script/schema/Editor.vue
+++ b/packages/ui/src/components/script/schema/Editor.vue
@@ -30,10 +30,9 @@ const inUseScript = computed(() => {
   return false
 })
 
-const defaultSchema: Record<ScriptSchema['codec'], { editorLangugage: string, input: string, content: string }> = {
+const defaultSchema: Record<ScriptSchema['codec'], { editorLangugage: string, content: string }> = {
   protobuf: {
     editorLangugage: 'plaintext',
-    input: JSON.stringify({ id: 123, name: 'John Doe' }, null, 2),
     content: `syntax = "proto3";
 
 message Person {
@@ -43,7 +42,6 @@ message Person {
   },
   avro: {
     editorLangugage: 'json',
-    input: JSON.stringify({ id: 123, name: 'John Doe' }, null, 2),
     content: `{
   "type": "record",
   "name": "Person",
diff --git a/packages/ui/src/components/script/schema/Test.vue b/packages/ui/src/components/script/schema/Test.vue
new file mode 100644
index 000000000..8bb9c1627
--- /dev/null
+++ b/packages/ui/src/components/script/schema/Test.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { ScriptSchema } from 'mqttx'
+import { convertPayloadForDisplay, encodePayloadForSend, payloadCodec } from '@mqttx/core'
+
+const props = defineProps<{
+  currentCodec: ScriptSchema['codec']
+  currentSchemaContent: ScriptSchema['content']
+}>()
+
+const { currentCodec, currentSchemaContent } = toRefs(props)
+const { payloadTypeList, payloadType, payloadString, monacoEditorLangugage } = usePayloadConverter()
+
+const {
+  payloadType: resultPayloadType,
+  payloadString: resultString,
+  monacoEditorLangugage: resultMonacoEditorLangugage,
+} = usePayloadConverter()
+
+const messageName = ref('')
+
+const defaultInput: Record<ScriptSchema['codec'], string> = {
+  protobuf: JSON.stringify({ id: 123, name: 'John Doe' }, null, 2),
+  avro: JSON.stringify({ id: 123, name: 'John Doe' }, null, 2),
+}
+
+watch(currentCodec, (value) => {
+  payloadString.value = defaultInput[value]
+  resultString.value = ''
+  messageName.value = ''
+}, { immediate: true })
+
+function resetResults() {
+  resultString.value = ''
+  resultPayloadType.value = 'JSON'
+}
+
+resetResults()
+
+const { t } = useI18n()
+
+function handleTest(payload: string) {
+  resetResults()
+  try {
+    if (currentCodec.value === 'protobuf' && messageName.value === '') {
+      ElMessage({
+        message: t('script.mustProtoName'),
+        type: 'error',
+        plain: true,
+      })
+      return
+    }
+    const { decode, encode } = payloadCodec[currentCodec.value]
+    const buffer = decode({
+      payload: encode({
+        payload: encodePayloadForSend(payload, payloadType.value),
+        schema: currentSchemaContent.value,
+        messageName: messageName.value,
+      }),
+      schema: currentSchemaContent.value,
+      messageName: messageName.value,
+    })
+    resultString.value = convertPayloadForDisplay(buffer.toString(), 'Plaintext', 'JSON')
+  } catch (error) {
+    if (error instanceof Error) {
+      ElMessage({
+        message: error.message,
+        type: 'error',
+        plain: true,
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <section>
+    <div class="my-3 flex justify-between items-center">
+      <label class="text-title">{{ $t('script.input') }}</label>
+      <div class="flex items-center gap-3">
+        <ElInput
+          v-if="currentCodec === 'protobuf'"
+          v-model.trim="messageName"
+          :placeholder="$t('script.protoName')"
+          :label="$t('script.protoName')"
+        />
+        <ElButton
+          type="primary"
+          @click="handleTest(payloadString)"
+        >
+          {{ $t('script.test') }}
+        </ElButton>
+      </div>
+    </div>
+    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+      <MonacoEditor
+        :value="payloadString"
+        :language="monacoEditorLangugage"
+        :options="{ lineNumbers: 'on' }"
+        @update="payloadString = $event"
+      />
+    </section>
+    <div class="px-3 text-right bg-select-lang border border-t-0 border-border-default rounded-b">
+      <ElRadioGroup v-model="payloadType">
+        <ElRadio v-for="item in payloadTypeList" :key="item" :value="item">
+          {{ item }}
+        </ElRadio>
+      </ElRadioGroup>
+    </div>
+  </section>
+  <section>
+    <div class="my-3 flex justify-between items-center">
+      <label class="text-title">{{ $t('script.output') }}</label>
+    </div>
+    <section class="h-80 bg-normal border border-b-0 px-0.5 pb-0.5 pt-3 border-border-default rounded-t">
+      <MonacoEditor
+        :value="resultString"
+        :language="resultMonacoEditorLangugage"
+        :options="{ lineNumbers: 'on', readOnly: true }"
+        @update="resultString = $event"
+      />
+    </section>
+    <div class="px-3 text-right bg-select-lang border border-t-0 border-border-default rounded-b">
+      <ElRadioGroup v-model="resultPayloadType">
+        <ElRadio v-for="item in payloadTypeList" :key="item" :value="item">
+          {{ item }}
+        </ElRadio>
+      </ElRadioGroup>
+    </div>
+  </section>
+</template>
diff --git a/packages/ui/src/components/script/schema/View.vue b/packages/ui/src/components/script/schema/View.vue
index a7e2c5b69..892fb7556 100644
--- a/packages/ui/src/components/script/schema/View.vue
+++ b/packages/ui/src/components/script/schema/View.vue
@@ -11,9 +11,9 @@ const currentSchemaContent = ref<ScriptSchema['content']>('')
       v-model:codec="currentCodec"
       v-model:content="currentSchemaContent"
     />
-    <!-- <ScriptFunctionTest
-      :current-lang="currentLang"
-      :current-function-content="currentFunctionContent"
-    /> -->
+    <ScriptSchemaTest
+      :current-codec="currentCodec"
+      :current-schema-content="currentSchemaContent"
+    />
   </div>
 </template>