by jlblcc

JavaScript tool for visualizing json-schemas

135 Stars 59 Forks Last release: almost 5 years ago (v0.3.5) The Unlicense 140 Commits 10 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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


  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 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';

          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


property must be set to the url of your schema.

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


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


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.