GraphQL Playground
Test and debug GraphQL queries in your browser. Execute queries, mutations, introspect schemas, validate syntax, and explore public GraphQL APIs.
Loading tool...
What is GraphQL Playground?
GraphQL Playground is an interactive development environment for GraphQL. It lets you write, validate, and execute GraphQL queries against any GraphQL API endpoint directly from your browser — no CLI, no local setup. You can explore API schemas, pass variables and headers, and inspect responses in real time.
Key Benefits
- Test GraphQL APIs without installing any software
- Validate query syntax before sending requests
- Explore API schema with introspection
- Debug queries with formatted JSON responses
- Works with any CORS-enabled GraphQL endpoint
Common Use Cases
- •Frontend developers testing API responses
- •API teams debugging schema changes
- •Learning GraphQL with public APIs
- •Quick API exploration before integration
- •Validating query syntax on the fly
How to Use GraphQL Playground
- Enter the endpoint URL: Paste your GraphQL endpoint URL. The default uses the public Countries API (countries.trevorblades.com).
- Write your query: Type your GraphQL query or mutation in the query editor. Use the Validate button to check syntax before sending.
- Add variables and headers: Optionally expand the Variables and Headers panels to pass JSON variables or authentication tokens.
- Execute and inspect: Click Execute to send the request. The response appears in formatted JSON. Use Schema to introspect the API.
Key Features
- Execute GraphQL queries against any CORS-enabled endpoint
- Full support for query, mutation, and subscription syntax
- Pass variables and custom headers with your requests
- Schema introspection — explore types and fields automatically
- Syntax validation and auto-formatting via graphql library
Frequently Asked Questions
What is GraphQL Playground?
GraphQL Playground is an in-browser tool for writing, testing, and debugging GraphQL queries against any GraphQL API endpoint. It provides a query editor, variables panel, headers support, and schema introspection.
Do I need to install anything?
No. Everything runs in your browser. Just enter a GraphQL endpoint URL, write your query, and click Execute. The tool works with any CORS-enabled GraphQL API.
Why does my request fail with a CORS error?
Browsers block cross-origin requests unless the API server allows them via CORS headers. Use public APIs like countries.trevorblades.com for testing, or configure your server to send Access-Control-Allow-Origin headers.
Can I use variables and authentication headers?
Yes. Expand the Variables panel to pass JSON variables (e.g., {"id": "123"}) and the Headers panel to add authentication tokens or custom headers as a JSON object.