whatisgithub

What is graphiql?

graphql/graphiql — explained in plain English

Analysis updated 2026-06-24

★ 16,827TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

In one sentence

The official in-browser IDE for GraphQL that lets you write, autocomplete, and run API queries against a live server, plus a suite of editor plugins that bring the same experience to VS Code, CodeMirror, and Monaco.

Mindmap

mindmap
  root((GraphiQL))
    Core IDE
      Query editor
      Schema explorer
      Autocompletion
      Live execution
    Editor plugins
      CodeMirror 5 and 6
      Monaco editor
      VS Code extension
    Tech stack
      TypeScript
      React
      Node.js LSP
    Use cases
      API exploration
      Editor integration
      GraphQL tooling
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Embed a GraphQL query editor with schema-aware autocompletion in your own web app or dashboard

USE CASE 2

Add GraphQL syntax highlighting and live linting to VS Code using the official extension from this repo

USE CASE 3

Explore and debug a GraphQL API by writing and running queries against a live server in the browser IDE

USE CASE 4

Build a custom editor integration using the Language Server Protocol implementation in this monorepo

What is it built with?

TypeScriptReactNode.jsCodeMirrorMonaco

How does it compare?

graphql/graphiqllyswhut/lx-music-mobilesindresorhus/ky
Stars16,82716,84016,849
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderateeasy
Complexity3/53/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Monorepo with many packages, embedding GraphiQL in an app requires installing the component package and providing a GraphQL endpoint URL.

Use, modify, and distribute freely for any purpose including commercial products, as long as you keep the MIT copyright notice.

So what is it?

GraphiQL (pronounced "graphical") is the official in-browser IDE for GraphQL, the query language used to ask APIs for exactly the data you want. An IDE here means an editing environment where you can write queries, see the API's schema, get autocompletion, and run those queries against a live server, all from a single panel in your browser. The repository is actually a monorepo, a single project that holds many related packages, and GraphiQL is its flagship reference implementation, published under the GraphQL Foundation with the MIT license. Around GraphiQL itself, the repo also publishes the building blocks needed to add GraphQL editing to other tools. There is a CodeMirror 5 mode and a separate CodeMirror 6 mode that give those code editors a GraphQL-aware experience with live linting and typeahead hints powered by the API's schema. A Monaco mode does the same for the Monaco editor. Underneath them all sits a shared graphql-language-service, plus a Language Server Protocol (LSP) implementation that lets editors understand GraphQL through the same standard mechanism they use for other languages. The monorepo ships the official VS Code extensions for GraphQL syntax, language features, and inline query execution, and a CLI version of the language server. People reach for these tools when they are building or consuming GraphQL APIs and want a friendly way to explore the schema, write queries, and debug responses, or when they are building their own editor or framework integration. The codebase is written in TypeScript, GraphiQL itself is implemented in React, and the LSP server targets Node. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
I want to embed GraphiQL in my React app so users can explore our GraphQL API. Show me the minimum setup code to render the GraphiQL component with our endpoint and a custom Authorization header.
Prompt 2
Using the graphql-language-service package from this repo, add real-time GraphQL validation and autocompletion to a CodeMirror 6 editor in my Next.js project.
Prompt 3
I'm building a GraphQL tool and want to integrate the LSP server from this monorepo into my editor plugin. Show me how to start the language server and connect a client to it.
Prompt 4
Show me how to configure the GraphQL VS Code extension from this repo to work with multiple schemas in a monorepo, pointing each subdirectory to its own schema file.

Frequently asked questions

What is graphiql?

The official in-browser IDE for GraphQL that lets you write, autocomplete, and run API queries against a live server, plus a suite of editor plugins that bring the same experience to VS Code, CodeMirror, and Monaco.

What language is graphiql written in?

Mainly TypeScript. The stack also includes TypeScript, React, Node.js.

What license does graphiql use?

Use, modify, and distribute freely for any purpose including commercial products, as long as you keep the MIT copyright notice.

How hard is graphiql to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is graphiql for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?