Loading…

About Online GraphQL Formatter

Keep your GraphQL SDL and operations readable and consistent. This online GraphQL formatter uses Prettier’s GraphQL parser to re-indent, wrap and normalize your documents. It runs in the browser when possible and falls back to a server formatter when necessary, so you get reliable output without thinking about the tooling.

What This GraphQL Formatter Does

  • Uses Prettier’s GraphQL parser to apply consistent, community-standard formatting
  • Supports queries, mutations, subscriptions, fragments and full schema SDL (types, interfaces, unions, enums, inputs, directives)
  • Adjustable indentation: choose spaces or tabs and configure indent size (1–8)
  • Optional line-length / wrapping control via a configurable column width
  • Keeps descriptions (`"""…"""`) and inline comments intact while normalizing their layout
  • Validates your GraphQL document structure as part of formatting; invalid syntax will surface errors instead of silently mangling code
  • Hybrid execution: runs Prettier in-browser when available and falls back to a server formatter if required
  • Paste or upload `.graphql` / `.gql` files, then preview, copy or download the formatted result

📝 How to Format GraphQL Online for graphql-formatter

1

Paste or Upload Your GraphQL

Paste your GraphQL schema or queries into the editor, or drop a `.graphql` / `.gql` file. The formatter works for both SDL and operation documents.

2

Adjust Formatting Options

Choose spaces or tabs, set the indent size, and configure your preferred line length. These options are passed to Prettier’s GraphQL formatter.

3

Format, Review & Export

Click Format to apply the changes. Review the result in the preview pane, then copy it back into your editor or download the formatted file.

Technical Specifications

Supported Input

Designed for standard GraphQL schema and operation documents.

TypeExamplesNotes
Schema SDLschema.graphql, schema.gqlTypes, interfaces, unions, enums, inputs, directives, schema definition
Operationsqueries.graphql, app.gqlQueries, mutations, subscriptions and fragments
Extensionsschema extensions in separate filese.g., `extend type Query { … }` blocks

Formatting Engine

Formatting is performed using Prettier’s GraphQL support. In most cases, Prettier runs in the browser via a lightweight runtime. If the GraphQL plugin cannot be resolved in the current environment, the formatter transparently falls back to a server-side Prettier worker.

Available Options (Mapped to Prettier)

OptionBehaviorTypical Values
Indent StyleChoose between spaces and tabsspace (default) or tab
Indent SizeNumber of spaces per indent level (when using spaces)1–8, default: 2
Line LengthTarget column for wrapping / breaking long selections0–120 (0 ≈ effectively no wrapping)

Limits & Performance

The tool is tuned for typical GraphQL schemas and operation files. Requests around a few hundred KB to ~2 MB are generally safe; extremely large documents may hit timeouts or size guards.

Privacy & Safety

GraphQL documents are formatted either in your browser or on encode64’s formatter backend. They are not executed or sent to third-party services. For sensitive schemas, you can mirror the same configuration locally with Prettier.

Command Line Equivalent (Prettier)

If you already have Node.js and Prettier installed, you can reproduce this behavior locally.

Node.js (all platforms)

Format a GraphQL schema file in place

npx prettier --write schema.graphql

Prettier auto-detects GraphQL based on the file extension.

Format with custom indent and line length

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

Reflects the indent and wrapping options exposed in the online tool.

Format from stdin (e.g. piped from another tool)

cat input.graphql | npx prettier --stdin-filepath input.graphql

Useful in shell scripts, CI pipelines or Git hooks.

Common GraphQL Formatter Use Cases

API Schema Development

  • Keep large schema files consistently formatted for easier navigation
  • Reduce noisy whitespace diffs in schema PRs
  • Prepare clean SDL for code generation tools
# Before
type User{ id:ID! name:String!}

# After
type User {
  id: ID!
  name: String!
}

Frontend Operations & Fragments

  • Normalize shared queries across multiple apps or packages
  • Make nested selections easier to scan during debugging
  • Keep documentation snippets and playground examples nicely formatted

Tests, Fixtures & Tooling

  • Standardize GraphQL fixtures used in snapshot tests
  • Integrate formatting into pre-commit hooks or CI jobs
  • Feed clean documents into schema validation or diff tools

❓ Frequently Asked Questions

What does the GraphQL formatter actually change?

It restructures your GraphQL documents according to Prettier’s GraphQL rules: indentation, line breaks, spacing around punctuation and the layout of selections and fields. It does not rename fields, add arguments or change schema semantics.

Does it support both operations and schema SDL?

Yes. The formatter works for standard GraphQL operations (queries, mutations, subscriptions, fragments) and schema definition language (types, interfaces, enums, unions, inputs, directives, schema definitions and extensions).

Are comments and description strings preserved?

Yes. Triple-quoted description strings (`"""…"""`) and inline `#` comments are preserved. The formatter may reflow them or adjust surrounding whitespace but does not intentionally remove them.

Is my GraphQL code executed?

No. The tool parses your GraphQL as text in order to reformat it, but it does not execute queries or connect to any GraphQL server.

Where does the formatting run: client or server?

The formatter prefers running Prettier directly in your browser for responsiveness. If the required GraphQL plugin cannot be loaded there, it falls back to a Prettier worker on the server with the same options.

Is this free to use?

Yes. The tool is free with fair-use protections to keep performance stable. For heavy or private workloads, mirror the same configuration with Prettier in your own environment.

Pro Tips

Best Practice

Use this formatter to standardize legacy schemas before adding linting or breaking changes; it makes subsequent diffs much easier to review.

Best Practice

Align your online tool settings (indent size and line length) with your project’s Prettier config to keep local and web formatting identical.

Best Practice

Extract long embedded GraphQL strings from code into `.graphql` files so they can be uniformly formatted and reused.

Best Practice

Pair formatting with linting (e.g., GraphQL ESLint) to catch schema and query issues that go beyond whitespace and wrapping.

Additional Resources

GraphQL Specification
Technical specification
Prettier – GraphQL Formatting
Documentation
GraphQL Official Docs – Learn
Documentation
GraphQL ESLint (Lint Rules)
Documentation

Other Tools