⚙ GraphQL Formatter

Format, beautify, or minify GraphQL queries and mutations.

Last updated: June 9, 2026 · By Λ

Input

Output

By Λ · Updated June 9, 2026 · ~3 min read

When you need a GraphQL formatter

You usually do not, until you do. GraphQL queries that lived in your IDE as nicely indented multi-line strings end up minified to one line when they get embedded in code, stored in databases, or logged. When you need to read them back, you reach for a formatter. This tool handles the round trip: paste a minified query, get a clean one. Or paste an indented query and get the compact version for embedding.

What the formatter handles

Queries, mutations, subscriptions
Variables ($name: String!)
Fragments and fragment spreads
Inline fragments (... on TypeName)
Directives (@include, @skip, custom)
Aliases
Comments (preserved)

Validation, briefly

The tool checks for matching braces and basic structure. It does NOT validate against your schema, because that would require uploading the schema (defeats the privacy model). For schema-aware validation, use the GraphiQL or GraphQL Playground tool against your actual endpoint.

How it works under the hood

The page does not embed a full GraphQL parser. Instead it runs a small tokenizer that scans your input into a stream of names, numbers, double-quoted strings, $ variables, @ directives, # comments, the three-dot spread, and punctuation. A printing pass then walks that stream while tracking brace depth: each { pushes the indent deeper, each } pops it back, and commas inside argument parentheses stay on the current line while other separators start fresh ones. Minify is the identical printer with the indent width set to zero. Comments are carried through as their own tokens, which means a # note above a field survives both operations. The output pane also re-renders after every keystroke using the 2-space style; the buttons mainly switch widths or compact the query before copying. Tokenizing and reprinting both run inside the page's own JavaScript, and the text you paste never travels beyond your machine.

Worked examples

Here is a one-line query pulled straight from a log:

query GetUser($id:ID!,$includeOrders:Boolean=false){user(id:$id){id name email orders @include(if:$includeOrders){id total items{name price quantity}}}}

Beautify turns it into this:

query GetUser($id: ID!, $includeOrders: Boolean=false) {
  user(id: $id) {
    id name email orders @include(if: $includeOrders) {
      id total items {
        name price quantity
      }
    }
  }
}

Minify collapses an indented Products query down to:

query Products($first: Int!) {products(first: $first) {id title}}

The minifier keeps one space after each colon, trading a few bytes for a line that stays easy to scan.

Limitations and edge cases

Line breaks are driven by braces and separators, not by field boundaries. Sibling scalar fields such as id name email share one line, which differs from Prettier's one-field-per-line style.
Triple-quoted block strings (""" descriptions) are not recognized as a single token, so SDL documents containing them can come out with odd spacing.
Default values written with = pass through correctly but without surrounding spaces, as in Boolean=false above.
The only structural check is brace balance. A document with matched braces but a misspelled keyword still formats without complaint.
When braces fail to balance, the status bar reports a parse error and the output box is cleared rather than showing a half-formatted guess.

Frequently asked questions

Can formatting change what my query returns?

No. Token order, aliases, arguments, and directives are reproduced exactly as written; only whitespace and line structure change.

Why did the output box suddenly go blank while I was typing?

Reformatting re-runs after each keystroke, so the moment your braces stop balancing mid-edit, the structure check fails and the pane empties. Close the brace and the result reappears.

Does it handle fragments and subscriptions?

Yes. fragment, subscription, and mutation are treated like any other name, and every ... spread is placed on its own line during beautification.

Can it also pretty-print my variables JSON?

Not here; this page only understands GraphQL documents. Paste the variables object into the JSON formatter instead.

For testing actual API calls, see the API tester. For curl translation, see curl-to-code. For testing CORS issues, see the CORS debugging post.