JSFiddle - React, Tailwind, and code Playground

HTML

<div id="jsonStr"></div>
<div id="regeStr"></div>

CSS

#jsonStr, #regeStr {
  border: 2px dashed #666;
  margin: 20px;
  padding: 10px;
  font-family: "Arial";
}

JavaScript

// FORMATTING OF STRINGIFIED JSON OBJECT. GUY PURSEY 2013.

var jsonVar = {
       text: "example",
       number: 1,
       obj: {
           "more text": "another example"
       },
       obj2: {
           "yet more text": "yet another example"
       }
    },
    jsonStr = JSON.stringify(jsonVar),
    regeStr = '',
    f = {
            brace: 0
        }; // for tracking matches, in particular the curly braces

document.getElementById('jsonStr').innerHTML = jsonStr;

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
    var rtnFn = function() {
            return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
        },
        rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
        f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.getElementById('regeStr').innerHTML += regeStr;