Nested Parenthetical Madness

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0-rc.9 • Public • Published

    React Json Schema Form (Mui)

    This Project will soon become a umbrella repo for JSON Schema Support to major Frameworks and UI Frameworks. 

    More info on this has been outlined in Universal JSON Schema document.

    codecov Known Vulnerabilities GitHub package.json version npm GitHub issues GitHub pull requests

    Build and Test CI BrowserStack Status Build Status

    A Material UI port of jsonschema-form.

    A live playground and Detailed Docs

    Install instructions via npm (MUI 5+)

    npm install --save react-jsonschema-form-material-ui

    Follow Releases page to use latest or preleased tags.

    For legacy version of < MUI 4

    npm install --save react-jsonschema-form-material-ui@3.0.0-mui-4

    Basic Example Usage

    // Library
    import React from 'react';
    import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
    // Internals
    import schema from '../simple/schema.json';
    import uiSchema from '../simple/ui-schema.json';
    const givenXhrSchema = require('./path-to your-xhr-schema.json'); // Optional
    import givenFormData from '../simple/form-data.json';
    export default () => {
      const [formData, setFormData] = React.useState(givenFormData);
      return <MaterialJsonSchemaForm 
    	    xhrSchema={givenXhrSchema || {}} // Optional
    	    theme={} // Optional - You need to explicitly provide your custom theme from MUI5 onwards
                onChange={({ formData }) => setFormData(formData)}
                onSubmit={(submittedData) => console.log('form submitted', submittedData)}

    Advanced Example Usage

    More detailed example can be seen here

    // Library
    import React from 'react';
    import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
    // Internals
    const givenSchema = require('./path-to your-schema.json');
    const givenUISchema = require('./path-to your-ui-schema.json');
    const givenXhrSchema = require('./path-to your-xhr-schema.json');
    const givenFormData = require('./path-to your-ui-formData.json');
    const Example () => {
        const [formData, setFormData] = React.useState(givenFormData);
        const onSubmit = (value, callback) => {
            console.log('onSubmit: %s', JSON.stringify(value)); // eslint-disable-line no-console
            setTimeout(() => callback && callback(), 2000); // just an example in real world can be your XHR call
        const onCancel = () => {
            console.log('on reset being called');
        const onFormChanged = ({ formData }) => setFormData(formData);
        const onUpload = (value) => {
            console.log('onUpload: ', value); // eslint-disable-line no-console
        return (
    	    // Define Schema
    	    xhrSchema={givenXhrSchema || {}}
    	    theme={} // Optional - You need to explicitly provide your custom theme from MUI5 onwards
    	    // Define Event handlers
    	    // Every Prop below is optional - every prop above this line is required
                onCancel={onCancel} /* optional */
    	    onUpload={onUpload} /* optional */
                onError={onError} /* optional */
                /* Optional Prop for custom functions to be executed for transforming data */
                    translateRatings: (givenData, uiData) => ({ givenData, uiData }),
                /* Optional Prop for custom components */
    		  customComponent: ({ onChange, }) => (
    			<CustomComponent onChange={onChange} formData={givenFormData} uiData={givenUIData} {} />
    		  customRating: ({ onChange, }) => (
    			<CustomRating onChange={onChange} formData={givenFormData} uiData={givenUIData} {} />
                /* Optional Prop for custom validation */
                    confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
    		      message: validations.confirmPassword.message,
    		      inline: true,
                /* Optional Prop to auto submit form on press of enter */
    export default Example;

    Latest Version npm version [JSONSchema-Draft-7 Support]

    • Build system now upgraded to webpack 5
    • React select values are no longer stringify results but array values.
    • New Tabs UI to divide sub sections to tabs
    • Additional Properties and Additional Items feature enabled
    • "ui:options" and "ui:style" enabled for prop passing and styling every field
    • On the fly module creation
    • Reference Schema's via http and inline references
    • Support alternatives - oneOf, anyOf, allOf
    • Support for dependencies - array of conditionals
    • new Prop onError to get errors available in form on every change
    • new Prop uiData to control ui only data to add separation of concern with form data
    • Demo updated with monaco editor and live validation changes
    • New interceptors to transform form and uiData using uiSchema - ui:interceptor

    For more info you can follow our changelog


    We welcome all contributions, enhancements, and bug-fixes. Open an issue on GitHub and submit a pull request.


    To build/test the project locally on your computer:

    Fork this repo and then clone

    git clone

    Install dependencies and module generator

    npm install

    Run the demo to test your changes

    npm start (open http://localhost:3005 once build is successful)

    Run the tests once you are done with your changes

    npm test

    You can send a PR through and a release will be made following Semantic Versioning once your PR gets merged.


    npm i react-jsonschema-form-material-ui

    DownloadsWeekly Downloads






    Unpacked Size

    708 kB

    Total Files


    Last publish


    • vipin-tanna