Open Source Lightweight React JSON Schema Form Library for MUI

import { view } from "@react-form-builder/components-material-ui";
import type { FormViewerProps } from "@react-form-builder/core";
import { FormViewer } from "@react-form-builder/core";

const json = {
  errorType: 'MuiErrorWrapper',
  form: {
    key: "Screen",
    type: "Screen",
    children: [
      {
        key: "firstName",
        type: "MuiTextField",
        props: {
          label: { value: "First Name" },
          helperText: { value: "Enter your first name" },
        },
        schema: {
          validations: [
            {
              key: "required",
            },
          ],
        },
      },
      {
        key: "lastName",
        type: "MuiTextField",
        props: {
          label: { value: "Last Name" },
          helperText: { value: "Enter your last name" },
        },
        schema: {
          validations: [
            {
              key: "required",
            },
          ],
        },
      },
      {
        key: "submit",
        type: "MuiButton",
        props: {
          children: { value: "Submit" },
          variant: { value: "contained" },
          color: { value: "primary" },
        },
        events: {
          onClick: [
            {
              name: "validate",
              type: "common",
              args: {
                failOnError: true,
              },
            },
            {
              name: "onSubmit",
              type: "custom",
            },
          ],
        },
      },
    ],
  },
};

const MuiExample = () => {
  const getForm = () => JSON.stringify(json);

  const actions: FormViewerProps["actions"] = {
    onSubmit: (e) => {
      // submit the form to the backend
      alert("Form data: " + JSON.stringify(e.data));
    },
  };

  return <FormViewer view={view} getForm={getForm} actions={actions} />;
};