Monday, December 30, 2013

Download JSON Painter

JSON Painter

JSON Painter dowload

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

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:

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

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)         $('#json').jsonPainter();          // Show painted JSON from a atring         var str = '{ node: "value", list: [ 1, 3, 4 ] }';         $('#json').jsonPainter(str);          // Show painter JSON from an object         var obj = { node: "value", list: [ 1, 3, 4 ] };         $('#json').jsonPainter(obg);     </script>     

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.

     <style>          /** 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 { }      </style>     

JSON Painter dowload

No comments:

Post a Comment