A simple React component capable of building HTML forms out of a JSON schema.

A live demo is hosted on gh-pages.

Requires React 0.14+.

As a npm-based project dependency:

$ npm install react-jsonschema-form --save 

As a script dependency served from a CDN:

 <script src="https://npmcdn.com/react-jsonschema-form@0.7.0/dist/react-jsonschema-form.js"></script>

Source maps are available at this url.

Note that the CDN version does not embed react nor react-dom.

A default, very basic CSS stylesheet is provided, though you're encouraged to build your own.

<link rel="stylesheet" href="https://npmcdn.com/react-jsonschema-form@0.7.0/dist/react-jsonschema-form.css">

import React, { Component } from "react"; import { render } from "react-dom"; import Form from "react-jsonschema-form"; const schema = { title: "Todo Tasks", type: "object", required: ["title"], properties: { title: {type: "string", title: "Title", default: "A new task"}, done: {type: "boolean", title: "Done?", default: false} } }; const formData = { title: "First task", done: true }; const log = (type) => console.log.bind(console, type); render(( <Form schema={schema} formData={formData} onChange={log("changed")} onSubmit={log("submitted")} onError={log("errors")} /> ), document.getElementById("app"));

That should give something like this (if you use the default stylesheet):

JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of UI schema. A UI schema is basically an object literal describing which UI widget should be used to render a certain field

Example:

const uiSchema =  { done: { widget: "radio" // could also be "select" } }; render(( <Form schema={schema} uiSchema={uiSchema} formData={formData} /> ), document.getElementById("app"));

Here's a list of supported alternative widgets for different JSONSchema data types:

• radio: a radio button group with true and false as selectable values;
• select: a select box with true and false as options;
• by default, a checkbox is used

• textarea: a textarea element;
• password: an input[type=password] element;
• by default, a regular input[type=text] element is used.

• updown: an input[type=number] updown selector;
• range: an input[type=range] slider;
• by default, a regular input[type=text] element is used.

Note: for numbers, min, max and step input attributes values will be handled according to JSONSchema's minimum, maximium and multipleOf values when they're defined.

The UISchema object accepts a classNames property for each field of the schema:

const uiSchema = { title: { classNames: "task-title foo-bar" } };

Will result in:

<div class="field field-string task-title foo-bar" > <label> <span>Title*</span> <input value="My task" required="" type="text"> </label> </div>

$ npm start 

A live development server showcasing components with hot reload enabled is available at localhost:8080.

$ npm test 

$ npm run tdd 

Apache 2