Format GraphQL Online Free — Beautify Queries, Mutations & Schemas

GraphQL queries can get complex — deeply nested selections, fragments, inline directives, and variable definitions. Inconsistent formatting makes them hard to read and compare. Most GraphQL clients and playgrounds have built-in formatters, but if you're working with raw query strings or schema definitions outside a client, a browser formatter is the fastest option.

This page covers how to use our free online formatter to clean up GraphQL queries and schema definitions, with no install required.

What GraphQL Constructs the Formatter Handles

The formatter uses Prettier's GraphQL parser, which understands the full GraphQL specification. It handles:

• Query and mutation operations — field selections, nested types, aliases
• Schema Definition Language (SDL) — type definitions, input types, enums, unions, interfaces
• Fragments — fragment definitions and inline fragment spreads
• Directives — @include, @skip, and custom directives
• Variables — variable declarations and type annotations
• Subscriptions — formatted the same as queries and mutations

How to Format a GraphQL Query

1. Open the code formatter.
2. Select GraphQL from the language dropdown.
3. Paste your query, mutation, or schema definition.
4. Click Format Code.

The output is consistently indented GraphQL with proper field alignment, argument formatting, and directive placement.

Common formatting applied:

• Each field selection on its own line
• Arguments indented when they span multiple lines
• Opening braces on the same line as the operation type
• Consistent spacing around colons and equals signs

Sell Custom Apparel — We Handle Printing & Free Shipping

Formatting GraphQL Schema Definitions (SDL)

Schema Definition Language is the most common place where formatting matters long-term. A large SDL file with dozens of types benefits enormously from consistent formatting for readability and diffing.

Example before formatting:

type User{id:ID! name:String! email:String! posts:[Post!]!}

After formatting:

type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}

Each field on its own line, proper spacing around colons — standard SDL formatting that matches what GraphQL tooling expects.

GraphQL Formatting in IDEs vs Online

Most GraphQL IDEs (GraphiQL, Apollo Studio, Insomnia) have a "Prettify" button that does the same thing locally. Use the online formatter when:

• You're working with a raw query string in a JavaScript file that you want to inspect separately
• You're reviewing a schema in a PR outside your IDE
• You want to quickly format a query copied from documentation
• You're on a machine without GraphQL tooling installed

Frequently Asked Questions

Does it support introspection query JSON?

No — introspection results are JSON, not GraphQL SDL. Use the JSON formatter (select "JSON" from the language dropdown) for those.

Can it format GraphQL with custom scalars?

Yes. Custom scalars are declared in the SDL and the formatter treats them like any other type declaration.

What about GraphQL persisted queries?

Persisted queries are stored as strings. Paste the query string (not the JSON wrapper) into the formatter for clean output.