@alphinex/form-builder

Embeddable, no-code editor over @alphinex/forms' buildFormFromSchema() — add, reorder, and configure fields, live-preview the generated form, export the FieldDefinition[] JSON schema.

Usage

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

function FormSettingsPage() {
  return (
    <FormBuilder
      onExport={(value) => {
        void saveFormSchema(JSON.parse(value));
      }}
    />
  );
}

useFormBuilder is the headless layer underneath, if you want a custom editing UI.

Field order is a real, meaningful axis here

Unlike Sprint 21's ThemeBuilder (no order — tokens aren't sequenced) or Sprint 22's LayoutBuilder (<Shell>'s slot geometry is fixed), a form's field order is genuinely part of its UX. useFormBuilder's moveField() reorders the underlying array; the live preview reflects the new order immediately.

Validation in the live preview

The preview derives a Zod schema from the current field list (deriveZodSchema) so useAppForm's required schema argument has something to validate against even though the field list is built at runtime, not authored as a static schema. This is bounded, fully-tested per-field-type logic — no new dependency, since zod is already @alphinex/forms' own peer.

Known limitations

• select fields get two placeholder options (Option 1/Option 2) when added — there is no inline options editor yet; edit the exported JSON's options array directly for now.
• No field-type change after creation — remove and re-add with the new type instead.