@codemirror/lang-json

@codemirror/lang-json adds JSON language support to the CodeMirror 6 code editor. It wraps the @lezer/json grammar in a CodeMirror LRLanguage/LanguageSupport extension, giving editor instances JSON-aware syntax parsing, code folding for objects and arrays, continued indentation, and auto-closing brackets out of the box via a single json() call.

A second, independent export, jsonParseLinter(), plugs into CodeMirror’s lint extension to surface JSON.parse syntax errors as inline diagnostics, so malformed JSON is flagged without pulling in a separate validation library. The package is intentionally small and dependency-light, following the same composition pattern as every other @codemirror/lang-* package in the CodeMirror 6 ecosystem.

What You Get

• A json() function that returns a ready-to-use LanguageSupport extension for JSON syntax highlighting, parsing, and editing behavior
• The underlying jsonLanguage LRLanguage object for advanced setups that need to compose or extend the language data directly
• Code folding support for JSON objects and arrays via foldNodeProp/foldInside
• Continued indentation on newlines inside objects and arrays, with exceptions for closing brackets
• Auto-closing of brackets and quotes ([, {, ”) configured through languageData
• An optional jsonParseLinter() lint source that reports JSON.parse syntax errors as inline editor diagnostics

Common Use Cases

• Adding JSON editing support to an in-browser code editor built on CodeMirror 6 (config editors, API playgrounds, JSON viewers)
• Building a JSON schema or config-file editing UI that needs live syntax error feedback via jsonParseLinter()
• Embedding a lightweight JSON editor inside a larger developer tool or admin panel without shipping a full JSON validation library
• Composing JSON support alongside other @codemirror/lang-* packages in a multi-language editor (e.g. a JSON panel next to a JS or Markdown panel)

Under The Hood

Architecture The package is a two-file extension for CodeMirror 6’s language layer. json.ts defines jsonLanguage via LRLanguage.define, wrapping a lezer JSON parser (@lezer/json) configured with indentNodeProp (continuedIndent for Object/Array except closing brackets) and foldNodeProp (foldInside for Object/Array nodes), plus languageData for closeBrackets and indentOnInput; the exported json() factory wraps that LRLanguage in a LanguageSupport instance, CodeMirror’s unit of pluggable language configuration. lint.ts is fully decoupled from parsing — jsonParseLinter() returns a linter function that runs the browser’s native JSON.parse against the document text and, on SyntaxError, regexes the error message to locate a diagnostic position via getErrorPosition. The two files share no state; the package composes CodeMirror’s LRLanguage/LanguageSupport/lint extension points rather than implementing its own parser or diagnostics engine.

Tech Stack TypeScript source compiled by @codemirror/buildhelper’s cm-buildhelper into dual ESM (dist/index.js) and CJS (dist/index.cjs) builds with matching .d.ts/.d.cts, per package.json’s exports/module/types fields. Runtime dependencies are minimal and pinned to the CodeMirror 6 line: @codemirror/language ^6.0.0 for LRLanguage/LanguageSupport/indentNodeProp/foldNodeProp, and @lezer/json ^1.0.0 for the actual JSON grammar. @codemirror/lint and @codemirror/view appear only as type imports in lint.ts, supplied by the consuming app at runtime as peers. Tests run via cm-runtests, CodeMirror’s shared cross-package test runner, and the module is sideEffects:false to support tree-shaking.

Code Quality There are no test files in this repository itself — cm-runtests follows shared CodeMirror suite conventions but no local *.test.ts exists here, so correctness leans on the upstream @lezer/json parser plus manual review. The two source files are terse (56 total lines) with triple-slash /// doc comments preceding each export, consistent with CodeMirror’s documentation-extraction tooling. Error handling in getErrorPosition() is a pragmatic regex fallback over JS engines’ JSON.parse error message formats (“at position N” / “at line L column C”), fragile across engines but guarded by an instanceof SyntaxError check and a Math.min clamp against doc.length overflow.

API Design The public surface is three exports — json() as the single entry point most consumers need, jsonLanguage for advanced language-data composition, and jsonParseLinter() as an opt-in lint source — mirroring the extension-composition pattern used across every @codemirror/lang-* package, so familiarity transfers directly from any other CodeMirror language package. The README’s usage example is a five-line drop-in with basicSetup, requiring zero configuration for the common case. The tradeoff is that linting is deliberately separate from json() (matching CodeMirror’s opt-in extension philosophy), so consumers who want parse-error diagnostics must remember to add jsonParseLinter() themselves via @codemirror/lint — a step the quick-start example doesn’t mention.