{"id":15095801,"url":"https://github.com/m6io/react-formgen","last_synced_at":"2025-08-21T05:31:57.826Z","repository":{"id":245735751,"uuid":"819088913","full_name":"m6io/react-formgen","owner":"m6io","description":"Headless, unopinionated, and flexible form generation.","archived":false,"fork":false,"pushed_at":"2025-06-29T17:18:21.000Z","size":603,"stargazers_count":47,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-29T18:26:05.361Z","etag":null,"topics":["form-generator","forms","json-schema","react","typescript","yup","zod","zustand"],"latest_commit_sha":null,"homepage":"https://react-formgen.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m6io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-23T18:39:44.000Z","updated_at":"2025-06-29T10:16:03.000Z","dependencies_parsed_at":"2024-10-01T05:20:39.861Z","dependency_job_id":"b942d926-1030-4de8-af21-b36e2c0c5f9a","html_url":"https://github.com/m6io/react-formgen","commit_stats":{"total_commits":68,"total_committers":2,"mean_commits":34.0,"dds":"0.014705882352941124","last_synced_commit":"2f284122c7c70ec5e84f454900c7df7cb43fd50e"},"previous_names":["m6io/schema-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/m6io/react-formgen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m6io%2Freact-formgen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m6io%2Freact-formgen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m6io%2Freact-formgen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m6io%2Freact-formgen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m6io","download_url":"https://codeload.github.com/m6io/react-formgen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m6io%2Freact-formgen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271430755,"owners_count":24758365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-generator","forms","json-schema","react","typescript","yup","zod","zustand"],"created_at":"2024-09-25T15:42:08.312Z","updated_at":"2025-08-21T05:31:57.812Z","avatar_url":"https://github.com/m6io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React FormGen\n\n## A headless, type-safe, customizable, and super simple React form generator. Turn your schemas into forms with ease.\n\n### Quick Links\n\n`@react-formgen/core` - Core architecture for building schema-based form generators in React ([npm](https://www.npmjs.com/package/@react-formgen/core) • [source](https://github.com/m6io/react-formgen/blob/main/packages/core/README.md))\n\n`@react-formgen/json-schema` - JSON Schema implementation for react-formgen ([npm](https://www.npmjs.com/package/@react-formgen/json-schema) • [source](https://github.com/m6io/react-formgen/tree/main/packages/json-schema/README.md))\n\n`@react-formgen/yup` - Yup schema implementation for react-formgen ([npm](https://www.npmjs.com/package/@react-formgen/yup) • [source](https://github.com/m6io/react-formgen/tree/main/packages/yup/README.md))\n\n`@react-formgen/zod` - Zod schema implementation for react-formgen ([npm](https://www.npmjs.com/package/@react-formgen/zod) • [source](https://github.com/m6io/react-formgen/tree/main/packages/zod/README.md))\n\n### Motivation\n\nForms are not fun to write. They are repetitive, error-prone, and time-consuming. This library aims to make form generation as simple as possible.\n\nThe packages in this repository are designed to be un-opinionated, flexible, modular, and highly customizable.\n\nThere are two types of packages in this repository:\n\n1. **Core package**: This package (`@react-formgen/core`) provides the core functionality for the schema-based packages. This package is not really meant to be used directly, but rather as a dependency for the schema-based packages. It serves as a \"factory\" for creating form providers and hooks that are schema-specific. Think of it as a \"scaffolding\" for the schema-based form generators.\n2. **Schema-based packages**: These packages take a schema (e.g., JSON Schema, Yup schema, Zod schema, etc.) and generate forms based on that schema. The schema-based packages are meant to be used directly in your projects.\n\n### How it Works\n\nTake, for example, the JSON Schema package (`@react-formgen/json-schema`). This package takes a JSON Schema and generates a form based on that schema. The package provides a set of hooks and a provider that you can use in your components to generate forms and/or read-only data views.\n\nHere's a visual representation of the core and schema-based package interaction:\n\n```mermaid\nflowchart LR\n subgraph JSONSchemaPackage[\"@react-formgen/json-schema\"]\n    direction LR\n        JSONSchemaProvider[\"FormProvider\"]\n        JSONSchemaContext[\"useFormContext\"]\n        JSONSchemaDataAtPath[\"useFormDataAtPath\"]\n        JSONSchemaErrorsAtPath[\"useErrorsAtPath\"]\n        JSONSchemaArrayFieldset[\"useArrayTemplate\"]\n        JSONSchemaInitialData[\"generateInitialData (JSON Schema specific)\"]\n        JSONSchemaErrorsPath[\"getErrorsAtPath (JSON Schema specific)\"]\n        CoreProviderHooks[\"@react-formgen/core\u003cbr\u003ecreateFormProviderAndHooks\"]\n        useRenderTemplate[\"useRenderTemplate\"]\n  end\n subgraph JSONSchemaFieldTemplates[\"Customized Templates\"]\n        ArrayFieldset[\"CustomArrayTemplate\"]\n        ObjectFieldset[\"CustomObjectTemplate\"]\n        BooleanField[\"CustomBooleanTemplate\"]\n        NumberField[\"CustomNumberTemplate\"]\n        StringField[\"CustomStringTemplate\"]\n  end\n subgraph JSONSchemaConsumers[\"App\"]\n    direction LR\n        JSONSchemaFieldTemplates\n        FormTemplate[\"CustomFormTemplate\"]\n        Form[\"Form\"]\n  end\n    FormTemplate --- Form\n    JSONSchemaFieldTemplates --- Form\n    JSONSchemaPackage --- JSONSchemaConsumers\n    JSONSchemaProvider --- Form\n    useRenderTemplate --- ObjectFieldset \u0026 ArrayFieldset \u0026 FormTemplate\n    JSONSchemaArrayFieldset --- ArrayFieldset\n    JSONSchemaContext --- FormTemplate\n    JSONSchemaDataAtPath --- StringField \u0026 BooleanField \u0026 NumberField\n    JSONSchemaInitialData --- CoreProviderHooks\n    JSONSchemaErrorsPath --- CoreProviderHooks\n    CoreProviderHooks --- JSONSchemaContext \u0026 JSONSchemaProvider \u0026 JSONSchemaArrayFieldset \u0026 JSONSchemaErrorsAtPath \u0026 JSONSchemaDataAtPath\n    JSONSchemaErrorsAtPath --- ObjectFieldset \u0026 BooleanField \u0026 NumberField \u0026 StringField\n\n\n\n\n```\n\nYou can consume the JSON Schema package directly in your project, and customize the templates to suit your needs.\n\n### Customization\n\nThe schema-based packages are designed to be highly customizable. You can extend them by:\n\n- Customizing the **Form Root Template** (e.g., for custom form submission logic, root-level layout and beavior customization, etc.).\n- Customizing the **Property Templates** (e.g., how string, number, boolean, array, and object fields are rendered).\n- Overriding the **Template Renderer** (e.g., for customizing how schemas are parsed and rendered per subschema).\n\n### Available Packages\n\n- **@react-formgen/core**: Core package that provides the foundational form management logic.\n- **@react-formgen/json-schema**: JSON Schema-based form generator.\n- **@react-formgen/yup-schema** Yup-based form generator.\n- **@react-formgen/zod-schema** Zod-based form generator.\n\n### Key Features\n\n- **Headless**: No imposed UI or styling. You are free to define how the forms are rendered.\n- **Type-safe**: Strongly typed APIs and hooks that ensure schema and form data compatibility.\n- **Customizable**: Define your own templates for form fields and/or data views.\n- **Unopinionated**: The library does not enforce any specific schema validation library or approach, making it highly flexible.\n- **Zustand for State Management**: Leverages Zustand, a small, fast, and scalable state-management library.\n\n### Example\n\nHere is a quick example of how to use the JSON Schema package to generate a form:\n\n```tsx\nimport React from \"react\";\nimport { Form } from \"@react-formgen/json-schema\";\nimport mySchema from \"./mySchema.json\";\n\nconst MyFormComponent = () =\u003e {\n  const handleSubmit = (data) =\u003e {\n    console.log(\"Form submitted with data:\", data);\n  };\n\n  const handleErrors = (errors) =\u003e {\n    console.error(\"Form submission errors:\", errors);\n  };\n\n  return (\n    \u003cForm\n      schema={mySchema}\n      onSubmit={handleSubmit}\n      onError={handleErrors}\n      initialData={{}} // Optional initial form data\n    /\u003e\n  );\n};\n\nexport default MyFormComponent;\n```\n\n### Getting Started\n\n1. Install the schema package you want to use:\n\n```bash\nnpm install @react-formgen/json-schema\n```\n\nor\n\n```bash\nyarn add @react-formgen/json-schema\n```\n\nor\n\n```bash\npnpm add @react-formgen/json-schema\n```\n\n2. Provide a JSON Schema to the `Form` component. You can do this by importing a JSON file, defining the schema directly in your component, fetching it from an API, etc.\n\n```tsx\nimport mySchema from \"./mySchema.json\";\n```\n\n3. Use the `Form` component to generate a form based on the schema:\n\n```tsx\n\u003cForm schema={mySchema} onSubmit={handleSubmit} onError={handleErrors} /\u003e\n```\n\nFor a read-only view, just pass the `readonly` prop to the `Form` component:\n\n```tsx\n\u003cForm schema={mySchema} readonly /\u003e\n```\n\nThat's it! You now have a form generated based on your JSON Schema.\n\nObviously, this is a very basic example. You should customize the templates and to suit your needs.\n\n## Contributing\n\nContributions are welcome. Please open an issue or submit a pull request on the GitHub repository.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm6io%2Freact-formgen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm6io%2Freact-formgen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm6io%2Freact-formgen/lists"}