1. [Home](https://www.toolcomb.com/) 2. [Text Tools](https://www.toolcomb.com/text-tools) 3. GraphQL Formatter # GraphQL Formatter Online Free - Beautify Queries & Schema SDL Free GraphQL formatter and minifier in your browser. Indent braces for queries, mutations, and SDL-style definitions; copy compact or pretty output - client-side only. ### Input GraphQL _query GetUser($id: ID!) { user(id: $id) { id name } }_ Format Minify Clear ### Output _Formatted GraphQL appears here…_ Copy result ## What is an online GraphQL formatter? GraphQL documents are trees written as nested selection sets - braces within braces, arguments with input objects, fragments alongside operations. When tools copy queries as a single line, code review becomes painful and diffs hide field-level changes. An online GraphQL formatter reintroduces vertical structure: each field on its own line, argument lists readable, schema type bodies indented consistently. ToolComb’s formatter is text-only. It does not introspect your production schema, does not run validate against a live endpoint, and does not attach Authorization headers. You paste a query from Apollo Client DevTools or a schema SDL export from codegen, click Format, and read the result locally. That matters when operations reference internal types or PII field names you do not want logged on a third-party SaaS formatter. Brace-driven indentation mirrors how humans sketch GraphQL on whiteboards: open brace, increase indent; close brace, decrease. String literals - including block strings with triple quotes - stay opaque to the indent engine so JSON payloads inside descriptions do not confuse the printer. Minify complements format for persisted query pipelines, error reports, and embedding operations inside JSON config. Collapsing whitespace does not rename fields or strip `@deprecated` directives; it only compacts spaces outside strings. Use this alongside GraphQL validators and your CI schema check. The formatter will not catch illegal selections or unknown arguments - it makes correct text prettier. When syntax is badly broken, output may look odd; fix syntax first in your IDE, then format here for documentation. GraphQL clients colocate operations with UI code, but documentation and schema review boards still want readable standalone documents. Formatting before attaching an operation to a design RFC reduces friction for backend engineers who do not live inside your React repo. The same applies to federation reviews where subgraph teams exchange SDL snippets over email. Persisted query workflows hash the exact operation text. Minifying before hashing is dangerous if your server normalizes differently than you expect - always treat minify output as a proposal, run it through your official registration step, and store the hash your gateway documents. This formatter helps you see what whitespace removal would do without pretending to be your APQ gateway. Mobile clients and bandwidth-sensitive apps sometimes ship smaller operation strings. Minify here gives a quick byte estimate for an operation before you invest in codegen changes. Format mode helps engineers reading crash logs that include query text copied from Apollo Studio stack traces. Schema-first teams generate types from SDL checked into git. When designers or PMs paste draft queries from mockups, formatting aligns those drafts with the indentation style in your schema repo so reviewers can drop them into .graphql files with minimal manual cleanup. That social consistency matters as much as bytes saved on the wire. Subscription operations and live queries share the same textual shape as mutations - selection sets, arguments, and directives. Formatting does not validate that your server implements subscriptions on a given field; it only makes the text you already have easier to read in design docs and on-call runbooks when websocket outages need quick eyeball review of the operation document. ## How to format GraphQL queries and schema snippets Formatting a typical query takes one click. These steps cover fragments, SDL, and minified logs. When mixing operations and schema SDL in one paste, consider splitting them - the same brace rules apply, but very large SDL files are easier to troubleshoot in chunks. 1. **Open the GraphQL formatter** Load the ToolComb GraphQL formatter. Paste a query, mutation, subscription, or schema snippet into the input area - no GraphQL endpoint connection required. 2. **Paste nested GraphQL** Paste from Apollo DevTools, Insomnia, or a flattened one-line operation. String literals and block strings are respected while braces drive indentation. 3. **Click Format** Format inserts line breaks around braces and commas, indents selection sets and input objects, and keeps # comments on their own lines. 4. **Optional Minify** Minify removes non-essential whitespace outside strings for compact logging or embedding in JSON metadata. 5. **Copy result** Copy places formatted GraphQL on the clipboard for documentation, pull requests, or client code constants. ## Before / after: Apollo one-liner to reviewable mutation ### Before A mobile team copies mutation UpdateProfile($input:ProfileInput!){updateProfile(input:$input){user{id displayName avatarUrl}}} from network logs as one line for a bug ticket. The backend engineer cannot see whether avatarUrl was requested intentionally or accidentally left over from a refactor branch. Slack collapses the line anyway, so even monospace paste wraps awkwardly on phones. ### After They paste into the GraphQL formatter, click Format, and get nested braces with updateProfile and user fields each on readable lines. Reviewers spot a missing field in the selection set during code review. They attach the formatted mutation to the ticket, minify a second copy to compare with the persisted query hash in staging, and confirm the hash mismatch came from an extra whitespace difference rather than a field change. Schema SDL exports from codegen benefit the same way - type blocks indent uniformly before committing to a docs repo. Client teams attach formatted operations to API changelog entries so mobile and web squads spot field deprecations without opening IDE plugins. Minified copies help compare APQ registration payloads when debugging hash mismatches between staging and production gateways. ## Practical use cases for GraphQL formatting ### 1. Pull request documentation Attach pretty queries to API change PRs so reviewers see field additions clearly. ### 2. Persisted query registration Minify before hashing if your server normalizes whitespace - verify against your spec. ### 3. Support tickets Support pastes customer queries in readable form without asking for screenshots. ### 4. GraphQL training Instructors format student queries live to teach selection set structure. ### 5. Schema design reviews Format SDL exports so enum and input types align visually in design docs. ### 6. Client code constants Format before embedding gql template strings in TypeScript repos. ### 7. Diff-friendly commits Normalize formatting before committing .graphql files to reduce noisy diffs. ### 8. Insomnia / Postman exports Clean up exported operations after tool upgrades flatten whitespace. ### 9. Federation subgraph SDL Readable type extensions help platform teams review boundary types. ### 10. Error log reproduction Minify/log-expand cycles help compare two failing operations byte-wise. ### 11. Public API reference drafts Technical writers format sample queries before publishing public docs so syntax-highlighting themes wrap consistently. Readable field lists reduce support tickets asking which arguments are required on nested input objects. ### 12. Gateway migration cutovers When moving from REST wrappers to GraphQL, teams paste translated operations side by side. Format mode aligns brace structure so diff tools highlight genuine field changes instead of whitespace noise between legacy and new operation sets. ## GraphQL formatter options compared Tools differ on validation, schema awareness, and whether text leaves your machine. IDE plugins excel when .graphql files live in your repo; browser formatters excel when text arrives from logs, email, or chat without a checkout. Pick based on whether you need schema validation or just readable layout. | Option | Validates ops | Privacy | Best for | | --- | --- | --- | --- | | ToolComb browser formatter | No | Local text | Pretty-print & minify | | GraphQL Playground / Studio | Often, with endpoint | Server sees ops | Interactive API exploration | | Editor-integrated formatter | Varies | Local files | Repo-integrated formatting | | Online formatter SaaS | Varies | Often server-side | Non-sensitive samples | Use endpoint-connected tools when you need validation against a live schema. Use this page when you only need readable text without network calls. Platform teams reviewing federation proposals can format SDL attachments from email without loading each subgraph into Studio. Mobile developers formatting crash-log queries on airport Wi-Fi avoid signing into corporate GraphQL gateways just to pretty-print text for a Slack question. ## Limits and tips - Not a full GraphQL language parser - illegal documents may format without errors. - Very large schemas can be slow - split types across files before pasting. - Some exotic escape sequences inside strings may differ from spec-perfect printers. - Format does not sort fields alphabetically - reorder manually if your style guide requires it. - Minify may still include # comments - strip separately if your persisted query store forbids comments. - Subscriptions and multi-operation documents format as text; execution planning is out of scope. - Field duplication aliases (@include/@skip) format as text only - conditional directive semantics are not validated. - Schema federation directives (@key, @extends) remain in place but are not interpreted during formatting. - Unicode escape sequences inside strings are preserved literally - verify display in your target client UI. ## Privacy: local GraphQL text Operations and schema snippets stay in your browser. ToolComb does not upload GraphQL text for formatting. Queries pasted from production may contain field names revealing business logic - local formatting avoids third-party logging. Clear the editor on shared machines; clipboard history may still retain copied operations. ## Frequently Asked Questions ### Does this tool send queries to my GraphQL API? No. It formats text locally. Your endpoint URL, auth headers, and variables are never involved unless you paste them as plain text yourself. ### Can it format GraphQL schema SDL? Yes for typical type, input, enum, interface, union, and directive blocks with brace bodies. Very large schemas may need splitting for browser performance. ### Will formatting break string literals? The formatter tracks double-quoted strings and triple-quoted block strings so braces and newlines inside strings are not treated as structure. ### Does it validate GraphQL syntax? No. This formatter does not validate GraphQL operations. Severely malformed documents may format oddly, so confirm syntax with your project’s normal validation workflow. ### How are comments handled? Line comments starting with # are preserved. Format keeps them on separate lines when possible. ### Is my schema uploaded? No. Processing stays in your browser tab. ### Can I minify persisted queries? Yes. Minify produces a compact single-line-ish document suitable for many persisted query stores - verify against your server hash pipeline afterward. ### Does it support fragments? Fragment definitions and spreads format with the same brace indentation rules as operations. ### What about subscriptions and mutations? Operation keywords are treated like other tokens; selection sets indent the same way as queries. ### Is the formatter free? Yes. Unlimited local use without registration. ### How are inline fragments formatted? Inline fragments using ... on TypeName follow the same brace and comma line breaks as field selections. Spread fragments (...Name) stay on their own indented lines when commas break selection lists. ### Does minify remove GraphQL comments? Minify collapses whitespace outside strings but keeps # comment text attached to lines. If your persisted query store forbids comments, strip them manually after minify. ### Can I format multiple operations in one document? Yes. Each operation and fragment definition formats with shared brace rules. Very large documents may be easier to split per operation for troubleshooting. Named operations remain named - formatting does not rename them. ### How do variable definitions format? Variable definitions in parentheses stay on the operation signature line or wrap according to brace/comma rules. Complex input types with nested braces indent like selection sets. Verify required vs optional markers ($var: Type! vs $var: Type) after format. ### Is formatted output valid GraphQL automatically? Formatting improves layout only. Validate against the appropriate schema before treating output as production-ready. ### Can I format GraphQL in JSON POST bodies? Extract the query string from the JSON query field first. This tool formats GraphQL text, not entire HTTP JSON payloads. ## Related text tools - [SQL Formatter](https://www.toolcomb.com/sql-formatter) - Beautify SQL from dual-write backends. - [JSON Formatter](https://www.toolcomb.com/json-formatter) - Format variables JSON beside GraphQL ops. - [Diff Checker](https://www.toolcomb.com/diff-checker) - Compare two query versions line by line. - [Markdown Editor](https://www.toolcomb.com/markdown-editor) - Document API examples with live preview. ## Related Tools Discover more free tools that might help with your next task. [Case Converter Convert text between upper, lower, title cases and more Use Tool](https://www.toolcomb.com/case-converter) [HTML ↔ Markdown Converter Convert between HTML and Markdown Use Tool](https://www.toolcomb.com/html-markdown-converter) [Lorem Ipsum Generator Generate placeholder text for design and content Use Tool](https://www.toolcomb.com/lorem-ipsum-generator) [Regex Testing Test and validate regular expressions Use Tool](https://www.toolcomb.com/regex-testing) [Word Counter Count words, characters, and reading time instantly Use Tool](https://www.toolcomb.com/word-counter) [Cron Expression Generator Build and explain crontab schedules in plain English Use Tool](https://www.toolcomb.com/cron-expression-generator) [View All Tools](https://www.toolcomb.com/tools)