Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (39 sloc) 1.52 KB


Prettyprint JSON to HTML

It is available through npm

npm install json-markup

or as a component for the browser

component install mafintosh/json-markup

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


var jsonMarkup = require('json-markup')
var html = jsonMarkup({hello:'world'})

The above example will print the following HTML

<div class="json-markup">{
  <span class="json-markup-key">hello:</span> <span class="json-markup-string">"world"</span>

If you provide an object map with CSS style then style will be applied inline::

var jsonMarkup = require('json-markup')
var css2json = require('css2json')
var fs = require('fs')

var styleFile = css2json(fs.readFileSync('style.css', 'utf8'))
var html = jsonMarkup({hello:'world', foo: 'bar'}, styleFile)

Now outputs looks like:

<div style="line-height:17px;font-size:13px;font-family:monospace;white-space:pre;">{
    <span style="font-weight:bold;">hello:</span> <span style="color:green;">"world"</span>,
    <span style="font-weight:bold;">foo:</span> <span style="color:green;">"bar"</span>

Afterwards you can use css to style your output to your liking. A stylesheet similar to JSON view is included in style.css