Form Builder UI (Drag & Config Based)

Produces optimized production build in dist/. Build verification confirms:

• 122 modules transformed
• Zero TypeScript errors
• Output: ~4.24 kB (gzipped: 1.78 kB)

Type Checking

npm run typecheck

Runs TypeScript compiler without emitting files.

Linting

npm run lint          # Check for issues
npm run lint:fix      # Auto-fix issues

Core Components

FormBuilder

Main container component that orchestrates the entire builder experience. Manages form state, step handling, and field operations.

BuilderCanvas

The drag-and-drop canvas where fields are displayed and reordered. Supports field selection, deletion, duplication, and drag-to-reorder functionality.

FieldConfigPanel

Properties panel with three tabs:

• Properties — Edit field label, name, placeholder, help text
• Validation — Configure required status, min/max length, patterns, custom messages
• Preview — Live preview of the field as it will appear in the form

FieldPalette

Palette of available field types. Drag any field type onto the canvas to add it.

FormPreview

Live preview of the form as it will render to end users. Updates in real-time as you modify fields.

JsonEditor

Export/import form configuration as JSON. Edit raw JSON directly or copy for external use.

Form Configuration Structure

Forms are defined via JSON with this structure:

{
  "title": "My Form",
  "sections": [
    {
      "name": "step_1",
      "label": "Step 1",
      "fields": [
        {
          "id": "field_1",
          "type": "text",
          "name": "first_name",
          "label": "First Name",
          "placeholder": "Enter your first name",
          "required": true,
          "validation": {
            "minLength": 2,
            "maxLength": 50
          }
        }
      ]
    }
  ]
}

License

Tetrees License

This React web app completed archive review with strong static results. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.8 and security 9.