---
title: "GraphQL IDE"
slug: "graphql-ide"
abstract: "Introduction to the GraphQL IDE."
---
# 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 to use the IDEs. You can create and manage API keys using either the [Content Hub ONE app](https://doc.sitecore.com/ch-one/en/developers/content-hub-one/preview-and-delivery-apis/manage-api-keys-using-the-app.html "Manage API keys using the app") or the Content Management API.

A [GraphQL IDE](https://doc.sitecore.com/ch-one/en/developers/content-hub-one/preview-and-delivery-apis.html "Preview and Delivery APIs") is available for:

- The Preview API, which allows access to all your content, including drafts and other content that is not yet approved.
- The Delivery API, 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-one/en/developers/content-hub-one/preview-and-delivery-apis/graphql-schema.html "GraphQL schema"). |
| 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. 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. |