diff --git a/new-frontend/src/components/XmlTool.vue b/new-frontend/src/components/XmlTool.vue
new file mode 100644
index 0000000..e6ccc83
--- /dev/null
+++ b/new-frontend/src/components/XmlTool.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const xml = ref('');
+const transform = ref('');
+const transformPlaceholder = ref('')
+const result = ref('')
+
+const tool = ref('')
+
+async function submit() {
+  const url = document.location.protocol + "//" + document.location.hostname + "/java/" + tool.value;
+  var jsonData = JSON.stringify({
+    "data": xml.value,
+    "process": transform.value,
+    "processor": "xalan",
+    "version": "3.0"
+  });
+  var init = {
+    headers: new Headers({
+    }),
+    body: jsonData,
+    method: "POST"
+  };
+  var request = new Request(url, init);
+
+
+  var responseBody = await fetch(request).then(async response => {
+    const text = await response.text();
+    return JSON.parse(text);
+  });
+
+  result.value = responseBody.result;
+}
+
+watch(tool, (tool) => {
+  if (tool == "xpath")
+    transformPlaceholder.value = "XPath";
+  if (tool == "xsd")
+    transformPlaceholder.value = "XSD";
+  if (tool == "xslt")
+    transformPlaceholder.value = "XSLT";
+  if (tool == "xquery")
+    transformPlaceholder.value = "XQuery";
+})
+</script>
+
+<template>
+  <label for="xpath">XPath</label>
+  <input v-model="tool" type="radio" id="xpath" name="xmltool" value="xpath" />
+
+  <label for="xslt">XSLT</label>
+  <input v-model="tool" type="radio" id="xslt" name="xmltool" value="xslt" />
+
+  <label for="xsd">XSD</label>
+  <input v-model="tool" type="radio" id="xsd" name="xmltool" value="xsd" />
+  
+  <label for="xquery">XQuery</label>
+  <input v-model="tool" type="radio" id="xquery" name="xmltool" value="xquery" />
+  <br /><br />
+  <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
+  <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
+  <button @click="submit">Submit</button><br />
+  <pre><code>{{ result }}</code></pre>
+</template>
+
+<style scoped></style>