Frontend/src/router/index.ts

@@ -3,6 +3,7 @@ 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")
@@ -21,6 +22,11 @@ const routes = [
     name: 'xmlFormatter',
     component: () => xmlFormatter
   },
+  {
+    path: '/format/json',
+    name: 'jsonFormatter',
+    component: () => jsonFormatter
+  },
   {
     path: '/xml/xpath',
     name: 'xpath',

Frontend/src/views/JsonFormatterView.vue

@@ -0,0 +1,35 @@
+<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 md:flex-row place-content-between">
+            <span class="dark:text-slate-100">JSON Formatter</span>
+            <div class="space-x-2">
+                <InsertTemplateComponent pretty-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <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>