diff --git a/web/src/components/inputs/FormatedText.vue b/web/src/components/inputs/FormatedText.vue
new file mode 100644
index 0000000..05e8178
--- /dev/null
+++ b/web/src/components/inputs/FormatedText.vue
@@ -0,0 +1,32 @@
+<template>
+    <div contenteditable>
+        <pre>{{ value }}</pre>
+        <span v-html="rawhtml(value)"></span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FormatedText',
+    props: {
+        value: {
+            type: String,
+            required: true
+        },
+        format: {
+            type: Function,
+            default: null
+        }
+    },
+    emits: ['input'],
+    methods: {
+        rawhtml(value) {
+            if (typeof format === 'function') {
+                return format(value);
+            } else {
+                return value;
+            }
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/web/src/views/admin/Settings.vue b/web/src/views/admin/Settings.vue
index b395931..3511945 100644
--- a/web/src/views/admin/Settings.vue
+++ b/web/src/views/admin/Settings.vue
@@ -4,6 +4,7 @@
         <li v-for="template in messageTemplates" :key="template.id">
             {{ template.name }}<br>
             <pre>{{ template.message }}</pre>
+            <FormatedText :value="template.message"/>
         </li>
     </ul>
     <h3 class="text-center">Message Template Variables</h3>
@@ -17,10 +18,11 @@
 <script>
 import {mapActions, mapState} from 'vuex';
 import Table from '@/components/Table';
+import FormatedText from "@/components/inputs/FormatedText.vue";
 
 export default {
     name: 'Settings',
-    components: {Table},
+    components: {FormatedText, Table},
     computed: mapState(['messageTemplates', 'messageTemplateVariables']),
     methods: mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables']),
     mounted() {