Yup is a JavaScript schema builder for value parsing and validation. It is commonly used with React form libraries like Formik and React Hook Form to define validation rules declaratively.

How does JSON map to Yup types?

JSON strings map to yup.string(), numbers to yup.number() (integers get .integer()), booleans to yup.boolean(), null to yup.mixed().nullable(), arrays to yup.array().of(...), and objects to yup.object().shape({...}). Nested objects get separate schema variables for reusability.

Can I use the generated schema with Formik?

Yes! The generated Yup schema is fully compatible with Formik's validationSchema prop. Simply import the schema and pass it to your Formik component configuration.

Does this tool send my data to a server?

No, all processing happens entirely in your browser. Your JSON data never leaves your device.

JSON to Yup Schema Generator Online

All requiredDetect email

JSON Input

Yup Schema Output

What is JSON to Yup Schema Generator?

Yup is a schema builder built for forms. Its biggest real-world use is as the validation layer behind Formik and React Hook Form: you describe the shape of your form values once, and the form library calls into Yup on submit (and optionally on change/blur) to surface field-level error messages. This generator turns a JSON sample of your form values — or an API payload you need to validate — into a ready-to-use `yup.object().shape({...})` schema with `.string()`, `.number().integer()`, `.boolean()`, nested object schemas, arrays, and automatic `.email()` detection. What sets Yup apart from Zod and Joi is its form-centric ergonomics: `.required("Name is required")` takes a custom message that maps directly onto a form field error, `transform()` lets you coerce an empty string to undefined before validation, and `lazy()` lets the schema depend on the value at validation time — essential for unions, recursive shapes, or objects whose allowed keys are not known up front. Yup also runs all rules by default and collects every error (unless you pass abortEarly: false vs true), which is exactly what a form needs to highlight multiple invalid fields at once.

How to Use

Paste a sample of your form values (or the object you POST) and generate the schema; pick ESM or CJS to match your project
For Formik, pass the schema to the validationSchema prop: <Formik validationSchema={schema}> — Formik will run it and populate errors keyed by field name
For React Hook Form, wire it through the resolver: useForm({ resolver: yupResolver(schema) }) after installing @hookform/resolvers
Add human-readable messages after generation: change .required() to .required("Email is required") and .email() to .email("Enter a valid email") so users see useful text
Use .transform() on fields where an empty input should be treated as missing, e.g. age: yup.number().transform(v => (isNaN(v) ? undefined : v)).required()

Why Use This Tool?

Purpose-built for Formik and React Hook Form — schema errors map straight to form field messages

Custom messages on every rule (.required("..."), .email("...")) for user-facing validation text

Collects all errors by default (abortEarly: false) so a form can highlight every invalid field at once

transform() coerces values (empty string to undefined, string to number) before the rules run

lazy() supports value-dependent and recursive schemas that a static generator cannot express

Runs entirely in the browser — no payload leaves your machine

Tips & Best Practices

By default Yup stops at the first error (abortEarly: true); call schema.validate(data, { abortEarly: false }) to get the full err.inner array — React Hook Form and Formik resolvers already do this for you
Empty form inputs come through as "" not undefined, so number fields blow up with a cast error — add .transform(value => (isNaN(value) ? undefined : value)) before .required()
Use yup.lazy(value => ...) when the schema depends on the data: a field that is a string OR an array, or an object with dynamic keys, cannot be expressed without it
.nullable() allows null but does NOT make a field optional — combine .nullable().notRequired() (or .optional()) if the value can be null or absent
Conditional validation uses .when("otherField", { is: true, then: s => s.required() }) — extremely common for "if shipping differs from billing" style forms
Yup infers TypeScript types via yup.InferType<typeof schema>, so you do not need to declare the form values type twice

Frequently Asked Questions

What is the full JSON to Yup type mapping?

JSON string -> yup.string() (with .email() added when the value looks like an email). JSON integer -> yup.number().integer(). JSON float -> yup.number(). JSON boolean -> yup.boolean(). JSON null -> yup.mixed().nullable(). JSON array -> yup.array().of(itemSchema). JSON object -> yup.object().shape({...}), with nested objects extracted as reusable schema variables. An empty array becomes yup.array() with no .of() constraint.

How do I use the generated schema with Formik vs React Hook Form?

Formik consumes Yup natively: pass the schema to the validationSchema prop and Formik runs it, mapping errors onto touched fields. React Hook Form needs an adapter: install @hookform/resolvers and use useForm({ resolver: yupResolver(schema) }). Both run Yup with abortEarly off, so all field errors appear together.

What does lazy() do and when do I need it?

yup.lazy(fn) defers schema creation until validation time, giving the function the value being validated so the schema can depend on it. Use it for recursive structures (a comment with nested comments), fields that can be more than one shape (string or object), or objects whose keys are dynamic. A static generated schema cannot know these at build time, so you wrap the variable part in lazy().

How does transform() work in Yup?

transform() runs a function on the raw value BEFORE the type check and validation rules. The classic case is form inputs: an untouched number field yields "" which fails number casting, so .transform(v => (isNaN(v) ? undefined : v)) converts it to undefined first, letting .notRequired() pass or .required() produce a clean message. Transforms also trim strings or coerce "true"/"false" strings to booleans.

Yup vs Zod vs Joi — which should I pick?

Yup is the smoothest fit for React form libraries and has the friendliest transform/conditional API for forms. Zod has stronger TypeScript inference and is increasingly the default for full-stack TS apps. Joi is the Node.js/Hapi server-side standard with the richest built-in validators. For a React form, Yup; for end-to-end TS type safety, Zod; for an Express/Hapi API, Joi.

Is my data sent to a server?

No. All schema generation runs in your browser. Your JSON never leaves your device.

Real-world Examples

A signup form schema for Formik

You have the shape of your form values and want validation with messages. Generate the base schema, then add custom messages — the result drops straight into Formik's validationSchema and produces per-field errors.

Input

{
  "email": "ada@example.com",
  "password": "hunter2hunter2",
  "age": 28,
  "acceptTerms": true
}

Output

import * as yup from 'yup';

export const signupSchema = yup.object().shape({
  email: yup.string().email('Enter a valid email').required('Email is required'),
  password: yup.string().min(8, 'At least 8 characters').required('Password is required'),
  age: yup
    .number()
    .integer()
    .transform((v) => (isNaN(v) ? undefined : v))
    .min(13, 'Must be 13 or older')
    .required('Age is required'),
  acceptTerms: yup.boolean().oneOf([true], 'You must accept the terms'),
});

// <Formik validationSchema={signupSchema} ...>

Nested object with conditional validation

A checkout form where the shipping address is only required when shipToDifferent is true. The generator produces the nested object schema; you add .when() for the conditional rule that no static generator can infer.