Build JSON by HTML input form with pre defined JSON schema ( react-jsonschema-form playground )

.README.md

Build JSON by HTML input form with pre defined JSON schema ( react-jsonschema-form playground )

About this Service

• 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.

Features

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" )

3 Areas

• 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.

Tutorial

Access to Example Playground

HTML input to result JSON ( formData )

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 )

JSON ( formData ) to HTML input value

Conversely if you edit formData JSON directly, A value in input form will changes.

Change JSON Schema

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 )

Share

Property format

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.

Share

Change UISchema

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.

Share

Sharing

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.

You need other TIPS?

Let's play by your hands! Because that place is Playground.

Be careful

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.

Versions

• Google Chrome 67.0.3396.99（Official Build）
• FireFox
• Mac OS X High Sierra

Links

• Perfect Plain Playground
• Qiita — Japanese
• Medium

formData.json

{
  "birthday": "2001-01-01",
  "firstName": "Yuma",
  "MiddleName": "Alone",
  "lastName": "Inaura"
}

JsonSchema.json

{
  "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"
    }
  }
}

UISchema.json

{
  "birthday": {
    "ui:widget": "alt-date",
    "ui:options": {
      "yearsRange": [
        2000,
        2010
      ]
    }
  }
}