GraphQL Formatter

Client-sideNo sign-upFree

Format and validate GraphQL queries, mutations, and schemas.

Quick facts

Category
Formatters & Beautifiers
Best for
Cleaning up a GraphQL query copied from browser dev tools or an API log before reviewing it
Input
✓ Valid GraphQL - formatted
Formatted output
query GetUser($id: ID!) { user(id: $id) { id name email posts(first: 5) { edges { node { id title } } } } }
15 lines
Formatting is done entirely in your browser by parsing the document into an AST with the graphql reference library and printing it back out - nothing is sent to any GraphQL endpoint, and no query is ever executed. Need to format the JSON response instead? Try the JSON Formatter.
In-content slot
Was this tool helpful?
On this page

Overview

Paste a GraphQL query, mutation, subscription, or schema definition and get it parsed and printed back out with consistent, canonical formatting - indentation, brace placement, and argument layout all normalized. Formatting is powered by the official graphql reference library's parse() and print() functions: your document is parsed into a full AST and printed back out, so the result is always structurally valid GraphQL, not a best-effort regex reformat. Because parsing happens for real, this also catches genuine syntax errors - a missing brace, an unterminated string, an invalid token - and reports them with the exact line and column. Nothing is executed and no request is ever sent to a GraphQL endpoint; this only parses and prints the document you paste.

Best for: Cleaning up a GraphQL query copied from browser dev tools or an API log before reviewing it

How to use this tool

  1. Paste a GraphQL document. A query, mutation, subscription, fragment, or schema definition.
  2. The document is parsed into an AST. The graphql library's parse() builds a real syntax tree, catching genuine syntax errors.
  3. The AST is printed back out. print() renders the tree with canonical, consistent indentation and spacing.
  4. Copy the formatted result. The output is guaranteed structurally valid GraphQL, not a guessed reformat.

Why use this tool

Real parsing, not regex

Uses the official graphql npm package's parser, the same one GraphQL servers and tools rely on.

Catches real syntax errors

A malformed document is rejected with a precise line and column, not silently mangled.

Never executes or sends anything

Only parse() and print() are used - no query is ever sent to any endpoint.

Fully client-side

Parsing and printing both happen in your browser; nothing you paste is uploaded.

Frequently asked questions

No. This tool only parses your document into a syntax tree and prints it back out with consistent formatting. It never connects to any GraphQL endpoint and never executes an operation.

Parsing fails and the tool reports the error message along with the line and column where it was found, using the same parser errors a GraphQL server would produce.

Yes - the graphql library's parser handles the full GraphQL language, including type definitions, interfaces, and directives, not just executable queries and mutations.

Yes - GraphQL and JSON are different languages with different grammars. This tool parses and prints GraphQL's own query language; use the JSON Formatter for JSON request/response bodies.

Explore more free tools

Formatters, converters, validators, and generators - all free and running entirely in your browser.

Browse more tools