Code Generators
JSON to JavaScript PropTypes Converter
Paste a JSON or XML sample — the format is auto-detected — and get typed JavaScript PropTypes models with names, nesting and nullability inferred for you.
In short
Convert JSON to JavaScript PropTypes online: paste a sample, get typed JavaScript PropTypes models — quicktype-powered, free and in your browser.
By NaveenKumar T · Updated
- JSON or XML input, auto-detected
- Nested objects become types
- Nullability inferred
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
Example: JSON order payload to JavaScript PropTypes
A small order document with a nested object, an array of two items, a decimal total and a null field — enough to show how each JavaScript PropTypes type, list and nullable is inferred. The same page accepts the XML form of this order too, so the sample below is an example rather than the only accepted format. The right-hand side is the exact output of this tool.
{
"id": "ord_9F2KX",
"status": "processing",
"paid": true,
"customer": { "name": "Ada Lovelace", "email": "ada@example.com", "phone": null },
"items": [
{ "sku": "KB-75", "qty": 1, "price": 149.99 },
{ "sku": "MS-12", "qty": 2, "price": 39.5 }
],
"total": 228.99
}// Example usage:
//
// import { MyShape } from ./myShape.js;
//
// class MyComponent extends React.Component {
// //
// }
//
// MyComponent.propTypes = {
// input: MyShape
// };
import PropTypes from "prop-types";
let _Root;
let _Customer;
let _Item;
_Item = PropTypes.shape({
"sku": PropTypes.string,
"qty": PropTypes.number,
"price": PropTypes.number,
});
_Customer = PropTypes.shape({
"name": PropTypes.string,
"email": PropTypes.string,
"phone": PropTypes.any,
});
_Root = PropTypes.shape({
"id": PropTypes.string,
"status": PropTypes.string,
"paid": PropTypes.bool,
"customer": _Customer,
"items": PropTypes.arrayOf(_Item),
"total": PropTypes.number,
});
export const Root = _Root;
Look for the "phone" field: sampled as null, it is typed as PropTypes.any. "items" became PropTypes.arrayOf(Item), and "total" is PropTypes.number.
Learn more
From JSON sample to JavaScript PropTypes types
Hand-writing model classes from a JSON payload is transcription work: read a field, type a property, repeat eighty times, miss one. This page runs quicktype (the same engine behind the best-known generators) against your document, merging array elements to find the common shape and naming nested types from their keys.
PropTypes checks run only in development builds; production bundles skip them entirely, and React 19 ignores the propTypes property even in development. Treat the generated shapes as a development-time safety net for React 18 and earlier, and add .isRequired to the fields your component cannot render without.
How JSON values become JavaScript PropTypes types
Inference works from the values in your sample. Strings map to PropTypes.string, integers and decimals are told apart (228.99 becomes PropTypes.number, while 1 and 2 stay integral), true/false become the language's boolean, and an object such as "customer" becomes its own named type. The "items" array is typed as PropTypes.arrayOf(Item) because every element shares the same keys — quicktype unifies the shapes of all array elements into one Item type.
Nulls are the one place inference needs your help: "phone": null carries no type information, so the field is emitted as PropTypes.any. If the real API sometimes sends a string there, include a sample where the field is populated (paste several documents merged into one array) and the generated type becomes the union of what it saw.
Pasting XML instead: how elements and attributes become JavaScript PropTypes types
The XML is parsed into a data model before inference (attributes included, text nodes named "text"), so the root element becomes a nested type: <order> is a field of type Order on the top-level Root rather than the top level itself. Child elements become fields, and repeated elements — the two <item> siblings — are collected into PropTypes.arrayOf(Item) under an Items wrapper type that mirrors the <items> container.
Attributes and element text are typed differently, and this matters: element text is type-inferred, so <total>228.99</total> becomes PropTypes.number, while attribute values are kept as they were written — qty="1" and price="149.99" stay PropTypes.string in JavaScript PropTypes. Prefer element text for numeric data you want typed, or cast attribute values after decoding. One more trap: a single <item> would not be recognized as a list, so make sure repeated elements appear at least twice in the sample.
Annotations, nulls and nested arrays in the generated JavaScript PropTypes
PropTypes are values rather than annotations, so the output is a run of PropTypes.shape assignments to internal variables — _Root, _Customer, _Item — closed by a single export of the top-level shape. Keys are quoted verbatim, so customer-ref survives untouched. Two things are worth knowing before you lean on it: nothing is marked isRequired, so every field is optional as far as React is concerned, and React 19 ignores the propTypes property entirely — treat this target as a safety net for React 18 and earlier codebases.
A field whose only sampled value is null becomes PropTypes.any, which validates nothing whatsoever. Add a document where the field carries a value and it becomes a PropTypes.oneOfType listing both branches — still permissive, but at least self-documenting. Because nothing is marked isRequired, a missing key never warns either, so if you want the checks to bite, append .isRequired to the fields your component genuinely depends on after generating. An empty array in the sample produces an arrayOf(PropTypes.any) with no element shape.
Nested objects become their own shape variables — _Customer, _Item — declared before the shape that uses them and referenced by variable, which keeps deep payloads readable and lets you export a nested piece by hand when a child component only takes that slice. Arrays of objects become PropTypes.arrayOf around the element shape, so React validates every element in development. Only the outermost shape is exported by default. One-element arrays document only that element, and empty arrays leave you with arrayOf(PropTypes.any).
Help
Frequently asked questions
Everything you need to know about the JSON to JavaScript PropTypes.
01How do I generate JavaScript PropTypes classes from JSON?
Paste a representative document — JSON or XML, the format is detected automatically — and press Convert. A real API response works best. Nested objects become their own JavaScript PropTypes types, arrays become PropTypes.arrayOf(Item), and the result downloads as Root.js.
02What does the generated JavaScript PropTypes code include?
For React codebases on PropTypes, generation emits the full PropTypes tree for your data — nested shapes, arrayOf, oneOfType — the tedious part of prop validation written for you (add .isRequired to the fields you depend on).
03How do I use the generated JavaScript PropTypes code in my project?
Install prop-types, import the generated export (export const Root) and assign it in a component: MyComponent.propTypes = { order: Root }. Nested objects become PropTypes.shape and arrays PropTypes.arrayOf, so React warns in development whenever a payload prop no longer matches the sample's shape.
04Are PropTypes still worth generating?
For non-TypeScript React codebases, they're the runtime safety net — and deep payload shapes are exactly where hand-written PropTypes go stale. Generating from the actual payload keeps the validation honest.
Keep working