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:
git clone https://github.com/jlblcc/json-schema-viewer.git
cd json-schema-viewer
bower install
npm install
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.grunt connect:server:keepalive
to start a basic server at http://localhost:9001python -m SimpleHTTPServer 9001
php -S localhost:9001
(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
Edit the templates to modify layout:
grunt dev
.<head>
).grunt prod
.See [Gruntfile.js] (https://github.com/jlblcc/json-schema-viewer/blob/master/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.