GraphQL Developer Tool

GraphQL Variables Formatter

Format a raw GraphQL variables object or paste a full GraphQL request body to extract, validate, sort, and repackage the variables cleanly.

Detected input

GraphQL request body

Top-level keys

Indent preset

2 spaces

Source JSON

Paste variables only or a full GraphQL request payload.

Operation name

Used only when output mode is request body.

Output mode

Request body wraps the formatted variables with query and operation name.

GraphQL query

If your pasted input already contains a query field, it is extracted automatically.

Format controls

Indentation

Sort variable keys recursively Useful when you want stable diffs or cleaner snapshots from GraphQL clients.

Formatted output

Client-side only. Nothing leaves your browser.

Why this tool exists

Generic JSON formatters already exist. This page is focused on GraphQL workflow: variables extraction, request-body wrapping, and copy-ready payload cleanup.

Typical uses

Clean variables copied from Apollo, Relay, GraphiQL, browser DevTools, test fixtures, or logs before sharing them in docs, tickets, or code reviews.

Boundary

This page formats variables only. Query formatting belongs in a separate GraphQL query formatter so the features do not overlap.

How to use it

1. Paste input

Paste a plain variables object or a full GraphQL JSON body with variables.

2. Pick output

Choose variables-only output for quick cleanup, or request-body mode if you need copy-ready API payload JSON.

3. Export

Format, minify, copy, or download the result. Sorting is optional for diff-friendly snapshots.