- Home
- GraphQL Tools
- GraphiQL
GraphiQL
What it is
GraphiQL is a free, in-browser IDE for writing and exploring GraphQL queries. Its editor supports the latest GraphQL specification, with syntax highlighting, type-aware suggestions, query and variable completion, and error reporting. A documentation explorer provides search and Markdown, and the interface includes query history and a plugin API. GraphiQL can preserve state in browser localStorage.
Developers can use GraphiQL as a React package, but an integration requires a fetcher function to send requests to a GraphQL API. The toolkit fetcher supports HTTP, multipart incremental delivery, and subscriptions through graphql-ws or the legacy WebSocket protocol. Appearance customization is supported through CSS variables, while React props and children also allow interface customization. The project offers a progressive web app demo and setup examples for CDN, Webpack, Create React App, and Parcel. It is MIT-licensed open-source software. The project targets modern browsers, not Internet Explorer or older evergreen browser versions.
For and against
For
- Free, MIT-licensed open-source project.
- Supports the latest GraphQL specification.
- Documentation explorer includes search and Markdown.
- Fetcher supports HTTP and WebSocket subscriptions.
Against
- React integrations require a fetcher function.
- Internet Explorer is unsupported.
- Class names may change between releases.
- A 2021 advisory identified XSS in versions 0.5.0 through 1.4.6.
The verdict
GraphiQL provides query editing, documentation browsing, and extension options at no cost. Its React integration requires an API fetcher, and its browser support and changing class names are worth considering.
Who it suits
GraphiQL suits GraphQL users who want an interactive browser IDE, as well as developers embedding the editor in a React application. Integrators should be prepared to supply a fetcher function and use supported browsers.
Plans and prices
GraphiQL
MIT-licensed open-source project · distributed as a package for use in React applications
Read 7 Oct 2026 · github.com
On the record
- API connection
- A GraphiQL component requires a fetcher function that performs requests to a GraphQL API and can support promises, observables, or async iterables.github.com · read 7 Oct 2026
- Browser support
- The repository says its browser bundle targets modern browsers and does not support Internet Explorer or older evergreen browser versions.github.com · read 7 Oct 2026
- Customization
- The UI can be customized with React props and children, and CSS variables are the officially supported way to customize its appearance.github.com · read 7 Oct 2026
- Customization limit
- The README says GraphiQL class names are not stable and may change between minor or patch releases.github.com · read 7 Oct 2026
- Deployment
- The project provides an installable progressive web app demo and examples for CDN, Webpack, Create React App, and Parcel.github.com · read 7 Oct 2026
- Documentation
- Its documentation explorer supports search and Markdown.github.com · read 7 Oct 2026
- Documentation explorer
- Its documentation explorer supports search and Markdown.github.com · read 7 Oct 2026
- GraphQL support
- Yesgraphiql.dev · read 20 Sep 2026
- Installation
- The package installation instructions list React, React DOM, and GraphQL as peer dependencies.github.com · read 7 Oct 2026
- Integration
- GraphiQL is a React package that requires a fetcher function to send requests to a GraphQL API.github.com · read 7 Oct 2026
- Integrations
- The project provides examples for CDN ESM, Webpack, Create React App, and Parcel, and its repository describes GraphQL language tooling for CodeMirror, Monaco, and Visual Studio Code.github.com · read 7 Oct 2026
- Language support
- It supports the latest GraphQL specification with syntax highlighting, type-ahead suggestions, error reporting, and automatic query and variable completion.github.com · read 7 Oct 2026
- License
- The GraphiQL repository describes the code as open source under the MIT license.github.com · read 7 Oct 2026
- Plugins
- GraphiQL has a plugin API, with built-in documentation explorer and query history plugins.github.com · read 7 Oct 2026
- Purpose
- GraphiQL is an interactive, in-browser IDE for GraphQL.github.com · read 7 Oct 2026
- Query editing
- It supports GraphQL syntax highlighting, type-aware suggestions, query and variable completion, and real-time error highlighting.github.com · read 7 Oct 2026
- Saved state
- GraphiQL persists state using localStorage.github.com · read 7 Oct 2026
- Security
- The project warns that GraphiQL versions below 1.4.7 are vulnerable to an XSS attack when connected to an untrusted GraphQL server.github.com · read 7 Oct 2026
