Skip to content
Get packs

Guide · Open source

How to use GraphiQL: setup, queries and embedding tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

GraphiQL is an in-browser IDE for writing and testing GraphQL queries against a server. This guide explains what lives in the graphql/graphiql monorepo, how to get the source, and how to choose the right package for your goal. By the end you will know where to start, depending on whether you want to embed a query tool, build an editor plugin or add GraphQL language support to an IDE.

GraphiQLgraphql/graphiql · ★ 16.9k · MIT

Quick start

  1. 1Install Node.js. Node.js is the prerequisite listed in the README. Install it before working with the repository.
  2. 2Clone the repository. Run the clone command from the README to get the monorepo source onto your machine.
  3. 3Read the package docs. Open packages/graphiql/README.md for the GraphiQL IDE, or the README of the package that matches your goal.
  4. 4Choose your integration. Decide whether you need the browser IDE, an editor mode for CodeMirror or Monaco, or a language server for an IDE extension.
  5. 5Check browser support. Confirm your target browsers fit the .browserslistrc settings, since Internet Explorer is not supported.
  6. 6Set up local development. Follow DEVELOPMENT.md in the repo to prepare a local development environment.

What is in the graphiql monorepo?

The graphql/graphiql repository is a monorepo, meaning it holds many packages in one place. GraphiQL is the reference implementation, and the repo also contains the packages that power it.

The project lists several parts: the graphiql browser IDE, monaco-graphql and codemirror-graphql editor modes, cm6-graphql for CodeMirror 6, graphql-language-service, a language service server for LSP-based IDE extensions, and a CLI for that server.

  • graphiql: the React in-browser GraphQL IDE
  • monaco-graphql: schema-driven GraphQL language mode for Monaco
  • codemirror-graphql: GraphQL mode for CodeMirror 5 with linting and hints
  • cm6-graphql: full-featured GraphQL language mode for CodeMirror 6
  • graphql-language-service-server and graphql-language-service-cli: LSP server and CLI

Clone the repository and set up Node.js

The README's install step is to clone the repository. Node.js is the listed prerequisite. For local development, the README points to DEVELOPMENT.md for setup steps.

Because this is a library and package project rather than an installer, you normally add the specific package you need to your own project after reviewing the code.

  • Install Node.js first, since it is the listed prerequisite
  • Clone the repository and open DEVELOPMENT.md for local setup
git clone https://github.com/graphql/graphiql

Pick the right package for your goal

The monorepo spans many packages, so the right one depends on what you are building. Choosing the package first saves time.

If you want a GraphiQL IDE for your own server or web app, start with the graphiql package and its README. If you are building an editor feature, look at the CodeMirror or Monaco packages. If you are building an IDE extension, the language server and the VS Code example are the relevant starting points.

  • Embedded query tool in your web app: packages/graphiql
  • Schema-aware autocomplete and linting in CodeMirror: codemirror-graphql or cm6-graphql
  • Schema-aware autocomplete and linting in Monaco: monaco-graphql
  • LSP support for another IDE: graphql-language-service-server
  • Reference example for VS Code: graphql.vscode-graphql

Understand browser support before you ship

The repo targets modern browsers. The graphiql browser bundle and codemirror-graphql use a .browserslistrc file that targets modern evergreen browsers and keeps the language services performant where async/await is used.

The project explicitly does not support Internet Explorer or older versions of evergreen browsers. Check this list against your audience before you commit to a build.

  • Default TypeScript packages target es6
  • graphql-language-service-server and the CLI target es2017 for Node
  • Internet Explorer is not supported
.browserslistrc

Check the security notice for graphiql versions

The README carries a security notice: all versions of graphiql below 1.4.7 are vulnerable to an XSS attack when the GraphQL server the GraphiQL web app connects to is not trusted.

If you run an older graphiql release, upgrade past 1.4.7 and read the security docs in the docs/security directory.

  • Affected: graphiql versions below 1.4.7
  • Read the security docs in docs/security

What people use it for

  • Embedding an in-browser GraphQL query tool in your team's web app or server
  • Adding schema-aware autocomplete and linting to a CodeMirror or Monaco editor
  • Building a VS Code or other LSP-based IDE extension for GraphQL
  • Adding inline query execution to a VS Code workflow using the vscode-graphql-execution example
  • Running the GraphQL language server from the command line with the CLI package

Frequently asked questions

Is GraphiQL free to use?

The README states that the code uses the permissive MIT license. Check the LICENSE file in the repository for full terms before you ship it in a product.

Do I need to install a desktop app to use GraphiQL?

No. GraphiQL is an in-browser IDE, and the README describes libraries and packages rather than a standalone installer. You embed the graphiql package in a web app or run the packages as part of your tooling.

What do I need to run GraphiQL?

The listed prerequisite is Node.js. You clone the repository with git and then follow the package docs or DEVELOPMENT.md for setup.

Does GraphiQL support Internet Explorer?

No. The README explicitly states the project does not support Internet Explorer or older versions of evergreen browsers.

Is GraphiQL safe to connect to any GraphQL server?

The README warns that graphiql versions below 1.4.7 are vulnerable to XSS when the server the web app connects to is not trusted. Use a current release and read the security docs in docs/security.

How does GraphiQL compare to GraphQL Playground, Altair, Apollo Sandbox or Insomnia?

Those tools are commonly used as finished query clients. This monorepo is aimed at developers who want to embed or extend a GraphQL IDE, or build editor and LSP support, so it is a better fit for building than for a ready-made desktop client.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

GraphiQL suits teams that want an in-browser GraphQL query tool inside their own app, or developers building editor and IDE integrations for GraphQL. It is less suitable if you just want a finished desktop app or a one-line tool, and it is not for users who need Internet Explorer support.

Install options & downloads