GraphQL Formatter

About this tool

The GraphQL Formatter processes GraphQL query language documents and SDL (Schema Definition Language) with a lightweight pure-JavaScript parser that handles indentation based on brace depth, normalizes whitespace, and preserves string literals and comments. The Minify mode removes all whitespace, newlines, and comments to produce a compact single-line query suitable for HTTP GET requests or logging. No heavy GraphQL.js library is needed — the formatter is built from scratch at well under 1KB of logic.

Why use it

• No GraphQL.js dependency — the formatter is pure JS under 1KB so the page loads instantly

• Handles queries, mutations, subscriptions, fragments, and SDL in the same tool

• Minify mode is useful for pasting queries into URL parameters or logging

• Instant client-side processing with no server round-trip

How to use

1. Paste a GraphQL query, mutation, subscription, or SDL schema into the input area
2. Click 'Format' to pretty-print with 2-space indentation and clean line breaks
3. Click 'Minify' to collapse the document to a single line with minimal whitespace
4. Click 'Copy' in the output area to copy the result to your clipboard
5. Click 'Clear' to reset the tool

When it helps

• When cleaning up a minified or auto-generated GraphQL query for readability
• When preparing a query for documentation or a code review
• When minifying a long query to embed in a URL parameter or query whitelist hash
• When formatting SDL schemas exported from an introspection query
• When preparing a query for documentation, a code review, or a Slack message

Examples

query{user(id:"1"){name email posts{title body}}}

query {\n  user(id: "1") {\n    name\n    email\n    posts {\n      title\n      body\n    }\n  }\n}

query GetUser($id: ID!) {\n  user(id: $id) {\n    name\n  }\n}

query GetUser($id:ID!){user(id:$id){name}}

type User{\"\"\"User identifier\"\"\" id: ID!\nname:String!}

type User {\n  """User identifier"""\n  id: ID!\n  name: String!\n}

mutation{createUser(input:{name:"A",email:"a@b.c"}){id name}}

mutation {\n  createUser(input: { name: "A", email: "a@b.c" }) {\n    id\n    name\n  }\n}

Tips

• Long argument lists become readable when each argument lands on its own line — Format does this automatically
• After formatting, look for repeated field selections — those are often candidates for refactoring into a fragment
• When using minified queries in URLs, remember that special characters (spaces, quotes) still need URL encoding
• SDL with descriptions uses triple-quoted strings — the formatter preserves these verbatim including embedded newlines
• If formatting fails on exotic GraphQL features, try minifying first then formatting — round-tripping often resolves edge cases
• Save formatted snippets in a snippet manager — they make great copy-paste examples in API docs

Frequently Asked Questions

Glossary

GraphQL Operation

A top-level GraphQL action — query (read), mutation (write), or subscription (real-time stream). Each operation may be named and may declare variables.

Query

A read operation that requests specific fields from a GraphQL endpoint. Multiple queries can be batched in a single document.

Mutation

A write operation that creates, updates, or deletes server-side data. Mutations execute serially in the order declared.

Subscription

A long-lived operation that streams events over a WebSocket or similar transport, pushing updates to the client when they occur.

SDL (Schema Definition Language)

The textual representation of a GraphQL schema, defining types, fields, interfaces, unions, enums, and directives.

Fragment

A reusable unit of fields. Fragments avoid repeating the same selection set across queries; spread with ...FragmentName.

Directive

A modifier prefixed with @ (e.g. @include, @skip, @deprecated) that adjusts how a field, argument, or type definition is handled.

Block String

A multi-line string delimited by triple double quotes ("""...""") used in SDL for human-readable type and field descriptions.