A library for generating a form from a Zod schema. Check out some examples.
Motivation
As it stands currently, building a form in a Typescript powered React app means:
- Writing a schema using Zod
- Using a state management library such as
react-hook-form
to manage the form state - Writing the markup for the inputs, and wiring up the event handlers, error messages, etc. to the form library
ZodForm aims to reduce the number of steps required to go from a schema to a form rendered on the screen.
What it isn't
ZodForm is not a replacement for JSON schema based form libraries. ZodForm is very much inspired by libraries such as jsonforms (opens in a new tab) and react-jsonschema-form (opens in a new tab), though it makes different tradeoffs when compared to these libraries:
- ZodForm is TypeScript focused, it isn't portable across languages like JSON schema is
- JSON schema is just data, it doesn't depend on any runtime and as such can be stored in a datastore. ZodForm uses runtime features (such as functions) to generate the form, so it isn't serializable and as such cannot be stored in a datastore
💡
Please note that ZodForm is still in active development, and some of its APIs may change.