json-viewer.html

<div class="target"></div>
<style>
  @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
  .json {
    font-family: "Source Code Pro", monospace;
    font-size: 16px;
  }
  .json > .json__item {
    display: block;
  }
  .json__item {
    display: none;
    margin-top: 10px;
    padding-left: 20px;
    user-select: none;
  }
  .json__item--collapsible {
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }
  .json__item--collapsible::before {
    content: "+";
    position: absolute;
    left: 5px;
  }
  .json__item--collapsible::after {
    background-color: lightgrey;
    content: "";
    height: 100%;
    left: 9px;
    position: absolute;
    top: 26px;
    width: 1px;
  }
  .json__item--collapsible:hover > .json__key,
  .json__item--collapsible:hover > .json__value {
    text-decoration: underline;
  }
  .json__toggle {
    display: none;
  }
  .json__toggle:checked ~ .json__item {
    display: block;
  }
  .json__key {
    color: darkblue;
    display: inline;
  }
  .json__key::after {
    content: ": ";
  }
  .json__value {
    display: inline;
  }
  .json__value--string {
    color: green;
  }
  .json__value--number {
    color: blue;
  }
  .json__value--boolean {
    color: red;
  }
</style>
<script>
  function jsonViewer(json, collapsible = false) {
    var TEMPLATES = {
      item: '<div class="json__item"><div class="json__key">%KEY%</div><div class="json__value json__value--%TYPE%">%VALUE%</div></div>',
      itemCollapsible:
        '<label class="json__item json__item--collapsible"><input type="checkbox" class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>',
      itemCollapsibleOpen:
        '<label class="json__item json__item--collapsible"><input type="checkbox" checked class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>',
    };

    function createItem(key, value, type) {
      var element = TEMPLATES.item.replace("%KEY%", key);

      if (type == "string") {
        element = element.replace("%VALUE%", '"' + value + '"');
      } else {
        element = element.replace("%VALUE%", value);
      }

      element = element.replace("%TYPE%", type);

      return element;
    }

    function createCollapsibleItem(key, value, type, children) {
      var tpl = "itemCollapsible";

      if (collapsible) {
        tpl = "itemCollapsibleOpen";
      }

      var element = TEMPLATES[tpl].replace("%KEY%", key);

      element = element.replace("%VALUE%", type);
      element = element.replace("%TYPE%", type);
      element = element.replace("%CHILDREN%", children);

      return element;
    }

    function handleChildren(key, value, type) {
      var html = "";

      for (var item in value) {
        var _key = item,
          _val = value[item];

        html += handleItem(_key, _val);
      }

      return createCollapsibleItem(key, value, type, html);
    }

    function handleItem(key, value) {
      var type = typeof value;

      if (typeof value === "object") {
        return handleChildren(key, value, type);
      }

      return createItem(key, value, type);
    }

    function parseObject(obj) {
      _result = '<div class="json">';

      for (var item in obj) {
        var key = item,
          value = obj[item];

        _result += handleItem(key, value);
      }

      _result += "</div>";

      return _result;
    }

    return parseObject(json);
  }

  var json = {
    User: {
      "Personal Info": {
        Name: "Eddy",
        Age: 3,
      },
      Active: true,
      Messages: ["Message 1", "Message 2", "Message 3"],
    },
    Total: 1,
  };

  var el = document.querySelector(".target");
  el.innerHTML = jsonViewer(json, true);
</script>