react-jsonschema-form demo
https://github.com/mozilla-services/react-jsonschema-form
HTML
<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div id="main"></div>
</div>
Babel + JSX
const Form = JSONSchemaForm.default;
const schema = {
"type": "object",
"properties": {
"TV killed the radio star": {
"title": "Your favourite state",
"type": "object",
"required": [
"malaysian_state",
],
"properties": {
"malaysian_state": {
"type": "string",
"title": "Malaysian states",
"enum": [
"Kuala Lumpur",
"Johor",
"Kedah",
"Kelantan",
"Melaka",
"Negeri Sembilan",
"Pahang",
"Perak",
"Perlis",
"Pulau Pinang",
"Sabah",
"Sarawak",
"Selangor",
"Terengganu",
"Wilayah Persekutuan"
]
}}}}};
const uiSchema = {
"TV killed the radio star": {
"malaysian_state": {
"ui:widget": "radio"
}
}
};
const log = (type) => console.log.bind(console, type);
var Container = React.createClass({
render: function() {
return (
<Form schema={schema}
uiSchema={uiSchema}
onChange={log("changed")}
onSubmit={log("submitted")}
onError={log("errors")}
/>
);
}
});
React.render(
<Container/>,
document.getElementById("main")
);