CalcCafe
Home › Developer tools › JSON to Flow

JSON to Flow

Paste JSON and instantly get clean Flow type aliases with the root type named Root and nested objects extracted into their own named types.

Reviewed by the CalcCafe editorial team · Last updated 1 July 2026 · How we test our tools

Example

Given this JSON input:

{
 "id": 1,
 "name": "Ada",
 "tags": ["dev", "admin"],
 "profile": { "age": 36, "city": "London" }
}

JSON to Flow emits:

export type Profile = {
 age: number,
 city: string,
};

export type Root = {
 id: number,
 name: string,
 tags: Array<string>,
 profile: Profile,
};

How it works

Parses your JSON, infers each value's Flow type, and emits export type aliases. Nested objects become their own named types and arrays are typed by their merged element shape.

Good to know

JSON to Flow turns a sample of real JSON into Flow type aliases you can paste straight into a JavaScript file annotated with // @flow. It is aimed at developers maintaining Flow-typed codebases who want to model an API response, a config blob, or a fixture without hand-writing every field. You paste JSON on the left, click Convert, and get a set of export type declarations on the right.

Reach for it whenever you have a concrete example of the data but no schema. Typical moments are wiring up a new endpoint, typing a third-party payload, or adding annotations to legacy code where the shape is only documented by what the server actually returns. Because everything runs locally in the browser, you can safely paste responses that contain internal or sensitive fields.

To read the output, start at the type named Root: that is the top-level shape. Every nested object is pulled out into its own named type (for example a profile key becomes a Profile type that Root references), and arrays are typed by their element shape, so a list of post objects produces a singularized element type. The status line under the panes tells you how many types were generated, which is a quick sanity check that nesting was detected as you expected.

One caveat to keep in mind: the types describe only the sample you paste, so a field that happens to be null or absent in your example will be typed as null or simply left out rather than as optional. For arrays of objects the tool merges fields across all elements, so feed it a few representative items to capture every key, and treat the result as a starting point you refine with optional markers and unions where the data can legitimately vary.

Frequently asked questions

How are nested objects and arrays of objects handled?
Each nested object becomes its own export type, named from its key (singularized for array items). Objects inside an array are merged so optional fields across items are all captured in a single element type.
What does the root type get named?
The top-level type is always named Root. If the JSON root is an array or a primitive, you get export type Root = Array<...> or export type Root = string, otherwise Root is an object type alias.
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 Flow and how is it different from TypeScript?
Flow is a static type checker for JavaScript developed by Meta that you add via annotations rather than a separate compiler. It uses similar concepts to TypeScript but its own syntax and inference rules, and it checks types without changing how your code runs.
Does the generated Flow code mark fields as optional?
No. The tool infers types from the literal values in your sample, so it does not add optional markers (a trailing ? on the key) automatically. If a field can be missing in real data, you add the optional marker yourself after generating.
How does it handle null values in my JSON?
A value that is null in the sample is typed as null. Because JSON has no separate undefined, the tool cannot infer a maybe type like ?number on its own, so you may want to widen those fields manually.
Can I convert a top-level JSON array instead of an object?
Yes. If the root of your JSON is an array, the output becomes export type Root = Array<...> with the element type inferred from the items, rather than an object type alias.
Do I need to install anything to use the Flow types?
To check them you need Flow configured in your project, typically via a .flowconfig file and the flow-bin package, plus the // @flow comment at the top of files. The tool itself only produces the type text and requires no installation.
What happens if I paste invalid JSON?
The conversion fails and the status area shows the parser's error message instead of output. Common causes are trailing commas, single quotes, or unquoted keys, none of which are valid JSON.
How are duplicate object shapes handled in the output?
Identical object structures are emitted only once and reused, so two keys with the same shape point to a single named type. When names would collide, a numeric suffix is added to keep each type name unique.

Related tools

Sources & references

These tools follow our methodology and provide educational estimates only — verify important figures with a qualified professional.