@codemirror/lang-xml

@codemirror/lang-xml plugs XML support into the CodeMirror 6 editor: it wires the Lezer XML grammar into CodeMirror’s language framework to provide syntax highlighting and indentation, and layers on editor-specific conveniences like automatic tag closing and schema-aware autocompletion for elements and attributes.

Calling xml() returns a LanguageSupport extension that can be dropped straight into a CodeMirror EditorView’s extensions array. Developers who want intelligent completions (suggesting valid child elements or attribute values as the user types) can optionally pass an ElementSpec/AttrSpec schema describing their XML dialect, which the bundled completeFromSchema helper turns into a CompletionSource.

What You Get

• The xml() function returning a LanguageSupport extension ready to drop into a CodeMirror EditorView
• xmlLanguage, a language provider based on the Lezer XML parser with highlighting and indentation baked in
• autoCloseTags, an extension that inserts closing tags automatically when > or / is typed
• completeFromSchema(elements, attributes) to build schema-aware completions for elements and attribute values
• ElementSpec/AttrSpec types for describing an XML dialect’s allowed elements, children, and attributes

Common Use Cases

• Adding XML editing support (highlighting, indentation, auto-close tags) to a CodeMirror-based web code editor
• Building a schema-aware XML editor that autocompletes valid child elements and attribute values for a known dialect
• Embedding an XML/XHTML/config-file editing experience inside a documentation or admin tool built on CodeMirror 6
• Providing structured editing for XML-based formats (SVG, RSS, custom config schemas) in a browser-based tool

Under The Hood

Architecture - The package is small and cleanly split in two: src/xml.ts (113 lines) defines the xml() entry point, wiring the Lezer-XML-based xmlLanguage together with the autoCloseTags view extension and, when a schema is supplied, a completion source; src/complete.ts (241 lines) implements completeFromSchema, which walks the current syntax tree position to determine valid completions (element names, attribute names, attribute values) based on the caller-supplied ElementSpec/AttrSpec schema. All actual XML parsing is delegated to the separate @lezer/xml grammar package, keeping this package focused purely on editor integration (highlighting, indentation, completion) rather than parsing. Tech Stack - TypeScript, built with the shared @codemirror/buildhelper tooling used across all official CodeMirror 6 language packages. Runtime dependencies are the core CodeMirror 6 modules (@codemirror/autocomplete, @codemirror/language, @codemirror/state, @codemirror/view) plus @lezer/common and @lezer/xml, reflecting its role as a thin adapter layer over the shared CodeMirror/Lezer ecosystem rather than a standalone implementation. Code Quality - test/test-complete.ts specifically exercises the schema-driven completion logic, the most algorithmically interesting part of the package; the parsing and highlighting behavior is implicitly covered by the shared Lezer XML grammar’s own tests. The package has a single primary contributor (Marijn Haverbeke, the CodeMirror/Lezer author), consistent with it being one of many small, focused @codemirror/lang-* packages maintained as part of that ecosystem rather than independently. API Design - The public surface is intentionally minimal: one factory function (xml(conf?)) covers the common case with zero configuration, while power users opt into schema-aware completions by passing typed elements/attributes config objects. This mirrors the consistent, predictable API shape shared across every official @codemirror/lang-* package, so switching between supported languages requires no relearning.