GraphQL Beautifier

GraphQL Beautifier – Format Queries and Schemas

GraphQL operations copied from network logs, client code, or API explorers often arrive on a single line. The GraphQL beautifier formats them into a clean, nested layout that shows exactly which fields are selected at each level.

What it formats

• Operations – queries, mutations, and subscriptions with variables and default values.
• Fragments – named fragments and inline fragments (... on User).
• Arguments – input objects and lists, broken across lines when they get long.
• Directives – @include, @skip, @deprecated, and custom directives.
• Schema definitions (SDL) – types, interfaces, unions, enums, input types, scalars, and descriptions in block strings.

Several operations and fragments in one document are separated by a blank line.

How to use it

Paste your GraphQL document, pick indentation and line width, and copy the result. The Sample button loads a minified query with variables, pagination fields, and a fragment so you can see the transformation. Syntax errors — a missing closing brace or a misplaced colon — are reported with their position.

Why format GraphQL?

Readable operations make it easy to see over-fetching, review which fields a client depends on, and compare two versions of a query. Formatted SDL files produce cleaner schema diffs, which matters when you check for breaking changes before deploying an API.

Tips

Commas are optional in GraphQL, and Prettier removes them between fields where they are not needed. Variable definitions keep their types and default values. Comments starting with # are preserved.

Related tools

Working with the JSON responses? Format them with the JSON Beautifier or explore them in the JSON Viewer. Resolver code can be formatted with the JavaScript Beautifier or TypeScript Beautifier.