diff --git a/webroot/js/api-helper.js b/webroot/js/api-helper.js
index 282b1b4..fa09422 100644
--- a/webroot/js/api-helper.js
+++ b/webroot/js/api-helper.js
@@ -77,7 +77,7 @@ class AJAXApi {
     }
 
     /**
-     * 
+     *
      * @param  {FormData} formData       - The data of a form
      * @param  {Object}   dataToMerge    - Data to be merge into formData
      * @return {FormData} The form data merged with the additional dataToMerge data
@@ -91,7 +91,7 @@ class AJAXApi {
 
     /**
      * @param {string} url           - The URL to fetch
-     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions 
+     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions
      * @return {Promise<string>} Promise object resolving to the fetched HTML
      */
     static async quickFetchURL(url, options={}) {
@@ -102,7 +102,7 @@ class AJAXApi {
 
     /**
      * @param {string} url           - The URL to fetch
-     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions 
+     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions
      * @return {Promise<Object>} Promise object resolving to the fetched HTML
      */
     static async quickFetchJSON(url, options={}) {
@@ -113,7 +113,7 @@ class AJAXApi {
 
     /**
      * @param {string} url          - The URL to fetch
-     * @param {Object} [options={}] - The options supported by AJAXApi#defaultOptions 
+     * @param {Object} [options={}] - The options supported by AJAXApi#defaultOptions
      * @return {Promise<HTMLFormElement>} Promise object resolving to the fetched form
      */
     static async quickFetchForm(url, options={}) {
@@ -125,7 +125,7 @@ class AJAXApi {
     /**
      * @param {HTMLFormElement} form    - The form to be posted
      * @param {Object} [dataToMerge={}] - Additional data to be integrated or modified in the form
-     * @param {Object} [options={}]     - The options supported by AJAXApi#defaultOptions 
+     * @param {Object} [options={}]     - The options supported by AJAXApi#defaultOptions
      * @return {Promise<Object>} Promise object resolving to the result of the POST operation
      */
     static async quickPostForm(form, dataToMerge={}, options={}) {
@@ -328,7 +328,7 @@ class AJAXApi {
         }
         return toReturn
     }
-    
+
     /**
      * @param {string} url                       - The URL from which to fetch the form
      * @param {Object} [dataToMerge={}]          - Additional data to be integrated or modified in the form
@@ -385,8 +385,7 @@ class AJAXApi {
             this.loadingOverlay.show()
         } else {
             this.loadingOverlay.hide()
-            
+
         }
     }
 }
-
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 3e05d3a..ea39c37 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -66,6 +66,32 @@ function attachTestConnectionResultHtml(result, $container) {
     return $testResultDiv
 }
 
+function syntaxHighlightJson(json, indent) {
+    if (indent === undefined) {
+        indent = 2;
+    }
+    if (typeof json == 'string') {
+        json = JSON.parse(json);
+    }
+    json = JSON.stringify(json, undefined, indent);
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/ /g, '&nbsp;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'text-info';
+        if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                        cls = 'text-primary';
+                } else {
+                        cls = '';
+                }
+        } else if (/true|false/.test(match)) {
+                cls = 'text-info';
+        } else if (/null/.test(match)) {
+                cls = 'text-danger';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
 var UI
 $(document).ready(() => {
     if (typeof UIFactory !== "undefined") {