# codemirror-graphql

> GraphQL mode and helpers for CodeMirror.

Latest version **2.2.9** (published 2026-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install codemirror-graphql
pnpm add codemirror-graphql
yarn add codemirror-graphql
bun add codemirror-graphql
```

## Health

**Score 70/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.2.9 |
| Published | 2026-08-30 |
| First published | 2015-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 436 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16910 |
| Maintainers | benjie, mjmahone, leebyron, i1g, acao, fb, kassens, orta, asiandrummer, ags- |

## Links

- npm: https://www.npmjs.com/package/codemirror-graphql
- Repository: https://github.com/graphql/graphiql
- Homepage: https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql#readme
- Issues: https://github.com/graphql/graphiql/issues?q=issue+label:codemirror-graphql
- npm.io page: https://npm.io/package/codemirror-graphql

## Dependencies (2)

- [@types/codemirror](https://npm.io/package/@types/codemirror.md) ^0.0.90
- [graphql-language-service](https://npm.io/package/graphql-language-service.md) 5.7.0

## Recent versions

- 2.2.9 (latest) — 2026-08-30
- 2.2.4-canary-be24c1cc.0 (canary) — 2025-07-17
- 2.2.3-rc.0 (rc) — 2025-06-04
- 2.0.9-alpha.1 (alpha) — 2023-06-20
- 2.0.0-next.2 (next) — 2022-08-13
- 2.2.8 — 2026-08-25
- 2.2.7 — 2026-06-06
- 2.2.6 — 2026-05-15
- 2.2.5 — 2026-05-11
- 2.2.4 — 2025-07-17
- 2.2.4-canary-3c41e521.0 — 2025-07-17
- 2.2.4-canary-018f3c73.0 — 2025-07-17
- 2.2.4-canary-9b31b224.0 — 2025-07-17
- 2.2.4-canary-23fbed22.0 — 2025-07-17
- 2.2.4-canary-5028aa1e.0 — 2025-07-17
- … 307 more at https://npm.io/package/codemirror-graphql/versions

## README

# GraphQL mode for CodeMirror

[![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)
![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)
[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)
[Discord Channel](https://discord.gg/cffZwk8NJW)

**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**

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

![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)

### Getting Started

```sh
npm install codemirror-graphql
```

CodeMirror helpers install themselves to the global CodeMirror when they are
imported.

```ts
import type { ValidationContext, SDLValidationContext } from 'graphql';

import CodeMirror from 'codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/lint/lint';
import 'codemirror-graphql/hint';
import 'codemirror-graphql/lint';
import 'codemirror-graphql/mode';

CodeMirror.fromTextArea(myTextarea, {
  mode: 'graphql',
  lint: {
    schema: myGraphQLSchema,
    validationRules: [ExampleRule],
  },
  hintOptions: {
    schema: myGraphQLSchema,
  },
});
```

## External Fragments Example

If you want to have autocompletion for external fragment definitions, there's a
new configuration setting available

```ts
import CodeMirror from 'codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/lint/lint';
import 'codemirror-graphql/hint';
import 'codemirror-graphql/lint';
import 'codemirror-graphql/mode';

const externalFragments = /* GraphQL */ `
  fragment MyFragment on Example {
    id: ID!
    name: String!
  }
   fragment AnotherFragment on Example {
    id: ID!
    title: String!
  }
`;

CodeMirror.fromTextArea(myTextarea, {
  mode: 'graphql',
  lint: {
    schema: myGraphQLSchema,
  },
  hintOptions: {
    schema: myGraphQLSchema,
    // here we use a string, but
    // you can also provide an array of FragmentDefinitionNodes
    externalFragments,
  },
});
```

### Custom Validation Rules

If you want to show custom validation, you can do that too! It uses the
`ValidationRule` interface.

```ts
import type { ValidationRule } from 'graphql';

import CodeMirror from 'codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/lint/lint';
import 'codemirror-graphql/hint';
import 'codemirror-graphql/lint';
import 'codemirror-graphql/mode';

const ExampleRule: ValidationRule = context => {
  // your custom rules here
  const schema = context.getSchema();
  const document = context.getDocument();
  return {
    NamedType(node) {
      if (node.name.value !== node.name.value.toLowercase()) {
        context.reportError('only lowercase type names allowed!');
      }
    },
  };
};

CodeMirror.fromTextArea(myTextarea, {
  mode: 'graphql',
  lint: {
    schema: myGraphQLSchema,
    validationRules: [ExampleRule],
  },
  hintOptions: {
    schema: myGraphQLSchema,
  },
});
```

Build for the web with [webpack](http://webpack.github.io) or
[browserify](http://browserify.org).

---
_Source: https://npm.io/package/codemirror-graphql · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._