diff --git a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
index c5f056b..0709bb4 100644
--- a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
@@ -16,8 +16,13 @@ const props = defineProps(
     }
 )
 
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
+
 function chooseType(formatType: String){
-    if (formatType == "XML Converter"){
+    if (formatType == "HTML -> XML"){
         return "convert";
     }
     return formatType.toLowerCase();
@@ -42,11 +47,6 @@ function createBody(){
 
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
-const emit = defineEmits([
-    'update:result',
-    'update:error'
-])
-
 function processResponse(formattedCode : any){
     var result = formattedCode.result;
     emit("update:error", formattedCode.status == "ERR")
diff --git a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
index 024911c..2274d3d 100644
--- a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -5,7 +5,10 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
 
 function process() {
     var request:Request = prepareRequest()
@@ -42,7 +45,10 @@ function prepareRequestBody():string {
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body)
+    .then((body) => {
+        emit("update:error", body.status == "ERR")
+        return body
+    })
     return responseBody
 }
 
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index 093816b..c53ad09 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -6,6 +6,9 @@ import { ref } from 'vue';
 
 
 const xml = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
 
 function setTextFieldValue(data: string) {
     xml.value = data
@@ -15,8 +18,19 @@ function format(formattedXml: any) {
     xml.value = formattedXml.result;
 }
 
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
 function clear() {
     xml.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function readFile(file : any) {
@@ -41,12 +55,12 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-                <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
     </div>
 </template>
\ No newline at end of file