GraphQL Formatter & Beautifier
Format, beautify, and clean up your GraphQL queries and schemas instantly.
Formatted output will appear here...About GraphQL Formatter
GraphQL Formatter is a free online tool that takes minified, compressed, or poorly indented GraphQL operations and restructures them into cleanly formatted code with consistent indentation and proper nesting. Paste a single-line query string pulled from a network inspector, a multi-operation document with fragments and variables, or a full schema definition — the formatter returns readable output instantly.
GraphQL queries accumulate complexity quickly. A small selection set grows into deeply nested field groups with inline arguments, directives, and aliases. When that query ends up on one line in a log file, a curl request, or a client-side constant, it becomes nearly impossible to reason about. The formatter separates every field onto its own line and indents each nesting level, so the structure of the selection is visible at a glance. A separate Minify button strips whitespace and comments in the opposite direction, producing a compact single-line query ready for embedding in source code or sending over the wire.
All formatting runs entirely in your browser using a custom parser built in JavaScript. Nothing you paste — including internal API queries, private schema definitions, or auth tokens in variables — is uploaded, logged, or transmitted to any server. The tool is free, requires no sign-in, and works offline once the page has loaded.
Key Features
Indents all operation types
Handles queries, mutations, subscriptions, and schema type definitions with identical formatting rules — each closing brace is dedented automatically.
Configurable indentation
Switch between 2 spaces, 4 spaces, or hard tabs using the toolbar toggle before you click Format, so the output matches your project style guide.
Minify in one click
The Minify button collapses the query to a single line and strips comments, producing the compact form needed for API calls, curl commands, and inline string constants.
Argument-aware field splitting
Fields that carry parenthesized arguments — such as posts(first: 10, orderBy: DESC) — are kept on one line rather than split at the space, so arguments stay attached to their field.
Download as .graphql file
Save the formatted output directly as a .graphql file for checking into version control or sharing with teammates, without leaving the browser.
100% client-side privacy
The entire format and minify pipeline runs in your browser tab. Confidential queries, internal schema files, and auth headers in variable objects never leave your machine.
How to Use
Paste Your Query
Copy your GraphQL query, mutation, or schema and paste it into the input editor on the left.
Format or Minify
Click "Format" to beautify with proper indentation, or "Minify" to compress for network efficiency.
Copy the Result
Use the copy button to grab your formatted GraphQL, or download it as a .graphql file.
Example
A single-line query with nested fields and arguments is expanded into an indented, human-readable document with each field on its own line.
query GetPost($id: ID!) { post(id: $id) { id title author { name avatar { url } } comments(first: 5) { edges { node { id body } } } } }query GetPost($id: ID!) {
post(id: $id) {
id
title
author {
name
avatar {
url
}
}
comments(first: 5) {
edges {
node {
id
body
}
}
}
}
}Common Use Cases
- arrow_circle_right
Decoding queries from network logs
When you copy a GraphQL request body from browser DevTools or a server log, it arrives as a single compressed line. Formatting it makes the field selection and arguments readable so you can debug the request without eyestrain.
- arrow_circle_right
Code review of API changes
Reviewing a pull request that changes a long query string is near-impossible when the operation is minified. Format both versions to see exactly which fields were added, removed, or reordered.
- arrow_circle_right
Cleaning up generated client queries
Code generators such as graphql-codegen sometimes produce long operation strings in TypeScript files. Paste the raw string here to understand its structure before modifying it by hand.
- arrow_circle_right
Preparing queries for documentation
API documentation and README examples need properly indented code samples. Use the formatter to produce a clean, indented version ready to paste into Markdown or Notion.
- arrow_circle_right
Compressing queries for production builds
The Minify button removes all whitespace and comments from a formatted query, reducing the payload size of GraphQL requests in production apps and making it safe to inline into TypeScript string literals.