Form Based JSON Editor For jQuery - jsonToForm

A simple, jQuery based JSON editor to dynamically generate editable forms from JSON schemas so that the uses are able to view, edit and valid JSON data in a simple way.

How to use it:

1. Import jQuery library and the jsonToForm's files into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jsonedit/json-edit.js"></script>
<link href="/path/to/jsonedit/json-edit.css" rel="stylesheet" />

2. Create a DIV container to place the generated HTML form.

<div id="jsonEditor"></div>

3. Create a Pre element to place the updated JSON.

<pre id="jsonValue"></pre>

4. Prepare your JSON schemas and values as follows:

var s = {
    "title": "json schema sample",
    "type": "object",
    "properties": {
        "stringField": {
            "title": "String Field",
            "type": "string",
            "minLength": 5,
            "maxLength": 10,
            "ui": {
                "placeholderHint": "Enter string",
                "hoverHint": "this is a text for test the mouse hover",
                "inlineHint": "this is a text to show we can additional text below the input box",
                "validationHint": "length of your text must be >4 and <11 characters"
            }
        },
        "colorField": {
            "title": "Color Field",
            "type": "string",
            "ui": {
                "editor": "color"
            }
        },
        "dateField": {
            "title": "Date Field",
            "type": "string",
            "ui": {
                "editor": "date"
            }
        },
        "numberField": {
            "title": "Number Field",
            "type": "number",
            "minimum": 5,
            "maximum": 10,
            "ui": {
                "editor": "number"
            }
        },
        "booleanField": {
            "title": "Boolean Field",
            "type": "boolean"
        },
        "HtmlField": {
            "title": "Html Field",
            "type": "string",
            "minLength": 5,
            "maxLength": 10,
            "ui": {
                "editor": "html"
            }
        },
        "selectField": {
            "title": "Select Field",
            "type": "string",
            "enum": [
                "item 1", "item 2"
            ],
            "ui": {
                "editor": "select"
            }
        },
        "radioField": {
            "title": "Radio Field",
            "type": "string",
            "enum": [
                "item 1", "item 2"
            ],
            "ui": {
                "editor": "radio"
            }
        },
        "stringArray": {
            "title": "String Array",
            "type": "array",
            "items": {
                "type": "string"
            },
            "ui": {
                "inlineHint": "this is an inline hint for ..."
            }
        },
        "objectArray": {
            "title": "Object Array",
            "type": "array",
            "items": {
                "$ref": "#/definitions/objectField"
            }
        }
    },
    "required": [
        "stringField",
        "booleanField",
        "selectField",
        "htmlField"
    ],
    "ui": {
        "inlineHint": "this is an inline hint for main node"
    },
    "definitions": {
        "objectField": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string"
                },
                "type": {
                    "type": "string",
                    "enum": [
                        "STRING",
                        "CHAR",
                        "TEXT"
                    ]
                },
                "allowNull": {
                    "type": "boolean"
                },
                "relation": {
                    "type": "object",
                    "properties": {
                        "tableName": {
                            "type": "string"
                        },
                        "keyFieldName": {
                            "type": "string"
                        }
                    }
                }
            },
            "required": [
                "name",
                "type"
            ]
        },
        "API": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string"
                },
                "type": {
                    "type": "string",
                    "enum": [
                        "CREATE",
                        "READ",
                        "UPDATE",
                        "DELETE"
                    ]
                },
                "allowedFields": {
                    "type": "array",
                    "items": {
                        "type": "string"
                    }
                }
            }
        }
    }
};

var v = {
    "stringField": "my string",
    "colorField": "#008000",
    "dateField": "2019-01-17",
    "numberField": "6",
    "booleanField": true,
    "HtmlField": "this is a <b>html</b>",
    "selectField": "item 2",
    "radioField": "item 1",
    "stringArray": [
        "s 1",
        "s 2"
    ],
    "objectArray": [
        {
            "name": "my field",
            "type": "CHAR",
            "allowNull": true,
            "relation": {
                "tableName": "t1",
                "keyFieldName": "f1"
            }
        }
    ]
};

5. Populate the HTML form with the JSON schemas and values.

var myEditor = $("#jsonEditor").jsonToForm({
    "schema": s,
    "value": v,
    "afterValueChanged": function (newValue, newSchema) {
      $("#jsonValue").html(JSON.stringify(newValue, null, 2));
    },
    "afterWidgetCreated": function (newValue, newSchema) {
      $("#jsonValue").html(JSON.stringify(newValue, null, 2));
    }
});

6. Available options to customize the JSON editor.

var myEditor = $("#jsonEditor").jsonToForm({

    // expanding level
    // -1 = all levels
    expandingLevel: -1,

    // renders the first level as a container
    renderFirstLevel: 'false',

    // auto trims values
    autoTrimValues: 'true',

    // blank space
    indenting: 5,

    // captions when null
    radioNullCaption: 'null',
    selectNullCaption: '',

    // shows expand/collapse buttons
    treeExpandCollapseButton: 'true'
    
});

7. API methods.

// checks if is valid
myEditor.isValid();

// gets JSON schemas
myEditor.getSchema();

// gets values
myEditor.getValue();

// sets values
myEditor.setValue(value);

Changelog:

2023-05-25

• Renamed to jsonToForm

2021-02-18

• NotRequired option effect on radio fields and Some css small changes

2020-06-01

• Adding tel and email types

---

This awesome jQuery plugin is developed by mirshahreza. For more Advanced Usages, please check the demo page or visit the official website.