How to use the graphql formatter
- Paste your GraphQL query, mutation or fragment into the text area.
- Choose an indent size of 2 or 4 spaces from the dropdown.
- The formatted output appears instantly as you type or paste.
- Copy the result using your system clipboard shortcut.
How the graphql formatter works
The formatter reads your input character by character and splits it into tokens: names, punctuation like braces and parentheses, quoted strings, block strings (delimited by triple quotes), numbers and comments starting with #. Commas are insignificant in GraphQL, so they are dropped while reading and put back only where they help readability. Once tokenized, the tool walks through the list and emits each token with the correct whitespace.
Opening braces { of a selection set are preceded by a space and followed by a newline plus increased indentation, and each field, fragment spread or inline fragment goes on its own line. Closing braces decrease the indentation before being printed on their own line. Braces inside arguments are treated as inline input objects and printed as { x: 1 }. If an opening or closing bracket has no partner, the tool reports an error instead of producing broken output. Type definitions such as type, enum, input and union are formatted the same way, with a blank line between top-level definitions.
Formatting rules reference
Every formatting decision follows a small set of rules that match common GraphQL style. The table below summarizes how constructs are handled when you format a GraphQL query.
| Construct | Rule |
|---|---|
| Operation keyword | Printed as-is, followed by a space if a name or brace follows |
Selection set { } | Space before {, newline after, indent contents, newline before } |
| Fields and fragment spreads | One per line inside a selection set |
Arguments (a: 1) | No space after (, one space after each colon, , between arguments, no space before ) |
| Variable definitions | Same parenthesized style as arguments, including defaults such as $n: Int = 5 |
| Lists and input objects | Kept inline as [1, 2] and { x: 1 } |
Directives @skip | Space before the @, no space after |
| Commas | Source commas are discarded; commas are added between arguments, list items and object fields |
| Strings | Preserved exactly, including any braces inside them |
| Comments | Placed on their own line at the current indentation level |
| Top-level definitions | Separated by one blank line |
Practical use cases for a graphql prettifier
When working with APIs, queries often start as single-line strings copied from network logs or minified build outputs. A graphql prettifier turns those dense strings into readable multi-line operations that are easier to debug and review. Teams that store queries in configuration files benefit from consistent formatting across every file.
If you are preparing documentation or writing tutorials, clean queries help readers understand the structure at a glance. Developers moving between projects that use different indent sizes can switch between two and four spaces instantly. For workflows that involve converting API responses into types, pairing this tool with a json to typescript converter keeps the whole pipeline tidy.
Common mistakes and edge cases
The most frequent error is unbalanced braces. Because GraphQL relies heavily on nested selection sets, a missing closing brace changes the meaning of the entire document. This graphql beautifier checks that every brace, bracket and parenthesis has a partner before emitting output and stops with a clear message if they do not match. It also reports unterminated strings and characters that are not valid in GraphQL.
Another edge case involves strings that contain brace characters. A naive formatter might treat a brace inside a string literal as a structural token, breaking the output. The tokenizer used here tracks whether it is inside a quoted string or block string and leaves those characters untouched. Comments that appear mid-line are moved to their own line to keep the selection set aligned. Long argument lists are not wrapped onto several lines, so a very long field call stays on one line.
Worked examples
| Example | Input | Result |
|---|---|---|
| Simple query | GraphQL query: query{user(id:1){name,email}}; Indent size: 2 | query { / user(id: 1) { / name / email / } / } / |
| Query with variables | GraphQL query: query Q($id:ID!,$n:Int=5){u(id:$id){n}}; Indent size: 2 | query Q($id: ID!, $n: Int = 5) { / u(id: $id) { / n / } / } / |
| Mutation with string argument | GraphQL query: mutation{createUser(name:"John {Doe}"){id}}; Indent size: 4 | mutation { / createUser(name: "John {Doe}") { / id / } / } / |
| Fragments and input objects | GraphQL query: query{a:b(i:{x:1,y:[2]}){...F ... on T{z}}}fragment F on T{k}; Indent size: 2 | query { / a: b(i: { x: 1, y: [2] }) { / ...F / ... on T { / z / } / } / } / fragment F on T { / k / } / |
FAQ
Does this graphql formatter send my queries to a server?
No. The tokenization and formatting happen entirely in your browser using JavaScript. Nothing is uploaded anywhere.
Can I format GraphQL mutations and subscriptions too?
Yes. The formatter handles queries, mutations, subscriptions and fragments, and it also formats schema definitions such as type, enum, input, union and directive declarations.
What happens if my query has a syntax error?
The tool checks that braces, brackets and parentheses are balanced and that strings are closed, and it shows an error message if not. It does not perform full grammar or schema validation, so semantic errors may pass through.
What happens to commas?
In GraphQL, commas are optional and act as whitespace. The formatter discards the commas you typed, puts each field on its own line, and writes a comma and space between arguments, list items and input object fields.
Will braces inside string values break the output?
No. The tokenizer recognizes quoted strings and block strings, preserving their contents exactly as written without interpreting internal braces.
What indent sizes are supported?
You can choose between two spaces and four spaces using the dropdown above the output.