GraphQL Formatter

Paste a GraphQL query, mutation, subscription, or schema definition and get a cleanly indented, consistently spaced result. Supports SDL type definitions, fragments, and inline comments. Runs entirely in your browser.

Indent
Keep comments
Trailing newline
Mode
Input · GraphQL
Output · Formatted
❤️ Support CodeConverter.net and donate ❤️

Everything you need to know about GraphQL formatting

Why format GraphQL queries and schemas?

GraphQL documents — whether they are client-side queries, server-side resolvers, or schema definition language (SDL) files — quickly become hard to read when written by hand or generated by tools. Inconsistent indentation, cramped argument lists, and missing newlines between type fields make reviewing pull requests painful and onboarding new team members slower. A consistent, auto-formatted style solves all of this the same way Prettier does for JavaScript.

This formatter applies the same conventions used by the official GraphQL reference implementation and by Prettier's GraphQL plugin: two-space indentation (configurable), one field per line inside selection sets, opening braces on the same line as the operation name, and arguments broken across lines when they exceed a readable width. The result is a document that is easy to read in code review, easy to diff in version control, and consistent across your entire codebase regardless of who wrote it.

Supported document types
  • Queries and mutations with variables
  • Subscriptions and anonymous operations
  • SDL — type, interface, union, enum, scalar, input
  • Fragments and inline fragments
100% private & client-side
  • All formatting runs entirely in your browser
  • Your schema and query code never touches a server
  • Safe for proprietary schemas and internal APIs
  • Works offline after first page load
How to use this tool
  • Paste a GraphQL document or upload a .graphql file
  • Choose indent size (2 spaces, 4 spaces, or tab)
  • Click Format GraphQL — output appears instantly
  • Copy to clipboard or download as .graphql
GraphQL operation types
  • query — read data, may be cached
  • mutation — write data, side effects
  • subscription — real-time data over WebSocket
  • SDL type, input, enum, interface
Fragments & reuse
  • Named fragments: fragment F on Type { ... }
  • Inline fragments: ... on ConcreteType { ... }
  • Spread with ...FragmentName in selection sets
  • Ideal for co-location in component-based UIs
Minify mode
  • Collapses whitespace for compact wire transmission
  • Strips comments from the output
  • Useful for embedding queries in HTTP request bodies
  • Toggle between Format and Minify in the options bar

GraphQL vs. REST — when does formatting matter most?

In REST APIs, the query lives in the URL and headers, so there is little to format. In GraphQL, the entire query is a structured text document sent in the request body, and schemas can span thousands of lines. This makes readable formatting far more important — especially when queries are stored in .graphql files alongside your components, checked into version control, and reviewed in pull requests. A consistently formatted query is also easier to diff: when a field is added or removed, the diff shows exactly one changed line rather than a jumble of reformatted whitespace.

The industry standard is to use a formatter like this tool or Prettier's GraphQL plugin in a pre-commit hook (via lint-staged), so every .graphql file committed to your repository is always formatted consistently. This eliminates formatting debates in code review and makes the codebase easier to maintain as it grows.