mxls — Monaco XML Language Support

Schema-driven autocomplete, real-time validation, template generation, and code formatting for the Monaco editor. Framework-agnostic — works with Angular, React, Vue, or vanilla JS.

---

Features

Feature	Description
Element completion	Suggests child elements based on the XML schema for the current parent tag
Attribute completion	Suggests valid attributes for any open tag
Attribute value completion	Suggests enum values when the cursor is inside attr="..."
Closing tag completion	Suggests </Tag> for the nearest unclosed element
maxOccurs enforcement	Hides elements from suggestions once they reach their schema-defined occurrence limit
Context-aware completion	Resolves the correct element type when the same element name appears with different types in different parent contexts
Cross-schema type resolution	Resolves enum values defined in a different schema file than the element
Real-time validation	Underlines unknown elements, missing required attributes, wrong attribute values, and occurrence violations
Hover messages	Explains each validation error on hover
Template generation	Generates an XML skeleton from the schema up to a configurable nesting depth
Code formatting	Reformats XML via Prettier
Dynamic namespace schemas	Fetches and registers schemas for xmlns:prefix="uri" declarations at runtime

---

Installation

npm install mxls monaco-editor @xmldom/xmldom ts-debounce prettier

Add squiggle styles (or @import 'mxls/style.css'):

.xml-lint { border-width: 0; border-style: dotted; border-bottom-width: 3px; }
.xml-lint--fatal-error { border-color: red; }
.xml-lint--error       { border-color: orange; }
.xml-lint--warning     { border-color: blue; }

---

Quick Start

import { SchemaRegistry, EditorPlugin } from 'mxls'
import type { IMonacoApi } from 'mxls'

function initEditor(editor: monaco.editor.IStandaloneCodeEditor, monacoApi: IMonacoApi): void {
    const registry = new SchemaRegistry(monacoApi)

    registry.set({
        path: 'my-schema.xsd',
        value: MY_SCHEMA_STRING,
        alwaysInclude: true,
    })

    const plugin = new EditorPlugin(monacoApi, editor, registry)
    plugin.activate()
}

Angular:

onEditorInit(editor: any): void {
    initEditor(editor, (window as any).monaco)
}

React:

<Editor language="xml" onMount={(editor, monaco) => initEditor(editor, monaco)} />

---

Keyboard Shortcuts

Action	Shortcut
Autocomplete	Ctrl+Space
Reformat code	Ctrl+Shift+F
Generate template	Ctrl+Shift+G

All actions also appear in the right-click context menu.

---

Validation Errors

• Unknown element — tag not defined in the schema for its parent
• Missing required attribute — use="required" attribute absent
• Unknown attribute — attribute not declared in the schema
• Invalid boolean — xs:boolean attribute with value outside {true, false, 1, 0}
• Invalid enum value — value not in xs:enumeration list
• maxOccurs exceeded — child element appears too many times
• minOccurs violated — required child element missing
• Empty choice — xs:choice element has no children

---

Dependencies

Package	Role
monaco-editor	TypeScript types only
@xmldom/xmldom	XML/XSD DOM parsing
ts-debounce	Debounces validation on keydown
prettier + prettier/plugins/html	XML reformatting
turndown	HTML → Markdown for documentation hovers