JSON Form Builder (npm package starter)

This package provides a dynamic form renderer where you pass a fields JSON config. It uses native HTML elements (including <select>) and an internal toast UI.

Install

npm i json-form-builder

Usage

import { FormBuilder, FIELD_NAMES } from "json-form-builder";

const fields = [
  {
    fieldName: "name",
    label: "Name",
    filedType: "INPUT",
    placeholder: "Enter your name",
    required: true
  },
  {
    fieldName: "plan",
    label: "Plan",
    filedType: "SELECT",
    options: [
      { value: "basic", label: "Basic" },
      { value: "pro", label: "Pro" }
    ],
    required: true
  },
  {
    fieldName: FIELD_NAMES.SUBMIT_BUTTON,
    filedType: "BUTTON",
    text: "Submit"
  }
];

export function MyForm() {
  return (
    <FormBuilder
      fields={fields}
      submitConfig={{
        url: "/api/submit",
        method: "POST",
        bodyType: "json"
      }}
      data={{}}
    />
  );
}

Submit behavior

• The BUTTON field triggers validation and then submits.
• Provide a submitConfig={{ url: "..." }} to FormBuilder.
• submitConfig.url can also be a function: (data) => string (useful for /api/resource/${data.id}).
• You can override per-button submission by setting:
  • field.action.submitConfig on the BUTTON field.

Field config basics

• filedType is intentionally kept to match your reference typo.
• Supported filedType values: INPUT, TEXT_AREA, SELECT, TOGGLE, COLOR, FILE, DATE, TIME, BUTTON.
• required: true enables required validation (simple empty check).
• validation (optional) lets you return a custom error message.

Files

If you use FILE fields, use bodyType: "formData" (recommended).