Flow Formatter Online — Format Flow Type Annotations

The OpenFormatter Flow tool runs entirely in your browser; nothing is uploaded. Use it for a one-off readability pass on a Flow file copied from a code review, a Stack Overflow answer, or a third-party Meta open-source project (React itself is Flow-typed internally and ships .flow.js declaration files).

How to format Flow code — 4 steps

1. Paste your Flow code. Drop a // @flow file body — type aliases, generics, classes, opaque types — into the Input panel. Click Load Sample to try a generic-heavy demo with exact object types.
2. Click Format. The formatter rewrites brace placement and indentation client-side and emits one statement per line.
3. Review the output. Confirm exact object types, opaque types, and class methods are readable.
4. Copy the result. Click Copy to paste into your editor, a PR description, or a GitHub issue.

Side-by-side: dense input vs formatted output

// @flow
type User={|+id:number,+name:string,email:?string,roles:Array<'admin'|'user'>|};
type Result<T,E=Error>={|ok:true,value:T|}|{|ok:false,error:E|};
opaque type UserId:number=number;
function fetchUser<T:UserId>(id:T):Promise<Result<User>>{return fetch(`/api/users/${(id:any)}`).then(r=>r.json()).then((value:User)=>({ok:true,value})).catch((error:Error)=>({ok:false,error}));}
class Cache<K,V>{store:Map<K,V>=new Map();get(k:K):?V{return this.store.get(k);}set(k:K,v:V):void{this.store.set(k,v);}}
const u:User={id:1,name:'Jane',email:null,roles:['admin']};

// @flow
type User = {| +id: number, +name: string, email: ?string, roles: Array<'admin' | 'user'> |};
type Result<T, E = Error> = {| ok: true, value: T |} | {| ok: false, error: E |};
opaque type UserId: number = number;
function fetchUser<T: UserId>(id: T): Promise<Result<User>> {
  return fetch(`/api/users/${(id: any)}`).then(r => r.json()).then((value: User) => ({ ok: true, value })).catch((error: Error) => ({ ok: false, error }));
}
class Cache<K, V> {
  store: Map<K, V> = new Map();
  get(k: K): ?V {
    return this.store.get(k);
  }
  set(k: K, v: V): void {
    this.store.set(k, v);
  }
}
const u: User = { id: 1, name: 'Jane', email: null, roles: ['admin'] };

Common use cases

• check_circleFormat a Flow file before checking in to a Meta-style monorepo
• check_circleReformat dense Flow type definitions copied from a GitHub issue or PR
• check_circleClean up auto-generated Flow types from a code generator
• check_circleIndent a React.Component<Props, State> class with many type parameters
• check_circleFormat a .flow.js declaration file for a third-party library
• check_circleReformat Flow types extracted from React Native's internal source
• check_circleBeautify a $FlowFixMe-heavy legacy file before a type-strictness migration
• check_circleFormat a one-line opaque type chain pasted from a Flow Try Out share link

Flow formatter vs Prettier vs flow-format-comments

A pretty printer is the lightweight option — it preserves token order and only adjusts whitespace. Prettier with the babel-flow parser goes further: it parses the file, applies width-aware re-printing, and normalises quote style, trailing commas, and arrow-function parens. flow-format-comments (and similar tools) target a narrow problem: converting Flow comment-syntax types (/* :T */) into native syntax for files that need to ship to environments without a Flow stripper. Use this online tool for a one-off readability pass; use Prettier for project-wide enforcement.