react-yaml-config-form

react-yaml-config-form is a lightweight React library that dynamically generates configuration forms from YAML files or URLs. It’s built for developers who need customizable forms for settings, dashboards, or admin panels — without writing manual form logic.

🚀 Features

• Generate forms directly from YAML files or remote YAML sources
• Supports a wide range of field types: text, number, password, email, select, boolean, textarea, color, range, file, date, datetime, time, url, and more
• Built-in validation for required fields, min/max values, regex patterns, and matching fields
• Fully typed with TypeScript
• Easy to customize styling or field rendering
• Supports live validation, onChange and onSubmit handlers
• Works perfectly with React 18+ and Vite

🧩 Installation

npm install react-yaml-config-form

or with yarn:

yarn add react-yaml-config-form

⚙️ Quick Start

Create a simple YAML configuration file (e.g. config.yml):

id: app_config
title: Application Settings
description: Example form generated from YAML
submitLabel: Save
fields:
  - name: username
    label: Username
    type: text
    required: true
    minLength: 3
  - name: password
    label: Password
    type: password
    required: true
  - name: confirm
    label: Confirm Password
    type: password
    matchField: password
    message: Passwords must match
  - name: notifications
    label: Enable Notifications
    type: boolean
    default: true
  - name: theme
    label: Theme Color
    type: color
    default: "#3366ff"

Then use it in your React app:

import { ConfigFormFromSource } from "react-yaml-config-form"

export default function App() {
  return (
    <div style={{ maxWidth: 600, margin: "auto", padding: 20 }}>
      <ConfigFormFromSource
        src="/config.yml"
        onSubmit={(values, isValid) => {
          if (isValid) console.log("Submitted:", values)
        }}
        styles={{
          form: "p-4 border rounded bg-gray-50 space-y-3",
          label: "font-semibold",
          submit: "bg-blue-600 text-white px-3 py-2 rounded"
        }}
      />
    </div>
  )
}

🧠 API Overview

ConfigForm

Renders a form directly from a YAML schema object.

import { ConfigForm } from "react-yaml-config-form"

<ConfigForm
  schema={myYamlSchema}
  onChange={(values, isValid) => console.log(values, isValid)}
  onSubmit={(values) => console.log("Submitted:", values)}
/>

ConfigFormFromYaml

Parses a YAML string directly.

import { ConfigFormFromYaml } from "react-yaml-config-form"

<ConfigFormFromYaml
yaml={myYamlString}
onSubmit={(values) => console.log(values)}
/>

ConfigFormFromSource

Fetches YAML from a file or URL.

import { ConfigFormFromSource } from "react-yaml-config-form"

<ConfigFormFromSource
src="/settings.yml"
onSubmit={(values) => console.log(values)}
/>

🧩 Field Types

| Type | Description | | ---------------------------- | --------------------- | | text | Standard text input | | number | Numeric field | | boolean | Checkbox | | select | Dropdown selector | | textarea | Multi-line text | | password | Password input | | email | Email validation | | color | Color picker | | date / datetime / time | Date and time pickers | | file | File upload input | | range | Slider | | url | URL input | | hidden | Hidden field |

✅ Validation Rules

Each field supports the following validation options:

| Option | Type | Description | | ------------------------- | --------- | ------------------------------- | | required | boolean | Marks the field as mandatory | | pattern | string | Regex pattern for validation | | minLength / maxLength | number | Enforces text length | | min / max | number | Enforces numeric range | | matchField | string | Requires matching another field | | message | string | Custom error message |

🎨 Styling

You can easily override styles using the styles prop.

Example:

styles={{
  form: "my-form-class",
  label: "text-sm text-gray-800",
  input: "border rounded px-2 py-1",
  error: "text-red-600 text-xs",
  submit: "bg-indigo-600 text-white px-3 py-2 rounded"
}}

Each class name maps to a specific element inside the form.

🧪 Development Setup

Clone the repo and start the example:

git clone https://github.com/yourusername/react-yaml-config-form
cd react-yaml-config-form
npm install
npm run dev

Then open http://localhost:5173 to preview the example app.

🧱 Project Structure

react-yaml-config-form/
├── src/
│   ├── ConfigForm.tsx
│   ├── ConfigFormFromYaml.tsx
│   ├── ConfigFormFromSource.tsx
│   ├── parseYamlSchema.ts
│   ├── types.ts
│   └── index.ts
├── example/
│   ├── App.tsx
│   ├── config.yml
│   ├── main.tsx
│   └── vite.config.ts
├── package.json
├── tsconfig.json
└── README.md

📦 Build for Production

npm run build

Outputs compiled files to dist/ in both ESM and CJS formats with .d.ts types.

🪪 License

This project is licensed under the MIT License.

👨‍💻 Author

Marc Mayol AI Engineer & Professor

• x (twitter): @srmarcmayol
• website: marcmayol.com
• LinkedIn: https://www.linkedin.com/in/marc-mayol/