JSON to Yup

Input
Output

JSON to Yup

Paste a JSON sample, such as an API response, and Bracely writes Yup schemas and TypeScript types for it. Each object becomes a yup.object() schema with an InferType type, ready for Formik or React Hook Form validation.

Example: a shipping address form

Two submitted addresses, one without a second address line. Fields in every sample are .defined(), line2 is .optional(), and the PIN stays a string because the JSON quotes it, so a leading zero is never lost:

Input

[
  {
    "fullName": "Ananya Rao",
    "line1": "12 MG Road",
    "line2": "Flat 4B",
    "city": "Pune",
    "pin": "411001",
    "phone": "+91 98765 43210",
    "saveForLater": true
  },
  {
    "fullName": "Kabir Shah",
    "line1": "7 Park Street",
    "city": "Kolkata",
    "pin": "700016",
    "phone": "+91 91234 56780",
    "saveForLater": false
  }
]

Output

import * as yup from "yup";

export const ShippingAddressSchema = yup.object({
  fullName: yup.string().defined(),
  line1: yup.string().defined(),
  line2: yup.string().optional(),
  city: yup.string().defined(),
  pin: yup.string().defined(),
  phone: yup.string().defined(),
  saveForLater: yup.boolean().defined(),
});
export type ShippingAddress = yup.InferType<typeof ShippingAddressSchema>;

export const ShippingAddressListSchema = yup.array(ShippingAddressSchema.defined());
export type ShippingAddressList = yup.InferType<typeof ShippingAddressListSchema>;

How do I use the JSON to Yup?

  1. Paste a JSON sample.
  2. Set the root type name, for example Order.
  3. Copy the Yup code into your project.

What does the JSON to Yup do?

  • yup.object schemas with .defined() for fields in every sample
  • yup.InferType types exported for each
  • integer() for whole numbers, optional() for fields that can be missing
  • Nested objects become their own named types
  • 20 other languages from the same sample, including TypeScript

When to use the JSON to Yup

Yup is the schema library most React forms already use with Formik or React Hook Form. When a form posts to an API, the API's sample body is the quickest starting point for its validation: paste it, and copy a schema with a field for every input.

Each object becomes a yup.object() with a yup.InferType type. Fields present in every sample are .defined(), fields missing from some are .optional(), and whole numbers get .integer(). Values stay the type the JSON gives them, so a PIN code or a phone number sent as a string stays yup.string() and keeps its leading zero.

Frequently asked questions

Why .defined() and not .required()?
defined() only says the field must be there. For strings, required() also rejects an empty string, which is what you usually want on a form: change it on the inputs a person must fill in.
How do I use it with React Hook Form?
Pass it through the resolver: useForm({ resolver: yupResolver(ShippingAddressSchema) }) from @hookform/resolvers/yup. With Formik, set validationSchema={ShippingAddressSchema}.
How does it pick Yup types?
From the values in your sample: whole numbers, decimals, text, true/false, arrays and nested objects. When array items disagree, the field is made optional or widened.
Can I generate other languages?
Yes. Change Language to any of the others: TypeScript, Go, Python, Pydantic, Java, C#, Kotlin, Swift, Rust, Scala, Ruby, Dart, PHP, Zod, TypeBox, Valibot, GraphQL, Protobuf, Prisma and Drizzle.
Is my data uploaded?
No. Bracely runs entirely in your browser, so nothing you paste or open leaves your device.

More JSON tools

Bracely has 104 JSON tools in one page. Related ones:

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated · Version 6.1 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram