What is a GraphQL formatter?

A GraphQL formatter takes GraphQL text and rewrites it in one clean, even style, with correct indentation and spacing. This tool uses Prettier, which formats GraphQL the same way it formats other languages, so your schemas and queries always look consistent.

How do I format GraphQL?

Paste your GraphQL schema or query into the input box and click Format. The clean version appears below. Click the copy button to copy it, or download it as a .graphql file. You can set the indent before formatting.

Does it format schemas and queries?

Yes. It handles both GraphQL schema definitions (type, input, enum, interface, and so on) and operation documents (query, mutation, and subscription). Paste either one and it lays it out in the same even style.

Will it change my field or type names?

No. The formatter only changes indentation, spacing, and line breaks. Your types, fields, arguments, and directives stay exactly as written, so the schema or query means the same thing after formatting.

Why does my GraphQL fail to format?

The formatter needs valid GraphQL. If it reports an error, there is usually a syntax problem, such as a missing brace, a stray comma, or an unclosed string. Fix the spot it points to and format again.

Is my GraphQL kept private?

Yes. The formatter runs entirely in your browser. Your GraphQL is never uploaded to a server or saved anywhere, so you can safely paste in a schema from a private project. Once the page has loaded you can even use it offline.

GraphQL Formatter and Beautifier

Paste a GraphQL schema or query and get it back clean and easy to read. The formatter is Prettier, running in your browser, so your GraphQL stays on your device.

Indent

Format uses Prettier, the standard GraphQL formatter.

Result

What the GraphQL formatter does

The formatter reads your GraphQL and rewrites it in a clean, even style. It fixes indentation, tidies spacing, and lines up fields and arguments so a schema or query is easy to scan. It changes only the layout, never the types, fields, or operations themselves.

Why use our GraphQL formatter

·Free. No signup, no paywall, no limits.
·Runs in your browser. Formatting happens locally, so your GraphQL is never uploaded.
·Schemas and queries. One tool for schema files and for query, mutation, and subscription documents.
·Standard style. Output uses Prettier, the same formatter many GraphQL projects already run.
·Syntax highlighting. The editor keeps line numbers and lets you collapse and expand blocks.

How the GraphQL formatter cleans up code

Format

Rewrites your GraphQL with Prettier, the standard GraphQL formatter. It fixes indentation and spacing so schemas and queries are even and easy to read.

Beforetype Query{me:User posts:[Post!]!}After

type Query {
  me: User
  posts: [Post!]!
}

Schemas and queries

Works on both GraphQL schema files (type, input, enum, and interface definitions) and operation documents (query, mutation, and subscription).

BeforeSchema or query, any layoutAfterOne clean, even style

Indentation

Choose 2 or 4 spaces per level. Two spaces is the common GraphQL default, but you can pick whichever matches the rest of your project.

BeforeMixed or no indentationAfterEven, consistent indentation

When to format GraphQL

A formatter helps whenever you have GraphQL that is hard to read or does not match your project's style. These are the cases that come up most:

·Cleaning up a schema. Reformat a schema file so types and fields are even and easy to scan.
·Reading a query. Lay out a long query or mutation so you can follow the fields it asks for.
·Cleaning up pasted GraphQL. Fix the layout of GraphQL copied from docs, a tool, or a chat.
·Preparing an example. Make a schema or query neat before you share it or add it to docs.

Where to dig deeper into GraphQL

If you are still getting comfortable with schemas, types, and queries, the learn section on graphql.org is a friendly place to start. For the fine print, the GraphQL specification sets out the exact syntax, which is the same syntax this formatter parses.

The clean layout itself is the work of Prettier, which formats GraphQL alongside many other languages.

If you work across formats, these formatters run the same way, right in your browser:

Frequently asked questions

What is a GraphQL formatter?: A GraphQL formatter takes GraphQL text and rewrites it in one clean, even style, with correct indentation and spacing. This tool uses Prettier, which formats GraphQL the same way it formats other languages, so your schemas and queries always look consistent.
How do I format GraphQL?: Paste your GraphQL schema or query into the input box and click Format. The clean version appears below. Click the copy button to copy it, or download it as a .graphql file. You can set the indent before formatting.
Does it format schemas and queries?: Yes. It handles both GraphQL schema definitions (type, input, enum, interface, and so on) and operation documents (query, mutation, and subscription). Paste either one and it lays it out in the same even style.
Will it change my field or type names?: No. The formatter only changes indentation, spacing, and line breaks. Your types, fields, arguments, and directives stay exactly as written, so the schema or query means the same thing after formatting.
Why does my GraphQL fail to format?: The formatter needs valid GraphQL. If it reports an error, there is usually a syntax problem, such as a missing brace, a stray comma, or an unclosed string. Fix the spot it points to and format again.
Is my GraphQL kept private?: Yes. The formatter runs entirely in your browser. Your GraphQL is never uploaded to a server or saved anywhere, so you can safely paste in a schema from a private project. Once the page has loaded you can even use it offline.