Formatters
Flow Formatter
Prettier with the Flow parser — annotations and Flow-specific syntax formatted without a fight.
In short
Format Flow-typed JavaScript online with prettier's Flow parser: type annotations, generics and Flow syntax formatted correctly. Free, private.
By NaveenKumar T · Updated
Learn: Pretty Print JSON in JavaScript: stringify and Beyond
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
Flow Formatter: input and output
A Flow-typed reducer for a list of points: an exact, read-only `Point` type, a union of actions, an `opaque type`, an exhaustiveness cast and a `%checks` predicate.
// @flow
import type {Node} from 'react';
export type Point = {|+x:number,+y:number|};
type Action = {type:'add',payload:$ReadOnly<Point>}|{type:'clear'};
opaque type Id: string = string;
function reducer(points:$ReadOnlyArray<Point>=[],action:Action):$ReadOnlyArray<Point>{switch(action.type){case 'add':return [...points,action.payload];case 'clear':return [];default:(action:empty);return points;}}
export function isOrigin(p:Point):boolean %checks{return p.x===0&&p.y===0}// @flow
import type { Node } from "react";
export type Point = {| +x: number, +y: number |};
type Action = { type: "add", payload: $ReadOnly<Point> } | { type: "clear" };
opaque type Id: string = string;
function reducer(
points: $ReadOnlyArray<Point> = [],
action: Action,
): $ReadOnlyArray<Point> {
switch (action.type) {
case "add":
return [...points, action.payload];
case "clear":
return [];
default:
(action: empty);
return points;
}
}
export function isOrigin(p: Point): boolean %checks {
return p.x === 0 && p.y === 0;
}
The `{| |}` exact-object bars, the `+` variance sigils, the `(action: empty)` cast and the `%checks` predicate all survive; object-type members are separated with commas rather than TypeScript-style semicolons.
Learn more
Formatting Flow, properly
Flow's type syntax overlaps TypeScript's but diverges enough to break the wrong parser (variance sigils, $-utility types, // @flow pragmas). This page runs prettier's dedicated Flow parser, so annotated code formats exactly as it would in a Flow-configured repo.
Flow codebases (large React projects, notably Meta-lineage ones) still need everyday snippet hygiene: paste annotated code, get house-style output, see precise positions when an annotation's syntax is off. Migrating to TypeScript? Format here first — clean diffs make codemods reviewable.
Help
Frequently asked questions
Everything you need to know about the Flow Formatter.
01How do I format Flow code here?
Paste your Flow-typed JavaScript (or load a file/URL) and press Format. Prettier's dedicated Flow parser understands variance sigils, $-utility types and // @flow pragmas that would break a TypeScript-aimed parser, reprinting the file in canonical style.
02TypeScript parser keeps erroring on my Flow code — why?
Genuinely different grammars: Flow's *variance markers, %checks predicates, and utility types like $Keys<> aren't TypeScript. Use this page for Flow files; the syntax that breaks elsewhere is precisely what this parser exists for.
03How are exact objects, variance sigils and `%checks` predicates printed?
The engine is Flow's own parser, so anything the Flow checker accepts formats here. Exact object types keep their bars with one inner space, `{| +x: number |}`; `+` and `-` variance sigils stay attached to the property name; `(value: Type)` casts and `%checks` predicates are preserved; `opaque type` and utilities such as `$ReadOnly<>` and `$Keys<>` pass through. Object-type members are separated by commas, Flow's convention rather than TypeScript's semicolons, and a union wider than 80 columns breaks with a leading `|` per member.
Keep working