# graphql/graphiql

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/graphql-graphiql).**

16,848 stars · 1,843 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/graphql/graphiql
- awesome-repositories: https://awesome-repositories.com/repository/graphql-graphiql.md

## Description

GraphiQL is an interactive browser-based integrated development environment for writing, testing, and documenting GraphQL queries and mutations. It functions as a code editor, an API exploration tool, and a schema explorer, providing a visual interface for browsing GraphQL types and fields.

The project provides a language server that delivers schema-driven autocompletion, linting, and validation via the Language Server Protocol. It allows for the embedding of high-performance editors into external projects and supports the injection of custom tools and components through a sidebar plugin API.

The toolset covers broad capabilities for language intelligence, including syntax highlighting and real-time error reporting. It also includes systems for schema management, theme customization via CSS variables, and the persistence of editor state.

## Tags

### Development Tools & Productivity

- [API Playgrounds](https://awesome-repositories.com/f/development-tools-productivity/api-playgrounds.md) — Provides an interactive browser-based IDE for writing and testing GraphQL queries and mutations. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphiql))
- [GraphQL Integrated Development Environments](https://awesome-repositories.com/f/development-tools-productivity/graphql-integrated-development-environments.md) — Provides a complete interactive browser-based IDE for writing, testing, and documenting GraphQL queries and mutations.
- [Interactive API Explorers](https://awesome-repositories.com/f/development-tools-productivity/interactive-api-explorers.md) — Provides an interactive browser interface for testing and validating GraphQL queries and mutations.
- [Code Intelligence](https://awesome-repositories.com/f/development-tools-productivity/code-quality-analysis/static-analysis-engines/static-analysis-tools/code-intelligence.md) — Provides schema-driven code completion, hover documentation, and real-time validation. ([source](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql))
- [High-Performance Code Editors](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-environments/code-editing-interfaces/high-performance-code-editors.md) — Provides a high-performance code editor specifically optimized for writing and analyzing GraphQL operations.
- [GraphQL Language Services](https://awesome-repositories.com/f/development-tools-productivity/graphql-language-services.md) — Implements a comprehensive language service providing schema-driven autocompletion, linting, and validation for GraphQL.
- [Language Server Protocols](https://awesome-repositories.com/f/development-tools-productivity/language-server-protocols.md) — Implements the Language Server Protocol to deliver diagnostics and autocompletion for GraphQL files. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-cli))
- [Language Servers](https://awesome-repositories.com/f/development-tools-productivity/language-servers.md) — Implements a GraphQL language server that provides autocompletion, diagnostics, and navigation via LSP.
- [Schema Browsers](https://awesome-repositories.com/f/development-tools-productivity/schema-browsers.md) — Offers a searchable interface for browsing GraphQL type definitions and fields to understand data structures.
- [Schema Explorers](https://awesome-repositories.com/f/development-tools-productivity/schema-explorers.md) — Ships a searchable interface for browsing GraphQL schema types and fields to understand available data structures. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md))
- [Type-Aware Autocompletion](https://awesome-repositories.com/f/development-tools-productivity/type-aware-autocompletion.md) — Generates valid fields, arguments, and types based on the active schema while the user types. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server))
- [Background Analysis Workers](https://awesome-repositories.com/f/development-tools-productivity/background-analysis-workers.md) — Offloads heavy parsing and language analysis to web workers to maintain UI thread responsiveness.
- [Code Formatting Tools](https://awesome-repositories.com/f/development-tools-productivity/code-quality-analysis/static-analysis-engines/static-analysis-tools/code-formatting-tools.md) — Ships a configurable formatting engine to ensure consistent styling across GraphQL files. ([source](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql))
- [Definition Navigation](https://awesome-repositories.com/f/development-tools-productivity/definition-navigation.md) — Enables jumping directly to fragment definitions, input types, and enums within a project. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server))
- [Inline Operation Execution](https://awesome-repositories.com/f/development-tools-productivity/inline-operation-execution.md) — Allows users to execute GraphQL operations directly from source files and view results inline. ([source](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-execution))
- [Live Schema Refreshing](https://awesome-repositories.com/f/development-tools-productivity/live-schema-refreshing.md) — Allows refreshing the schema used for linting and autocomplete dynamically without reloading the editor instance. ([source](https://github.com/graphql/graphiql/blob/main/packages/cm6-graphql))
- [Syntax Highlighters](https://awesome-repositories.com/f/development-tools-productivity/syntax-highlighters.md) — Provides color-coding of GraphQL operations and bracket matching to improve query readability. ([source](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax))

### Part of an Awesome List

- [GraphQL Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/graphql-development-tools.md) — Supports a workflow of writing and executing GraphQL operations inline to iterate on data requests.
- [Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/development-tools.md) — In-browser IDE for exploring GraphQL schemas and queries.

### Software Engineering & Architecture

- [GraphQL Linting](https://awesome-repositories.com/f/software-engineering-architecture/syntax-tree-analysis/graphql-linting.md) — Identifies syntax errors and linting violations in GraphQL documents to provide immediate feedback. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server))
- [Custom Validation Rules](https://awesome-repositories.com/f/software-engineering-architecture/custom-validation-rules.md) — Implements a configuration system for defining custom directives and validation rules for GraphQL analysis. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-cli))
- [Dynamic Schema Mapping](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping.md) — Maps specific files or directories to different GraphQL schemas using match expressions for multi-model projects.
- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Provides a plugin-based architecture to inject custom tools and components into the sidebar.
- [Template Literal Parsing](https://awesome-repositories.com/f/software-engineering-architecture/template-literal-parsing.md) — Extracts and analyzes GraphQL syntax embedded within template literals of other programming languages.

### Web Development

- [Schema Validation](https://awesome-repositories.com/f/web-development/schema-validation.md) — Validates GraphQL queries and variables by comparing the AST against a loaded schema definition.
- [Language Service Workers](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-infrastructure/service-worker-controls/service-worker-logic-extenders/language-service-workers.md) — Supports injecting custom parsers and validation rules by deploying personalized web workers. ([source](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql))
- [Schema Explorers](https://awesome-repositories.com/f/web-development/graphql-schema-management/schema-explorers.md) — Ships a visual interface for browsing GraphQL types, fields, and documentation to understand API data structures.

### Data & Databases

- [Variable Validation](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/data-serialization/json-schema/variable-validation.md) — Checks JSON variables against a generated schema based on declared operations to ensure correct input types. ([source](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql))

### User Interface & Experience

- [Embedded Editor Components](https://awesome-repositories.com/f/user-interface-experience/embedded-editor-components.md) — Allows embedding the high-performance Monaco editor with full GraphQL support into external projects. ([source](https://github.com/graphql/graphiql/blob/main/examples/monaco-graphql-webpack))
- [Plugin APIs](https://awesome-repositories.com/f/user-interface-experience/sidebars/plugin-apis.md) — Provides an API for integrating custom tools and UI components into the sidebar. ([source](https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md))