Generate forms from a JSON schema, with AngularJS!
JavaScript HTML
Latest commit b041082 Jan 20, 2017 @Anthropic Anthropic committed on GitHub Merge pull request #827 from chargrove/patch-2
Fix error in extend doc (sfBuildersProvider -> sfBuilderProvider)
Failed to load latest commit information.
.github Update Oct 6, 2016
dist bootstrap Jan 14, 2017
docs Fix error in extend doc (sfBuildersProvider -> sfBuilderProvider) Jan 19, 2017
examples changed schema-form.js to angular-schema-form.js in builder examples Jan 17, 2017
gulp clean up after merge Jan 14, 2017
src clean up after merge Jan 14, 2017
test/lib Still 9 tests failing but the build process is working now with webpa… Dec 11, 2016
.babelrc Still 9 tests failing but the build process is working now with webpa… Dec 11, 2016
.coveralls.yml Coveralls support Jul 7, 2014
.gitignore Migrate @kyse changes from #705 Jun 13, 2016
.jscs.json Update jscs to match Material repo May 16, 2016
.jshintrc Starting to integrate the "core" package. Mar 28, 2016
.npmignore Added more to bower ignore, for light package. Updated package.json f… Jan 8, 2015
.travis.yml --single-run karma Jan 14, 2017
CHANGELOG Release 0.8.13 Apr 3, 2016 Merge remote-tracking branch 'refs/remotes/origin/feature/webpack-bab… Jan 14, 2017
LICENSE Initial commit Mar 24, 2014 Update travis build Jan 14, 2017
bower.json fix bower dist filename Jan 18, 2017
gulpfile.js Re-add examples temporarily May 16, 2016
jslicense.html Add JS license details. Apr 16, 2015
karma.conf.js ALL tests passing again :-D Jan 1, 2017
package.json Reset alpha version for pre-release draft Jan 14, 2017
webpack.config.dist.js Update build to add bootstrap decorator Jan 14, 2017
webpack.config.js Update build to add bootstrap decorator Jan 14, 2017

Angular Schema Form

bower version npm version npm downloads Gitter Build Status Code Coverage

Generate forms from JSON schemas using AngularJS!

The Blog / The Web Site / The Twitter / The Movie / / @SchemaFormIO / Movie

If you use ASF in your project/company please let us know! We'd love to feature you on the site.

There has been some recent developments in this project that you might want to read about.

Demo Time!

Try out the example page. Try editing the schema or form definition and see what comes out!

Hint: By pressing the 'Save to gist' button (top left), you can save your example into a shareable link.

What is it?

Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:

  1. Create a form directly from a JSON schema.
  2. Validate form fields against that same JSON schema.

Schema Form uses convention over configuration, so it comes packaged with some sensible defaults. But you can always customize it by changing the order and types of form fields.


Schema Form is inspired by the nice JSON Form library and aims to be roughly compatible with it, especially its form definition. So what sets Schema Form apart from JSON Form?

  1. Schema Form integrates deeply with AngularJS and uses AngularJS conventions to handle forms.
  2. Schema Form uses tv4 for validation, making it compatible with version 4 of the JSON schema standard.
  3. By default, Schema Form generates Bootstrap 3-friendly HTML.


You can find all documentation here, it covers all the different field types and their options.

It also covers how to extend angular schema form with your own field types.

Basic Usage

First, expose your schema, form, and model to the $scope.

angular.module('myModule', ['schemaForm'])
       .controller('FormController', function($scope) {
  $scope.schema = {
    type: "object",
    properties: {
      name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
      title: {
        type: "string",
        enum: ['dr','jr','sir','mrs','mr','NaN','dj']

  $scope.form = [
      type: "submit",
      title: "Save"

  $scope.model = {};

Then load them into Schema Form using the sfSchema, sfForm, and sfModel directives.

<div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>



It's simplest to install Schema Form using Bower.

bower install angular-schema-form

This will install the latest release and basic dependencies. See dependecies section below.

You can also load the files via


You can also just download the contents of the dist/ folder and add dependencies manually.


Schema form has a lot of dependencies, most of which are optional. Schema Form depends on:

  1. AngularJS version 1.3.x is recomended. Version 1.2.x has some limitation. See known limitations.
  2. angular-sanitize
  3. tv4
  4. objectpath
  5. bootstrap 3

If you install via bower you get all of the above except bootstrap since we don't want to push a certain version or flavor on you. Also make sure you got the angular version you actually want.

Additional dependecies

  1. If you'd like to use drag-and-drop reordering of arrays, you'll also need ui-sortable and its jQueryUI dependencies. See the ui-sortable documentation for details about which parts of jQueryUI are needed. You can safely ignore these if you don't need reordering.
  2. Schema Form provides tabbed arrays through the form type tabarray. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from bootstrap-vertical-tabs. However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the tabType: "top" option).

The minified files include templates - no need to load additional HTML files.

Script Loading

Schema form is split into two main files, dist/schema-form.min.js and dist/bootstrap-decorator.min.js and they need be loaded in that order. AngularJS, tv4 and objectpath also needs to be loaded before Schema Form.

<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>

Module loading

Don't forget to load the schemaForm module or nothing will happen.

angular.module('myModule', ['schemaForm']);


There are several add-ons available, for a full list see the web page. Your can also create your own add-ons!


Contributions are welcome! Please see for more info.


The new Webpack compilation has made it easier to manage files and code and run build scripts, but it is still not easy enough for users unfamiliar with it... yet.

NOTE in order to build simultaneously with json-schema-form-core you must have it cloned as a sibling directory to this one OR npm install the version you wish to build with.

Webpack now generates a header to indicate version and date of build. Do not create PR with the DIST folder.

Branch Status & New Add-On

This branch will be the next version of Angular Schema Form, currently please use the examples/example.html file as the best example to get the framework working.

The example uses angular-schema-form.js and angular-schema-form-bootstrap.js for the version of the code it executes, if you want your page to behave the same you obviously need the same version!


To see how to make an add-on work I have now included the calculate add-on file within the examples/add-on directory.

Yet to be migrated

Currently copyValueTo and some array related features are not working as expected and remain the highest priority to ensure backwards compatibility is maintained where possible.


Unit tests are run with karma and written using mocha, chai and sinon

To run the tests:

  1. Install all dependencies via NPM.
  2. Install dev dependencies with bower.
  3. Install the Karma CLI.
  4. Run the tests using npm test.
$ npm install
$ bower install
$ npm test