GraphQL Formatter Online
Beautify or minify GraphQL queries and schemas instantly in your browser.
When a GraphQL formatter is the right tool
Use this page to beautify or minify a GraphQL document in the browser. Paste a query, mutation, fragment, or type definition (or mix them in one document). The formatted output updates as you type. It is a local pretty-printer, not a schema validator and not a client for a GraphQL API.
Use cases
Cleaning up a query before you share it
Leave the mode on Beautify, pick 2- or 4-space indent, and paste. Load Sample includes a parameterized GetUser query, a fragment, an @include directive, and a small type User definition.
Compacting a document
Switch to Minify when you want a denser one-line-ish document. Comments are already gone after print; remaining # lines would be stripped too.
How formatting works
Input is parsed with parse and rewritten with print. Beautify either keeps the 2-space print as-is or stretches each leading indent group to 4 spaces. Minify then collapses whitespace, except it leaves spaces around =. A syntax error is shown in the output panel instead of a formatted document.
query GetUser($id: ID!, $includeOrders: Boolean = false) {
user(id: $id) {
...UserFields
orders @include(if: $includeOrders) {
id
total
}
}
}
fragment UserFields on User {
id
name
}
type User {
id: ID!
name: String!
}The sample’s opening comment is not in that output. That is expected: the official printer does not emit comments.
What this tool does not do
It does not validate against a server schema, execute operations, or keep comments. For JSON request bodies, use JSON Formatter. Formatting stays in your browser.
How to use GraphQL Formatter
- Choose Beautify or Minify. For Beautify, pick 2- or 4-space indent.
- Paste a GraphQL document, or use Load Sample, and read the live output.
- Copy when the result looks right. Clear resets both sides.
Frequently asked questions
How does GraphQL Formatter work?
The official graphql package parses your document and prints it back. Beautify uses that printer (2-space by default) and, if you pick 4-space indent, expands each leading indent group. Minify prints first, strips leftover # comments, collapses whitespace, and removes spaces around { } ( ) [ ] : , and !. The result updates as you type. Invalid GraphQL shows the parser error in the output.
Are comments, fragments, and type definitions preserved?
Fragments, directives, mutations, and type definitions in a single document are parsed and printed. Comments are not: graphql print drops them, so the sample’s leading # User query line will not appear in Beautify or Minify output. This is a printer, not a schema validator against a remote GraphQL endpoint.
Does Minify remove every space?
No. Spaces around punctuation such as braces, colons, and bangs are removed, but a default argument like Boolean = false keeps the spaces around the equals sign, because = is not in the minify punctuation set.
Does formatting happen as I type? Is my query uploaded?
Yes, the formatted document updates live. Load Sample pastes a short query, fragment, and type definition in one document; Clear empties both sides. Formatting runs in your browser. Nothing is sent to a GraphQL server.
Related tools and guides
References
- Formatting uses the official graphql-js
parseandprintAPIs.printnormalizes whitespace and does not keep comments. - This page does not talk to a GraphQL endpoint or check your document against a live schema.