What is GraphQL Formatter?
A GraphQL Formatter reformats your input for readability without changing its meaning. It parses the source, applies consistent indentation, spacing and casing, and returns a clean copy you can paste back into your project. Paste messy GraphQL query, mutation, or schema; get indented output.
GraphQL Formatter
Beautify and indent GraphQL queries / schemas in your browser. No CDN needed; depth-based indenter.
TLDR
Paste a GraphQL query or schema and click Run. The page walks each character, indenting after `{` and dedenting before `}`. Useful for inspecting flattened queries from API logs.
How to use this tool
- Enter your inputs. Each field is labeled with what it expects.
- Read the result instantly. Numbers update as you type or change inputs.
- Adjust to test sensitivity. Change one input at a time to see what moves the result most.
- Cross-check the formula in the section below if you want to verify the math.
- Copy or screenshot the result for later. The site does not save anything; close the tab and inputs are gone.
About this tool + how it works
This tool runs 100% in your browser - the libraries load from a public CDN and the math runs on your device. Nothing is uploaded to a server. The underlying logic is:
walk chars, indent on { and dedent on } with 2-space steps
You can verify by opening the browser developer tools and watching the Network tab; you'll see no requests fired during normal use beyond the initial page and library load.
Real-world scenarios where this tool helps
Quick inspection
You got a blob of GraphQL from a third-party site - paste, run, read.
Bug hunting
Reformat minified GraphQL so you can step through it in DevTools or follow the logic.
Sharing code
Paste from chat, get clean GraphQL you can drop straight into a file.
Pre-commit cleanup
Run a quick format on a snippet before pasting into a PR or wiki.
What this tool does
- Performs the graphql formatter entirely in your browser - no upload, no API call.
- Loads the formatting / minifying library from a public CDN; library is cached after first use.
- Shows before / after byte count and a savings percentage.
- One-click Copy output and Load sample buttons.
- Works on phones, tablets, and desktops; loads in under a second.
What it does NOT do
- Does not store, log, or send your input anywhere.
- Does not require an account, an API key, or a paid plan.
- Does not validate or compile the code beyond what the formatter checks - syntax errors may produce unhelpful output.
- Does not preserve comments perfectly in every minifier (some minifiers strip them entirely).
Common mistakes and pitfalls
- Pasting code that depends on whitespace (Python, YAML) into a tool that collapses whitespace - that will break.
- Expecting a minifier to make broken code work - bad input gives bad output.
- Comparing the result to a paid tool that has extra optimization passes - this tool does the standard pass.
- Forgetting to click Copy output before navigating away - the output lives only in the page.
Frequently asked questions
Is this graphql formatter free?
Yes - free forever, no signup, no daily limit. Everything runs in your browser.
Where does my code go?
Nowhere. The transform runs entirely in your browser. Nothing is uploaded, stored, or logged.
Does it work offline?
After first load, yes. The CDN-loaded libraries cache in your browser and the page works without a connection.
Is the output exactly the same as my IDE?
Very close - the library is the same one most IDEs use under the hood (js-beautify for HTML/CSS/JS; Terser for JS minification; js-yaml for YAML). Spacing and line-break choices may differ by a few characters versus Prettier.
Will it handle very large files?
Yes up to several megabytes. For 10+ MB inputs the browser may freeze briefly during processing.
Will the minified output break in older browsers?
Minifiers do not introduce new syntax - they just shorten what is already there. If the input ran on Internet Explorer 11, the minified version still does. For modern ES2022+ syntax check your Babel/SWC config separately.
Does the formatter / minifier preserve comments?
Formatter: yes by default. Minifier: depends. Terser drops all comments unless they look like /*! ... */ legal headers. CSS / HTML minifiers strip all comments unless preceded by `!`.
Can I run this on a whole codebase?
Not in one click - this tool processes one file at a time. For a whole codebase use prettier --write . / eslint --fix / terser --compress in your CI. This tool is for quick one-off paste-and-format.
Is the source map preserved when minifying?
No - the tool minifies in place and returns just the minified code. For production builds that need source maps, run Terser in your bundler (Webpack/Vite/esbuild) where the source-map pipeline is wired in.
How does this compare to Prettier?
Prettier is opinionated and reformats more aggressively (line length, trailing commas, quote style). js-beautify is conservative - it preserves most stylistic choices and just fixes indentation + whitespace. Use Prettier for team-wide style consistency; use this for ad-hoc inspection.