# hasanharman/form-builder

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/hasanharman-form-builder).**

2,660 stars · 265 forks · TypeScript · mit

## Links

- GitHub: https://github.com/hasanharman/form-builder
- Homepage: https://www.shadcn-form.com/
- awesome-repositories: https://awesome-repositories.com/repository/hasanharman-form-builder.md

## Topics

`nextjs` `react` `react-hook-form` `shadcn` `zod`

## Description

This project is a JSON schema form builder and dynamic form generator. It functions as an API-driven data collector that creates customizable input fields and layouts based on JSON schema definitions.

The system serves as a schema-based input validator, enforcing data integrity through predefined schemas and providing real-time feedback to users. It allows for the creation of web forms where input types, labels, and placeholders can be modified without changing the source code.

The tool manages the end-to-end workflow of interactive user input, covering dynamic form generation, client-side data validation, and the collection of custom API data for transmission to remote endpoints.

## Tags

### User Interface & Experience

- [Schema-Based Generators](https://awesome-repositories.com/f/user-interface-experience/forms/dynamic-form-generation/schema-based-generators.md) — Automates form rendering and validation logic based on JSON schema definitions.
- [Form Builders](https://awesome-repositories.com/f/user-interface-experience/form-builders.md) — Provides a framework for creating and managing complex input forms using a visual builder. ([source](https://cdn.jsdelivr.net/gh/hasanharman/form-builder@main/README.md))
- [Form Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-input-validation.md) — Implements logic for verifying the correctness of user input during entry and upon submission. ([source](https://cdn.jsdelivr.net/gh/hasanharman/form-builder@main/README.md))
- [Dynamic Form Generation](https://awesome-repositories.com/f/user-interface-experience/forms/dynamic-form-generation.md) — Renders customizable web forms dynamically based on structured data models.
- [Input Validation Constraints](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints.md) — Provides mechanisms to restrict and validate user input based on predefined rules and boundaries.
- [Input States](https://awesome-repositories.com/f/user-interface-experience/input-states.md) — Manages the interactive state of form fields to trigger re-renders upon value changes.
- [Real-Time Input Feedback](https://awesome-repositories.com/f/user-interface-experience/real-time-input-feedback.md) — Provides a feedback loop with immediate visual cues and error messages during user interaction.

### Part of an Awesome List

- [JSON Forms](https://awesome-repositories.com/f/awesome-lists/devtools/json-forms.md) — Generates dynamic web forms directly from JSON Schema definitions with integrated validation.

### Software Engineering & Architecture

- [Form](https://awesome-repositories.com/f/software-engineering-architecture/input-validation-schemas/form.md) — Enforces data integrity on form submissions using predefined schemas and real-time feedback.
- [Component Mappings](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings.md) — Implements a system that maps JSON schema types to specific React UI component implementations.

### Web Development

- [Client-Side Input Validators](https://awesome-repositories.com/f/web-development/client-side-input-validators.md) — Verifies data integrity on the frontend using schemas before the form is submitted.
- [Form Data Submission](https://awesome-repositories.com/f/web-development/form-data-support/form-data-submission.md) — Ships utilities for sending collected form data to remote endpoints via HTTP POST requests. ([source](https://cdn.jsdelivr.net/gh/hasanharman/form-builder@main/README.md))
- [API Data Collection Interfaces](https://awesome-repositories.com/f/web-development/api-data-collection-interfaces.md) — Collects user input through a web interface and transmits it to a remote endpoint for processing.
- [API-Driven Data Collectors](https://awesome-repositories.com/f/web-development/api-driven-data-collectors.md) — Gathers structured user input and transmits results to remote endpoints via API calls.

### Networking & Communication

- [JSON Serialization](https://awesome-repositories.com/f/networking-communication/json-serialization.md) — Includes utilities for converting form state objects into JSON for transmission to remote endpoints.