rewrite.js

function obj2html(data) {
    var html = '';
    var attrs = '';
    var blocks = '';
    if (typeof data == 'object') {
        _.each(data, function(value, key) {
            if (typeof value == 'object' && value !== null) {
                blocks += '<div class="panel panel-default">';
                    blocks += '<div class="panel-heading">';
                        blocks += key;
                    blocks += '</div>';
                    blocks += '<div class="panel-body">';
                        blocks += obj2html(value);
                    blocks += '</div>';
                blocks += '</div>';
            }
            else {
                attrs += '<dt>' + key + '</dt>';
                attrs += '<dd>' + value || 'null' + '</dd>';
            }
        });
    }
    else {
        attrs += '<dt>value</dt>';
        attrs += '<dd>' + data || 'null' + '</dd>';
    }
    if (attrs !== '') {
        html += '<div class="panel panel-default">';
            html += '<div class="panel-body">';
                html += '<dl class="dl-horizontal">';
                html += attrs;
                html += '</dl>';
            html += '</div>';
        html += '</div>';
    }
    html += blocks;
    return html;
}

function htmlWrap(data) {
    var html = '';
    var json = JSON.stringify(data).replace(/'/g, "\\'");
    html += '<div class="row">';
        html += '<div class="col-xs-12 col-md-6">';
            html += obj2html(data);
        html += '</div>';
        html += '<div class="col-xs-12 col-md-6">';
            html += '<div class="panel panel-default">';
                html += '<div class="panel-body json" data-json=\'' + json + '\'>';
                html += '</div>';
            html += '</div>';
        html += '</div>';
    html += '</div>';
    return html;
}

wat.js

function block(input, depth) {
    var out = "";
    if (typeof input == 'object') {
        _.each(input, function(value, key){
            out += '<div class="row"><div class="col-xs-12 col-sm-12 col-md-6"><div class="panel panel-default">';
                out += '<div class="panel-heading">';
                out += key;
                out += '</div>';
                out += '<div class="panel-body">';
                if (typeof value == 'object') {
                    _.each(value, function(value, key) {
                        if (typeof value == 'object') {
                            out += '<div class="panel panel-default"><div class="panel-heading">';
                            out += key;
                            out += '</div><div class="panel-body">';
                        }
                        else {
                            out += '<dl class="dl-horizontal">';
                        }
                        if (typeof value == 'object') {
                            _.each(value, function(value, key) {
                                if (typeof value == 'object') {
                                    if (typeof value == 'object') {
                                        out += '<div class="panel panel-default"><div class="panel-heading">';
                                        out += key;
                                        out += '</div><div class="panel-body">';
                                    }
                                    else {
                                        out += '<dl class="dl-horizontal">';
                                    }
                                    if (typeof value == 'object') {
                                        _.each(value, function(value, key) {
                                            if (typeof value == 'object') {
                                                _.each(value, function(value, key) {
                                                    out += '<dl class="dl-horizontal">';
                                                    if (typeof value == 'object') {
                                                        _.each(value, function(value, key) {
                                                            out += "<dt>" + key + "</dt>";
                                                            out += "<dd>" + value + "</dd>";
                                                        });
                                                    }
                                                    else {
                                                        out += '<dl class="dl-horizontal">';
                                                            out += "<dt>" + key + "</dt>";
                                                            out += "<dd>" + value + "</dd>";
                                                        out += "</dl>";
                                                    }
                                                    out += "</dl>";
                                                });
                                            }
                                            else {
                                                out += '<dl class="dl-horizontal">';
                                                    out += "<dt>" + key + "</dt>";
                                                    out += "<dd>" + value + "</dd>";
                                                out += "</dl>";
                                            }
                                        });
                                    }
                                    else {
                                        out += '<dl class="dl-horizontal">';
                                            out += "<dt>" + key + "</dt>";
                                            out += "<dd>" + value + "</dd>";
                                        out += "</dl>";
                                    }
                                    if (typeof value == 'object') {
                                        out += "</div></div>";
                                    }
                                    else {
                                        out += "</dl>";
                                    }
                                }
                                else {
                                    out += '<dl class="dl-horizontal">';
                                        out += "<dt>" + key + "</dt>";
                                        out += "<dd>" + value + "</dd>";
                                    out += "</dl>";
                                }
                            });
                        }
                        else {
                            out += '<dl class="dl-horizontal">';
                                out += "<dt>" + key + "</dt>";
                                out += "<dd>" + value + "</dd>";
                            out += "</dl>";
                        }
                        if (typeof value == 'object') {
                            out += "</div></div>";
                        }
                        else {
                            out += "</dl>";
                        }
                    });
                }
                else {
                    out += '<dl class="dl-horizontal">';
                        out += "<dt>" + key + "</dt>";
                        out += "<dd>" + value + "</dd>";
                    out += "</dl>";
                }
                out += '</div>';
            out += '</div></div>';
            out += '<div class="col-xs-12 col-sm-12 col-md-6"><div class="panel panel-default"><div class="panel-body">';
            json_obj = { };
            json_obj[key] = value;
            json = JSON.stringify(json_obj).replace(/'/g, "\\'");
            out += '    <div class="json" data-json=\''+json+'\'>';
            out += '    </div>';
            out += '</div></div></div></div>';
        });
    }
    else {
        out += '<div class="row">';
            out += '<div class="col-xs-12 col-sm-12 col-md-6">';
                out += '<div class="list-group">';
                    out += '<div class="list-group-item">value</div>';
                    out += '<div class="list-group-item">';
                        out += '<dl class="dl-horizontal">';
                            out += "<dt>value</dt>";
                            if (input instanceof Array) {
                                out += "<dd>" + input.join(', ') + "</dd>";
                            }
                            else {
                                input = JSON.parse(input); // I don't even..
                                out += "<dd>" + input + "</dd>";
                            }
                        out += "</dl>";
                    out += '</div>';
                out += '</div>';
            out += '</div>';
            out += '<div class="col-xs-12 col-sm-12 col-md-6">';
                out += '<div class="panel panel-default">';
                    out += '<div class="panel-body">';
                        json = JSON.stringify(input).replace(/'/g, "\\'");
                        out += '<div class="json" data-json=\''+json+'\'>';
                        out += '</div>';
                    out += '</div>';
                out += '</div>';
            out += '</div>';
        out += '</div>';
    }
    return out;
}