@codemirror/language

Language support infrastructure for the CodeMirror 6 editor: parsing, indentation, code folding, bracket matching, and syntax highlighting.

Library
npm
v6.13.1
32 stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum. How we score it →
25 /100 Needs Attention
Development Activity 4
Maintenance 0
Community 24
Maturity 60
Momentum 12

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation. How we score it →
71 /100 Good
Architecture 80
Code Quality 62
Innovation 74
Learning Curve 68

@codemirror/language is the language-support layer of the CodeMirror 6 code editor. It defines the core Language and LRLanguage classes that wrap a Lezer parser and expose it to the editor as an incrementally-updated syntax tree, plus the facets and node-prop conventions that let a language attach indentation rules, foldable regions, bracket matching, and syntax highlighting to that tree.

Rather than shipping a specific language mode, the package provides the building blocks that CodeMirror’s per-language packages (@codemirror/lang-javascript, @codemirror/lang-python, etc.) and third-party language extensions are built on top of, along with a StreamLanguage adapter for porting legacy CodeMirror 5-style line-based parsers into the same system.

What You Get

  • Language, LRLanguage, and StreamLanguage classes for defining a language from a Lezer parser or a legacy stream/line parser
  • syntaxTree()/ensureSyntaxTree() APIs for reading the current (or forced) parse tree from editor state
  • An indentation system (indentService, indentNodeProp, continuedIndent, delimitedIndent) for computing per-line indent from the syntax tree
  • Code folding (foldService, foldNodeProp, foldGutter, codeFolding) driven off the same tree
  • Bracket matching (bracketMatching) and tag-based syntax highlighting (HighlightStyle, syntaxHighlighting, defaultHighlightStyle)

Common Use Cases

  • Implementing a new language mode for CodeMirror 6 by wrapping a Lezer grammar in an LRLanguage
  • Adding editor features (indent-on-enter, code folding, bracket matching, syntax-aware theming) that need to read the current syntax tree
  • Porting an existing CodeMirror 5 mode to CodeMirror 6 via the StreamLanguage/StreamParser adapter
  • Building custom tooling (linters, formatters, structural navigation) on top of the live incremental parse tree

Under The Hood

Architecture: The package centers on the Language class (src/language.ts), which pairs a Lezer Parser with a language-data Facet and exposes the parsed document as a StateField-backed syntax tree, kept incrementally up to date by a background ViewPlugin (LanguageState, ParseContext) that reparses only changed regions rather than the whole document. LRLanguage specializes this for Lezer LR grammars, while stream-parser.ts implements a StreamParser/StreamLanguage adapter that wraps CodeMirror 5-style, line-based token parsers into a Lezer-compatible incremental Parser, letting legacy modes plug into the same tree-based pipeline. Everything downstream is built as independent modules that read that shared tree through Lezer NodeProps registered on the grammar: indent.ts computes per-line indentation via an indentService facet and node-prop-driven strategies (continuedIndent, delimitedIndent, flatIndent); fold.ts derives foldable ranges via foldService/foldNodeProp and renders a foldGutter view plugin; matchbrackets.ts walks the tree to find and highlight matching bracket pairs; and highlight.ts maps Lezer highlighting tags to CSS via HighlightStyle/syntaxHighlighting. All of these compose as ordinary CodeMirror 6 Extensions (facets, state fields, view plugins), so a language author only needs to attach node props to their grammar to get indentation, folding, and highlighting largely for free.

Tech Stack: 100% TypeScript, published as dual ESM/CJS (dist/index.js / dist/index.cjs) with bundled .d.ts types via @codemirror/buildhelper. Runtime dependencies are entirely within the CodeMirror/Lezer ecosystem: @codemirror/state and @codemirror/view (^6.x) for the extension/state model, @lezer/common, @lezer/highlight, and @lezer/lr (^1.x) for tree/parser primitives, and style-mod for scoped stylesheet injection. There are no dependencies outside that ecosystem, and the test-only devDependency on @lezer/javascript is used purely as a sample grammar for the test suite. The build/test scripts (cm-buildhelper, cm-runtests) are the same shared tooling used across all CodeMirror 6 monorepo packages, so the package follows CodeMirror’s standard release and versioning conventions.

Code Quality: The test/ directory (three files, ~225 lines) exercises incremental parsing correctness and timing (test-syntax.ts), the stream-parser adapter (test-stream-parser.ts), and folding (test-fold.ts) using the lightweight ist assertion library in a describe/it structure. Coverage is real but narrow relative to the ~2,800 lines of source — there’s no dedicated test file for highlight.ts or matchbrackets.ts in the sampled suite. The source itself is unusually well documented: 233 /// doc comments across the module (used to generate the published API reference at codemirror.net/docs/ref), consistent camelCase naming, and explicit thrown Errors for invalid input (e.g. indentUnit validation) rather than silent failures or fallbacks.

API Design: The entire public surface is re-exported from a single src/index.ts, so consumers get one import path (@codemirror/language) covering language definition, indentation, folding, highlighting, and bracket matching rather than having to reach into submodules. The API follows CodeMirror 6’s own Facet/StateField/NodeProp conventions throughout, which is a low-friction, idiomatic fit for anyone already building on @codemirror/state/@codemirror/view, but represents real boilerplate and a non-trivial ramp-up for newcomers unfamiliar with that extension model. The README supplies one concrete usage example (defining an LRLanguage from a Lezer parser) and links out to the full hosted API reference rather than embedding extensive inline examples.

Used by 67 apps in this directory

Go
69%
MIT

hoop

Monitoring · Security

836

A wire-protocol gateway that enforces data masking, command blocking, approval workflows, and full session recording for engineers and AI agents accessing production infrastructure.

View details
86
Repo Health
80
Technical
64
Dependency
Built with
Go 69%
Clojure 13%
Updated 5 days ago
TypeScript
68%
MIT

Hoppscotch

Developer Tools

80,676

A lightweight, offline-capable API development ecosystem for testing HTTP, GraphQL, WebSocket, MQTT, and SSE endpoints across web, desktop, and CLI.

View details
91
Repo Health
83
Technical
62
Dependency
Built with
TypeScript 68%
Vue 24%
Updated 6 days ago
TypeScript
91%
Apache 2.0

HyperFrames

AI Design Tools · AI Development

70,938

Turn plain HTML and CSS into deterministic, pixel-perfect MP4 videos — authored by humans or AI agents, rendered by headless Chrome and FFmpeg.

View details
84
Repo Health
83
Technical
65
Dependency
Built with
TypeScript 91%
Updated 5 days ago
TypeScript
100%
Apache 2.0

ILLA Builder

Design Tools · Developer Tools · Low Code Platforms

12,333

Open-source low-code platform for building internal tools with drag-and-drop UI, reactive data bindings, and real-time collaboration.

View details
55
Repo Health
71
Technical
63
Dependency
Built with
TypeScript 100%
Updated 5 months ago
TypeScript
96%
Other

Infisical

Devops · Security

29,961

The open-source platform for secrets, certificates, privileged access, and AI agent security — all in one self-hostable system.

View details
91
Repo Health
84
Technical
64
Dependency
Built with
TypeScript 96%
Updated 5 days ago
TypeScript
77%
Other

Joplin

Note Taking

56,853

The privacy-first, open-source note-taking app with end-to-end encrypted sync, AI assistance, and a powerful plugin ecosystem across every platform.

View details
93
Repo Health
87
Technical
60
Dependency
Built with
TypeScript 77%
JavaScript 14%
Updated 6 days ago
TypeScript
52%

Kener

Devops · Monitoring

5,216

Stunning, self-hosted status pages with real-time uptime monitoring, incident management, and multi-channel notifications in a single Docker container.

View details
87
Repo Health
76
Technical
66
Dependency
Built with
TypeScript 52%
Svelte 45%
Updated 1 weeks ago
TypeScript
63%
Apache 2.0

Laminar

AI Development · Monitoring

3,434

Open-source observability platform purpose-built for AI agents — trace, evaluate, debug, and monitor at scale with SQL access and real-time replay.

View details
86
Repo Health
76
Technical
65
Dependency
Built with
TypeScript 63%
Rust 35%
Updated 5 days ago
TypeScript
96%
Other

Langfuse

AI Development · Monitoring

36,276

Open source AI engineering platform for LLM observability, prompt management, evaluation, and debugging — self-host in minutes or use Langfuse Cloud.

View details
92
Repo Health
81
Technical
65
Dependency
Built with
TypeScript 96%
Updated 5 days ago

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers