JSON to JavaScript PropTypes
Paste JSON and instantly get React prop-types shape definitions, with nested objects and arrays inferred automatically.
Example
Given this JSON input:
{
"id": 101,
"name": "Ada",
"roles": ["admin", "user"],
"profile": { "age": 36, "city": "London" }
}the tool emits:
import PropTypes from 'prop-types';
export const ProfileShape = PropTypes.shape({
age: PropTypes.number,
city: PropTypes.string,
});
export const RootShape = PropTypes.shape({
id: PropTypes.number,
name: PropTypes.string,
roles: PropTypes.arrayOf(PropTypes.string),
profile: ProfileShape,
});How it works
It parses your JSON, infers a PropTypes validator for each value, and extracts every nested object into its own reusable PropTypes.shape. The root object becomes RootShape (or a RootType for array/primitive roots).
Good to know
JSON to JavaScript PropTypes turns a sample JSON payload into ready-to-paste React prop-types validators. It walks the structure, picks a PropTypes validator for each value (string, number, bool, array, shape), and pulls every nested object out into its own named, reusable PropTypes.shape. It's aimed at React developers who consume an API response and want runtime prop validation for a component without hand-writing every field by hand.
Reach for it when you're wiring a component to a new endpoint, documenting the contract a component expects, or migrating an older codebase that never had type checking. Because PropTypes validate at runtime in development, they're a lightweight alternative (or complement) to TypeScript for catching shape mismatches early — handy when you can't or don't want to add a compile step.
To read the output: each nested object gets exported as a shape named after its key plus a Shape suffix (a profile field becomes ProfileShape), and shapes are declared before they're referenced so the file runs top to bottom. Arrays become PropTypes.arrayOf(...) using the inferred element type, and arrays of objects point at the extracted shape. A root object produces RootShape, while an array or primitive root is emitted as a RootType constant. The status line tells you how many definitions were generated.
One practical caveat: inference is only as good as your sample. A null value, an empty array, or an array mixing numbers and strings all collapse to PropTypes.any, so feed in a complete, representative example. Also remember the tool never marks fields as .isRequired — every validator is optional by default, so add .isRequired manually for props your component truly depends on.
Frequently asked questions
How are nested objects and arrays handled?
Each nested object becomes its own reusable PropTypes.shape (named after its key, e.g. ProfileShape) and is declared before it is referenced. Arrays become PropTypes.arrayOf(...) using the inferred element type; arrays of objects reference the extracted shape, and empty arrays fall back to PropTypes.array.
Why is a field typed as PropTypes.any?
A value is PropTypes.any when it is null (no type to infer) or when an array mixes incompatible element types (e.g. numbers and strings). Provide a non-null, consistent example value to get a more precise validator.
Is my data uploaded anywhere?
No — it runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between PropTypes and TypeScript?
PropTypes validate component props at runtime during development and log warnings to the console when something does not match, while TypeScript checks types at compile time before code runs. They can be used together, but TypeScript catches errors earlier and PropTypes only fire when the component actually renders.
Are React PropTypes deprecated?
PropTypes were removed from the React core package in React 19, but the standalone prop-types npm package still works and is actively maintained. You install it separately and import it the same way the generated code shows.
How do I make a PropTypes field required?
Append .isRequired to the validator, for example PropTypes.string.isRequired. This tool emits all fields as optional, so you add .isRequired yourself to any prop the component must receive.
What does PropTypes.shape do?
PropTypes.shape({...}) validates that a prop is an object containing specific keys with specific types. Extra keys not listed in the shape are allowed; use PropTypes.exact instead if you want to reject unexpected keys.
How do I install the prop-types package?
Run npm install prop-types (or yarn add prop-types) in your project, then import it with import PropTypes from 'prop-types'; which is the first line the tool generates.
Can PropTypes validate an array of objects?
Yes. Use PropTypes.arrayOf(PropTypes.shape({...})), which checks that the prop is an array and that each element matches the given shape. This tool produces exactly that pattern when your JSON array contains objects.
Where do you assign PropTypes to a React component?
You attach them as a static property after the component definition, for example MyComponent.propTypes = { name: PropTypes.string }. You can reference the exported shapes from this tool directly in that object.
Do PropTypes affect production performance?
The prop-types validators are designed to be stripped or skipped in production builds, so warnings only appear in development. In production the checks are effectively no-ops and have negligible runtime cost.
Related tools