Sunday, April 8, 2012

JSON pretty print using JavaScript

Is there a JavaScript JSON pretty print library (with colors, indentation, etc.)?

Source: Tips4all


  1. With native JSON, there's no need to use a library, since pretty-printing is implemented natively.

    var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
    var str = JSON.stringify(obj, undefined, 2); // indentation level = 2

    See the MDN Docs for further details (e.g. on the second argument);

    If you need syntax highlighting, you might use some regex magic like so:

    function syntaxHighlight(json) {
    if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    var cls = 'number';
    if (/^"/.test(match)) {
    if (/:$/.test(match)) {
    cls = 'key';
    } else {
    cls = 'string';
    } else if (/true|false/.test(match)) {
    cls = 'boolean';
    } else if (/null/.test(match)) {
    cls = 'null';
    return '<span class="' + cls + '">' + match + '</span>';

    See in in action (jsfiddle)

  2. Douglas Crockford's JSON in JavaScript library will pretty print JSON via the stringify method.

    You may also find the answers to this older question useful: How to pretty-print JSON script?

  3. Pretty Diff uses a heavily modified form of js-beautify. Try it out and see if it does all that you need:

  4. Print Pretty ( on the other hand uses highlight.js to do it.