GraphQL Formatter
FormattersFormat GraphQL queries, mutations, subscriptions, and schema SDL with the official graphql-js printer. Line-precise error messages. 100% browser-based.
About GraphQL Formatter
The GraphQL Formatter is powered by the official `graphql-js` library's `parse` + `print` pipeline — the same canonical formatter used by Apollo Studio, GraphQL Playground, and `graphql-ws`. It formats queries, mutations, subscriptions, fragment definitions, inline fragments, and Schema Definition Language (SDL) with consistent indentation and field alignment. Because it uses the official parser directly (not a third-party formatter), error messages include exact line and column information. All processing is synchronous and runs in the browser without any server round-trip.
Features
- ✓Powered by the official graphql-js `parse` + `print` pipeline — the canonical GraphQL formatter
- ✓Formats all GraphQL document types: queries, mutations, subscriptions, SDL
- ✓Handles fragment definitions, inline fragments, and spread operators
- ✓Formats directives (@deprecated, @include, @skip, custom directives)
- ✓Formats variables, input types, enums, interfaces, unions, and scalars in SDL
- ✓Built-in validation with line-and-column-precise parse error messages
- ✓Consistent indentation and field alignment matching Apollo/Playground conventions
- ✓Syntax-highlighted editor for both input and output
- ✓One-click clipboard copy of formatted output
- ✓Real-time byte-savings stats (input vs output size)
- ✓Language picker — instantly switch to JSON, YAML, or 20+ other formatters
- ✓Mobile-responsive layout with a dedicated Format button
- ✓100% client-side — your schemas and queries never leave the browser
Common Use Cases
- Formatting GraphQL queries before pasting into Apollo Client or urql codegen
- Normalising SDL schema files before committing to source control
- Debugging malformed GraphQL queries with line-precise parse error messages
- Formatting GraphQL mutations and subscriptions for documentation or tutorials
- Cleaning up auto-generated GraphQL from schema introspection or code-first generators
- Preparing readable schema SDL for pull requests and design reviews
Frequently Asked Questions
QWhich GraphQL specification does this support?
The official GraphQL June 2018 and October 2021 specifications, as implemented by graphql-js 16.x — including SDL, schema extensions, @defer/@stream directives, and all standard built-in types.
QCan it format SDL (schema definitions)?
Yes — type definitions, input types, enums, interfaces, unions, scalars, directives, schema extensions, and `extend type` declarations are all formatted correctly.
QIs my schema or query sent to a server?
No. All formatting runs locally in your browser synchronously. Nothing is transmitted to any server.
QWhat does the formatter do with fragments?
Named fragment definitions and inline fragments are formatted with the same indentation and field alignment as regular selections. Spread operators (...FragmentName) are preserved on their own lines.