diff --git a/Frontend/assets/css/json.css b/Frontend/assets/css/json.css
new file mode 100644
index 0000000..46c6686
--- /dev/null
+++ b/Frontend/assets/css/json.css
@@ -0,0 +1,4 @@
+.json-block {
+  height: 600px;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/Frontend/assets/scripts/tools/json.js b/Frontend/assets/scripts/tools/json.js
new file mode 100644
index 0000000..5528adc
--- /dev/null
+++ b/Frontend/assets/scripts/tools/json.js
@@ -0,0 +1,29 @@
+function formatAndValidateJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const errorOutput = document.getElementById(errorElement);
+
+  try {
+    const obj = JSON.parse(input.textContent);
+    input.innerHTML = JSON.stringify(obj, null, 2);
+    errorOutput.innerText = "";
+    hljs.highlightElement(input);
+  } catch (error) {
+    errorOutput.innerText = error;
+    console.error("Error: ", error)
+  }
+}
+
+function minimizeJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const errorOutput = document.getElementById(errorElement);
+
+  try {
+    const obj = JSON.parse(input.textContent);
+    input.innerHTML = JSON.stringify(obj);
+    errorOutput.innerText = "";
+    hljs.highlightElement(input);
+  } catch (error) {
+    errorOutput.innerText = error;
+    console.error("Error: ", error)
+  }
+}
\ No newline at end of file
diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js
index d464330..5b715bc 100644
--- a/Frontend/assets/scripts/tools/scripts.js
+++ b/Frontend/assets/scripts/tools/scripts.js
@@ -43,6 +43,10 @@ function setDefaultContent(element, text) {
             element.style.color = color_grey;
             element.value = text;
         }
+        if (id == "jsonArea") {
+            element.style.color = color_grey;
+            element.value = text;
+        }
     }
 }
 
diff --git a/Frontend/index.html b/Frontend/index.html
index bcee87d..f571ce3 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -25,7 +25,8 @@
                 <li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
                 <li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
                 <li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
-                <li id="toolListRow"><a href="./tools/formatter.html" target="iframe">Formatter</a></li>
+                <li id="toolListRow"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
+                <li id="toolListRow"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
             </ul>
             <div id="copyright">
                 Build: [:VERSION:]<br>
diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html
new file mode 100644
index 0000000..a055a04
--- /dev/null
+++ b/Frontend/tools/jsonFormatter.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8" />
+
+  <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+  <link rel="stylesheet" href="../assets/css/json.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+  <script src="../assets/scripts/tools/scripts.js"></script>
+  <script src="../assets/scripts/tools/json.js"></script>
+</head>
+
+<body>
+  <div class="container">
+    <div id="tool" class="tool rwd-expandable">
+      <div class="tool-context">
+        <div class="headline">
+          <h1>Online JSON Formatter</h1>
+        </div>
+
+        <p style="color: red" id="error"></p>
+
+        <pre>
+          <code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
+        </pre>
+
+        <button style="margin-top: 20px"
+                class="max-width block-label action-button active"
+                onclick="formatAndValidateJson('error')"
+        >Prettify JSON</button>
+
+        <button class="max-width block-label action-button active"
+                onclick="minimizeJson('error')"
+        >Minimize JSON</button>
+      </div>
+    </div>
+
+    <div class="tooltip-window rwd-hideable">
+      <h2>What is this?</h2>
+      <p>This tool has 2 main functions:
+      <ul>
+        <li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
+        <li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
+      </ul>
+      </p>
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/Frontend/tools/formatter.html b/Frontend/tools/xmlFormatter.html
similarity index 100%
rename from Frontend/tools/formatter.html
rename to Frontend/tools/xmlFormatter.html
