GraphQL Query Formatter
Format GraphQL queries
What Is This Tool?
The GraphQL Query Formatter reformats a raw or minified GraphQL query or mutation into an indented, readable form, or collapses it down to a single compact line. It works by tracking brace and parenthesis nesting depth as a best-effort reformatter, making cramped or copy-pasted queries much easier to read. Everything runs locally in your browser.
How to Use
Paste a GraphQL query or mutation.
Click Format to indent it, or Minify to collapse it to one line.
Copy the result.
Features
- Indents nested selection sets by tracking brace depth
- Minify mode collapses whitespace into a single compact line
- Works on queries, mutations, and fragments alike
- Copy the formatted or minified result with one click
- 100% client-side — queries are never sent anywhere
Examples
Input:
query { user(id: 1) { id name posts { id title } } }
Formatted output:
query {
user(id: 1) {
id name posts {
id title
}
}
}
Common Use Cases
- Making a minified query copied from network traffic readable again
- Tidying up a hand-written query before sharing it with a teammate
- Shrinking a query for a request payload with Minify
- Reviewing the structure of a deeply nested query
Frequently Asked Questions
Does this tool fully parse the GraphQL grammar?
No. This is a best-effort reformatter that indents based on brace and parenthesis nesting depth, not a complete GraphQL parser. It handles typical queries, mutations, and fragments well, but unusual formatting or embedded comments may not indent perfectly.
Does it validate that my query is correct GraphQL?
No. It only reformats whitespace and structure; it doesn't check field names, types, or query validity against a schema.
Can I format mutations and subscriptions too?
Yes. The formatter works the same way regardless of the operation keyword (query, mutation, subscription), since it only reacts to braces, parentheses, and commas.
What does Minify do?
Minify collapses all whitespace runs down to single spaces and removes extra spacing around braces, parentheses, commas, and colons, producing a compact single-line version suitable for embedding in a request payload.
Will variables and directives be handled correctly?
Variable definitions (in parentheses) and directives (like @include) are preserved as-is since the formatter doesn't rewrite tokens, only inserts line breaks and indentation around braces and commas.
Is my query sent to a server?
No. All formatting and minifying happens locally in your browser using JavaScript. Nothing is uploaded anywhere.