https://github.com/raideno/auto-form
Form component that can be automatically generated from a zod schema.
https://github.com/raideno/auto-form
Last synced: 5 months ago
JSON representation
Form component that can be automatically generated from a zod schema.
- Host: GitHub
- URL: https://github.com/raideno/auto-form
- Owner: raideno
- License: mit
- Created: 2025-08-20T21:19:03.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-11-20T18:28:33.000Z (7 months ago)
- Last Synced: 2025-12-25T11:02:54.763Z (6 months ago)
- Language: TypeScript
- Homepage: https://raideno.github.io/auto-form/
- Size: 2.31 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Auto Form
A React component library that automatically generates forms from Zod schemas with built-in validation and customizable field types.
## Requirements
- Zod v4
- React 18+
## Features
- Automatic form generation from Zod schemas
- Built-in validation using React Hook Form
- Support for various field types: strings, numbers, files, arrays, objects
- Real-time schema editing and form preview
- TypeScript support
## Installation
```bash
npm install @raideno/auto-form
```
## Usage
### Basic Example
```tsx
import { z } from "zod/v4";
import { AutoForm } from "@raideno/auto-form/ui";
import { MetadataRegistry } from "@raideno/auto-form/registry";
const Schema = z.object({
name: z.string().min(2).max(50),
email: z.string().email(),
age: z.number().min(18).max(120),
description: z.string().register(MetadataRegistry, {
type: "textarea",
resize: true
}),
});
function MyForm() {
return (
{ console.log("[submit]", data) }}
>
Cancel
Submit
);
}
```
### Supported Field Types
- **String**: Text inputs with validation
- **Number**: Numeric inputs with min/max constraints
- **Boolean**: Checkbox inputs
- **File**: File upload with mime type and size validation
- **Array**: Dynamic list inputs for strings and files
- **URL**: URL validation
## Development
```bash
npm install
npm run dev
npm run build
npm run preview
```