YAML to JavaScript PropTypes
Turn sample YAML into ready-to-use React PropTypes type definitions in seconds.
Example
Input YAML:
name: Ada
age: 36
tags:
- dev
address:
city: London
Output PropTypes:
import PropTypes from 'prop-types';
export const Root = PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
address: PropTypes.shape({
city: PropTypes.string.isRequired
}).isRequired
});How it works
Parse the YAML with js-yaml, walk the resulting value to infer a type model, then emit a PropTypes object with PropTypes.shape, PropTypes.arrayOf and primitive checkers. The root type is named Root.
Good to know
YAML to JavaScript PropTypes takes a sample of YAML data and generates a matching React PropTypes definition, exported as a constant named Root. It is built for React developers who have example data (an API response, a config file, a fixture) and want runtime prop validation without hand-writing nested PropTypes.shape and PropTypes.arrayOf declarations by hand.
Reach for it when you are wiring up a component around data you already have a sample of, or when you are migrating YAML fixtures and configs into typed component props. Because it infers structure from a concrete example rather than a schema, it is fastest for getting a first-draft validator that you then refine, rather than for codifying every edge case up front.
To read the output: each YAML key becomes a PropTypes checker, scalars map to string, number, or bool, nested maps become PropTypes.shape, and lists become PropTypes.arrayOf. A trailing .isRequired means the key had a non-null value in your sample. For lists of objects, the tool merges every element's shape into one, so a key found in only some items drops .isRequired automatically.
A practical caveat: inference is only as good as your sample. Keep these points in mind:
- A value of
null (or an empty list with no elements) collapses to PropTypes.any because there is no type to infer — supply a representative value to get a real checker. - The output is always named
Root and processing happens entirely in your browser, so paste freely; nothing is uploaded, but you may want to rename Root and tighten optional keys before committing.
Frequently asked questions
How are required props decided?
Every key present with a non-null value in your YAML is marked .isRequired. Keys whose value is null, or keys missing from some elements of a list of objects, are treated as optional.
How are arrays of objects handled?
The tool merges the inferred shapes of all list elements into a single PropTypes.shape, so keys that appear in only some elements become optional and consistent keys stay required.
Is my data uploaded anywhere?
No — this tool 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 for React?
PropTypes validate prop types at runtime in development and log a console warning when data does not match, while TypeScript checks types at compile time before code runs. Many projects use TypeScript for static safety and reserve PropTypes for validating data whose shape is only known at runtime, such as API responses.
Are PropTypes still used in React?
PropTypes remain functional, but as of React 19 the built-in PropTypes checks were removed from the core library and the standalone prop-types package is now in maintenance. Newer projects often prefer TypeScript or schema validators, though PropTypes still works when imported from the prop-types package.
How do I install prop-types in a React project?
Run npm install prop-types or yarn add prop-types, then import it at the top of your file with import PropTypes from 'prop-types';. The generated output already includes this import line.
What does PropTypes.shape do?
PropTypes.shape validates that a prop is an object containing specific keys with specific types, and it ignores any extra keys. The tool uses it for every nested YAML map so that inner objects are type-checked field by field.
How is PropTypes.arrayOf different from PropTypes.array?
PropTypes.array only checks that the value is an array, while PropTypes.arrayOf(checker) also validates that every element matches the given checker. This tool emits arrayOf with an inferred element type, falling back to plain array only when the list is empty.
Can I convert JSON to PropTypes instead of YAML?
This tool reads YAML, but YAML is a superset of JSON, so most valid JSON can be pasted directly and parsed the same way. If you need JSON-specific tooling, a dedicated JSON-to-PropTypes converter or a YAML formatter may be a closer fit.
Why does my generated checker show PropTypes.any?
PropTypes.any appears when the tool cannot infer a concrete type, which happens for null values, empty arrays, or keys whose types conflict across merged list elements. Provide a non-null, representative sample value to get a specific checker instead.
Related tools