# @codemirror/lang-html

> HTML language support for the CodeMirror code editor

Latest version **6.4.12** (published 2026-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @codemirror/lang-html
pnpm add @codemirror/lang-html
yarn add @codemirror/lang-html
bun add @codemirror/lang-html
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.4.12 |
| Published | 2026-08-04 |
| First published | 2020-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 77 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marijn Haverbeke |
| Maintainers | marijn |
| Keywords | editor, code |

## Links

- npm: https://www.npmjs.com/package/@codemirror/lang-html
- Repository: https://code.haverbeke.berlin/codemirror/lang-html
- npm.io page: https://npm.io/package/@codemirror/lang-html

## Dependencies (9)

- [@lezer/css](https://npm.io/package/@lezer/css.md) ^1.1.0
- [@lezer/html](https://npm.io/package/@lezer/html.md) ^1.3.12
- [@lezer/common](https://npm.io/package/@lezer/common.md) ^1.0.0
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.17.0
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.0.0
- [@codemirror/lang-css](https://npm.io/package/@codemirror/lang-css.md) ^6.0.0
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.4.0
- [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.0.0
- [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.0.0

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 6.4.12 (latest) — 2026-08-04
- 6.4.11 — 2025-10-02
- 6.4.10 — 2025-09-11
- 6.4.9 — 2024-04-12
- 6.4.8 — 2024-01-23
- 6.4.7 — 2023-11-27
- 6.4.6 — 2023-08-28
- 6.4.5 — 2023-06-23
- 6.4.4 — 2023-06-05
- 6.4.3 — 2023-03-27
- 6.4.2 — 2023-02-10
- 6.4.1 — 2023-01-12
- 6.4.0 — 2022-11-30
- 6.3.1 — 2022-11-29
- 6.3.0 — 2022-11-28
- … 17 more at https://npm.io/package/@codemirror/lang-html/versions

## README

<!-- NOTE: README.md is generated from src/README.md -->

# @codemirror/lang-html [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-html.svg)](https://www.npmjs.org/package/@codemirror/lang-html)

[ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://code.haverbeke.berlin/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/) | [**CHANGELOG**](https://code.haverbeke.berlin/codemirror/lang-html/src/branch/main/CHANGELOG.md) ]

This package implements HTML language support for the
[CodeMirror](https://codemirror.net/) code editor.

The [project page](https://codemirror.net/) has more information, a
number of [examples](https://codemirror.net/examples/) and the
[documentation](https://codemirror.net/docs/).

This code is released under an
[MIT license](https://code.haverbeke.berlin/codemirror/lang-html/tree/main/LICENSE).

We aim to be an inclusive, welcoming community. To make that explicit,
we have a [code of
conduct](http://contributor-covenant.org/version/1/1/0/) that applies
to communication around the project.

## Usage

```javascript
import {EditorView, basicSetup} from "codemirror"
import {html} from "@codemirror/lang-html"

const view = new EditorView({
  parent: document.body,
  doc: `<!doctype html>\n<title>HTML</title>`,
  extensions: [basicSetup, html()]
})
```

## API Reference

<dl>
<dt id="user-content-html">
  <code><strong><a href="#user-content-html">html</a></strong>(<a id="user-content-html^config" href="#user-content-html^config">config</a>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> = {}) → <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>

<dd><p>Language support for HTML, including
<a href="#user-content-htmlcompletion"><code>htmlCompletion</code></a> and JavaScript and
CSS support extensions.</p>
<dl><dt id="user-content-html^config">
  <code><strong><a href="#user-content-html^config">config</a></strong></code></dt>

<dd><dl><dt id="user-content-html^config.matchclosingtags">
  <code><strong><a href="#user-content-html^config.matchclosingtags">matchClosingTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>

<dd><p>By default, the syntax tree will highlight mismatched closing
tags. Set this to <code>false</code> to turn that off (for example when you
expect to only be parsing a fragment of HTML text, not a full
document).</p>
</dd><dt id="user-content-html^config.selfclosingtags">
  <code><strong><a href="#user-content-html^config.selfclosingtags">selfClosingTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>

<dd><p>By default, the parser does not allow arbitrary self-closing tags.
Set this to <code>true</code> to turn on support for <code>/&gt;</code> self-closing tag
syntax.</p>
</dd><dt id="user-content-html^config.autoclosetags">
  <code><strong><a href="#user-content-html^config.autoclosetags">autoCloseTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>

<dd><p>Determines whether <a href="#user-content-autoclosetags"><code>autoCloseTags</code></a>
is included in the support extensions. Defaults to true.</p>
</dd><dt id="user-content-html^config.extratags">
  <code><strong><a href="#user-content-html^config.extratags">extraTags</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="#user-content-tagspec">TagSpec</a>&gt;</code></dt>

<dd><p>Add additional tags that can be completed.</p>
</dd><dt id="user-content-html^config.extraglobalattributes">
  <code><strong><a href="#user-content-html^config.extraglobalattributes">extraGlobalAttributes</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>

<dd><p>Add additional completable attributes to all tags.</p>
</dd><dt id="user-content-html^config.nestedlanguages">
  <code><strong><a href="#user-content-html^config.nestedlanguages">nestedLanguages</a></strong>&#8288;?: {tag: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, attrs&#8288;?: fn(<a id="user-content-html^config.nestedlanguages.attrs^attrs" href="#user-content-html^config.nestedlanguages.attrs^attrs">attrs</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>&gt;) → <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, parser: <a href="https://lezer.codemirror.net/docs/ref/#common.Parser">Parser</a>}[]</code></dt>

<dd><p>Register additional languages to parse the content of specific
tags. If given, <code>attrs</code> should be a function that, given an
object representing the tag's attributes, returns <code>true</code> if this
language applies.</p>
</dd><dt id="user-content-html^config.nestedattributes">
  <code><strong><a href="#user-content-html^config.nestedattributes">nestedAttributes</a></strong>&#8288;?: {name: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, tagName&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, parser: <a href="https://lezer.codemirror.net/docs/ref/#common.Parser">Parser</a>}[]</code></dt>

<dd><p>Register additional languages to parse attribute values with.</p>
</dd></dl></dd></dl></dd>
<dt id="user-content-htmllanguage">
  <code><strong><a href="#user-content-htmllanguage">htmlLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt>

<dd><p>A language provider based on the <a href="https://code.haverbeke.berlin/lezer/html">Lezer HTML
parser</a>, extended with the
JavaScript and CSS parsers to parse the content of <code>&lt;script&gt;</code> and
<code>&lt;style&gt;</code> tags.</p>
</dd>
<dt id="user-content-htmlcompletionsource">
  <code><strong><a href="#user-content-htmlcompletionsource">htmlCompletionSource</a></strong>(<a id="user-content-htmlcompletionsource^context" href="#user-content-htmlcompletionsource^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>

<dd><p>HTML tag completion. Opens and closes tags and attributes in a
context-aware way.</p>
</dd>
<dt id="user-content-tagspec">
  <h4>
    <code>interface</code>
    <a href="#user-content-tagspec">TagSpec</a></h4>
</dt>

<dd><p>Type used to specify tags to complete.</p>
<dl><dt id="user-content-tagspec.attrs">
  <code><strong><a href="#user-content-tagspec.attrs">attrs</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>

<dd><p>Define tag-specific attributes. Property names are attribute
names, and property values can be null to indicate free-form
attributes, or a list of strings for suggested attribute values.</p>
</dd><dt id="user-content-tagspec.globalattrs">
  <code><strong><a href="#user-content-tagspec.globalattrs">globalAttrs</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>

<dd><p>When set to false, don't complete global attributes on this tag.</p>
</dd><dt id="user-content-tagspec.children">
  <code><strong><a href="#user-content-tagspec.children">children</a></strong>&#8288;?: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[]</code></dt>

<dd><p>Can be used to specify a list of child tags that are valid
inside this tag. The default is to allow any tag.</p>
</dd></dl>

</dd>
<dt id="user-content-htmlcompletionsourcewith">
  <code><strong><a href="#user-content-htmlcompletionsourcewith">htmlCompletionSourceWith</a></strong>(<a id="user-content-htmlcompletionsourcewith^config" href="#user-content-htmlcompletionsourcewith^config">config</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>) → fn(<a id="user-content-htmlcompletionsourcewith^returns^context" href="#user-content-htmlcompletionsourcewith^returns^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>

<dd><p>Create a completion source for HTML extended with additional tags
or attributes.</p>
<dl><dt id="user-content-htmlcompletionsourcewith^config">
  <code><strong><a href="#user-content-htmlcompletionsourcewith^config">config</a></strong></code></dt>

<dd><dl><dt id="user-content-htmlcompletionsourcewith^config.extratags">
  <code><strong><a href="#user-content-htmlcompletionsourcewith^config.extratags">extraTags</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="#user-content-tagspec">TagSpec</a>&gt;</code></dt>

<dd><p>Define extra tag names to complete.</p>
</dd><dt id="user-content-htmlcompletionsourcewith^config.extraglobalattributes">
  <code><strong><a href="#user-content-htmlcompletionsourcewith^config.extraglobalattributes">extraGlobalAttributes</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>

<dd><p>Add global attributes that are available on all tags.</p>
</dd></dl></dd></dl></dd>
<dt id="user-content-autoclosetags">
  <code><strong><a href="#user-content-autoclosetags">autoCloseTags</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt>

<dd><p>Extension that will automatically insert close tags when a <code>&gt;</code> or
<code>/</code> is typed.</p>
</dd>
</dl>

---
_Source: https://npm.io/package/@codemirror/lang-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
