GraphQL Playground
Type an operation, supply variables, and fire it at any GraphQL endpoint — or just use the offline formatter and JSON variable checker.
A browser-based GraphQL client for poking at an API without spinning up Insomnia or a local GraphiQL. Point it at an endpoint, type an operation in the query editor, drop your variables in as JSON, and hit Run to POST the standard `{ query, variables }` body and read the response pretty-printed. When a server answers with a top-level `errors` array, those messages are pulled out and shown above the data instead of buried in the payload. The Format button re-indents a query from its brace structure, so a one-line paste turns into readable, nested selection sets.
How it works
- 1
Point at an endpoint
Paste your GraphQL URL (for example a Hasura, Apollo or GraphQLZero endpoint) into the address field. Open the headers panel if the API needs an Authorization: Bearer token or an api-key.
- 2
Write the query and its variables
Enter your operation in the query editor and put any `$` variables into the Variables box as a JSON object. Hit Format to re-indent a messy query; an empty variables box is sent as {}.
- 3
Run and read the result
Press Run to POST the request. You get the HTTP status, round-trip time, and the JSON response, with any GraphQL `errors` messages surfaced at the top and a Copy button for the body.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- How do I run a GraphQL query with variables?
- Write a parameterized operation like `query($id: ID!) { user(id: $id) { name email } }` in the query editor, then put `{"id":"1"}` in the Variables box. On Run the tool sends `{"query":"query($id: ID!)…","variables":{"id":"1"}}` as the POST body, exactly what a GraphQL server expects.
- Why can't my GraphQL query reach the endpoint?
- The query executes from your browser, so it can only read responses from servers that return permissive CORS headers for your origin. Many public GraphQL APIs don't, and the request fails before any data comes back. There's no proxy behind this tool — the query building, formatting and variable validation still work regardless of CORS.
- Can it format or prettify a GraphQL query offline?
- Yes. The Format button re-indents the query from its braces without any network call: `query{ user(id:$id){ name email } }` becomes a nested block with each field on its own line and arguments spaced as `id: $id`. It's cosmetic re-indentation, not schema validation.
- How does the tool show GraphQL errors?
- GraphQL often returns HTTP 200 even on failure, with the problem in a top-level `errors` array. This tool detects that array and lists each `message` (like `Field "emial" not found`) in a highlighted block above the response, so you don't have to scroll the raw JSON to spot what broke.
More tools
More from the Hivly network
Free sister tools on our other sites.
