GraphiQL: GraphQL IDE monorepo and language service
Browser-based GraphQL IDE with language service tooling.
Learn more about GraphiQL
GraphiQL is a monorepo project under the GraphQL Foundation that provides a reference implementation of a GraphQL IDE along with supporting libraries and services. The core GraphiQL IDE is a React-based application that runs in browsers and uses CodeMirror for editing with schema-driven language features. The monorepo includes a language service layer that powers editor features like completion and diagnostics, LSP server implementations for IDE integration, and editor mode packages for CodeMirror and Monaco Editor. These components can be used together as a complete IDE or individually integrated into other development tools and frameworks.
Modular monorepo structure
Separates concerns into independent packages including the IDE, language service, editor modes, and LSP server, allowing developers to adopt individual components or the complete ecosystem.
Multiple editor integrations
Provides language modes and plugins for CodeMirror 5, CodeMirror 6, and Monaco Editor, enabling GraphQL support across different editor platforms and use cases.
LSP and CLI tooling
Includes a Language Server Protocol implementation and command-line service for IDE integration beyond browser-based usage, supporting development environments like VS Code and other LSP-compatible editors.
import React from 'react';
import { GraphiQL } from 'graphiql';
import 'graphiql/graphiql.css';
function App() {
const fetcher = async (graphQLParams) => {
const response = await fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
});
return response.json();
};
return <GraphiQL fetcher={fetcher} />;
}Pin monaco-editor peer dependency to fix compatibility issues with newer versions.
- –Pin monaco-editor peer dependency to versions ≥ 0.20.0 and < 0.53 since monaco-editor@^0.53.0 isn't supported yet
Update dependencies to fix monaco-editor compatibility issues.
- –Pin monaco-editor peer dependency to versions ≥ 0.20.0 and < 0.53 since monaco-editor@^0.53.0 isn't supported yet
- –Updated @graphiql/react@0.37.3
Pin monaco-editor to specific version and update dependencies.
- –Pin monaco-editor to 0.52.2
- –Updated @graphiql/react@0.37.2
See how people are using GraphiQL
Top in Developer Tools
Related Repositories
Discover similar tools and frameworks used by developers
Dobby
Lightweight function hooking framework for Windows, macOS, iOS, Android, and Linux.
Pug
Whitespace-sensitive template engine compiling to HTML for Node.js with Haml-inspired syntax.
JSON Server
Zero-config REST API server from JSON files.
Playwright MCP
Accessibility tree-based browser automation for LLMs.
tldr-pages
Community-maintained concise help pages for CLI tools with practical examples.
Related Reading
Guides and comparisons from the Greptile content library
Best CodeRabbit Alternatives for Smarter AI Code Reviews in 2026
7 powerful CodeRabbit alternatives ranked by real dev teams. Feature comparison, pricing analysis, and honest reviews to find your perfect AI code reviewer.
AI Coding Tools: A 2026 Guide to Every Category
A 2026 guide to every category of AI coding tool: assistants, editors, code generators, code review, and testing tools.
Best AI Code Review Tools for GitHub
Top-rated AI code review tools for GitHub teams in 2025. Compare features, pricing, and accuracy to find the perfect fit for faster PR reviews and bulletproof code quality.
What is agentic coding? Benefits, risks, and best tools to consider
What engineering leaders need to know about agentic coding: how it differs from AI coding and vibe coding, how it works, the benefits and risks, and the tools worth evaluating.