GraphQL Formatter & Beautifier - Format GraphQL

About the GraphQL Formatter playground

The GraphQL Formatter beautifies queries, mutations, subscriptions, and schema definitions into clean, consistently indented documents. It aligns selection sets, indents nested fields, and normalizes spacing around arguments, directives, and braces so complex operations are easy to scan. Because it works entirely in your browser, your operations and schema, which can reveal internal API shapes, are never uploaded to any server.

GraphQL is a query language and runtime for APIs that lets clients request exactly the fields they need from a typed schema. Operations describe nested selection sets, often with arguments, variables, fragments, and directives, which become hard to read when written on one line. Formatting restores the indentation that mirrors the shape of the requested data, making queries easier to review, share, and debug, and helping teams keep a consistent style across a schema.

HostedGraphQL Formatter runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

graphql.org— Official website
GitHub— Official spec repository

Messy input

query($id:ID!){user(id:$id){id name posts(first:5){title}}}

Formatted output

query ($id: ID!) {
  user(id: $id) {
    id
    name
    posts(first: 5) {
      title
    }
  }
}

Mutation with fragment

mutation AddPost($input: PostInput!) {
  addPost(input: $input) {
    ...PostFields
  }
}

fragment PostFields on Post {
  id
  title
}

Subscription formatted

subscription OnComment($postId: ID!) {
  commentAdded(postId: $postId) {
    id
    author
    text
  }
}

Schema (SDL) messy input

type Query{user(id:ID!):User posts:[Post!]!}type User{id:ID!name:String!email:String}

Schema (SDL) formatted output

type Query {
  user(id: ID!): User
  posts: [Post!]!
}

type User {
  id: ID!
  name: String!
  email: String
}

Query with directives and aliases

query ($withEmail: Boolean!) {
  primary: user(id: "1") {
    name
    email @include(if: $withEmail)
  }
}

Inline fragment messy input

query{search(q:"x"){__typename ... on User{name} ... on Post{title}}}

Inline fragment formatted output

query {
  search(q: "x") {
    __typename
    ... on User {
      name
    }
    ... on Post {
      title
    }
  }
}

Input

Output

Start typing to auto-process

GraphQL Formatter

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection