---
title: "GraphQL IDE"
slug: "graphql-ide"
abstract: ""
---
# GraphQL IDE

The GraphQL Integrated Development Environment (IDE) supports the Graph QL query function and improves your development workflow by making it easier to develop queries. With real-time syntax and error highlighting, and with snippets of the schema documentation, you know what you are adding to your query.

> [!important]
> You need a valid [API key](https://doc.sitecore.com/ch/en/developers/cloud-dev/before-you-start.html "Before you start") to use the IDEs.

A GraphQL IDE is available for:

- The [Preview API](https://doc.sitecore.com/ch/en/developers/cloud-dev/preview-api.html "Preview API"), which allows access to all your content, including drafts and other content that is not yet approved.
- The [Delivery API](https://doc.sitecore.com/ch/en/developers/cloud-dev/delivery-api.html "Delivery API") IDE, which has an identical schema to the Preview API IDE, but only provides access to approved and published content.

## Features of the GraphQL IDE

The Sitecore GraphQL IDE uses [GraphQL Playground](https://github.com/graphql/graphql-playground#faq), which provides the following features.

| Feature | Description |
| --- | --- |
| Query History | The GraphQL IDE keeps a history of your queries. |
| Bookmarks | You can bookmark queries you use often, keeping them at the top of your history and marking them with a star icon. |
| Prettify | Prettify formats your query by adding the correct indentation. |
| Autocompletion | The Autocomplete feature helps you intuitively find the fields you need. It provides syntax highlighting, linting, autocompletion, and navigation to fragments. |
| SCHEMA tab | The **SCHEMA** tab gives you access to the defined [schema](https://doc.sitecore.com/ch/en/developers/cloud-dev/graphql-schema.html). |
| DOCS tab | The **DOCS** tab displays the documentation available for GraphQL. It is interactive, viewable in multiple columns, and has native keyboard support. Using the **DOCS** tab, you can find all the information about the parameters that the query expects and what fields you can specify for the response. |
| Variables | You can pass values as arguments instead of reconstructing a new query. You can add your query variables on the **QUERY VARIABLES** tab in the IDE. |

Using the **DOCS** tab in the GraphQL IDE, you can perform the following actions:

| Action | Description |
| --- | --- |
| Find a specific schema field. | Searches for a field by name, such as *asset*. The interface helps you differentiate between fields with the same name. The search is *fuzzy*, meaning it can return fields based on an approximate spelling if the exact one is not known. |
| Find the ideal path to a field from the schema’s entry points. | After identifying a type-field pair, the explorer can list all paths to that field, starting at the schema’s entry points. Paths are listed in depth order. |