# Form Builder

JSON Schema → Dynamic Forms → Structured Output

A reusable, zero-dependency form generation library that converts JSON schemas into dynamic, interactive forms with real-time validation and file upload support.

## Live Demo

Try it now: **[https://picazru.github.io/form-builder/dist/index.html](https://picazru.github.io/form-builder/dist/index.html)**

## Quick Start

### CDN Integration

```html
<!-- Embed via iframe -->
<iframe
  src="https://picazru.github.io/form-builder/dist/index.html"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>

<!-- With custom schema -->
<iframe
  src="https://picazru.github.io/form-builder/dist/index.html?schema=BASE64_SCHEMA"
  width="100%"
  height="600px"
></iframe>
```

### NPM Installation

```bash
npm install @dmitryvim/form-builder
```

## Core Features

- **Schema-driven forms**: JSON Schema v0.3 → Interactive forms
- **File uploads**: Built-in support with configurable handlers
- **Real-time validation**: Client-side validation with error display
- **Framework agnostic**: Works with any web stack
- **Zero dependencies**: Self-contained HTML/CSS/JavaScript
- **Read-only mode**: Display form data without editing
- **Draft saving**: Save incomplete forms without validation

## Basic Example

```json
{
  "version": "0.3",
  "title": "Contact Form",
  "elements": [
    {
      "type": "text",
      "key": "name",
      "label": "Full Name",
      "required": true
    },
    {
      "type": "files",
      "key": "attachments",
      "label": "Attachments",
      "maxCount": 3,
      "accept": {
        "extensions": ["pdf", "jpg", "png"]
      }
    }
  ]
}
```

## Integration Options

- **CDN**: Direct iframe embedding
- **NPM**: Import as module
- **Direct**: Self-hosted deployment

See [Integration Guide](docs/integration.md) for complete setup instructions.

## Documentation

- [Integration Guide](docs/integration.md) - How to use and integrate
- [Schema Reference](docs/schema.md) - Complete schema documentation
- [Requirements](docs/requirements.md) - Product and business requirements
- [Development Guide](development.md) - Development and testing

## License

MIT - see [LICENSE](LICENSE) file.
