DataForm with Text Editing ✨

Powerful form component with YAML editor and optional JSON Schema validation. Switch between form and text editing modes seamlessly.

Key Features

Dual Mode: Switch between form UI and YAML text editor
Real-time Sync: Changes in form automatically update YAML and vice versa
JSON Schema Validation: Optional schema validation for YAML content
Flexible Fields: Add custom fields in YAML that aren't in the form
Error Handling: Clear error messages for invalid YAML or schema violations

Quick Start

Basic Usage:

With JSON Schema Validation:

Enable JSON Schema Validation

Live Example

ℹ️ How to Test:

Fill out the form below with some data
Click the "YAML Editor" tab to see your data as YAML
Edit the YAML (try changing values or adding new fields)
Switch back to "Form" tab to see changes reflected
Click "Save" to submit (uses mock API endpoint)

This example uses a mock API endpoint (/api/mock/user) that returns 200 OK for updates and 201 Created for new entries. Schema validation is enabled - try violating the schema to see error messages.

JSON Schema

The form uses the following JSON Schema for validation:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 2,
      "maxLength": 50
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "number",
      "minimum": 18,
      "maximum": 120
    },
    "bio": {
      "type": "string",
      "maxLength": 500
    },
    "subscribe": {
      "type": "boolean"
    },
    "role": {
      "type": "string",
      "enum": [
        "user",
        "admin",
        "moderator"
      ]
    }
  },
  "required": [
    "name",
    "email",
    "age",
    "role"
  ],
  "additionalProperties": true
}

Mock API Endpoint

This demo uses a Next.js API route at /api/mock/user that simulates a real backend:

Method	Status	Description
GET	200 OK	Returns current user data
POST	201 Created	Creates new user (simulated)
PUT	200 OK	Updates existing user
DELETE	200 OK	Resets to default data

💡 The API stores data in memory, so it resets when the server restarts.

Advanced Usage

Adding Custom Fields in YAML

You can add fields that aren't defined in the form by switching to the YAML Editor:

Schema Validation Rules

Name must be 2-50 characters long
Email must be a valid email format
Age must be between 18 and 120
Bio can be up to 500 characters
Role must be one of: user, admin, moderator
Additional properties are allowed (additionalProperties: true)

Props Reference

Prop	Type	Default	Description
allowTextEditing	boolean	false	Enable dual mode with form and YAML editor tabs
formJSONSchema	object	undefined	Optional JSON Schema for validating YAML content
fields	FormField<T>	required	Form field definitions
apiUrl	string	undefined	API endpoint for fetching data
submitApiUrl	string	undefined	API endpoint for submitting (defaults to apiUrl)
responseProp	string	undefined	Property to extract from API response (e.g., "data" for response format like {success: true, data: {...}}). Defaults to "data" if not specified.
onSuccess	function	undefined	Callback function called on successful submission

Components