GraphQL Formatter & Minifier

Format, minify, and validate GraphQL queries and schemas with syntax highlighting.

About This Tool

The GraphQL Formatter & Minifier is a free browser-based tool designed to help developers work with GraphQL queries, mutations, subscriptions, and schema definitions. Whether you are building a new API, debugging a complex query, or preparing documentation, this tool transforms messy or compressed GraphQL into clean, readable code in seconds.

All processing happens entirely in your browser. No GraphQL queries or schema definitions are transmitted to any server, logged, or shared with third parties. This makes the tool safe for use with internal APIs, proprietary schemas, and queries containing sensitive field names or business logic.

The formatter includes a custom GraphQL tokenizer built from scratch that recognizes all major GraphQL constructs: operation definitions (query, mutation, subscription), fragments and inline fragments, type system definitions (type, input, enum, interface, union, scalar), directives, variables, and comments. The output features syntax highlighting with distinct colors for keywords, types, strings, comments, directives, and variables, making it easy to visually parse complex operations.

In format mode, you can choose between 2-space and 4-space indentation to match your project conventions. The formatter places each field on its own line, properly nests selection sets, and preserves comments in their logical positions. In minify mode, all unnecessary whitespace and comments are stripped, producing the most compact representation possible — ideal for reducing payload size in production GraphQL clients or embedding queries in configuration files.

A built-in validator checks for common syntax issues such as mismatched braces, unclosed parentheses, and unexpected characters. Validation results appear inline with specific error messages, helping you identify and fix problems before sending queries to your GraphQL server.

How to Use

  1. Paste or type your GraphQL query, mutation, subscription, or schema definition into the Input panel on the left (or use the Sample button to load an example).
  2. The tool automatically processes your input and displays the result with syntax highlighting in the Output panel.
  3. Switch between Format and Minify modes using the toolbar buttons.
  4. In Format mode, toggle between 2-space and 4-space indentation to match your project style.
  5. Check the validation badge next to the Output label — Valid confirms correct syntax, while Has Issues indicates potential problems with details shown above.
  6. Click Copy to copy the formatted or minified output to your clipboard, or use the keyboard shortcut Ctrl+Shift+C.
  7. Click Clear to reset both panels and start fresh. The size comparison below the panels shows original versus result size in bytes and percentage change.

FAQ

Is my GraphQL data safe when using this tool?

Yes. All formatting, minification, and validation is performed entirely in your browser using JavaScript. No GraphQL queries or schema definitions are transmitted to any server. Your data stays on your machine at all times.

What GraphQL constructs are supported?

The tool supports all major GraphQL constructs including queries, mutations, subscriptions, fragments, inline fragments, type definitions, input types, enum types, interfaces, unions, scalars, directives, variables, and comments (both single-line and block strings).

What does the Minify button do?

The Minify button removes all comments and unnecessary whitespace from your GraphQL, producing the most compact representation. Only spaces required to separate tokens (e.g., between a keyword and a name) are preserved. This is useful for reducing payload size in production clients or persisted queries.

Does the formatter preserve comments?

In Format mode, comments are preserved and placed on their own lines with proper indentation. In Minify mode, comments are removed to produce the smallest possible output.

Can I format GraphQL schema definitions?

Yes. The tool handles both query-side operations (query, mutation, subscription, fragment) and schema-side definitions (type, input, enum, interface, union, scalar, directive, extend). You can paste an entire schema file and the formatter will indent and organize all type definitions.

What validation checks are performed?

The validator checks for matching braces, parentheses, and brackets. It also detects unexpected characters that are not valid in GraphQL syntax. While it does not perform full schema-aware validation (which would require a server-side schema), it catches the most common structural errors that would cause a GraphQL server to reject the query.

What keyboard shortcuts are available?

Press Ctrl+Enter (or Cmd+Enter on macOS) to switch to format mode. Press Ctrl+Shift+C (or Cmd+Shift+C on macOS) to copy the formatted or minified output to your clipboard.

Related Tools