jlblcc / Json Schema Viewer
Licence: unlicense
JavaScript tool for visualizing json-schemas
Stars: ✭ 147
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Json Schema Viewer
Typedload
Python library to load dynamically typed data into statically typed data structures
Stars: ✭ 120 (-18.37%)
Mutual labels: json-schema
Json Schema To Typescript
Compile JSONSchema to TypeScript type declarations
Stars: ✭ 1,917 (+1204.08%)
Mutual labels: json-schema
Kubernetes Json Schema
Schemas for every version of every object in every version of Kubernetes
Stars: ✭ 140 (-4.76%)
Mutual labels: json-schema
React Json Schema
Configure and build views using JSON schemas mapped to React components
Stars: ✭ 131 (-10.88%)
Mutual labels: json-schema
Aptos
☀️ A tool for validating data using JSON Schema and converting JSON Schema documents into different data-interchange formats
Stars: ✭ 144 (-2.04%)
Mutual labels: json-schema
Sunburst Chart
A sunburst interactive chart web component for visualizing hierarchical data
Stars: ✭ 140 (-4.76%)
Mutual labels: d3js
Liformbundle
Symfony Bundle to render Symfony Forms to JSON Schema
Stars: ✭ 124 (-15.65%)
Mutual labels: json-schema
Collapsibletree
Create Interactive Collapsible Tree Diagrams in R using D3.js
Stars: ✭ 126 (-14.29%)
Mutual labels: d3js
Objc Dependency Visualizer
Objective-C and Swift dependency visualizer. It's tool that helps to visualize current state of your project. It's really easy to see how tight your classes are coupled.
Stars: ✭ 1,738 (+1082.31%)
Mutual labels: d3js
Lurker
📖 The ultimate tool for documenting and testing APIs in Rails
Stars: ✭ 120 (-18.37%)
Mutual labels: json-schema
Escher
Build, share, and embed visualizations of metabolic pathways.
Stars: ✭ 141 (-4.08%)
Mutual labels: d3js
Class Validator Jsonschema
Convert class-validator-decorated classes into JSON schema
Stars: ✭ 118 (-19.73%)
Mutual labels: json-schema
3d Force Graph
3D force-directed graph component using ThreeJS/WebGL
Stars: ✭ 2,386 (+1523.13%)
Mutual labels: d3js
Libvirt Hook Qemu
Libvirt hook for setting up iptables port-forwarding rules when using NAT-ed networking.
Stars: ✭ 137 (-6.8%)
Mutual labels: json-schema
JSON Schema Viewer 
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:
Installation
- Clone repository:
git clone https://github.com/jlblcc/json-schema-viewer.git - Enter project directory:
cd json-schema-viewer - Install dependencies via Bower:
bower install - Install dependencies via NPM:
npm install - 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.
-
- Serve with your favorite web server:
- Use
grunt connect:server:keepaliveto 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
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
<head>). - latest.html: redirects to the last production build. Copied to /index.html on
grunt prod.
##Grunt
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].