vue-tjson2html v1.0.0

tjson2html

Prettyprint JSON to HTML

It is available through npm

npm install tjson2html

tjson2html will take a JSON document and add markup to it so it can be styled in a browser.

Usage

var tjson2html = require('tjson2html')
var html = tjson2html({hello:'world'})
console.log(html);

The above example will print the following HTML

<div class="tjson">
  <div class="tjson group">
    <div class="tjson entry">
      <span class="tjson key">hello</span> <span class="tjson value string">"world"</span>
    </div>
  </div>
</div>

.tjson {
  font-size: 12px;
  font-family: monospace;
}
.tjson.group {
  margin-left: 10px;
}
.tjson.group:after {
  content: '}';
}
.tjson.group:before {
  content: '{';
}
.tjson.key {
  font-weight: bold;
  display: inline-block;
  min-width: 50px;
}
.tjson.key:after {
  content: ':';
}
.tjson.val {
  color: #555;
}

Afterwards you can use css to style your output to your liking.

License

MIT