@jonesstack/react-form-engine

A dynamic, schema-based form rendering engine for React applications. Design forms visually using the FormCarve builder, export the JSON schema, and render them with full validation support.

FormCarve Builder Interface

The FormCarve Builder provides an intuitive drag-and-drop interface for creating forms with real-time preview, validation rules, and styling options.

Features

Schema-driven forms - Define forms using JSON schemas
Built-in validation - Comprehensive validation system with custom messages
Customizable styling - Style your forms with custom CSS properties
Responsive design - Works on all screen sizes
TypeScript support - Full TypeScript definitions included
Multiple field types - Text, email, textarea, select, checkbox, radio, number, date, phone, URL
Lightweight - No heavy dependencies

Installation

npm install @jonesstack/react-form-engine
# or
yarn add @jonesstack/react-form-engine
# or
pnpm add @jonesstack/react-form-engine

Quick Start

Step 1: Design Your Form

Use the FormCarve Builder to visually design your form:

Drag and drop form fields
Configure validation rules
Customize styling
Preview your form in real-time

Step 2: Export the JSON Schema

Click "Export JSON" in the builder to download your form schema.

Step 3: Use in Your React App

import { FormRenderer } from '@jonesstack/react-form-engine';

// Paste your exported JSON schema here
const formSchema = {
  "formName": "User Registration",
  "formFields": [
    {
      "id": "email",
      "type": "email",
      "label": "Email Address",
      "placeholder": "Enter your email",
      "required": true,
      "validation": {
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
        "customMessage": "Please enter a valid email address"
      }
    },
    {
      "id": "password",
      "type": "text",
      "label": "Password",
      "placeholder": "Enter your password",
      "required": true,
      "validation": {
        "minLength": 8,
        "maxLength": 50,
        "pattern": "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$",
        "customMessage": "Password must be 8-50 characters with uppercase, lowercase, and number"
      }
    },
    {
      "id": "age",
      "type": "number",
      "label": "Age",
      "required": true,
      "validation": {
        "min": 18,
        "max": 100,
        "customMessage": "Age must be between 18 and 100"
      }
    },
    {
      "id": "submit",
      "type": "submit-button",
      "label": "Register",
      "required": false
    }
  ]
};

function MyForm() {
  const handleSubmit = (data: Record<string, any>) => {
    console.log('Form data:', data);
    // Handle form submission
  };

  return <FormRenderer schema={formSchema} onSubmit={handleSubmit} />;
}

Workflow

Design: Use the FormCarve Builder to create your form visually
Export: Download the JSON schema from the builder
Integrate: Use the FormRenderer component in your React app
Deploy: Your form is ready with full validation and styling

API Reference

FormField Interface

The exported JSON schema follows this structure:

interface FormField {
  id: string;
  type: string; // 'text', 'email', 'textarea', 'select', 'checkbox', 'radio', 'submit-button', 'number', 'date', 'phone', 'url'
  label: string;
  placeholder?: string;
  required: boolean;
  options?: string[]; // For 'select', 'radio' types
  validation?: {
    minLength?: number;
    maxLength?: number;
    min?: number; // For number fields
    max?: number; // For number fields
    pattern?: string; // Regex pattern
    customMessage?: string; // Custom error message
  };
  styling?: {
    borderRadius?: number;
    backgroundColor?: string;
    borderColor?: string;
    textColor?: string;
    fontSize?: number;
    padding?: number;
  };
}

FormRenderer Props

interface FormRendererProps {
  schema: {
    formName: string;
    formFields: FormField[];
  };
  onSubmit: (data: Record<string, any>) => void;
  className?: string; // Optional CSS class for the form container
}

Field Types

Text Inputs

text - Single line text input
email - Email input with validation
number - Numeric input
phone - Phone number input
url - URL input
date - Date picker

Multi-line

textarea - Multi-line text input

Selection

select - Dropdown selection
checkbox - Single checkbox
radio - Radio button group

Action

submit-button - Form submission button

Validation

The form engine supports comprehensive validation:

Required Fields

{
  id: "name",
  type: "text",
  label: "Name",
  required: true
}

Length Validation

{
  id: "description",
  type: "textarea",
  label: "Description",
  validation: {
    minLength: 10,
    maxLength: 500
  }
}

Numeric Range

{
  id: "age",
  type: "number",
  label: "Age",
  validation: {
    min: 18,
    max: 100
  }
}

Pattern Validation

{
  id: "email",
  type: "email",
  label: "Email",
  validation: {
    pattern: "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
    customMessage: "Please enter a valid email address"
  }
}

Styling

Customize the appearance of your forms:

{
  id: "custom-field",
  type: "text",
  label: "Custom Styled Field",
  styling: {
    borderRadius: 8,
    backgroundColor: "#f8f9fa",
    borderColor: "#007bff",
    textColor: "#212529",
    fontSize: 16,
    padding: 12
  }
}

Examples

Contact Form (Exported from Builder)

{
  "formName": "Contact Us",
  "formFields": [
    {
      "id": "name",
      "type": "text",
      "label": "Full Name",
      "required": true,
      "validation": {
        "minLength": 2,
        "maxLength": 50
      }
    },
    {
      "id": "email",
      "type": "email",
      "label": "Email",
      "required": true,
      "validation": {
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$"
      }
    },
    {
      "id": "message",
      "type": "textarea",
      "label": "Message",
      "required": true,
      "validation": {
        "minLength": 10,
        "maxLength": 1000
      }
    },
    {
      "id": "submit",
      "type": "submit-button",
      "label": "Send Message"
    }
  ]
}

Survey Form (Exported from Builder)

{
  "formName": "Customer Survey",
  "formFields": [
    {
      "id": "satisfaction",
      "type": "radio",
      "label": "How satisfied are you?",
      "required": true,
      "options": ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied", "Very Dissatisfied"]
    },
    {
      "id": "features",
      "type": "checkbox",
      "label": "Which features do you use?",
      "options": ["Feature A", "Feature B", "Feature C", "Feature D"]
    },
    {
      "id": "feedback",
      "type": "textarea",
      "label": "Additional Feedback",
      "validation": {
        "maxLength": 500
      }
    },
    {
      "id": "submit",
      "type": "submit-button",
      "label": "Submit Survey"
    }
  ]
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Formcarve

Install / Use

README