Can I use this tool with local GraphQL servers?

Yes, you can target local endpoints like http://localhost:4000/graphql as long as your browser can access them and CORS is configured.

How do I pass authentication tokens to my GraphQL endpoint?

Enter your credentials in the Headers field using standard HTTP header format, such as Authorization: Bearer .

What format should I use for query variables?

Variables must be written in valid JSON format, matching the variable names defined in your GraphQL query.

Does this client support GraphQL mutations?

Yes, you can execute both queries and mutations by writing them in the Query editor.

What happens if my query contains syntax errors?

The playground will return the GraphQL error array containing details about the syntax or validation issues.

GraphQL Playground

Examples

1. Querying Country Data from a Public API

Frontend Developer

Background

A developer needs to fetch a list of continents and their codes to populate a dropdown menu in a web application.

Problem

Verifying the exact JSON structure returned by the public Countries API before writing frontend code.

How to use

Set the endpoint to https://countries.trevorblades.com/, paste the query for continents, and execute the request.

Endpoint: https://countries.trevorblades.com/
Query:
query {
  continents {
    code
    name
  }
}

Outcome

The tool displays a formatted JSON response containing an array of continents with their codes and names.

2. Testing a Protected Mutation with Variables

Backend Engineer

Background

An engineer is developing a user registration system and needs to test the createUser mutation which requires an API key header and input variables.

Problem

Ensuring the mutation correctly processes input variables and returns the newly created user ID under authenticated conditions.

How to use

Enter the development API endpoint, add the x-api-key header, write the mutation with variables, and input the user data in the Variables panel.

Endpoint: https://api.dev.local/graphql
Headers:
x-api-key: dev-secret-key
Query:
mutation CreateUser($input: UserInput!) {
  createUser(input: $input) {
    id
    email
  }
}
Variables:
{
  "input": {
    "email": "[email protected]",
    "name": "Test User"
  }
}

GraphQL Playground | Elysia Tools

GraphQL Playground

Run this tool

Inputs

Result

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Querying Country Data from a Public API

2. Testing a Protected Mutation with Variables

FAQ

Postman Collections - API Testing

Apache Arrow Samples

Distributed Tracing Samples

AWS EventBridge Samples

SQL Explain Plan Visualizer

BOM Character Remover

Data Range Limiter

GraphQL to JSON Converter

JSON Interchange and Format Translation Tools

JSON Inspection, Diff, and Transformation Tools

JSON Schema, Mock Data, and API Fixture Generators

JSON Formatting, Diff, and Normalization Tools