Flow Formatter
Format Flow typed JavaScript with this Flow Formatter. Paste code with type aliases, exact object types, annotated functions or the @flow pragma and the tool reflows it token by token with two space indentation, spaced type annotations and operators, semicolons at statement ends and tight exact object braces. Useful for developers maintaining Flow code bases who want clean snippets for reviews, migrations and documentation.
Frequently asked questions
How does the Flow Formatter work?
It splits your code into tokens such as braces, semicolons, operators, strings and comments and rebuilds the layout from them. Blocks are indented by two spaces, statements end with semicolons and operators get consistent spacing.
How are exact object types formatted?
Exact object types keep their bars directly against the braces with a space inside, for example type Props = {| name: string, age: number |}. Spaces after colons and commas inside the type are normalized.
Is the @flow comment kept?
Yes, the // @flow pragma and all other line and block comments are preserved. A line comment always ends its line, so the following code starts on a new line.
Does the formatter type check my code?
No, it neither runs Flow nor validates syntax, so it also formats incomplete snippets. Run flow check in your project to find type errors.
Are generics and type parameters preserved?
Yes, angle brackets in types such as Array<string> or Map<K, V> are tracked so they are not mistaken for comparison operators. Spacing after commas inside them is normalized.
Can I change the indentation width?
No, the output always uses two spaces and there are no style options. This keeps formatting consistent between runs and between team members.
Are strings changed?
No, string literals, template literals and regular expressions are copied exactly as written. Only whitespace between tokens is changed.
Why is the output fenced as javascript?
Flow is typed JavaScript, so the result is returned as a Markdown code block marked javascript, which most highlighters render correctly. Copy the lines between the fences for your .js or .flow file.
Will formatting change what my code does?
The tool only rearranges whitespace and adds semicolons at statement ends. Check the result if your code depends on lines without semicolons that start with a parenthesis or bracket.
How much code can I format?
Up to 5 MB of code per run; larger input is rejected with a message. The result is identical to the Flow option of the Code Formatter.