- react-jsonschema-form [Playground]
- Be careful it is named "Playground"
- If you want really formalt this service , probably you need stand it in some server.
react-jsonschema-form Playground
- Decide free style structure of JSON ( by JSON )
- Realtime Converting HTML form input to JSON
- Realtime Validation : display errors with invalid value
- No need server connection
- Playground is on the web but JSON converting works in your browser's javascript.
- Share your original playground with unique URL
- Keep all statements of playground ( "JSONSchema" "UISchema" and "formData" )
- JSONSchema
- Data definition of JSON.
- JSON schema build HTML input form by automatic.
- formData
- Inputed value on HTML form is converted to this area's JSON.
- UISchema
- Definition interface of HTML input form.
- It is optional, not required.
Access to Example Playground
Input your First Name
in "A registration form" area . ( Right side in below image )
You can see JSON result will be changed by Real time in "formData" area. ( Lower left in below image )
Conversely if you edit formData JSON directly, A value in input form will changes.
Let's add MiddleName
property to JSONSchema.
{
"title": "Some Form",
"type": "object",
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
+ "MiddleName": {
+ "type": "string",
+ "title": "Middle Name"
+ },
"lastName": {
"type": "string",
"title": "Last name"
}
}
}
By that soon new form input area appears. Now you can input and converting "MiddleName" property on HTML form. ( upper left in bellow image )
Next try to add birthday
property with date
format.
Add "birthday" property to JSONSchema.
{
"title": "Some Form",
"type": "object",
"properties": {
+ "birthday": {
+ "type": "string",
+ "format": "date",
+ "title": "Birthday"
+ },
"firstName": {
"type": "string",
"title": "First name"
},
"MiddleName": {
"type": "string",
"title": "Middle Name"
},
"lastName": {
"type": "string",
"title": "Last name"
}
}
}
HTML form input will be date
by automatic.
You can control UI Schema by specification.
In bellow case, use old type HTML input parts for birthday property.
Change UISchema Area's JSON.
{
+ "birthday": {
+ "ui:widget": "alt-date",
+ "ui:options": {
+ "yearsRange": [
+ 2000,
+ 2010
+ ]
+ }
+ }
}
Separated style input birthday parts appears with yearsRange
.
You can share your original playground anytime. It keeps all statement of "JSONSchema" "UISchema" and "formData".
( But I found sharing does not work when propetires has Japanese words like ジェイソンをビルドしたいです
. I don't know it is a playground's behaviour or my rack of understanding with JSON encoding )
You can see Example share URL keep inputing.
Let's play by your hands! Because that place is Playground.
In Today ( 2018-08-13 ) Playground seems not perfect. I thik some behaviour is broken.
For example formData and JSONSchema has not perfect consistency in realtime. When I created valid JSONSchema but when formData , HTML input does not work well.
Now probably we should hack that behaviour.
By web page reloading, playground sharing, return to Perfect Plain Playground or take other actions.
- Google Chrome 67.0.3396.99(Official Build)
- FireFox
- Mac OS X High Sierra