{"id":47280,"library":"codemirror-graphql","title":"codemirror-graphql","description":"Provides CodeMirror 5 with a dedicated parser mode for GraphQL, along with live linting and typeahead autocompletion powered by a GraphQL schema. Version 2.2.7 is the latest stable release in the 2.x line, which targets CodeMirror 5 (not CodeMirror 6—use cm6-graphql for CM6). The package supports GraphQL v15, v16, and v17. It is part of the GraphiQL ecosystem and is maintained by the GraphQL Foundation. Key differentiators include deep integration with GraphQL schemas for context-aware hints and validation, support for external fragments, and custom validation rules.","status":"active","version":"2.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/graphql/graphiql","tags":["javascript"],"install":[{"cmd":"npm install codemirror-graphql","lang":"bash","label":"npm"},{"cmd":"yarn add codemirror-graphql","lang":"bash","label":"yarn"},{"cmd":"pnpm add codemirror-graphql","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for CodeMirror 6 integration (though this package is for CM5, the peer dep is specified).","package":"@codemirror/language","optional":false},{"reason":"Core CodeMirror 5 library required as a peer dependency.","package":"codemirror","optional":false},{"reason":"GraphQL library for schema parsing and validation.","package":"graphql","optional":false}],"imports":[{"note":"Mode, hint, and lint are side-effect imports that register themselves on the global CodeMirror object. Named exports are not available as direct imports.","wrong":"import { mode } from 'codemirror-graphql'","symbol":"graphql mode","correct":"import 'codemirror-graphql/mode'"},{"note":"Importing with require() will not register the addon; it is a side-effect module.","wrong":"const hint = require('codemirror-graphql/hint')","symbol":"graphql hint","correct":"import 'codemirror-graphql/hint'"},{"note":"Lint addon is registered as a side-effect; no default export.","wrong":"import CodeMirrorGraphQLLint from 'codemirror-graphql/lint'","symbol":"graphql lint","correct":"import 'codemirror-graphql/lint'"},{"note":"CodeMirror exports a default object in CJS; ESM requires default import.","wrong":"import { CodeMirror } from 'codemirror'","symbol":"CodeMirror","correct":"import CodeMirror from 'codemirror'"}],"quickstart":{"code":"import type { ValidationContext } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst myTextarea = document.getElementById('editor') as HTMLTextAreaElement;\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema, // provide a GraphQLSchema object\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});","lang":"typescript","description":"Sets up a CodeMirror 5 editor with GraphQL syntax highlighting, live linting, and autocomplete hints powered by a GraphQL schema."},"warnings":[{"fix":"If using CodeMirror 6, replace with @graphiql/cm6-graphql or cm6-graphql package.","message":"This package is for CodeMirror 5 only. CodeMirror 6 is not supported; use cm6-graphql instead.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Verify with latest CodeMirror 5 release notes.","message":"The package has not been actively updated to support newer CodeMirror 5 versions? (Check compatibility)","severity":"deprecated","affected_versions":">=2.2.0"},{"fix":"Use `import 'codemirror-graphql/mode'` without destructuring.","message":"Imports are side-effect-only; do not attempt to destructure named exports.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import CodeMirror addons in order: show-hint, lint, then graphql addons.","message":"Requires both `codemirror/addon/hint/show-hint` and `codemirror/addon/lint/lint` to be imported before the graphql addons.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use GraphQL v16 or v17. Check peer dependencies.","message":"GraphQL v15 is no longer supported in some future releases?","severity":"breaking","affected_versions":">=2.2.0"}],"env_vars":null,"search_vec":"'2':35 '2.2.7':27 '5':6,41 '6':44 'along':14 'autocomplet':20 'awar':84 'cm6':47,50 'cm6-graphql':46 'codemirror':2,5,40,43 'codemirror-graphql':1 'context':83 'context-awar':82 'custom':93 'dedic':9 'deep':76 'differenti':74 'ecosystem':65 'extern':90 'foundat':72 'fragment':91 'graphiql':64 'graphql':3,13,24,48,54,71,79 'hint':85 'includ':75 'integr':77 'javascript':96 'key':73 'latest':30 'line':37 'lint':17 'live':16 'maintain':68 'mode':11 'packag':52 'parser':10 'part':61 'power':21 'provid':4 'releas':32 'rule':95 'schema':25,80 'stabl':31 'support':53,88 'target':39 'typeahead':19 'use':45 'v15':55 'v16':56 'v17':58 'valid':87,94 'version':26 'x':36","created_at":"2026-06-07T16:50:42.714465+00:00","updated_at":"2026-06-07T16:50:42.714465+00:00","problems":[{"fix":"Run `npm install codemirror-graphql` and ensure import path matches installed package.","cause":"Package not installed or path incorrect.","error":"Error: Cannot find module 'codemirror-graphql/mode'"},{"fix":"Add `import 'codemirror/addon/lint/lint'` before importing graphql lint addon.","cause":"Missing import of 'codemirror/addon/lint/lint' before graphql lint.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'lint')"},{"fix":"Pass a valid GraphQLSchema object in the `lint.schema` and `hintOptions.schema` properties.","cause":"Missing schema in lint or hintOptions configuration.","error":"Schema is not provided to lint/hint options"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql#readme","github":"https://github.com/graphql/graphiql","docs":null,"changelog":null,"pypi":null,"npm":"codemirror-graphql","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}