diff --git a/src/views/ExplainCrontab.vue b/src/views/ExplainCrontab.vue
index 2460c6e..0d30881 100644
--- a/src/views/ExplainCrontab.vue
+++ b/src/views/ExplainCrontab.vue
@@ -4,38 +4,48 @@
 
   <div class="input-group">
     <label for="data">Data</label>
-    <input id="data" class="input" v-model="toolData.data" placeholder="* * * * *" type="text">
+    <input id="data" class="input" v-model="toolData.data" v-on:keyup="result" placeholder="* * * * *" type="text">
   </div>
 
   <hr class="mt-5 mb-5">
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
   </div>
 </template>
 
 <script>
 import cronstrue from 'cronstrue';
-import { unproxy } from "@/utils/unproxy";
+import MonacoEditor from "@/components/MonacoEditor.vue";
 
 export default {
+  components: {
+    MonacoEditor
+  },
   data() {
     return {
       toolData: {
         data: '* * * * *',
       },
+      toolResult: '',
     };
   },
-  computed: {
-    toolResult() {
+  mounted() {
+    this.toolResult = cronstrue.toString(this.toolData.data, {
+      use24HourTimeFormat: true,
+      verbose: true,
+    });
+  },
+  methods: {
+    result() {
       try {
-        return cronstrue.toString(this.toolData.data, {
+        this.toolResult = cronstrue.toString(this.toolData.data, {
           use24HourTimeFormat: true,
           verbose: true,
         });
       } catch (e) {
-        return 'invalid syntax';
+        this.toolResult = 'invalid syntax';
       }
     },
   },