100% local — your data never leaves your browser

JSON to PropTypes — A Wrong Prop Says So

Turn a JSON sample into PropTypes shapes. One shape per object, required by default, so a prop of the wrong shape shows up in the dev console.

Instant Private Zero cookies

JSON input

PropTypes output

What this tool does

A JSON sample becomes PropTypes shapes, one const per object.

{ "id": 1, "name": "Ada", "address": { "city": "Paris" } }
import PropTypes from 'prop-types';

export const AddressShape = PropTypes.shape({
  city: PropTypes.string.isRequired,
});

export const RootShape = PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  address: AddressShape.isRequired,
});

Children first: these are runtime values, so a shape has to exist before another one refers to it. An array at the root gets its own const, PropTypes.arrayOf(UsersItemShape).

Required means “it was there”

Every key of the sample comes out .isRequired, because the sample had it. It is a claim you can check and, where it is wrong, undo with one deletion. The alternative — marking everything optional — would be a claim about data nobody showed, and it would make the check useless on the fields that matter.

Two cases stay soft: a null and an unknown value both give PropTypes.any without .isRequired. A null tells you the key exists and nothing about its type, so requiring it would assert more than the sample supports.

Dev-only, and by choice

PropTypes warnings appear in development and are skipped in production, by design. That is not a defect, it is the deal: a runtime check that costs nothing where it would cost the most. It does mean a malformed payload reaching a user produces no warning at all — PropTypes is a development aid, not a validation layer. For validation that runs everywhere, the Zod generator on this site emits schemas that do.

React 19 no longer reads them

React 19 removed the propTypes check on components: assigning Component.propTypes has no effect at all, silently. The prop-types package still exists and these shapes are still valid values you can call yourself — PropTypes.checkPropTypes(…) — but if you are starting today on a current React, this generator is here for existing codebases rather than new ones.

The usual limits of one sample

A mixed array becomes PropTypes.oneOfType([...]), exactly as wide as what it saw. An empty array becomes PropTypes.array, with nothing said about items. And a key that is not a valid identifier keeps its quotes, which JavaScript accepts without complaint.

Private by design

Everything runs locally in your browser with JavaScript. Your data is never uploaded, which makes the tool safe for sensitive content, and it keeps working offline.

Frequently asked questions

Does this still work with React 19?
Not through React. React 19 ignores a component\u2019s `propTypes` entirely — the check was removed, not deprecated. The `prop-types` package still works as a standalone validator you call yourself, and the shapes below are still valid JavaScript, but if you are on React 19 and want prop checking, TypeScript is the answer.
Why is everything `.isRequired`?
Because every key was in the sample. That is a claim about one payload, and `.isRequired` is the honest translation of it — a prop that was there. Whether it is always there is not in the document; strike the `.isRequired` on the ones your component can do without.
Are these checks in my production bundle?
The warnings are not: React only ran PropTypes checks in development, and the library follows the same convention. The shape objects themselves do ship unless your bundler removes them, which is one reason a `PropTypes.shape` describing a large payload is worth keeping small.

Related converters