Angular JSON Schema Form — Demonstration Playground
An Angular JSON Schema Form builder for Angular, similar to, and mostly API compatible with, Angular Schema Form, React JSON Schema Form, and JSON Form.
Choose an example, or create your own, and check out the generated form.

Current example:

▼ Selected Framework and Options

(default = true)
(default = only add if no layout is defined)
(default = false)
(default = false)

▼ Input JSON Schema and Form Layout

{
"schema": {
"type": "object",
"properties": {
"first_name": { "type": "string" },
"last_name": { "type": "string" },
"address": {
"type": "object",
"properties": {
"street_1": { "type": "string" },
"street_2": { "type": "string" },
"city": { "type": "string" },
"state": {
"type": "string",
"enum": [ "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE",
"DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA",
"KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS",
"MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND",
"MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD",
"TN", "TX", "UT", "VT", "VI", "VA", "WA", "WV", "WI", "WY" ]
},
"zip_code": { "type": "string" }
}
},
"birthday": { "type": "string" },
"notes": { "type": "string" },
"phone_numbers": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": { "type": "string", "enum": [ "cell", "home", "work" ] },
"number": { "type": "string" }
},
"required": [ "type", "number" ]
}
}
},
"required": [ "last_name" ]
},
"layout": [
{ "type": "flex", "flex-flow": "row wrap", "items": [ "first_name", "last_name" ] },
{ "key": "address.street_1", "title": "Address", "placeholder": "Street" },
{ "key": "address.street_2", "notitle": true },
{ "type": "div",
"display": "flex",
"flex-direction": "row",
"items": [
{ "key": "address.city", "flex": "3 3 150px",
"notitle": true, "placeholder": "City"
},
{ "key": "address.state", "flex": "1 1 50px",
"notitle": true, "placeholder": "State"
},
{ "key": "address.zip_code", "flex": "2 2 100px",
"notitle": true, "placeholder": "Zip Code"
}
]
},
{ "key": "birthday", "type": "date" },
{ "key": "phone_numbers",
"type": "array",
"listItems": 3,
"items": [ {
"type": "div",
"displayFlex": true,
"flex-direction": "row",
"items": [
{ "key": "phone_numbers[].type", "flex": "1 1 50px",
"notitle": true, "placeholder": "Type"
},
{ "key": "phone_numbers[].number", "flex": "4 4 200px",
"notitle": true, "placeholder": "Phone Number"
}
]
} ]
},
{ "type": "section",
"title": "Notes",
"expandable": true,
"expanded": false,
"items": [ { "key": "notes", "type": "textarea", "notitle": true } ]
}
],
"data": {
"first_name": "Jane",
"last_name": "Doe",
"address": {
"street_1": "123 Main St.",
"city": "Las Vegas",
"state": "NV",
"zip_code": "89123"
},
"birthday": "1999-09-21",
"phone_numbers": [
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
],
"notes": "(This is an example of an uninteresting note.)"
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(loading form specification...)

▼ Generated Form

Street
Phone Numbers

▼ Form Output

Valid?: Yes

Live data — from onChanges():
{
  "first_name": "Jane",
  "last_name": "Doe",
  "address": {
    "street_1": "123 Main St.",
    "city": "Las Vegas",
    "state": "NV",
    "zip_code": "89123"
  },
  "birthday": "1999-09-21",
  "notes": "(This is an example of an uninteresting note.)",
  "phone_numbers": [
    {
      "type": "cell",
      "number": "702-123-4567"
    },
    {
      "type": "work",
      "number": "702-987-6543"
    }
  ]
}

Submitted data — from onSubmit():
null