From f16639b45e910ccbb798aba7171c3ef3d6590549 Mon Sep 17 00:00:00 2001
From: Adam Bem <bema@noreply.example.com>
Date: Wed, 21 Jun 2023 14:32:00 +0200
Subject: [PATCH] Implemented XML Formatter and simplified structure of XML
 tools (#229)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: https://gitea.release11.com/R11/release11-tools/pulls/229
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
---
 Frontend/nginx.conf                           |   1 +
 Frontend/src/App.vue                          |   4 +-
 Frontend/{public => src/assets}/favicon.ico   | Bin
 Frontend/src/assets/sampleXMLForXSD.xml       |  33 -----
 Frontend/src/assets/sampleXQuery.xquery       |  10 +-
 Frontend/src/assets/sampleXml.xml             |  95 ++++++++-----
 Frontend/src/assets/sampleXsd.xml             |  83 ++++++-----
 Frontend/src/assets/sampleXslt.xml            |  25 ++--
 .../common/InsertTemplateComponent.vue        |  47 +++++++
 .../formatter/FormatterComponent.vue          |  10 --
 .../JsonButtonFormatterComponent.vue          |  54 ++++++++
 .../formatter/XMLButtonFormatterComponent.vue |  58 ++++++++
 .../components/landing/LandingComponent.vue   |  11 +-
 .../components/sidebar/FooterComponent.vue    |  15 ++
 .../components/sidebar/SidebarComponent.vue   |  12 +-
 .../sidebar/SidebarMenuElementComponent.vue   |   2 +-
 .../components/xml/XmlInputFieldComponent.vue |  50 +++----
 .../xml/XmlInputFieldToolbarComponent.vue     |  36 +----
 .../xml/XmlOutputFieldComponent.vue           | 129 ++++++++++++++++--
 .../xml/XmlOutputFieldToolbarComponent.vue    | 112 ---------------
 Frontend/src/router/index.ts                  |  13 ++
 Frontend/src/style.css                        |   6 +-
 Frontend/src/views/JsonFormatterView.vue      |  36 +++++
 Frontend/src/views/XPathView.vue              |   6 +-
 Frontend/src/views/XQueryView.vue             |   6 +-
 Frontend/src/views/XSDView.vue                |   6 +-
 Frontend/src/views/XSLTView.vue               |   6 +-
 Frontend/src/views/XmlFormatterView.vue       |  36 +++++
 28 files changed, 573 insertions(+), 329 deletions(-)
 rename Frontend/{public => src/assets}/favicon.ico (100%)
 delete mode 100644 Frontend/src/assets/sampleXMLForXSD.xml
 create mode 100644 Frontend/src/components/common/InsertTemplateComponent.vue
 delete mode 100644 Frontend/src/components/formatter/FormatterComponent.vue
 create mode 100644 Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
 create mode 100644 Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
 create mode 100644 Frontend/src/components/sidebar/FooterComponent.vue
 delete mode 100644 Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
 create mode 100644 Frontend/src/views/JsonFormatterView.vue
 create mode 100644 Frontend/src/views/XmlFormatterView.vue

diff --git a/Frontend/nginx.conf b/Frontend/nginx.conf
index 74e93e6..f2d3d8d 100644
--- a/Frontend/nginx.conf
+++ b/Frontend/nginx.conf
@@ -8,6 +8,7 @@ server {
     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
         expires -1;
         add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
     }
diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 12adeaa..2a93a0a 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,9 +6,9 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
-    <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
+    <div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl shadow-lg">
       <RouterView></RouterView>
     </div>
   </div>
diff --git a/Frontend/public/favicon.ico b/Frontend/src/assets/favicon.ico
similarity index 100%
rename from Frontend/public/favicon.ico
rename to Frontend/src/assets/favicon.ico
diff --git a/Frontend/src/assets/sampleXMLForXSD.xml b/Frontend/src/assets/sampleXMLForXSD.xml
deleted file mode 100644
index 2ba2458..0000000
--- a/Frontend/src/assets/sampleXMLForXSD.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<library>
-    <libraryName>City library</libraryName>
-    <libraryID>345123</libraryID>
-    <readerList>
-        <person>
-            <readerID>7321</readerID>
-            <name>Adam</name>
-            <surname>Choke</surname>
-        </person>
-        <person>
-            <readerID>5123</readerID>
-            <name>Lauren</name>
-            <surname>Wong</surname>
-        </person>
-    </readerList>
-    <bookList>
-        <book>
-            <bookID>6422</bookID>
-            <title>Harry Potter</title>
-            <readerID>7542</readerID>
-        </book>
-        <book>
-            <bookID>1234</bookID>
-            <title>Macbeth</title>
-            <readerID>5123</readerID>
-        </book>
-        <book>
-            <bookID>9556</bookID>
-            <title>Romeo and Juliet</title>
-        </book>
-    </bookList>
-</library>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXQuery.xquery b/Frontend/src/assets/sampleXQuery.xquery
index 0a124d5..4c518d5 100644
--- a/Frontend/src/assets/sampleXQuery.xquery
+++ b/Frontend/src/assets/sampleXQuery.xquery
@@ -1,7 +1,5 @@
-declare namespace p="http://www.release11.com/person";
-declare namespace b="http://www.release11.com/book";
-declare namespace l="http://www.release11.com/library";
+declare default element namespace "http://www.release11.com/schemas/Sample.xsd";
+declare namespace u = "http://www.release11.com/schemas/Sample.xsd";
 
-
-for $x in //p:person
-return string($x/p:name)
\ No newline at end of file
+for $x in /u:root/u:UserList[@Id = 'a']/u:User
+return string($x/u:Name)
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXml.xml b/Frontend/src/assets/sampleXml.xml
index cd89168..04a2632 100644
--- a/Frontend/src/assets/sampleXml.xml
+++ b/Frontend/src/assets/sampleXml.xml
@@ -1,33 +1,62 @@
-<?xml version="1.0" encoding="utf-8"?>
-<l:library xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.release11.com" xmlns:l="http://www.release11.com/library" xmlns:p="http://www.release11.com/person" xmlns:b="http://www.release11.com/book">
-    <l:libraryName>City library</l:libraryName>
-    <l:libraryID>345123</l:libraryID>
-    <l:readerList>
-        <p:person>
-            <p:readerID>7321</p:readerID>
-            <p:name>Adam</p:name>
-            <p:surname>Choke</p:surname>
-        </p:person>
-        <p:person>
-            <p:readerID>5123</p:readerID>
-            <p:name>Lauren</p:name>
-            <p:surname>Wong</p:surname>
-        </p:person>
-    </l:readerList>
-    <l:bookList>
-        <b:book>
-            <b:bookID>6422</b:bookID>
-            <b:title>Harry Potter</b:title>
-            <p:readerID>7542</p:readerID>
-        </b:book>
-        <b:book>
-            <b:bookID>1234</b:bookID>
-            <b:title>Macbeth</b:title>
-            <p:readerID>5123</p:readerID>
-        </b:book>
-        <b:book>
-            <b:bookID>9556</b:bookID>
-            <b:title>Romeo and Juliet</b:title>
-        </b:book>
-    </l:bookList>
-</l:library>
\ No newline at end of file
+<?xml version = "1.0" encoding = "UTF-8"?>
+<u:root xmlns:u = "http://www.release11.com/schemas/Sample.xsd" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://www.tibco.com/schemas/Shemy4tools/Folder/Schema.xsd Schema4tools.xsd">
+	<u:UserList Id = "a">
+		<u:User Id = "1">
+			<u:Name>John</u:Name>
+			<u:Surname>Wick</u:Surname>
+			<u:DateOfDeath>2023-10-10</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "2">
+			<u:Name>Martha</u:Name>
+			<u:Surname>Whane</u:Surname>
+			<u:DateOfDeath>1970-06-13</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "3">
+			<u:Name>Bruce</u:Name>
+			<u:Surname>Lee</u:Surname>
+			<u:DateOfDeath>1985-01-24</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "4">
+			<u:Name>John</u:Name>
+			<u:Surname>Rambo</u:Surname>
+			<u:DateOfDeath>2024-06-19</u:DateOfDeath>
+		</u:User>
+		<u:NameList>FirstList</u:NameList>
+	</u:UserList>
+	<u:UserList Id = "b">
+		<u:User Id = "1">
+			<u:Name>Jack</u:Name>
+			<u:Surname>Wicker</u:Surname>
+			<u:DateOfDeath>2023-10-10</u:DateOfDeath>
+		</u:User>
+		<u:NameList>SecondList</u:NameList>
+	</u:UserList>
+	<u:UserList Id = "c">
+		<u:User Id = "1">
+			<u:Name>New</u:Name>
+			<u:Surname>Folder</u:Surname>
+			<u:DateOfDeath>2023-11-10</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "2">
+			<u:Name>Newer</u:Name>
+			<u:Surname>Folder</u:Surname>
+			<u:DateOfDeath>2023-11-11</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "3">
+			<u:Name>Newest</u:Name>
+			<u:Surname>Folder</u:Surname>
+			<u:DateOfDeath>2023-11-12</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "4">
+			<u:Name>New</u:Name>
+			<u:Surname>Folder2</u:Surname>
+			<u:DateOfDeath>2023-11-13</u:DateOfDeath>
+		</u:User>
+		<u:User Id = "5">
+			<u:Name>New</u:Name>
+			<u:Surname>Folder-Final</u:Surname>
+			<u:DateOfDeath>2023-11-14</u:DateOfDeath>
+		</u:User>
+		<u:NameList>ThirdList</u:NameList>
+	</u:UserList>
+</u:root>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXsd.xml b/Frontend/src/assets/sampleXsd.xml
index 6993ce3..43f7cc6 100644
--- a/Frontend/src/assets/sampleXsd.xml
+++ b/Frontend/src/assets/sampleXsd.xml
@@ -1,42 +1,41 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified"
-  targetNamespace="">
-  <xsd:element name="library">
-    <xsd:complexType mixed="true">
-      <xsd:sequence>
-        <xsd:element minOccurs="0" name="libraryName" type="xsd:string" />
-        <xsd:element minOccurs="0" name="libraryID" type="xsd:int" />
-        <xsd:element minOccurs="0" name="readerList">
-          <xsd:complexType mixed="true">
-            <xsd:sequence>
-              <xsd:element maxOccurs="unbounded" name="person">
-                <xsd:complexType mixed="true">
-                  <xsd:sequence>
-                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
-                    <xsd:element minOccurs="0" name="name" type="xsd:normalizedString" />
-                    <xsd:element minOccurs="0" name="surname" type="xsd:normalizedString" />
-                  </xsd:sequence>
-                </xsd:complexType>
-              </xsd:element>
-            </xsd:sequence>
-          </xsd:complexType>
-        </xsd:element>
-        <xsd:element minOccurs="0" name="bookList">
-          <xsd:complexType mixed="true">
-            <xsd:sequence>
-              <xsd:element maxOccurs="unbounded" name="book">
-                <xsd:complexType mixed="true">
-                  <xsd:sequence>
-                    <xsd:element minOccurs="0" name="bookID" type="xsd:int" />
-                    <xsd:element minOccurs="0" name="title" type="xsd:string" />
-                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
-                  </xsd:sequence>
-                </xsd:complexType>
-              </xsd:element>
-            </xsd:sequence>
-          </xsd:complexType>
-        </xsd:element>
-      </xsd:sequence>
-    </xsd:complexType>
-  </xsd:element>
-</xsd:schema>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	 xmlns:u="http://www.release11.com/schemas/Sample.xsd"
+	 targetNamespace="http://www.release11.com/schemas/Sample.xsd"
+	 elementFormDefault="qualified"
+	 attributeFormDefault="unqualified">
+	<xs:element name="root">
+		<xs:complexType>
+			<xs:sequence>
+				<xs:element ref="u:UserList" maxOccurs="unbounded"/>
+			</xs:sequence>
+		</xs:complexType>
+	</xs:element>
+	<xs:element name="UserList">
+		<xs:complexType mixed="true">
+			<xs:sequence>
+				<xs:element ref="u:User" maxOccurs="unbounded"/>
+				<xs:element ref="u:NameList"/>
+			</xs:sequence>
+			<xs:attribute name="Id" type="xs:string" use="required"/>
+		</xs:complexType>
+	</xs:element>
+	<xs:simpleType name="User">
+		<xs:restriction base="xs:string"/>
+	</xs:simpleType>
+	<xs:element name="User">
+		<xs:complexType>
+			<xs:sequence>
+				<xs:element ref="u:Name"/>
+				<xs:element ref="u:Surname"/>
+				<xs:element ref="u:DateOfDeath"/>
+			</xs:sequence>
+			<xs:attribute name="Id" type="xs:int" use="required"/>
+		</xs:complexType>
+	</xs:element>
+	<xs:element name="Name" type="xs:string"/>
+	<xs:element name="Surname" type="xs:string"/>
+	<xs:element name="DateOfDeath" type="xs:date"/>
+	<xs:element name="NameList" type="xs:string"/>
+</xs:schema>
\ No newline at end of file
diff --git a/Frontend/src/assets/sampleXslt.xml b/Frontend/src/assets/sampleXslt.xml
index 3ce05e2..37cb8ae 100644
--- a/Frontend/src/assets/sampleXslt.xml
+++ b/Frontend/src/assets/sampleXslt.xml
@@ -1,14 +1,17 @@
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-    xmlns:b="http://www.release11.com/book" xmlns:p="http://www.release11.com/person"
-    xmlns:l="http://www.release11.com/library">
+<?xml version = "1.0" encoding = "UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns:u = "http://www.release11.com/schemas/Sample.xsd"
+                              xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:template match="/">
-        <Library>
-            <ReaderCount>
-                <xsl:value-of select="count(//p:person)" />
-            </ReaderCount>
-            <BookCount>
-                <xsl:value-of select="count(/l:library/l:bookList/b:book)" />
-            </BookCount>
-        </Library>
+        <UserLists>
+            <UserListCount>
+                <xsl:value-of select="count(/u:root/u:UserList)" />
+            </UserListCount>
+            <xsl:for-each select="/u:root/u:UserList">
+                <UserListStats>
+                    <Name><xsl:value-of select="u:NameList" /></Name>
+                    <UserCount><xsl:value-of select="count(u:User)" /></UserCount>
+                </UserListStats>
+            </xsl:for-each>
+        </UserLists>
     </xsl:template>
 </xsl:stylesheet>
\ No newline at end of file
diff --git a/Frontend/src/components/common/InsertTemplateComponent.vue b/Frontend/src/components/common/InsertTemplateComponent.vue
new file mode 100644
index 0000000..d80c240
--- /dev/null
+++ b/Frontend/src/components/common/InsertTemplateComponent.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+import sampleXML from "@/assets/sampleXml.xml?raw"
+import sampleXSLT from "@/assets/sampleXslt.xml?raw"
+import sampleXSD from "@/assets/sampleXsd.xml?raw"
+import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
+
+
+const props = defineProps(
+    {
+        stylizedName: {type: String, required: true}
+    }
+)
+
+const emit = defineEmits(['update:defaultData'])
+
+function setDefault() {
+    const emitName = "update:defaultData";
+    switch (props.stylizedName.toLowerCase()) {
+        case "json":
+            emit(emitName, "{'message': 'Here we have to add some proper message', 'answer': 'Ya, definitely'}")
+            break;
+        case "xpath":
+            emit(emitName, "/u:root/u:UserList/u:User[../u:NameList = 'FirstList']")
+            break;
+        case "xsd":
+            emit(emitName, sampleXSD)
+            break;
+        case "xslt":
+            emit(emitName, sampleXSLT)
+            break;
+        case "xquery":
+            emit(emitName, sampleXQuery)
+            break;
+        
+        default:
+            emit(emitName, sampleXML)
+            break;
+    }
+
+}
+
+</script>
+
+<template>
+    <button class="tool-button" @click="setDefault()">Default {{ stylizedName }}</button>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/formatter/FormatterComponent.vue b/Frontend/src/components/formatter/FormatterComponent.vue
deleted file mode 100644
index f5ef774..0000000
--- a/Frontend/src/components/formatter/FormatterComponent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>Formatter</h1>
-</template>
-
-<style scoped></style>
diff --git a/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
new file mode 100644
index 0000000..f368077
--- /dev/null
+++ b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    json: {type: String, required: true},
+    isMinimizer: {type: Boolean}
+})
+
+const emit = defineEmits(["update:result"])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request;
+}
+
+function prepareURL(): string {
+    var mode = "formatting";
+    if (props.isMinimizer)
+        mode = "minimize";
+    return document.location.protocol + "//" + document.location.hostname + "/java/json/" + mode;
+}
+
+function prepareRequestBody():string {
+    var requestBody = props.json;
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    console.log(responseBody);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
new file mode 100644
index 0000000..21a79cc
--- /dev/null
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    xml: {type: String, required: true},
+    isMinimizer: {type: Boolean}
+})
+
+const emit = defineEmits(["update:result"])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+function prepareURL(): string {
+    var mode = "prettify";
+    if (props.isMinimizer)
+        mode = "minimize";
+    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": "N/A",
+        "processor": "libxml",
+        "version": "1.0"
+    });
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">{{ props.isMinimizer ? "Minimize" : "Format" }}</button>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/components/landing/LandingComponent.vue b/Frontend/src/components/landing/LandingComponent.vue
index 8f4bad9..c8b12a8 100644
--- a/Frontend/src/components/landing/LandingComponent.vue
+++ b/Frontend/src/components/landing/LandingComponent.vue
@@ -3,7 +3,16 @@
 </script>
 
 <template>
-  <h1 class="text-3xl underline">Landing</h1>
+  <div class="dark:text-slate-100">
+    <h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
+    <h2 class="text-xl">Our toolset is split to three main categories:</h2>
+    <ol class="list-decimal ml-5">
+      <li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
+      <li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
+      <li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
+    </ol>
+  </div>
+  
 </template>
 
 <style scoped></style>
diff --git a/Frontend/src/components/sidebar/FooterComponent.vue b/Frontend/src/components/sidebar/FooterComponent.vue
new file mode 100644
index 0000000..02b0ee6
--- /dev/null
+++ b/Frontend/src/components/sidebar/FooterComponent.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+   <div class="flex flex-col gap-4 text-center font-thin text-slate-600 dark:text-slate-400 ">
+        <div class="flex flex-col">
+            <a href="mailto:bugs@release11.com">Found a bug?</a>
+            <a href="#" class="hidden">Privacy Policy</a>
+        </div>
+        
+        <span>Copyright 2023 <br/> Release11</span>
+   </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 1fdadd2..50464a7 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -2,6 +2,7 @@
 import { ref , onMounted} from 'vue'
 import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
 import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
+import FooterComponent from './FooterComponent.vue';
 import logoDark from '@assets/logo_biale.svg';
 import logoWhite from '@assets/logo_czarne.svg';
 
@@ -24,11 +25,11 @@ onMounted( () => {
 
 <template>
     <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
-        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
+        <div class="flex flex-col h-full px-3 pt-2 pb-4 overflow-y-auto">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
             </a>
-            <div class="flex flex-col font-medium items-center">
+            <div class="flex basis-full flex-col font-medium items-center">
                 <sidebar-menu-element-component category-name="XML">
                     <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
                     <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
@@ -37,9 +38,9 @@ onMounted( () => {
                 </sidebar-menu-element-component>
 
                 <sidebar-menu-element-component category-name="Formatter">
-                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
-                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
-                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML" />
+                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON" />
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML" />
                 </sidebar-menu-element-component>
 
 
@@ -48,6 +49,7 @@ onMounted( () => {
                 </sidebar-menu-element-component>
 
             </div>
+            <FooterComponent></FooterComponent>
         </div>
     </aside>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 2b7f39f..9eed53b 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-sky-700 dark:to-sky-900">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 67df3a6..f4fd53a 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,47 +1,49 @@
 <script setup lang="ts">
-import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue';
 
-const xml = ref('')
-const query = ref('')
+const data = ref('')
 
 const props = defineProps(
     {
-        prettyName: {type: String, required: true},
-        xmlData: {type: String},
+        stylizedName: {type: String, required: true},
+        data: {type: String},
     }
 )
-const emit = defineEmits(['update:xml', 'update:transform'])
+const emit = defineEmits(['update'])
 
-function sendXml() {
-    emit('update:xml', xml.value)
+function sendValue() {
+    emit('update', data.value)
 }
 
-function sendTransform() {
-    emit('update:transform', query.value)
+function updateData(newData: string) {
+    data.value = newData;
+    sendValue();
 }
 
-function setToDefaultXML(data: string) {
-    xml.value = data;
-    sendXml();
+function clear() {
+    updateData('');
 }
 
-function setToDefaultQuery(data: string) {
-    query.value = data;
-    sendTransform();
+function canBeFormatted() {
+    return props.stylizedName.toLowerCase() == 'xml' || 
+           props.stylizedName.toLowerCase() == 'xsd' || 
+           props.stylizedName.toLowerCase() == 'xslt';
 }
 
 </script>
 
 <template>
-    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
-        <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
-        </div>
-        <div class="flex flex-col w-full h-1/2">
-            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
-            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+    <div class="flex flex-col w-full h-1/2">
+        <div class="flex place-content-between w-full pr-2 items-center m-2">
+            <span class="dark:text-white">{{ stylizedName }}</span>
+            <div class="flex space-x-2">
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
+            </div>
         </div>
+        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index bf40438..f0722ea 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 
-import sampleXML from "@/assets/sampleXml.xml?raw"
-import sampleXSLT from "@/assets/sampleXslt.xml?raw"
-import sampleXSD from "@/assets/sampleXsd.xml?raw"
-import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
-
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 
 const props = defineProps(
     {
@@ -14,37 +10,13 @@ const props = defineProps(
 
 const emit = defineEmits(['update:defaultData'])
 
-function setDefault() {
+function setDefault(data: string) {
     const emitName = "update:defaultData";
-    switch (props.prettyName.toLowerCase()) {
-        case "xpath":
-            emit(emitName, "string(/l:library/l:libraryName)")
-            break;
-        case "xsd":
-            emit(emitName, sampleXSD)
-            break;
-        case "xslt":
-            emit(emitName, sampleXSLT)
-            break;
-        case "xquery":
-            emit(emitName, sampleXQuery)
-            break;
-        
-        default:
-            emit(emitName, sampleXML)
-            break;
-    }
-
+    emit(emitName, data)
 }
 
 </script>
 
 <template>
-    <div class="flex place-content-between w-full pr-2 items-center m-2">
-        <span class="dark:text-white">{{ prettyName }}</span>
-        <div class="flex space-x-2">
-            <button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
-        </div>
-        
-    </div>
+    
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 6fceeb2..85c80df 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 
 const props = defineProps(
@@ -13,18 +12,132 @@ const props = defineProps(
 
 const result = ref('');
 
-function parseResult(data: any) {
+var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
+
+const allVersions = ["1.0", "2.0", "3.0", "3.1"];
+var versionsForCurrentEngine = ref([""]);
+
+const engine = ref('');
+const version = ref('');
+
+
+onMounted(() => {
+    changeAvailableEngines();
+    changeAvailableVersions();
+})
+
+function changeAvailableEngines() {
+    if (props.tool == "xsd") {
+        enginesForCurrentTool.value = ["xalan", "libxml"]
+    }
+    else if (props.tool == "xquery") {
+        enginesForCurrentTool.value = ["saxon"]
+    }
+
+    selectDefaultEngine();
+}
+
+function changeAvailableVersions() {
+    if (props.tool == "xquery")
+        versionsForCurrentEngine.value = ["3.1"];
+    else if (props.tool == "xslt")
+        changeAvailableVersionsOfXSLT();
+    else if (props.tool == "xsd")
+        versionsForCurrentEngine.value = ["N/A"];
+    else if (props.tool == "xpath")
+        changeAvailableVersionsOfXPath();
+
+    selectDefaultVersion();
+}
+
+function changeAvailableVersionsOfXSLT() {
+    if(engine.value == "saxon")
+        versionsForCurrentEngine.value = ["3.0"];
+    else
+        versionsForCurrentEngine.value = ["1.0"];
+}
+
+function changeAvailableVersionsOfXPath() {
+    if(engine.value == "xalan" || engine.value == "libxml")
+        versionsForCurrentEngine.value = ["1.0"];
+    else if (engine.value == "saxon")
+        versionsForCurrentEngine.value = allVersions;
+}
+
+function selectDefaultEngine() {
+    engine.value = enginesForCurrentTool.value[0];
+}
+
+function selectDefaultVersion() {
+    const lastVersion = versionsForCurrentEngine.value.length - 1
+    version.value = versionsForCurrentEngine.value[lastVersion];
+}
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        updateOutputField(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+function prepareURL(): string {
+   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": props.query,
+        "processor": engine.value,
+        "version": version.value
+    });
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function updateOutputField(data: any) {
     result.value = data.result;
 }
 
+function clear() {
+    result.value = "";
+}
+
 </script>
 
 <template>
-    <div class="flex flex-col w-full lg:w-1/2 h-full items-center">
-        <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
-            <pre class="break-words"><code>{{ result }}</code></pre>
+    <div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
+        <div class="flex place-content-between w-full items-center m-2">
+            <span class="dark:text-white">Result:</span>
+            <div class="flex space-x-2">
+                <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                    <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
+                </select>
+                <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                    <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
+                </select>
+                <button class="tool-button" @click="clear">Clear</button>    
+                <button class="tool-button" @click="process">Process</button>
+            </div>
+        </div>
+        <div class="text-field overflow-scroll h-full w-full">
+            <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>
         </div>
         
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
deleted file mode 100644
index 5db6734..0000000
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-var engines = ["saxon", "xalan", "libxml"];
-var versions = ["1.0", "2.0", "3.0", "3.1"];
-
-const props = defineProps(
-    {
-        tool: {type: String, required: true}, 
-        xml: {type: String},
-        query: {type: String},
-    }
-)
-
-const emit = defineEmits(['update:result'])
-
-const engine = ref('');
-const version = ref('');
-
-const isSaxonHidden = ref(false);
-const isXalanHidden = ref(false);
-const isLibXMLHidden = ref(false);
-
-
-onMounted(() => {
-    selectAvailableEngines();
-    selectAvailableVersions();
-    selectDefaults();
-})
-
-function selectAvailableEngines() {
-    if (props.tool == "xsd") {
-        engines = ["xalan", "libxml"]
-    }
-    else if (props.tool == "xquery") {
-        engines = ["saxon"]
-    }
-}
-
-function selectAvailableVersions() {
-    if (props.tool == "xquery")
-        versions = ["3.1"];
-    else if (props.tool == "xsd")
-        versions = ["N/A"];
-}
-
-function selectDefaults() {
-    version.value = versions[versions.length - 1];
-    engine.value = engines[0];
-}
-
-function process() {
-    var request:Request = prepareRequest();
-    fetchRequest(request).then((data) => {
-        sendProcessedData(data);
-    })
-}
-
-function prepareRequest():Request {
-    var request = new Request(prepareURL(), {
-        body: prepareRequestBody(),
-        method: "POST"
-    });
-    return request
-}
-
-function prepareURL(): string {
-   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
-}
-
-function prepareRequestBody():string {
-    var requestBody = JSON.stringify({
-        "data": props.xml,
-        "process": props.query,
-        "processor": engine.value,
-        "version": version.value
-    });
-    return requestBody;
-}
-
-async function fetchRequest(request: Request):Promise<JSON> {
-    var responseBody = await fetch(request)
-    .then(response => response.json())
-    .then((body) => body);
-    return responseBody;
-}
-
-function sendProcessedData(data: JSON) {
-    emit("update:result", data);
-}
-
-
-
-</script>
-
-<template>
-    <div class="flex place-content-between w-full items-center m-2">
-        <span class="dark:text-white">Result:</span>
-        <div class="flex space-x-2">
-            <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option v-for="engine in engines" :value="engine">{{ engine }}</option>
-            </select>
-            <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option v-for="version in versions" :value="version">{{ version }}</option>
-            </select>
-            <button class="tool-button">Clear</button>    
-            <button class="tool-button" @click="process">Process</button>
-        </div>
-        
-    </div>
-</template>
\ No newline at end of file
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index b935285..3f9f65d 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -3,6 +3,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")
 
+const jsonFormatter = import("@views/JsonFormatterView.vue")
+const xmlFormatter = import("@views/XmlFormatterView.vue")
+
 const xsltTool = import("@views/XSLTView.vue")
 const xsdTool = import("@views/XSDView.vue")
 const xpathTool = import("@views/XPathView.vue")
@@ -14,6 +17,16 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/format/xml',
+    name: 'xmlFormatter',
+    component: () => xmlFormatter
+  },
+  {
+    path: '/format/json',
+    name: 'jsonFormatter',
+    component: () => jsonFormatter
+  },
   {
     path: '/xml/xpath',
     name: 'xpath',
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index f884ed7..03ecf9e 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -3,5 +3,9 @@
 @tailwind utilities;
 
 .tool-button {
-    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply py-1 px-4 rounded-full w-fit bg-gradient-to-r from-blue-400 to-blue-300 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+}
+
+.text-field {
+    @apply w-full h-full resize-none font-mono bg-white dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md
 }
\ No newline at end of file
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
new file mode 100644
index 0000000..5c4f345
--- /dev/null
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import { ref } from 'vue';
+
+
+const json = ref('');
+
+function setTextFieldValue(data: string) {
+    json.value = data
+}
+
+function format(formattedXml: any) {
+    json.value = formattedXml.data;
+}
+
+function clear() {
+    json.value = '';
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">JSON Formatter</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
+            </div>
+        </div>
+        <textarea name="data" id="data" :value="json" class="text-field"></textarea>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 20acd1f..eb00f58 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
index fe23239..46fa5d3 100644
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
index 94ba20d..7b78dcc 100644
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 8c04245..8d60a38 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
new file mode 100644
index 0000000..853c0e2
--- /dev/null
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+
+function setTextFieldValue(data: string) {
+    xml.value = data
+}
+
+function format(formattedXml: any) {
+    xml.value = formattedXml.result;
+}
+
+function clear() {
+    xml.value = '';
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">XML Formatter</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(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>
+            </div>
+        </div>
+        <textarea name="data" id="data" :value="xml" class="text-field"></textarea>
+    </div>
+</template>
\ No newline at end of file