CodesBeautify

GraphQL Beautifier

Turn a one line GraphQL query or a cramped schema definition into a properly nested, readable document.

GraphQL
Formatted GraphQL
Runs locally in your browser

About the GraphQL Beautifier

Queries pulled out of a network tab arrive as a single line with no spaces, which makes them almost impossible to read. This page parses the document with a real GraphQL grammar and prints it again with one field per line. Selection sets nest, arguments get a space after each comma, variable definitions and their default values are spaced, and directives stay attached to the field they modify.

Both halves of the language are accepted. Executable documents cover queries, mutations, subscriptions, named and inline fragments, and variable definitions with types like [ID!]!. Schema definition language covers type, interface, union, enum, input, scalar and extend blocks, along with block string descriptions written between triple quotes.

Parsing means validation comes free. A missing closing brace, a stray comma in the wrong place or an unclosed string is reported with the line and column where the parser gave up, so you can fix the document rather than guess. What is not checked is whether the fields exist on your server, since that needs the schema.

The GraphQL spec treats commas as insignificant whitespace, so any commas between fields are dropped from the output. That is intentional and matches what every GraphQL tool prints. If you also need to tidy the JSON response that came back with the query, the JSON Formatter is next door.

How to use

  1. Paste the query, mutation or schema into the left pane. Sample loads a nested query with variables and a fragment.
  2. Choose an Indent width; 2 spaces is the convention in most GraphQL codebases.
  3. If the parser reports an error, jump to the line and column it names and fix the syntax there.
  4. Copy the formatted document into your editor or Download it as a .graphql file.

Common questions

Can it format a schema file and a query in the same paste?
No. A document is either executable or a schema definition. Format them separately, otherwise the parser reports an unexpected token where the two meet.
Why did my commas disappear?
GraphQL counts a comma as whitespace. The printer omits them so the output matches what the official tooling produces.
Does it keep my descriptions and comments?
Block string descriptions in triple quotes are preserved and reindented. Hash comments are kept above the definition they precede.
Will it tell me if a field does not exist?
No. Only syntax is checked. Field and type validation needs your server schema, which this page never sees because it makes no network requests.