Former - Dynamic Form Generator & Builder

A powerful, schema-driven form generator and visual form builder for React applications with Spring Boot backend compatibility.

Features

• Visual Form Builder - Drag-and-drop interface to build forms visually
• Schema-Driven Forms - Generate forms from JSON schemas
• Built-in Validation - Comprehensive validation with Zod
• TypeScript Support - Full type safety and IntelliSense
• Spring Boot Compatible - Seamless backend integration
• Customizable - Tailwind CSS styling with custom field support
• 14+ Field Types - Text, select, date, file upload, and more
• Conditional Fields - Show/hide fields based on values
• Import/Export - Save and load form schemas

Installation

npm install @wevioo/former

Quick Start

Form Generator (Render forms from schema)

import { FormGenerator } from '@wevioo/former'
import '@wevioo/former/styles.css'

const schema = {
  formId: 'user-form',
  title: 'User Information',
  fields: [
    {
      id: 'firstName',
      type: 'text',
      label: 'First Name',
      validation: { required: true }
    },
    {
      id: 'email',
      type: 'email',
      label: 'Email',
      validation: { required: true }
    }
  ]
}

function App() {
  const handleSubmit = (data) => {
    console.log(data)
  }

  return <FormGenerator schema={schema} onSubmit={handleSubmit} />
}

Form Builder (Visual form editor)

import { FormBuilder } from '@wevioo/former'
import '@wevioo/former/styles.css'

function App() {
  const handleSave = (schema) => {
    console.log('Form schema:', schema)
    // Save to database or use with FormGenerator
  }

  return (
    <div style={{ height: '100vh' }}>
      <FormBuilder onSave={handleSave} />
    </div>
  )
}

Form Builder Features

Drag & Drop Interface

The Form Builder provides an intuitive visual interface with three panels:

• Left Panel: Field palette with all available field types
• Center Panel: Canvas where you build your form
• Right Panel: Property editor to configure selected fields

Toolbar Actions

• Undo/Redo: Navigate through your changes
• Preview: See how your form will look
• JSON View: View and copy the schema JSON
• Import/Export: Save schemas as JSON files
• Save: Save your form schema

Building a Form

1. Drag field types from the left panel to the canvas
2. Click on a field to edit its properties in the right panel
3. Reorder fields by dragging them within the canvas
4. Configure validation rules, options, and appearance
5. Export the schema or save it to your backend

Using Builder with Initial Schema

import { FormBuilder } from '@wevioo/former'

const existingSchema = {
  formId: 'contact-form',
  title: 'Contact Us',
  fields: [
    // ... existing fields
  ]
}

function App() {
  return <FormBuilder initialSchema={existingSchema} onSave={handleSave} />
}

Field Types

Basic Fields

• text - Single-line text input
• textarea - Multi-line text input
• email - Email address input
• password - Password input (masked)
• tel - Phone number input
• url - URL input
• number - Numeric input

Choice Fields

• select - Dropdown selection
• radio - Radio button group
• checkbox - Checkbox or checkbox group

Date & Time Fields

• date - Date picker
• datetime - Date and time picker
• time - Time picker

File Upload

• file - File upload with validation

Validation Rules

Add comprehensive validation to any field:

{
  id: 'email',
  type: 'email',
  label: 'Email Address',
  validation: {
    required: true,
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: 'Please enter a valid email'
  }
}

{
  id: 'age',
  type: 'number',
  label: 'Age',
  validation: {
    required: true,
    min: 18,
    max: 100,
    message: 'Age must be between 18 and 100'
  }
}

{
  id: 'password',
  type: 'password',
  label: 'Password',
  validation: {
    required: true,
    minLength: 8,
    maxLength: 50
  }
}

Conditional Fields

Show or hide fields based on other field values:

{
  id: 'otherOption',
  type: 'text',
  label: 'Please specify',
  conditional: {
    field: 'choice',
    operator: 'equals',
    value: 'other'
  }
}

Supported operators:

• equals - Field equals specific value
• notEquals - Field does not equal value
• contains - Field contains value
• greaterThan - Numeric field greater than value
• lessThan - Numeric field less than value

Field Configuration Options

Common Properties (All Fields)

• id - Unique field identifier
• type - Field type
• label - Display label
• placeholder - Placeholder text
• defaultValue - Default value
• disabled - Disable the field
• readOnly - Make field read-only
• autoFocus - Auto-focus on mount
• helperText - Helper text below field
• className - Custom CSS class

Select, Radio, Checkbox

• options - Array of { label, value } options
• multiple - Allow multiple selections (select only)
• searchable - Enable search (select only)
• inline - Display inline (radio only)

Text Area

• rows - Number of rows
• maxLength - Maximum character count

Number

• min - Minimum value
• max - Maximum value
• step - Increment step

Date Fields

• minDate - Minimum date
• maxDate - Maximum date
• format - Date format string

File Upload

• accept - Accepted file types (e.g., .pdf,.doc)
• multiple - Allow multiple files
• maxSize - Maximum file size in bytes
• maxFiles - Maximum number of files

Form Configuration

const schema = {
  formId: 'my-form',
  title: 'Form Title',
  description: 'Optional description',
  layout: 'vertical', // 'vertical' | 'horizontal' | 'inline'
  fields: [/* ... */],
  submitButton: {
    label: 'Submit',
    loadingLabel: 'Submitting...',
    className: 'custom-class'
  },
  resetButton: {
    show: true,
    label: 'Reset'
  },
  className: 'custom-form-class'
}

Advanced Usage

With React Hook Form Integration

The FormGenerator is built on React Hook Form, giving you access to all its features:

import { FormGenerator, useFormStore } from '@wevioo/former'

function MyForm() {
  const formStore = useFormStore()

  const handleChange = (data) => {
    console.log('Form data changed:', data)
  }

  return (
    <FormGenerator
      schema={schema}
      onSubmit={handleSubmit}
      onChange={handleChange}
      initialValues={{ firstName: 'John' }}
    />
  )
}

Custom Fields

Extend with custom field components:

const customFields = {
  'my-custom-field': MyCustomComponent
}

<FormGenerator
  schema={schema}
  onSubmit={handleSubmit}
  customFields={customFields}
/>

Spring Boot Integration

The form data is automatically formatted for Spring Boot:

async function handleSubmit(data) {
  // Data structure:
  // {
  //   formData: { field1: value1, field2: value2, ... },
  //   metadata: { formId: 'my-form', submittedAt: '...', ... }
  // }

  const response = await fetch('/api/forms/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
}

File Upload with Multipart

import { toFormData } from '@wevioo/former'

async function handleSubmit(data) {
  const formData = toFormData(data)

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
}

API Reference

FormGenerator Props

type FormGeneratorProps = {
  schema: FormSchema
  onSubmit: (data: FormSubmitData) => void | Promise<void>
  onError?: (errors: FormError[]) => void
  initialValues?: Record<string, unknown>
  customFields?: Record<string, React.ComponentType>
  loading?: boolean
  className?: string
  onChange?: (data: Record<string, unknown>) => void
}

FormBuilder Props

type FormBuilderProps = {
  initialSchema?: FormSchema
  onSchemaChange?: (schema: FormSchema) => void
  onSave?: (schema: FormSchema) => void
  className?: string
}

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format

Examples

Check the examples/ directory for complete examples:

• basic-form.example.ts - Simple form schema
• advanced-form.example.ts - Complex form with conditional fields
• usage.tsx - FormGenerator usage examples
• builder-demo.tsx - FormBuilder demo application

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT