JSON Painter

CodeCanyon JSON Painter 5449948
Script \ JavaScript \ Miscellaneous
Jsonpainter \ Script \ Painter \ JsonPainter \ Define \ Jquery \ Plugin \ JQuery

JavaScript - JSON Painter 5449948 by intellex @ CodeCanyon

Script \ JavaScript \ Miscellaneous

If you have ever had a need to read a raw JSON string, you probably noticed that it aint that much human-readable…

What is JSON painter?
This simple jQuery plugin will reformat and colorize any valid JSON, and you eyes will be forever gratefull for it

Here are the highlighs.

- Formats the JSON

- Syntax highlight

- Open / close individual object whitin

- One js file (3.1Kb) + one line of code

- Handles both JSON strings and objects

- Customize the style via CSS to fit your needs

See it in action
I beleive that there is no need to describe this plugin in more details, but if you are intrigued – here is a online demo with code snippets .

The How to guide

Step 1.

Download the script and place wherever you place the java scripts.

Step 2.

Include the jQuery and the JSON painter script in the <head> tag of your document, like this.

<!-- additional header content -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://codecanyon.net/item/json-painter/jquery.jsonPainter-1.0.js" charset="utf-8"></script>

Note that if you already have jQuery plugin included, you do not need to include it twice.

Step 3.

Create an element in the document that will hold the painted JSON

<div id="json"></div>

Step 4.

Have fun

<script type="text/javascript">
// Transform the data within the element (no params passed)
// Show painted JSON from a atring
var str = '{ node: "value", list: [ 1, 3, 4 ] }';
// Show painter JSON from an object
var obj = { node: "value", list: [ 1, 3, 4 ] };

Step 5.

If you are familiar with CSS, you can easily define your own styles.

Simply customize the snipper below add it to the <head> tag of your HTML document.

/** Define gloval style, like font size and family */
jsonpainter { }
/** Define how the key will be show */
jsonpainter-key { }
/** Define style for each variable type */
jsonpainter-value { }
jsonpainter-value-url { }
jsonpainter-value-null { }
jsonpainter-value-number { }
jsonpainter-value-string { }
jsonpainter-value-boolean { }
jsonpainter-value-boolean-true { }
jsonpainter-value-boolean-false { }

Last Update: 30 August 13; High Resolution: Yes; Compatible Browsers: IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS; Software Version: jQuery.


Keywords: developer, developers, format, formatter, highlighting, javacript, jquery, json, lightweight, painter, plugin, standalone, syntax highlight.