@codehogs/form-auto-builder

Schema-driven forms for React: JSON Schema (data + validation) + UI schema (presentation) + field registry (components), wired with React Hook Form and Ajv.

Install

npm install @codehogs/form-auto-builder react react-dom

react-hook-form, ajv, and ajv-formats are npm dependencies of this package (the library build keeps them external for your bundler). react and react-dom are peer dependencies.

Quick start

import { FormBuilder } from "@codehogs/form-auto-builder";

const schema = {
  type: "object",
  properties: {
    email: { type: "string", title: "Email", format: "email" },
    role: { type: "string", title: "Role", enum: ["admin", "editor", "viewer"] },
  },
  required: ["email", "role"],
};

export function Demo() {
  return (
    <FormBuilder
      schema={schema}
      uiSchema={{
        email: { placeholder: "[email protected]" },
        role: { component: "select" },
      }}
      onSubmit={(values) => console.log(values)}
    />
  );
}

Concepts

• Schema — JSON Schema object: properties, required, type, format, enum, etc.
• UI schema — Per-field keys (including dot paths like user.email): component, placeholder, visibleWhen, colSpan, section, options (static or async).
• Registry — Map of component id → React field. Defaults include text, email, number, select, checkbox, textarea, date, password, radio, switch.

Customization

• registry / createFieldRegistry({ text: MyText }) — swap any built-in field.
• renderFieldWrapper, renderSectionHeader, renderActions — layout slots.
• validator — optional { validateValues } to replace Ajv.
• layout — array of { title?, fields: string[] } to order sections and fields.

Utilities

buildDefaultValues, flattenSchemaFieldsWithPaths, inferComponentFromSchema, transformErrors, evaluateWhen, isFieldVisible, resolveConditionalFields, createValidatorAdapter, createAjvResolver, useFormBuilder.

License

MIT