JSON Beautifier Widget

Modern Development/Service Portal Widgets/JSON Beautifier/Client_side.js

@@ -0,0 +1,18 @@
+api.controller=function($scope) {
+  /* widget controller */
+$scope.rawJson = '';
+$scope.formattedJson = '';
+$scope.error = '';
+
+	$scope.beautifyJSON = function(){
+		try{
+			$scope.error = '';
+			const parsed = JSON.parse($scope.rawJson);
+			$scope.formattedJson = JSON.stringify(parsed,null,2);
+		}catch(e){
+			$scope.error = 'Invalid JSON' + e.message;
+			$scope.formattedJson = '';
+		}
+	};
+
+};

Modern Development/Service Portal Widgets/JSON Beautifier/HTML.html

@@ -0,0 +1,21 @@
+<div class="container p-3">
+  <h3>JSON Beautifier</h3>
+  <div class="form-group mt-3">
+    <label>Paste JSON Here</label>
+    <textarea class="form-control" rows="8" ng-model="rawJson" placeholder='{"key":"value"}'></textarea>
+  </div>
+  <div class="mt-2">
+    <button class="btn btn-primary btn-sm mr-1" ng-click="beautifyJSON()">
+       Beautify
+    </button>
+  </div>
+  <div class="mt-3" ng-if="error">
+    <div class="alert alert-danger">
+          {{error}}
+    </div>
+  </div>
+  <div class="mt-3" ng-if="formattedJson">
+    <label>Formatted JSON:</label>
+    <pre class="bg-light p-3" style="overflow-x:auto">{{formattedJson}}</pre>
+  </div>
+</div>

Modern Development/Service Portal Widgets/JSON Beautifier/README.md

@@ -0,0 +1,11 @@
+## JSON Beautifier Widget
+
+The JSON Beautifier widget is a developer-focused tool designed to make working with JSON in ServiceNow fast, easy and efficient. It helps admins, developers and testers handles JSON payloads from APIs, Integration etc.
+
+## Benefits
+- Reduces time spent manually formatting or checking JSON.
+- Helps identify error or differences between JSOn payload quickly
+
+## Output
+![A test image](demo.png)
+