{"id":19226867,"url":"https://github.com/thisisjuke/zod-to-form","last_synced_at":"2026-06-24T09:31:04.931Z","repository":{"id":191948234,"uuid":"685725350","full_name":"Thisisjuke/zod-to-form","owner":"Thisisjuke","description":"Generate Display Table and Forms for your data based on Zod 📖","archived":false,"fork":false,"pushed_at":"2023-09-02T16:44:08.000Z","size":1116,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-08T16:02:25.802Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zod-to-form.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/Thisisjuke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","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}},"created_at":"2023-08-31T21:40:53.000Z","updated_at":"2024-04-15T03:25:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"23fee084-90e0-4b1f-807a-be693ef049a5","html_url":"https://github.com/Thisisjuke/zod-to-form","commit_stats":null,"previous_names":["thisisjuke/zod-to-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Thisisjuke/zod-to-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thisisjuke%2Fzod-to-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thisisjuke%2Fzod-to-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thisisjuke%2Fzod-to-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thisisjuke%2Fzod-to-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Thisisjuke","download_url":"https://codeload.github.com/Thisisjuke/zod-to-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thisisjuke%2Fzod-to-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34724746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"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":[],"created_at":"2024-11-09T15:20:41.017Z","updated_at":"2026-06-24T09:31:04.926Z","avatar_url":"https://github.com/Thisisjuke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zod-to-Admin\n\nZod-to-Admin is a project that showcases the generation of forms and data tables directly from Zod schemas. Strongly Based on Shadcn-ui, Zod and react-hook-form. \n\nRight now it's still a proof-of-concept (POC).\n\n## Project Stack\n\n- [React](https://react.dev): The project is built using the React library, which provides a powerful framework for creating user interfaces.\n\n- [Vitejs](https://vitejs.dev): Development tool that comes with a dev server and is used for modern web applications. Was preferred to Create React App. \n\n- [Tailwind CSS](https://tailwindcss.com): Tailwind CSS is used for components styling. It's a utility-first CSS framework that allows you to rapidly build custom designs.\n\n- [Radix UI](https://www.radix-ui.com): Radix UI components used to enhance the user interface and interaction, with a strong focus on accessibility.\n\n- [Shadcn UI](https://ui.shadcn.com): Collection of re-usable components that you can copy and paste into your apps. Use Radix-ui and TailwindCSS.\n\n- [react-hook-form](https://www.react-hook-form.com): This library is used for handling forms in React. It simplifies form validation, management, and submission.\n\n- [Zod](https://zod.dev): Zod is a TypeScript-first schema validation library. In this project, Zod schemas are used to define the structure and validation rules for form fields.\n\n## Motivation\n\n### Goal\n\nThe main goal of this project is to demonstrate how Zod schemas can be used to automatically generate forms and data tables in a React application. \n\nBy defining the schema once, developers can easily create forms with appropriate validation and data presentation components without repetitive coding.\n\n### Milestone of my actual work \u0026 mindset.\n\nStarting a few months ago, I had to hardly focus on Form builders and Form mappers, alongside some daily utilization of Shadcn-ui.\nYou can find some relative work in my [Github Gists](https://gist.github.com/Thisisjuke).\n\nThis repository is like a milestone using all the tool that I used this last months, so feel free to start discussion or contribute if you have things to say!\n\n## Getting Started\n\nTo run the project locally, follow these steps:\n\nClone the repository:\n```bash\ngit clone git@github.com:Thisisjuke/zod-to-form.git\ncd zod-to-admin\n```\n\nInstall dependencies:\n```bash\nnpm install\n```\n\nStart the development server:\n```bash\nnpm run dev\n```\n\nOpen your browser and navigate to http://localhost:5173 to see the application in action.\n\n## Usage\n\n### TLDR: what does it do ?\n\nThe project provides a convenient way to generate forms and data tables from Zod schemas. You can define your schema following the format demonstrated in the provided code snippet. The userInformationSchema function creates a Zod schema for user information, and the userInformationSchemaFormatter function handles the API call when the user finishes editing.\n\nFor each field in the schema, if there is no \"customType\" specified, the project will automatically render a row in read mode and a corresponding form field in edit mode.\n\n### Defining Schemas and Handling Form Submissions\n\nIn the Zod to Admin project, creating dynamic forms and data tables is made intuitive through the use of Zod schemas and custom formatting functions. Let's break down the process of defining schemas, handling form submissions, and integrating these components into your application.\n\n### Schema Definition\n\nA typical schema is structured as an object where each key represents a data field. The value associated with each key is a Zod schema that describes the validation and structure of that field. For instance, consider the userInformationSchema function:\n\n```typescript jsx\nexport function userInformationSchema({ genders }: { [key: string]: SelectableFields }) {\nconst GENDERS_ENUM = toTypedZodEnum(genders);\n\n    return ({\n        'contact.firstName': z.string().optional().describe(JSON.stringify({\n            label: 'Prénom',\n        })),\n        // ... Other fields ...\n        'residenceAddress': z.object({\n            address1: z.string(),\n            // ... Other fields ...\n        }).optional().describe(JSON.stringify({\n            label: 'Adresse de résidence',\n            customType: 'address',\n        })),\n    });\n}\n``` \nHere, userInformationSchema generates a schema for user information, with labels, optional fields, and special customType information for complex types like addresses. The toTypedZodEnum function is used to format enum data for Zod compatibility.\n\n### Form Submission Handling\n\nTo handle form submissions, you need to define a corresponding formatting function. For instance, in the case of the userInformationSchema, you would have:\n\n```typescript jsx\nexport function userInformationSchemaFormatter(userId: string, data: any) {\n   return patchUserById({\n      id: userId,\n      data,\n   });\n}\n```\n\nIn this function, you can perform any necessary formatting on the data before submitting it to the API. Once the data is ready, the patchUserById function is called to update the user's information.\n\n### Integrating into Components\n\nTo integrate the schemas and form submission handling into your components, you can use the provided components such as AdminForm and ContainerCard.\n\n```typescript jsx\n\u003cContainerCard\n    title={\"Informations générales\"}\n    ctaElement={ \n      \u003cEditButtonWithValidationPanel\n         onSubmit={(data) =\u003e userInformationSchemaFormatter(user.id, data).then(() =\u003e refetch())}\n      \u003e\n         \u003cAdminForm schema={userInformationSchema(enums)} values={user} /\u003e\n      \u003c/EditButtonWithValidationPanel\u003e\n   }\n\u003e\n   \u003cAdminForm\n      schema={userInformationSchema(enums)}\n      values={user}\n      editable={false}\n   /\u003e\n\u003c/ContainerCard\u003e;\n```\n\nThe AdminForm component empowers you to effortlessly generate forms and data tables based on Zod schemas. It accepts the following props, ensuring type safety and enhanced developer experience:\n\n- schema: `Record\u003cstring, Zod.Schema\u003cobject\u003e\u003e` (required)\n  - Description: The Zod schema you defined earlier, which outlines the structure and validation rules for the form fields.\n  - Type: An object with many Zod schema that validates and describes the expected shape of the form data.\n        - Key of the object: `string` that represents the format awaited by the API for the value of this field (ex: `firstname`, `address.country`)\n\n- editable: `boolean` (required)\n  - Description: Determines whether the form is rendered in an editable mode (input fields) or as a read-only data table.\n  - Type: A `boolean` value (`true` for editable input fields, `false` for read-only data presentation).\n  - Default Value: `true`\n  \n- values: object (required)\n  - Description: The default values populated in the form fields when it's initially rendered. Typically, these values are fetched from the API.\n  - Type: An `Object` representing the initial values for the form fields, conforming to the structure outlined in the schema.\n\n  - Here's an example of how you might use the AdminForm component:\n\n```typescript jsx\n\u003cAdminForm\n    schema={userInformationSchema(enums)}\n    values={user}\n    editable={true}\n/\u003e\n```\n\nIn this example, the form is based on the userInformationSchema, the values are populated with the user data from the API, and the form is in editable mode, allowing users to input and modify data.\n\nBy leveraging these strongly-typed props, you can seamlessly integrate Zod schemas into your forms and data tables, ensuring correctness and enhancing your development workflow.\n\n### Reusable Components\n\nThe project incorporates components from @/lib/primitives, sourced from shadcn-ui, for enhanced UI elements. \n\nYou'll also find tailored components within @/modules/crud/components, like ContainerCard, AdminForm, and more. These components offer functionalities to manage data presentation, editing, and validation panels.\n\n### User Flow\n\nTo utilize this approach in your application:\n\n- Define a schema using the Zod schema builder.\n- Create a corresponding formatting function for API interaction.\n- Integrate the schema into your components using AdminForm and other tailored components as needed.\n- This process empowers you to generate forms and data tables effortlessly based on Zod schemas, streamlining your application's data management and UI interactions.\n\n## What's missing ? \n\nAt the moment, it's a part of one of my app that I refactored to run in a Standalone Vitejs project. In reality, it has to be a pakcage where the website (react-router-dom + homepage + SEO + doc) is split from the actual components and logic.\n\n- Publish components as a lib.\n- Create a dedicated website.\n- Refactor quite a bunch of Typescript.\n- Rename things in a more ubiquitous way.\n- Finish to polish stories.\n\n## Next.js\n\nThis project has been originally built on [Next.js](https://nextjs.org) app and split from it to keep this repository as clear as possible. \n\nYou should have no problem using this project in a NextJS context as long as you follow the Shadcn-ui documentation\n\n## Contributing\n\nContributions to the project are welcome! If you find any issues or have ideas for improvements, feel free to submit pull requests or open issues on the GitHub repository.\n\n## License\n\nThis project is licensed under the MIT License.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthisisjuke%2Fzod-to-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthisisjuke%2Fzod-to-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthisisjuke%2Fzod-to-form/lists"}