Need help with json-schema-viewer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jlblcc
146 Stars 62 Forks The Unlicense 140 Commits 7 Opened issues

Description

JavaScript tool for visualizing json-schemas

Services available

!
?

Need anything else?

Contributors list

# 209,159
json-sc...
d3js
HTML
CSS
121 commits
# 114,867
Electro...
mifare
pcsc
C++
7 commits
# 626,462
json-sc...
d3js
HTML
CSS
1 commit
# 653,609
json-sc...
d3js
HTML
CSS
1 commit

JSON Schema Viewer Build Status

JavaScript tool for visualizing json-schemas, includes validator.

Fair warning, the code "just works" - it could use a good refactoring. Pull requests welcome. The JSV was built to support a specific use case, so support for JSON schema(draft v4) keywords are added on an as-needed basis. You may also notice a few extensions to the spec, e.g. example, translation, version, deprecated, etc.

The demo is rendering the mdJson-schemas. There's also a basic example without the jQuery Mobile interface elements.

JSDocs are here

Built using: - d3js - jQUery - jQUery Mobile - tv4 - FileReader.js - highlight.js - jsonpointer.js - Grunt HTML Boiler - URI.js

Installation

  1. Clone repository:
    git clone https://github.com/jlblcc/json-schema-viewer.git
  2. Enter project directory:
    cd json-schema-viewer
  3. Install dependencies via Bower:
    bower install
  4. Install dependencies via NPM:
    npm install
  5. Build project via Grunt:
    grunt
    • grunt dev
      : Development build. This will create dev.html and basic.html in the project root(these files are .gitignored). This build will load all unminified js files individually.
    • grunt prod
      : Production build. This will create a production version at ./prod/<%= pkg.version %>/<%= now %>/<%= ver %>. The production version includes concatenated and minified js/css. Note: jQuery/JQuery Mobile are not included in the js builds. The prod directory is also .gitignored.
  6. Serve with your favorite web server:
    • Use
      grunt connect:server:keepalive
      to start a basic server at http://localhost:9001
    • example basic nginx config
    • Python:
      python -m SimpleHTTPServer 9001
    • php 5.4+:
      php -S localhost:9001

Use in Browser

          (function($) {

        var loc = window.location;
        //if not already set, set the root schema location
        //this allows dev ENV to override the schema location
        var schema = JSV.schema ? JSV.schema : loc.origin + loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1) + 'schemas/schema/schema.json';

        JSV.init({
          schema : schema,
          plain : true, //don't use JQM
          viewerHeight : $('#main-body').height(), //set initial dimensions of SVG
          viewerWidth : $('#main-body').width()
        }, function() {
          $('#jsv-tree').css('width', '100%');
          //set diagram width to 100%, this DOES NOT resize the svg container
          //it will not adjust to window resize, needs a listener to support that
          JSV.resetViewer();
          $('#loading').fadeOut('slow');
        });
      })(jQuery);

The

JSV.schema
property must be set to the url of your schema.

Example: http://jlblcc.github.io/json-schema-viewer/basic.html

Development

Edit the templates to modify layout:

  • index.html: jQuery Mobile interface. Copied to /dev.html on
    grunt dev
    .
  • basic.html: a basic example without jQuery Mobile or Sass dependency(css included in
    ).
  • latest.html: redirects to the last production build. Copied to /index.html on
    grunt prod
    .

Grunt

See Gruntfile.js or the JSDocs for details on the available Grunt tasks.

grunt --help
will also list available tasks.

This project was inspired by robschmuecker’s block #7880033.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.