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 visitOutlineObj($container, obj, lvl,path) {
        if (lvl > 5) return;
        var $ul = $('<ul>');
        lvl+=1; 
		// let elasticLevel = lvl - 1;
        for (var prop in obj) {
			// console.log(lvl+' => '+titleCase(prop));
				var $li = $('<li>');
			if(prop.includes('-ht')){
				prop = obj[prop];
				// console.log(prop);
				path = '$' + prop.replaceAll(' ','_');
				if (prop != 'Headingtag' && prop != 'Sectiontext' && prop != 'data')
				{
					if (lvl == 1 && prop.includes('.htm')){
						// $li.append('<a href=#'+path+' class="json-key out'+ lvl +'">' + titleCase(prop) + '</a>');
					}else{
						$li.append('<a href=#'+path+' class="json-key out'+ lvl +'">' + titleCase(prop) + '</a>');
					}
				}
			}
			// console.log(prop == 'l'+(lvl - 2))
			if (typeof obj[prop] === "object") {
				// console.log(prop);
				visitOutlineObj($li, obj[prop],lvl,path);
			} else {
	//                $li.append('<p class="json-value lvl'+ lvl +'">'+obj[prop]+'</p>');                   
			}
			if($li.text() != '')
				$ul.append($li);
        }
		if($ul.text() != '')
        	$container.append($ul);
    }
    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] ==...