graphiql

An in-browser IDE for exploring GraphQL.

Github星跟蹤圖

GraphQL IDE Monorepo

Looking for the GraphiQL Docs?: This is the root of the monorepo! The full GraphiQL docs are located at packages/graphiql

Build Status
Discord
Code Coverage
GitHub top language
GitHub language count
Snyk Vulnerabilities for GitHub Repo
LGTM Grade
LGTM Alerts

Overview

GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.

Whether you want a simple GraphiQL IDE instance for your server, or a more advanced web or desktop GraphQL IDE experience for your framework or plugin, or you want to build an IDE extension or plugin, you've come to the right place!

The purpose of this monorepo is to give the GraphQL Community:

  • a solid, to-specification official language service (see: API Docs)
  • a comprehensive LSP server and CLI service for use with IDEs
  • a codemirror mode
  • a monaco mode (in the works)
  • an example of how to use this ecosystem with GraphiQL.
  • examples of how to implement or extend GraphiQL.

GraphiQL

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package
npm bundle size (version)
npm bundle size (version)

https://raw.githubusercontent.com/graphql/graphiql/master/packages/graphiql/resources/graphiql.jpg

/ˈɡrafək(ə)l/ A graphical interactive in-browser GraphQL IDE. Try the live demo. We also have a demo using our latest netlify build for the master branch.

The GraphiQL IDE, implemented in React, currently using GraphQL mode for CodeMirror & GraphQL Language Service.

Learn more about GraphiQL in packagages/graphiql/README.md

How To Setup/Implement GraphiQL

Edit graphiql-example

(This example shows that GraphiQL works with create-react-app without requiring additional configuration)

The full GraphiQL Readme explains some of the ways to implement GraphiQL, and we also have the examples directory as well!

CodeMirror GraphQL

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package

https://raw.githubusercontent.com/graphql/graphiql/master/packages/codemirror-graphql/resources/example.gifg

Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema

GraphQL Language Service

NPM
npm downloads
Snyk Vulnerabilities for npm package

Provides a command-line interface for running GraphQL Language Service Server for various IDEs.

GraphQL Language Service Server

NPM
npm downloads
Snyk Vulnerabilities for npm package

An almost fully LSP compliant server process backing the GraphQL Language Service.

GraphQL Language Service Interface

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package

Runtime agnostic Language Service used by GraphQL mode for CodeMirror and GraphQL Language Service Server

GraphQL Language Service Parser

NPM
npm downloads
Snyk Vulnerabilities for npm package

An online immutable parser for GraphQL, designed to be used as part of syntax-highlighting and code intelligence tools such as for the GraphQL Language Service and codemirror-graphql.

GraphQL Language Service Types

NPM
npm downloads

Flow and Typescript type definitions for the GraphQL Language Service.

GraphQL Language Service Utilities

NPM
npm downloads
Snyk Vulnerabilities for npm package

Utilities to support the GraphQL Language Service.

Development

To get setup for local development of this monorepo, refer to DEVELOPMENT.md

Contributing

This is an open source project, and we welcome contributions. Please see
CONTRIBUTING.md for details on how to contribute.

Initiatives

Lots of activity lately! These things are in progress currently:

  • making web and IDE services 100% LSP specification complete
  • a monaco editor mode
  • extensions and themes to make GraphiQL a multipurpose tool for building GraphQL IDEs

Fielding Proposals!

The door is open for proposals for the new GraphiQL Plugin API, and other ideas on how to make the rest of the IDE ecosystem more performant, scaleable, interoperable and extensible.
Feel free to open a PR to create a document in the /proposals/ directory.
Eventually we hope to move these to a repo that serves this purpose.

Community

  • Discord Discord - Most discussion outside of github happens on our Discord Server
  • Twitter - @GraphiQL and #GraphiQL
  • GitHub - Create feature requests, discussions issues and bugs above

主要指標

概覽
名稱與所有者graphql/graphiql
主編程語言TypeScript
編程語言JavaScript (語言數: 12)
平台
許可證MIT License
所有者活动
創建於2015-08-11 02:56:22
推送於2025-07-19 17:43:47
最后一次提交
發布數1251
最新版本名稱graphiql@5.2.0 (發布於 2025-07-19 17:43:46)
第一版名稱v0.1.0 (發布於 2015-08-24 09:52:30)
用户参与
星數16.6k
關注者數238
派生數1.8k
提交數4.1k
已啟用問題?
問題數1227
打開的問題數306
拉請求數2137
打開的拉請求數40
關閉的拉請求數486
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?