Examples of rendering custom components using Zod

[j1mie]

I'm looking for some examples of how @react-formgen/zod can be used to map different Zod types to render custom components — do you have any examples of this? All examples seem to be based on the JSON schema.

For additional context I am using this in a react-native-web project where I'll be rendering custom form components.

Thanks!

[m6io]

Yeah I primarily use the JSON Schema implementation myself due to it's versatility and metadata, but I'll try and add some more Zod ones. Zod is a bit tricky to work with in this context because it doesn't really have a lot of standard built-in metadata, but I'll try and come up with something!

If you have some samples of the zod schemas you're looking to use and the use case you're thinking of, feel free to drop them here.

[NotFiliberto]

any news about zod implementation?

[tobimori]

Might be interesting: https://v4.zod.dev/metadata

[m6io]

Hey y'all, quick update:

I've been playing with the new Zod update and it looks like Zod can now be used in a similar way to JSON Schema and Yup for formgen. I'm currently working on a refactor and should have a first pass available within the next few weeks hopefully.

Would love to have some feedback on the update once it's out. Thank you!

[NotFiliberto]

i will test it for sure! excited to see the new update

[m6io]

Update:

So I got a very very minimal base going. At a high level (and all subject to change, obv :) )

The Zod types that will be supported for form geneneration

String
Number
Boolean
BigInt - This is a maybe. Can't imagine needing bigint form inputs, but who knows
Date
Array
Object
Union - This is a maybe. I still am not totally convinced of it's value in terms of form data
Tuple
Enum

The Zod wrappers that will be supported

Optional
Nullable
Default
Default
Readonly
NonOptional

Right now I have a usable POC, but I'm having issues with the typings. I'd prefer to have something robust and well thought out, but this is taking more time than I bargained for and I'd rather spend more time getting this into consumer hands and working on templates, and refine the typings later.

Shooting for getting the update out this week.

[m6io]

PR branch is up. Currently, this brings the @react-formgen/zod package up to Zod 4 and aligns its implementation structure with @react-formgen/json-schema (tldr; no more built-in/fallback templates in the package, as those are unnecessary bloat and go against the lightweight and unopinionated philosophy of the package).

I'm currently trying to address how I want to best handle the template implementations. I am currently doing everything in the /website directory, but in hindsight this only benefits me as the maintainer and isn't as helpful for consumers who will most likely only be using one of the implementations. I don't want to put everything in seperate repos and link using gitmodules like I had done in the past (that was some nightmare fuel), but I recognize the need for some level of separation.

I'm leaning towards adding a "samples" directory, which can contain full apps separated by the implementation. My thinking is something like:

samples/
├── json-schema/
|   ├── src/
|   |   └── components/
|   |       └── templates/
|   └── package.json
├── yup/
|   ├── src/
|   |   └── components/
|   |       └── templates/
|   └── package.json
└── zod/ # <-- react app root
    ├── src/
    |   └── components/
    |       └── templates/ # <-- sample @react-formgen/zod templates
    └── package.json

And perhaps in the future:

samples/
├── json-schema/
|   ├── tailwind/
|   |   ├── src/
|   |   |   └── components/
|   |   |       └── templates/
|   |   └── package.json
|   └── material-ui/
|       ├── src/
|       |   └── components/
|       |       └── templates/
|       └── package.json
├── yup/
|   ├── tailwind/
|   |   ├── src/
|   |   |   └── components/
|   |   |       └── templates/
|   |   └── package.json
|   └── material-ui/
|       ├── src/
|       |   └── components/
|       |       └── templates/
|       └── package.json
└── zod/ # <-- folder containing various themed implementations of the same react app
    ├── tailwind/ # <-- react app root
    |   ├── src/
    |   |   └── components/
    |   |       └── templates/ # <-- sample @react-formgen/zod templates, styled with tailwind
    |   └── package.json
    └── material-ui/
        ├── src/
        |   └── components/
        |       └── templates/
        └── package.json

That way, consumers can just use something like degit to either extract whatever whole react app or whatever templates they want, or they can just copy the contents directly from the repo.

[m6io]

Update: zod4 upgrade PR has been merged to main. @j1mie not sure if you're still following this thread, but if you are, here's where you can find an example implementation of zod temptlates: https://github.com/m6io/react-formgen/tree/main/website/src/components/templates/zod

Please note: this is not a perfect implementation. Zod has too many types and so many combinations, so it's not as easy to create a holistic implementation as it is with json schema. Regardless, I think the example I provided should be a good start for most folks to hit the ground running.

[m6io]

Oh, and please note: I haven't updated the doc yet so I'm going to keep this issue open while I tackle that. Might be a while, hopefully the code is documented well enough for most folks to get a general gist of what to do