UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

GraphQL Formatter

Format and minify GraphQL queries, mutations, and SDL schemas in your browser. No external library needed.

About GraphQL Formatter

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 GraphQL Formatter

  • No GraphQL.js dependency — the formatter is pure JS under 1KB
  • Handles queries, mutations, subscriptions, fragments, and SDL
  • Minify mode is useful for pasting queries into URL parameters or logging
  • Instant client-side processing with no server round-trip
  • 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

How to use GraphQL Formatter

  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
  6. Click Format to pretty-print with 2-space indentation and clean line breaks
  7. Click Minify to collapse the document to a single line with minimal whitespace

When to use GraphQL Formatter

  • 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
  • When formatting SDL schemas exported from an introspection query
  • When preparing a query for documentation, a code review, or a Slack message
  • When minifying a long query to embed in a URL parameter or query whitelist hash

Examples

Format a minified query

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

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

Minify for URL embedding

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

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

Format SDL with description

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

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

Mutation with input type

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

Output: 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

Does this use the official GraphQL.js library?▾
No. The formatter uses a custom lightweight parser to avoid loading the 150KB+ GraphQL.js library. It handles the most common formatting cases without a full AST parser.
Are all GraphQL features supported?▾
Basic queries, mutations, subscriptions, fragments, directives, SDL types, and comments are supported. Very complex edge cases in string escaping or exotic directives may not format perfectly.
What does the Minify button do exactly?▾
It strips comments, collapses all whitespace sequences to single spaces, and removes spaces around {, }, (, ), and : characters to produce the most compact representation.
Are triple-quoted block strings ("""...""") preserved?▾
Yes. The formatter detects triple-quoted strings and preserves their contents verbatim without altering whitespace inside them.
Can I format SDL schema definitions?▾
Yes. SDL with type definitions, interfaces, enums, inputs, and directives formats correctly using the same brace-depth indentation logic.
Is the formatted output valid GraphQL?▾
For well-formed input, yes. The formatter adds whitespace and indentation without changing the semantic content of the document.
How is this different from prettier-graphql?▾
Prettier requires a Node toolchain and bundle. This tool runs in your browser instantly with no install — convenient for one-off cleanup but not a full Prettier replacement.
Does the formatter check that the query is valid against a schema?▾
No. It is purely syntactic — it formats whatever you paste even if a field doesn't exist in your schema. Use a GraphQL IDE for schema-aware validation.

Explore the category

SQL Formatter Format and prettify SQL queries XML Formatter Beautify and minify XML documents YAML Validator & Linter Validate, format, and lint YAML in your browser. Get error messages with line numbers and convert to JSON. RTF to Text Converter Convert Rich Text Format files to plain text in your browser JSON Formatter Format, validate and minify JSON SQL Minifier Minify SQL by removing comments and redundant whitespace safely.
GraphQL vs REST vs gRPC: Pick the Right API Style Three serious API paradigms, three different shapes. We compare schema definition, network footprint, tooling, and which problem each one wa May 2026 · 9 min WebSockets vs REST vs GraphQL: Choosing the Right API Approach REST, GraphQL, and WebSockets each solve a different category of problem. Picking the wrong one adds complexity without benefit. Here is how Feb 2026 · 10 min

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.