react-jsonschema-form-builder

it's a visual builder of 'Json Schema' that export the 'Json Schema' generated for then paste this structure of schema in your react-jsonschema-form component

Usage no npm install needed!

<script type="module">
  import reactJsonschemaFormBuilder from 'https://cdn.skypack.dev/react-jsonschema-form-builder';
</script>

README

Build Status

This project was bootstrapped with Create React App.

It's a visual builder of "Json Schema" that export the "Json Schema" generated for then paste this structure of schema in your react-jsonschema-form component

Why?

Because I needed to create forms visually to export them to another system with react-jsonschema-form syntax

Demo

Demo

How does it work?

Very easy, if you know how does react-jsonschema-form work, you will feel comfortable with the code.

Installation

$ npm install react-jsonschema-form-builder

How does the design change?

You can do a fork and change this package @rjsf/material-ui For watching another available options you can read Supported Themes

Implementation


    import React from 'react';
    import seed from './seed.json'
    import FormBuilderSchema from "react-jsonschema-form-builder";
    function App() {
        return (
            <>
                <FormBuilderSchema
                    rootSchema={seed} 
                />
            </>
        );
    }

    export default App;

seed.json

        {
            "title": "Form Title",
            "description": "Subtitle",
            "type": "object",
            "properties": {}
        }

other properties

    //getJsonSchemaForm =>  callback this json schema
    //prefix =>  if you can add prefix before ID of inprus
    //rootSchemaUi => UiSchema
    //customWidgets => you can import some custom Widget
    //newFields=> You can edit the form of add a new field
    //newPropJsonSchema=> if you add a new item in a custom newFields.json, thi function recibe de //options of you new field, and you can join with a customWidgets
    <FormBuilderSchem
        getJsonSchemaForm={getJsonSchema}
        rootSchema={seed} 
        rootSchemaUi={{}}
        newFields={jsonSchema}
        prefix={'prefix_befores_ides_inputs'} 
        newPropJsonSchema={(newProp,formData, prefix)=>{return newProp}}
        customWidgets={{CustomCheckbox, FileWidget, ...}}
    />

imagen