lang-html

@codemirror/lang-html is the official HTML language package for CodeMirror 6. It wires the Lezer HTML parser into CodeMirror as an LRLanguage, adding syntax-aware indentation, code folding, bracket matching, and context-aware autocompletion for tags and attributes.

Beyond plain HTML, the package transparently embeds the JavaScript and CSS language packages so that the contents of <script> and <style> blocks (including TypeScript, JSX, and JSON script types) are parsed and highlighted with their own grammars. A single html() call returns a ready-to-use LanguageSupport extension, and options let you register additional nested languages, extra tags, and custom attributes.

What You Get

• An html() factory that returns a configured CodeMirror LanguageSupport extension in one call
• Context-aware completion for HTML tags, attributes, and attribute values via htmlCompletionSource
• Automatic insertion of closing tags as you type > or / through the autoCloseTags extension
• Nested parsing of JavaScript, TypeScript, JSX, JSON, and CSS inside <script> and <style> tags

Common Use Cases

• Building an in-browser HTML editor or template editor with rich highlighting and completion
• Adding an HTML editing mode to a CodeMirror-based IDE, CMS, or documentation tool
• Editing HTML fragments or email templates with embedded inline CSS and JavaScript

Under The Hood

Architecture

The core lives in src/html.ts, which defines an LRLanguage (htmlPlain) built on the @lezer/html parser and augmented with indentNodeProp, foldNodeProp, and bracketMatchingHandle node properties for indentation, folding, and tag matching. The exported htmlLanguage wraps this parser with configureNesting, mixing in nested NestedLang and NestedAttr definitions so <script>/<style> bodies and style/event attributes are parsed by the CSS and JavaScript grammars. The html() function assembles a LanguageSupport from the language plus the autocompletion source, autoCloseTags input handler, and the JavaScript/CSS support extensions, selecting a parser dialect based on matchClosingTags/selfClosingTags config.

Tech Stack

Written entirely in TypeScript and published as dual ESM/CJS with type declarations. It depends on the CodeMirror 6 packages (@codemirror/language, @codemirror/state, @codemirror/view, @codemirror/autocomplete, @codemirror/lang-css, @codemirror/lang-javascript) and the Lezer parsers (@lezer/html, @lezer/common, @lezer/css). Building is handled by @codemirror/buildhelper via the cm-buildhelper script.

Code Quality

The codebase is small and focused (html.ts plus a large complete.ts tag/attribute spec table) with thorough /// doc comments that also generate the README API reference. Types are precise (TagSpec, NestedLang, NestedAttr) and there is a dedicated test file (test/test-complete.ts) exercising completion behavior via cm-runtests.

API Design The public surface is deliberately minimal and ergonomic: a single html(config) function covers the common case, while htmlCompletionSource, htmlCompletionSourceWith, htmlLanguage, and autoCloseTags are exported for finer control. Configuration options are well-named and documented inline, keeping the required boilerplate to a single extension entry in an editor’s setup.