JSONPanel

JavaScript JSON viewer plugin. Requires jQuery.

Usage

1. Download the latest release, or install using Bower:

   bower install --save jsonpanel

2. Include in page

   <link rel="stylesheet" type="text/css" href="https://github.com/afeld/jsonpanel/blob/gh-pages/bower_components/jsonpanel/stylesheets/jsonpanel.css">
   <script src="https://github.com/afeld/jsonpanel/raw/gh-pages/bower_components/jquery/dist/jquery.js"></script>
   <script src="https://github.com/afeld/jsonpanel/raw/gh-pages/bower_components/Autolinker.js/dist/Autolinker.js"></script>
   <script src="https://github.com/afeld/jsonpanel/raw/gh-pages/bower_components/jsonpanel/jsonpanel.js"></script>
   
   <!-- ... -->
   
   <div class="jsonpanel"></div>

3. Initialize by passing JSON object into jQuery plugin:

   $(document).ready(function(){
     $('.jsonpanel').jsonpanel({
       data: {
         sample: 'json'
       }
     });
   });

See the demo page, or api.afeld.me for a real-world example.

Development

Installation

gem install bundler
bundle

Compile files

bundle exec compass watch
open index.html

Run test coverage

bundle exec rackup
open "http://localhost:9292/index.html?coverage=true"

Inspiration

• https://github.com/bhollis/jsonview
• https://github.com/josdejong/jsoneditor