JSON to Flow Converter Online

Generate Flow type aliases from any JSON payload — primitives, Array<T>, and nested object types. 100% in your browser.

Input JSON

Flow Output

What is a JSON to Flow converter?

A JSON to Flow converter reads a JSON sample and emits a Flow type alias that mirrors the JSON shape — primitives, Array<T>, and inline object types. The output drops straight into a Flow-checked codebase (Meta-internal projects, React Native, or any flow-bin project) and the type-checker uses it to verify usage at compile time.

Hand-writing Flow types for a deeply nested API response is tedious — every nested object needs its own object literal, every array needs its Array<T> wrapper. OpenFormatter walks the JSON tree, infers the Flow type recursively, and runs entirely in your browser so internal API responses never leave your machine.

How to generate Flow types from JSON — 4 steps

Paste a representative JSON sample. Type inference reads the first observed value of each field — booleans must be true/false, numbers must be unquoted.
Click Convert. The tool emits an export type Root = { ... } with primitives, Array<T>, and nested object literals.
Copy and paste into your project. Add // @flow at the top of the consumer file (already included in the output).
Run flow check. npx flow at the project root verifies usage. Editor plugins (vscode-flow-ide, Babel-flow) provide inline diagnostics.

JSON to Flow type mapping

Sample JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true,
  "address": { "city": "London" },
  "tags": ["admin", "engineer"]
}

Generated Flow

// @flow

export type Root = {
  id: number,
  name: string,
  active: boolean,
  address: {
    city: string
  },
  tags: Array<string>
};

Type aliases

Single export type with inline nested objects — exactly what Flow’s type-checker expects, and easy to refactor into named types.

Array<T> inference

Arrays become Array<T> with the item type inferred from the first element — Array<string>, Array<{...}>, or Array<mixed>.

Client-Side Only

JSON is parsed in JavaScript inside the browser. Internal API responses, tokens, or PII never reach a server.

Common use cases

check_circleAdding type-checking to a React Native app that uses Flow as Meta’s recommended typer
check_circleMaintaining a Meta-internal product surface where Flow is the standard
check_circleModelling Redux store slices that hydrate from a backend JSON payload
check_circleDocumenting an existing JS module with a real API response shape
check_circleMigrating a JS codebase to typed code without committing to TypeScript
check_circleGenerating types for GraphQL response shapes when Apollo codegen is overkill
check_circleModelling third-party webhook payloads (Stripe, GitHub) in a Flow handler
check_circleProducing types for a Hermes-bundled React Native app where Flow is already wired

Why client-side generation matters

The JSON you paste often contains real customer data, OAuth tokens, signed URLs, or internal field names you do not want indexed by a third-party converter. OpenFormatter generates the Flow type entirely in JavaScript on your device — open the Network tab in DevTools and you will see zero requests when you click Convert. Safe for enterprise React Native work, safe behind a corporate proxy, safe when the API contract is itself confidential.

Need other JS typing tools?

Generate TypeScript interfaces, React PropTypes, or browse other JSON converters — all browser-side.

JSON to TypeScript JSON to PropTypes All JSON Tools

Frequently Asked Questions

Is Flow still maintained?

Yes — Flow is actively maintained by Meta (formerly Facebook) and powers the type-checking of large internal codebases including the React Native repository and many of Meta’s product surfaces. Flow continues to receive regular releases on its public GitHub repo, though the broader ecosystem outside Meta has consolidated around TypeScript.

Flow vs TypeScript — which should I pick?

TypeScript has become the default for new JavaScript projects in 2026 thanks to its larger ecosystem, broader editor support, and ubiquity in npm packages. Flow remains an excellent choice when you are working in a Meta-internal codebase, contributing to React Native, or maintaining a project that adopted Flow before TypeScript dominance. Flow’s type inference is famously sound and its variance and exact-object syntax are more expressive in some areas.

How are nested objects handled?

Nested objects are emitted inline using object type literal syntax — { city: string }. Flow allows arbitrary nesting and the syntax matches what TypeScript developers expect. For exact object types (no extra keys allowed) wrap the literal in {| ... |} after generation.

How are arrays typed?

A JSON array becomes Array<T> where T is inferred from the first element. Arrays of strings become Array<string>; arrays of objects become Array<{...}>. For tuple types use [string, number] explicitly after generation; the inferrer picks list types because JSON does not distinguish tuples from arrays.

What about exact object types?

Flow supports exact types via {| key: type |} syntax — the type then forbids extra properties at compile time. The generator emits regular {} object types for compatibility with libraries that spread additional metadata; convert to {| |} by hand when you want strict shape enforcement.

How do I run the type checker?

Install Flow: npm install --save-dev flow-bin, run flow init to create .flowconfig, then npx flow at the project root. Files containing // @flow at the top will be checked. Babel’s @babel/preset-flow strips the annotations at build time so the compiled JS is clean.

Is the JSON uploaded to your servers?

No. Conversion runs entirely in your browser via JavaScript. Open DevTools → Network and click Convert — no requests are made. Pasting JSON containing tokens or proprietary data never leaves your machine.

Can I migrate Flow types to TypeScript later?

Yes — the syntax overlap is large. Tools like flow-to-ts (community) automate the bulk of the conversion. The main differences are exact object types ({| |} → strict via TypeScript noUncheckedIndexedAccess), Array<T> → T[] preference, mixed → unknown. Most type aliases convert one-to-one.