GraphQL Formatter

How to Use

1. Paste your GraphQL query, mutation, subscription, or SDL schema into the input area, or click Load sample to start from an example.
2. Click Format to beautify, Minify to compress, or Validate to check syntax only.
3. Switch indent between 2 and 4 spaces — the default 2 matches graphql-js native output.
4. Click Copy or Download .graphql to take the result with you. Press Cmd/Ctrl + Enter to format from the keyboard.

Worked Examples

Before formatting

query GetUser($id:ID!,$withPosts:Boolean!){user(id:$id){id name email posts @include(if:$withPosts){...PostSummary}}} fragment PostSummary on Post{id title publishedAt}

After formatting

query GetUser($id: ID!, $withPosts: Boolean!) {
  user(id: $id) {
    id
    name
    email
    posts @include(if: $withPosts) {
      ...PostSummary
    }
  }
}

fragment PostSummary on Post {
  id
  title
  publishedAt
}

SDL schema

type Post {
  id: ID!
  title: String!
  publishedAt: DateTime
  author: User!
}

type Query {
  post(id: ID!): Post
  posts(authorId: ID, limit: Int = 20): [Post!]!
}

Why Format GraphQL?

Consistent GraphQL formatting matters for code review, schema diffs, and storing operations in .graphql files. Minified queries shrink wire payloads when you cannot rely on persisted queries; pretty-printed queries are easier to scan in PRs. Validating a query in isolation — before piping it to an endpoint — surfaces a typo in a fragment name in seconds rather than after a round-trip.

Behind the Scenes

This tool runs graphql-js (the reference implementation maintained by The GraphQL Foundation) entirely inside your browser. parse() builds an AST from your text and reports the first syntax error with line and column. print() serializes the AST back to canonical GraphQL. stripIgnoredCharacters() removes every token the spec marks as ignored — that is the minified form. Nothing is sent anywhere, and there is no server round-trip.