This package has been deprecated

    Author message:

    The structure of the JSONForms project has changed. We suggest to use the new @jsonforms packages as the old ones may no longer be updated. See for more information.

    TypeScript icon, indicating that this package has built-in type declarations

    1.4.4 • Public • Published

    Deprecation Notice

    This is the original version of the project. While there is nothing wrong in using it, we would like to recommend using JSONForms 2+ to you. It contains major improvements to ease development, improve modularity and to remove the dependency on AngularJS. Of course JSONForms 2.x can still be used with Angular, but in addition you can now also use it with React or even standalone.

    Please check out for more information. Users of JSONForms 1 may want to also take a look at the migration guide.

    JSONForms - More Forms. Less Code

    Complex AngularJS Forms in the blink of an eye

    JSONForms extends the AngularJS view model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema.


    1. Install JSON Forms via npm install jsonforms and require it via require('jsonforms')
    2. Annotate the element, where you want to place a form, with a jsf class attribute.
    3. Add jsonforms as a dependency to your AngularJS app:
    var myApp = angular.module('myApp', ['jsonforms', ...])
    1. Load jsonforms.css in the head section:
    <link rel="stylesheet" type="text/css" href="node_modules/jsonforms/dist/jsonforms.css">
    1. Render a form with the jsonforms element:

    The simplest example looks like this, where schema, uiSchema and data are properties of a aliased controller named vm:

    <div class="jsf">
      <jsonforms schema="vm.schema" uischema="vm.uiSchema" data=""></jsonforms>
    1. Styling JSON Forms ships with predefined styles based on Bootstrap and Material Design, see the Styling section of the documentation.

    Documentation and more information

    For documentation, examples and more information, please see

    Developers Documentation

    First time setup

    • Install node.js(version > 4.x.x)
    • Clone this repository
    • Install dependencies: npm install
    • Generate typings: npm run typings-install

    Build & Testing

    • Normal Build: npm run build (runs tslint as well)
    • Bootstrap Build: npm run build-bootstrap
    • Material Build: npm run build-material
    • Test: npm run test
    • Watch: npm run dev (or dev-bootstrap, dev-material), point your browser to http://localhost:8080/webpack-dev-server/

    How to run the examples

    JSONForms ships with a couple of examples. The examples' dependencies are managed via bower, hence you'll first need to run the following commands from the project root directory:

    cd examples
    ../node_modules/.bin/bower install

    Also make sure that you have followed the instructions for the first time setup in case you haven't done so already.

    Now you start the example by running npm run dev and then pointing your browser to http://localhost:8080.

    Note that for running the placeholder example you'll first need to start jsonplaceholder which provides a fake REST API. You can do so via

    npm run start-placeholder

    Continuous Integration

    The JSONForms project is build and tested via Travis. Coverage is documented by Coveralls.

    Current status: Build Status Coverage Status


    The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.


    Our current roadmap is available here.




    npm i jsonforms


    DownloadsWeekly Downloads






    Unpacked Size

    5.37 MB

    Total Files


    Last publish


    • sgraband
    • model-compare-bot
    • tbuschto
    • sdirix
    • mkoegel
    • tabrisjs
    • moritzpost
    • eclipsesourceadmin
    • theia-tree-editor-bot
    • tortmayr
    • eugenneufeld
    • jfaltermeier
    • edmue