GraphQL Formatter
Format & beautify GraphQL queries, mutations and schemas with Prettier — live, with precise code-frame errors and stats.
About this ToolHow it works, benefits & use casesTap to collapse
Tidy up GraphQL operations and schemas with Prettier’s graphql parser, running entirely in your browser. Paste a query, mutation, subscription, or a schema definition (SDL) and it reformats live into consistent, properly indented GraphQL — selection sets, arguments, variable definitions, fragments, and type definitions all laid out the same way every time. Two controls let you tune the layout: a print width that targets a maximum line length and a tab width for the indentation. Because it parses the document, an invalid operation is reported with a precise line and column and a code-frame snippet with a caret pointing at the problem, rather than silently producing broken output. A before/after line and byte count appears below, and an "already formatted" confirmation shows when nothing needed changing. No upload, no sign-up.
How to Use
- 1Set the print width and tab width in the Options panel.
- 2Paste your GraphQL into the input box — a query, mutation, or schema — or click Load example to load a sample query plus a type definition.
- 3The formatted GraphQL regenerates live as you type or change options.
- 4Press Format GraphQL to confirm; any error appears with its line, column, and a caret code-frame.
- 5Copy the formatted GraphQL, download it as formatted.graphql, or share the URL with your input and options encoded in it.
Key Benefits
- Powered by Prettier’s graphql parser for consistent operation and schema formatting
- Handles queries, mutations, subscriptions, fragments, and SDL type definitions
- Print width and tab width controls to match your style
- Parser-based errors with line, column, and a caret code-frame snippet
- Before/after line and byte stats, plus an "already formatted" confirmation
- Live reformatting as you edit, with a shareable URL
- Runs entirely in-browser — your queries and schemas are never uploaded
Common Use Cases
- Cleaning up a query copied from a client, gist, or network inspector
- Standardising GraphQL operation formatting before committing it
- Reformatting a schema (SDL) file for readability and consistent indentation
- Tidying generated or concatenated GraphQL documents into readable form
- Reviewing how Prettier would lay out a deeply nested selection set
Options
0 characters · live · query, mutation or schema
Paste GraphQL above to format it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- GraphQL Schema ValidatorValidate GraphQL schema definitions
- GraphQL Query BuilderBuild GraphQL queries and mutations visually
- Code Block FormatterFormat code blocks for Markdown
- cURL to Code ConverterConvert cURL commands to code in various languages
- JSON Path FinderFind and test JSON paths
- OpenAPI Spec ViewerView and explore OpenAPI/Swagger specifications
Yes. The graphql parser handles executable documents — queries, mutations, subscriptions, and fragments — as well as schema definition language (SDL) with type, interface, enum, and input definitions. Paste either and it reformats consistently.
You can set the print width, which is the line length Prettier targets before wrapping, and the tab width, which controls how many spaces each indentation level uses. Together they shape how compact or spread out the formatted GraphQL looks.