JSON to Flow Types Conversion Tool — Numio
Generates Flow type aliases from a JSON sample, starting with // @flow. Each nested object gets its own exported type, and keys missing from some array items are marked optional with ?.
Typing API responses in a React or React Native codebase that still uses Flow.
JSON
Flow
When to use it
- Typing API responses in a React or React Native codebase that still uses Flow.
- Writing types for fixtures or mock data in a Flow-checked test suite.
How to use
- Paste a JSON object into the editor.
- Open the settings to change prefix (default I) and Root Name (default RootObject); the root type becomes IRootObject and nested types get the same prefix.
- Copy the exported types into a .js file that keeps the // @flow header.
JSON input
{
"id": 42,
"name": "Ada Lovelace",
"email": null,
"active": true,
"score": 98.5,
"tags": ["admin", "dev"],
"address": { "city": "London", "postCode": "NW1" }
}Flow types
// @flow
export type IRootObject = {
id: number
name: string
email: null
active: boolean
score: number
tags: string[]
address: IAddress
}
export type IAddress = {
city: string
postCode: string
}Details and limitations
Runs in the browser with the json-ts library, and the result is formatted with Prettier; nothing is uploaded.
Flow has no namespaces, so the page only offers prefix and Root Name; the output is always top-level export type declarations.
null values are typed as null and empty arrays as any[]. Change them to maybe types such as ?string when the field can hold a value.
The output uses inexact object types and no $ReadOnly; add {| |} or read-only wrappers if your project requires them.
FAQ
How are optional fields detected?
Only from arrays of objects: a key missing from some items becomes optional, for example giftWrap?: boolean. Top-level keys are never optional because a single object has no other sample to compare with.
Can I convert a JSON array at the root?
Yes. The root becomes an array alias such as export type IRootObject = IRootObjectItem[], and the item type merges the keys of all elements, with missing keys marked optional.
Does it handle mixed-type arrays?
Yes, a flat array such as ["a", 2] becomes (string | number)[]. Nested arrays become any[].