JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

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

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

CSS

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

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