GraphQL beautifier - format GraphQL in your browser
GraphQL - schemas (`type User { ... }`), queries (`query GetUser { ... }`), mutations, fragments. The beautifier uses Prettier with the graphql parser (official, based on the reference GraphQL parser).
In Gentle mode it unifies indentation, field layout, argument formatting. Short queries stay on one line (`{ user(id: 1) { name } }`), long ones break line by line. Arguments wrap once they exceed `printWidth` (100 chars).
Accepts `.graphql`, `.gql`. Supports GraphQL SDL (schema definition language) and GraphQL operations (queries/mutations/subscriptions).
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five GraphQL situations:
- Schema definition. Your `schema.graphql` grows to 500 lines - beautify for consistency.
- Generated SDL. `@nestjs/graphql` generates SDL from decorators - ugly, beautify.
- Queries from Apollo client. Export query via `apollo extract` - paste, beautify.
- Fragment library. Files with shared fragments - unify.
- Schema diff. Before comparing two schema versions - beautify both, easier diff.
Questions and answers
Yes - Prettier formats directives normally: `field: String @auth(role: "ADMIN")` with spaces. Arguments wrap if they exceed printWidth.