GraphQL Formatter
Paste a GraphQL document, whether a one-line query from a network log, a fragment-heavy operation or a schema in SDL, and format it with Prettier’s GraphQL printer, the formatter most JavaScript projects use. Choose spaces or tabs and the line width, or minify the document with graphql-js to the smallest equivalent form. Syntax errors are reported with the line number.
- Runs in your browser
- No sign-up
- Free to use
How to use GraphQL Formatter
- Paste a query, mutation, subscription, fragment or schema.
- Choose indentation and line width.
- Click Format, or Minify for the compact form.
- Copy the result or download it as a .graphql file.
GraphQL Formatter features
Prettier formatting
The same output as Prettier’s GraphQL plugin in your editor.
Queries and SDL
Operations, fragments, variables, directives and type definitions.
Comment-preserving
Comments are kept when formatting.
Minify
graphql-js stripIgnoredCharacters for the smallest valid document.
Options
2 or 4 spaces or tabs; 80, 100 or 120 columns.
Local
Runs in your browser with bundled libraries.
When to use GraphQL Formatter
- Reading a minified query copied from the browser’s network tab.
- Cleaning up queries before committing them.
- Minifying persisted queries to save bandwidth.
- Formatting a schema file to a consistent style.
GraphQL Formatter FAQ
Does formatting change the meaning?
No. Whitespace, commas and line breaks are insignificant in GraphQL, so formatted and minified documents are equivalent to the original.
Why are commas removed?
Commas are optional in GraphQL and treated as whitespace. Prettier writes field lists without them, and minification removes them entirely.
Are comments kept?
When formatting, yes. Minification removes comments, as they are ignored by GraphQL servers.
Can it format schema definitions?
Yes. Types, inputs, enums, interfaces, unions, scalars, directives and descriptions are all supported.
Does it check the query against a schema?
No, only the syntax. Use the GraphQL Query Validator to check fields and arguments against a schema.
Is my query uploaded?
No. Prettier and graphql-js run in your browser.
Formatting GraphQL documents
GraphQL’s syntax ignores whitespace, commas and comments, so the same query can be written on one line or spread over many. Clients and tools often send the compact form, which is what you see in browser developer tools, logs and error reports. Reading such a query, with nested selections, arguments and fragments, is slow until it is laid out with one field per line and indentation for each level.
This formatter uses Prettier’s GraphQL printer, the same code that formats .graphql files and gql template literals in most JavaScript and TypeScript projects. Using it here means a query formatted on this page matches what your editor would produce, so pasting it into a project creates no formatting noise in code review.
Prettier breaks lines according to the line width: short argument lists stay on one line, long ones are split with one argument per line. Indentation can be two or four spaces or tabs. Comments are preserved, and schema definitions, including descriptions written as block strings, are printed in a consistent style.
Minification goes the other way. graphql-js, the reference implementation, provides stripIgnoredCharacters, which removes every character the GraphQL grammar ignores while keeping the document valid: whitespace, commas and comments. The result is useful for persisted queries, URLs of GET requests and anywhere bytes matter.
Both operations parse the document, so syntax errors such as unbalanced braces or a missing colon are reported with their line. The formatter does not check whether fields exist; for that, use the GraphQL Query Validator with your schema.