Low-Code Form Builders Compared: amis vs react-jsonschema-form

Both amis and react-jsonschema-form let you build forms using JSON instead of writing JSX by hand. But they serve very different scopes and philosophies. Let’s break down how they work in practice.

📄 Core Philosophy: Standards vs Full-Stack Low-Code

react-jsonschema-form follows the JSON Schema and UI Schema specs closely. You define what your data looks like (schema), how it should be validated, and optionally how it should be rendered (uiSchema). The library handles the rest.

// react-jsonschema-form: Basic usage
import Form from '@rjsf/core';

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number', minimum: 0 }
  },
  required: ['name']
};

const uiSchema = {
  age: { 'ui:widget': 'updown' }
};

function App() {
  return <Form schema={schema} uiSchema={uiSchema} onSubmit={({ formData }) => console.log(formData)} />;
}

amis treats forms as just one part of a larger low-code system. Its JSON config describes entire pages — including navigation, modals, tables, and conditional logic — not just input fields. It’s closer to a visual builder engine than a form renderer.

// amis: Rendering a full page with a form
import { render as renderAmis } from 'amis';

const amisSchema = {
  type: 'page',
  title: 'User Profile',
  body: {
    type: 'form',
    api: '/api/update', // auto-handles submission
    body: [
      { type: 'input-text', name: 'name', label: 'Name', required: true },
      { type: 'input-number', name: 'age', label: 'Age', min: 0 }
    ]
  }
};

function App() {
  return renderAmis(amisSchema);
}

🧱 Component Model: Primitive Inputs vs Rich Widgets

react-jsonschema-form focuses on mapping schema types to standard HTML inputs (text, number, checkbox, etc.). Custom widgets require explicit registration and follow a specific props interface.

// react-jsonschema-form: Custom widget
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';

const MyCustomInput = (props) => (
  <input
    type="text"
    value={props.value || ''}
    onChange={(e) => props.onChange(e.target.value)}
  />
);

const widgets = { myInput: MyCustomInput };

const uiSchema = { customField: { 'ui:widget': 'myInput' } };

<Form
  schema={{ type: 'object', properties: { customField: { type: 'string' } } }}
  uiSchema={uiSchema}
  widgets={widgets}
  validator={customizeValidator()}
/>;

amis ships with dozens of built-in components: date pickers, file uploaders, tree selectors, combo boxes, and even embedded charts. These are declared directly in the JSON without extra registration.

// amis: Rich built-in components
const schema = {
  type: 'form',
  body: [
    { type: 'input-date', name: 'dob', label: 'Date of Birth' },
    { type: 'file', name: 'avatar', label: 'Avatar' },
    {
      type: 'combo',
      name: 'tags',
      label: 'Tags',
      multiple: true,
      items: { type: 'input-text' }
    }
  ]
};

🔁 Data Flow and Submission Handling

react-jsonschema-form gives you full control over form state and submission. You handle onSubmit, onChange, and validation manually. It doesn’t make HTTP calls by itself.

// react-jsonschema-form: Manual submission
const handleSubmit = async ({ formData }) => {
  const res = await fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify(formData)
  });
  if (res.ok) alert('Success!');
};

<Form schema={schema} onSubmit={handleSubmit} />;

amis automates API interactions. You provide an api endpoint in the form config, and amis sends the data, handles loading states, errors, and success messages automatically.

// amis: Auto API handling
const schema = {
  type: 'form',
  api: '/api/submit', // POSTs formData, shows error/success
  body: [{ type: 'input-text', name: 'email' }]
};

🎨 Styling and Theming

react-jsonschema-form renders semantic HTML with minimal styling. You’re expected to bring your own CSS or integrate with a UI library (e.g., Material UI, Ant Design) via theme packages like @rjsf/material-ui.

// react-jsonschema-form with Material UI
import Form from '@rjsf/material-ui';
// Uses MUI components under the hood

amis includes its own CSS and design system. While theming is possible via CSS variables or custom builds, it’s less flexible if you already use a different component library. The look and feel are tightly coupled to amis’s internal implementation.

🧪 Validation Approach

react-jsonschema-form uses JSON Schema validation rules (e.g., required, minimum, pattern) and supports custom validators. Errors appear inline next to fields.

const schema = {
  type: 'object',
  properties: {
    email: { type: 'string', format: 'email' }
  },
  required: ['email']
};
// Built-in email format validation

amis supports both simple rules (required: true, minLength: 5) and custom validation functions, but these are defined per field in the component config, not via a shared schema.

// amis: Field-level validation
{
  type: 'input-text',
  name: 'username',
  required: true,
  minLength: 3,
  validations: {
    matchRegexp: '/^[a-z0-9_]+$/'
  }
}

🔄 Reusability and Composition

react-jsonschema-form encourages composition through schema reuse, $ref, and custom field templates. But complex layouts (e.g., multi-column forms) require custom FieldTemplate implementations.

amis supports layout containers (grid, hbox, tabs, cards) natively in JSON, making complex UIs easier to express without code.

// amis: Multi-column layout
{
  type: 'form',
  body: {
    type: 'grid',
    columns: [
      [{ type: 'input-text', name: 'first' }],
      [{ type: 'input-text', name: 'last' }]
    ]
  }
}

⚠️ Maintenance and Ecosystem

As of 2024, both libraries are actively maintained. react-jsonschema-form is backed by a broad community and aligns with open standards, making it interoperable with tooling like Swagger/OpenAPI. amis, developed by Baidu, is widely used in Chinese enterprise environments and offers extensive documentation in both English and Chinese, though its ecosystem is more self-contained.

🆚 When to Use Which?

💡 Final Recommendation

• If you’re building a public-facing form that must adhere to a published JSON Schema (e.g., for regulatory or interoperability reasons), or you want fine-grained control over every aspect of rendering and validation, go with react-jsonschema-form.

• If you’re building an internal dashboard or admin tool where speed of development matters more than strict standards compliance, and you need tables, modals, file uploads, and dynamic behaviors out of the box, amis will save you significant time.

Both solve real problems — just at different layers of abstraction.