chore: add json example

[lifeiscontent]

@edmundhung can you explain to me how I might be able to get a JSON field working with conform? I've setup this example, but the .defaultValue of the input renders as a blank input value

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3c043eedd7ecd3f3b66dfb9781e1c7d3d360eefc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[edmundhung]

Just pushed a commit to your PR.

There is no JSON field in Conform. Conform only understand string or File in an input. You will need to serialize it manually and make sure it to be serialized again when you access and update the field value (e.g. control.change(JSON.serialize(value)) or JSON.parse(control.value))

It might be worth adding an option to the useControl hook to handle the serialziation for you :thinking:

[lifeiscontent]

@edmundhung is there anyway to use the jsonSchema type I had? for my use case I want to allow someone to add any JSON data because we're mapping it back to a users DB so we don't know the shape of the data.

[edmundhung]

I have tested it once with your original type and it seems to recursively looping over and over again and crash. I am not sure why. It might be either a bug on the enableTypeCoercion helper in the conform zod package or something wrong with zod itself? Can you verify if the JSON schema works without passing to Conform?

[lifeiscontent]

@edmundhung yep the jsonSchema type is in the GitHub docs of zod and works as expected https://github.com/colinhacks/zod?tab=readme-ov-file#json-type

[edmundhung]

@lifeiscontent I have pushed up a fix to your branch. Let me know if this is what you were looking for.

[lifeiscontent]

@edmundhung is there a way I can try a prerelease version of this quickly? I can try it in the project I'm working in and get back to you.

[pkg-pr-new[bot]]

commit: 3c043ee

@conform-to/dom

``` pnpm add https://pkg.pr.new/@conform-to/dom@686 ```

@conform-to/react

``` pnpm add https://pkg.pr.new/@conform-to/react@686 ```

@conform-to/validitystate

``` pnpm add https://pkg.pr.new/@conform-to/validitystate@686 ```

@conform-to/yup

``` pnpm add https://pkg.pr.new/@conform-to/yup@686 ```

@conform-to/zod

``` pnpm add https://pkg.pr.new/@conform-to/zod@686 ```

Open in Stackblitz

More templates

- [@conform-example/chakra-ui](https://pkg.pr.new/template/a260bd1b-6b42-4ad7-a1ee-884a5e534435) - [@conform-example/headless-ui](https://pkg.pr.new/template/7f1025e9-593f-4eeb-8ead-a53fcf6e4fe0) - [@conform-example/material-ui](https://pkg.pr.new/template/37de0c3c-3999-4112-bfe2-71b73523fae6) - [@conform-example/nextjs](https://pkg.pr.new/template/5d82fea5-a59e-4882-b400-effd85dc2e8a) - [@conform-example/radix-ui](https://pkg.pr.new/template/fbd18f3a-d37e-4912-b8fb-6abd55ca1b33) - [@conform-example/react-router](https://pkg.pr.new/template/6261b778-de96-4eb4-a047-264657c5275e) - [@conform-example/remix](https://pkg.pr.new/template/1b338006-ee04-44fe-b92c-f01775cf4e78) - [@conform-example/shadcn-ui](https://pkg.pr.new/template/92e08390-b431-4072-a199-d08dea8f2511)

[edmundhung]

@edmundhung is there a way I can try a prerelease version of this quickly? I can try it in the project I'm working in and get back to you.

Here you go ☝🏼

[lifeiscontent]

@edmundhung it works perfectly! :)