An AngularJS directive for rendering JSON Schema in HTML
JavaScript HTML CSS
Clone or download
mohsen1 Merge pull request #24 from mistralol/master
Add required field to array's in html view
Latest commit 4c75ad9 Jan 14, 2017

JSON Schema View

Build Status

An AngularJS directive for rendering JSON Schema in HTML.

JSON Schema is very verbose and hard to read in JSON. This directive helps rendering a JSON Schema in a user readable format.

The same module is also available in pure JavaScript with no dependencies. Check it out here

Try it in action



Install via bower

bower install json-schema-view --save


Add it as a dependency to your app and then use <json-schema-view> in your HTML as following

angular.module('myApp', ['...', 'mohsen1.json-schema-view']);
<json-schema-view schema="{properties: {value: {type: 'string'}}}" open="2"></json-schema-view>
  • schema(required) attribute will accepts a schema object
  • open attribute accepts a number that indicates how many levels deep the schema should be open


Install Gulp via npm if you don't have it

npm install -g gulp

Available commands

  • gulp: build and test the project
  • gulp build: build the project and make new files indist
  • gulp serve: start a server to serve the demo page and launch a browser then watches for changes in src files to reload the page. It also runs tests and keep test browser open for development. Watches for changes in source and test files to re-run the tests
  • gulp test: run tests