GraphQL Beautifier
Format Messy GraphQL Queries Instantly
Need to use GraphQL Beautifier right now?
A GraphQL query copied from browser dev tools is usually minified — this restores readable structure instantly.
Formatted query
query GetUser($id: ID!) {
user(id: $id) {
name
email
posts {
title
}
}
}Uses the real graphql-js parser, so it validates syntax while reformatting — not just a text reindenter.
Features
- Runs entirely in your browser
- Privacy-first — your data is never uploaded
- Real-time, instant results
- 100% free, no sign-up required
- Works on desktop, tablet, and mobile
- No installation needed
Who uses this tool?
About GraphQL Beautifier
A GraphQL query copied from a network tab or a minified client bundle is often crammed onto one line, making its actual field selection structure hard to follow. This tool formats it using the genuine `graphql-js` reference library — the same parser that powers GraphQL.js servers and most JavaScript GraphQL tooling — rather than a naive text reindenter.
Because it's a real parser, your query gets validated as proper GraphQL syntax in the process: invalid queries are caught with a clear error rather than being silently reformatted into something that looks plausible but wouldn't actually execute. Valid queries, mutations, subscriptions, fragments, and variable definitions all format correctly with standard GraphQL indentation conventions.
This is useful for reviewing a query pulled from browser dev tools, debugging a GraphQL request before pasting it into a bug report, or reformatting a query pasted from documentation or a colleague's message into a consistent, readable style.
How it works
- Paste your GraphQL query. A query, mutation, subscription, or fragment.
- Parsing and validation run automatically. Uses the genuine graphql-js parser.
- Copy the formatted result. Standard, readable GraphQL indentation.
Examples
Formatting a one-line query
Input
query GetUser($id: ID!) { user(id: $id) { name email } }Output
A multi-line, properly indented GraphQL query