JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="json-viewer-outline"></div>

<div id="json-viewer"></div>

CSS

body {
	  font-family:"Roboto", "Helvetica", "Arial", sans-serif;
	}
	ul {
	    margin-left: 1em;
		list-style: none;
	}

	#json-viewer-outline{
	  font-size:10px;
	}

	.json-key {
	    font-weight: bold;
	}
	.json-value {
	    margin-left: 20px;
	}
	.json-standard {
	    margin-right: 0px;
	    font-weight:bold;
	}

	.lvl1 {
	    font-size: 40px;
	}
	.lvl2 {
	    font-size: 35px;
	}
	.lvl3 {
	    font-size: 30px;
	}
	.lvl4 {
	    font-size: 25px;
	}
	.lvl5 {
	    font-size: 20px;
	}

	.lvl6 {
	    font-size: 15px;
	}

	.lvl7 {
	    font-size: 10px;
	}

	.leaf {
	  font-size:10px!important;
	}

JavaScript

function titleCase(str) {
	   var splitStr = str.toLowerCase().split(' ');
	   for (var i = 0; i < splitStr.length; i++) {
	       // You do not need to check if i is larger than splitStr length, as your for does that for you
	       // Assign it back to the array
	       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
	   }
	   // Directly return the joined string
	   return splitStr.join(' '); 
	}
	function detectObjFromCurrentObj(obj){
		var ObjIdx = '';
		for (var prop in obj) {
			if (typeof obj[prop] === "object") {
				ObjIdx = prop;
			}
		}
		return ObjIdx;
	}
	function detectSecTextFromCurrentObj(obj){
		var STIdx = '';
		for (var prop in obj) {
			var regex = /^[a-zA-Z]{1}[0-9]{1}$/;
			if (prop.includes('-st') || regex.test(prop)  || prop == 'data') {
				STIdx = prop;
				if(obj[prop] == 'data'){
					STIdx = 'data';
				}
			}
		}
		return STIdx;
	}
    function sortObject(obj) {
		var newObj = [];
		for (var prop in obj) {
			var objs = {};
			if(typeof obj[prop] === "object"){
				objs[prop] = obj[prop]
				newObj.push(objs);
			}else{
				objs[prop] = obj[prop]
				newObj.unshift(objs);
			}
		}
		var fObj = {};
		for (var prop1 in newObj) {
			// console.log(prop1)
			for (var prop2 in newObj[prop1]) {
				// console.log(prop2)
				fObj[prop2] = newObj[prop1][prop2];
			}
		}
		// console.log(fObj)
		// return Object.keys(obj).reverse().reduce(function (result, key) {
		// 	result[key] = obj[key];
		// 	return result;
		// }, {});
		return fObj;
	}
    function visitOutlineObj($container, obj, lvl,path) {
        if (lvl > 7) return;
        var $ul = $('<ul>');
        lvl+=1; 
		obj = sortObject(obj)
		// console.log(lvl)
		// console.log(obj); return
        for (var prop in obj) {
			var $li = $('<li>');
			// console.log(prop)
			if(prop.includes('-ht')){
				// console.log(prop);
				prop = obj[prop];
				path = '$' + prop.replaceAll(' ','_');
				if (prop != 'Headingtag' && prop != 'Sectiontext' && prop...