Create
Advanced
Material Forms
{with JSON schema}

Build dynamic, interactive forms with JSON schemas. Reduce boilerplate code by up to 90% and ship faster without sacrificing flexibility or power.

👇 Try it yourself – This form is built entirely from a JSON schema

Why Use MuiForms?

See the dramatic difference in productivity and code quality. With MuiForms, you describe your form once in JSON and get validation, responsive design, and dynamic behavior—all automatically.

With MuiFormsWithout MuiForms
JSON schema defines forms with 90% less code, no state managementManual state management creates boilerplate code and bugs
Reusable schemas for consistent forms across appsRepetitive JSX increases development time and maintenance
Built-in schema validation, easy to reuse and customizeValidation logic scattered and hard to reuse
Built-in responsive layouts with Material-UIComplex layouts need additional CSS or libraries
Easy API integration for dynamic optionsDynamic fields need custom API implementation
Built-in responsive design and stylingLimited responsiveness without deep MUI knowledge
Conditional fields handled via schema configConditional logic requires complex state checks
Full TypeScript with inferred typesTypeScript support is manual and error-prone
Code Example
MuiForms
// Simple JSON schema
const schema = {
  fields: [
    {
      name: "firstName",
      meta: {
        displayName: "First Name",
        displayType: "text",
        validation: {
          required: true
        }
      }
    },
    {
      name: "email",
      meta: {
        displayName: "Email",
        displayType: "email",
        validation: {
          required: true,
          pattern: {
            value: "^[^@]+@[^@]+\.[^@]+$",
            errorMsg: "Invalid"
          }
        }
      }
    },
    {
      name: "password",
      meta: {
        displayName: "Password",
        displayType: "password",
        validation: {
          required: true,
          minLength: {
            value: 8,
            errorMsg: "Min 8 chars"
          }
        }
      }
    }
  ]
};

// Component
<MuiForms 
  schema={schema} 
  onSubmit={(data) => console.log(data)}
/>
Code Example
Traditional React
// 70+ lines of boilerplate
function RegistrationForm() {
  const [firstName, setFirstName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validateEmail = (email) => {
    return email.match(/^[^@]+@[^@]+\.[^@]+$/);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};
    
    if (!firstName.trim()) 
      newErrors.firstName = 'Required';
    if (!validateEmail(email)) 
      newErrors.email = 'Invalid';
    if (password.length < 8) 
      newErrors.password = 'Min 8 chars';
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    console.log({ firstName, email, password });
  };

  return (
    <Box component="form" onSubmit={handleSubmit}>
      <TextField 
        label="First Name"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
        error={!!errors.firstName}
        helperText={errors.firstName}
        styles={{
            marginBottom: '20px'
            marginTop: '20px'
            marginRight: '20px'
        }}
        fullWidth
      />
      {/* More fields... */}
    </Box>
  );
}

Examples

form

Booking Form

form

Payment Form

form

Form With Basic Details

form

Form With Multiple Address

form

Form With Products

form

Customer Feedback Form

form

Interactive Score chart

form

Custom Score chart

form

Rating Form

form

Account Opening Form

form

Validate Form

Key Features

  • Full Material UI Components support
  • Create custom field components
  • Define field dependencies & relationships
  • Material Design icons integration
  • Load dynamic options from APIs
  • Smart responsive layouts
  • Mobile-first design
  • Production-ready out of the box
  • Full TypeScript support
  • Extensible and customizable

Star us at github

© Copyright 2023 MuiForms