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.