# emmet-monaco-es

> emmet plugin for monaco-editor

Latest version **5.7.0** (published 2026-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install emmet-monaco-es
pnpm add emmet-monaco-es
yarn add emmet-monaco-es
bun add emmet-monaco-es
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.7.0 |
| Published | 2026-03-05 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1008 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 85 |
| Author | Troy |
| Maintainers | troy351 |
| Keywords | emmet, emmet-plugin, monaco-editor |

## Links

- npm: https://www.npmjs.com/package/emmet-monaco-es
- Repository: https://github.com/troy351/emmet-monaco-es
- Issues: https://github.com/troy351/emmet-monaco-es/issues
- npm.io page: https://npm.io/package/emmet-monaco-es

## Dependencies (1)

- [emmet](https://npm.io/package/emmet.md) ^2.4.11

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 5.7.0 (latest) — 2026-03-05
- 5.6.1 — 2025-09-14
- 5.6.0 — 2025-09-14
- 5.5.0 — 2024-10-26
- 5.4.0 — 2024-06-11
- 5.3.2 — 2024-02-20
- 5.3.1 — 2024-02-20
- 5.3.0 — 2023-04-22
- 5.2.2 — 2023-04-06
- 5.2.1 — 2023-03-06
- 5.2.0 — 2023-02-13
- 5.1.2 — 2022-08-11
- 5.1.1 — 2022-08-11
- 5.1.0 — 2022-03-03
- 5.0.2 — 2021-11-09
- … 33 more at https://npm.io/package/emmet-monaco-es/versions

## README

# emmet-monaco-es

<p>
  <a href="https://npmcharts.com/compare/emmet-monaco-es?minimal=true"><img src="https://img.shields.io/npm/dm/emmet-monaco-es.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/emmet-monaco-es"><img src="https://img.shields.io/npm/v/emmet-monaco-es.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/emmet-monaco-es"><img src="https://img.shields.io/npm/l/emmet-monaco-es.svg" alt="License"></a>
</p>

Emmet Support for [Monaco Editor](https://github.com/Microsoft/monaco-editor), based on [vscode-emmet-helper](https://github.com/microsoft/vscode-emmet-helper)

## Advantage

- Almost the same as VSCode's built-in emmet, integrated with completion provider
- Various languages support

## Install

```shell
$ npm install emmet-monaco-es
```

## Usage

#### NOTE

The `emmet` functionality was bound to language features not to a specific editor instance.

- `emmetHTML` works for `HTML` compatible languages, like `PHP`, for `html` only by default
- `emmetCSS` works for `CSS` compatible languages, like `LESS` / `SCSS`, for `css` only by default
- `emmetJSX` works for `JSX` compatible languages, like `JavaScript` / `TypeScript` / `MDX`, for `javascript` only by default

_Follow [this](https://github.com/microsoft/monaco-editor/issues/264#issuecomment-654578687) guide to make Monaco Editor support `TSX`_

**Initialize emmet should BEFORE all monaco editor instance creation**

#### ESM

```javascript
import { emmetHTML, emmetCSS, emmetJSX, expandAbbreviation, registerCustomSnippets } from 'emmet-monaco-es'

// `emmetHTML` , `emmetCSS` and `emmetJSX` are used the same way
const dispose = emmetHTML(
  // monaco-editor it self. If not provided, will use window.monaco instead.
  // This could make the plugin support both ESM and AMD loaded monaco-editor
  monaco,
  // languages needs to support html markup emmet, should be lower case.
  ['html', 'php'],
)

// run it if you want to dispose emmetHTML.
// NOTE: all languages specified will be disposed.
dispose()

// internal expand API, if you want to extend functionality with emmet
// check out the emmet repo https://github.com/emmetio/emmet for how to use it
expandAbbreviation('a', { type: 'markup', syntax: 'html' }) // <a href=""></a>
expandAbbreviation('fz14', { type: 'stylesheet', syntax: 'css' }) // font-size: 14px;

// register custom snippets
registerCustomSnippets('html', {
  ull: 'ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }',
  oll: '<ol><li id=${1} class=${2}> Will only work in html </ol>',
  ran: '{ Wrap plain text in curly braces }',
})
```

#### Browser

```html
<script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script>
<script>
  // NOTE: monaco-editor should be loaded first
  // see the above esm example for details
  emmetMonaco.emmetHTML(monaco)
</script>
```

## External Syntax Highlighters

By default, emmet-monaco-es uses Monaco's built-in Monarch tokenizer to detect valid abbreviation locations. When using an external syntax highlighter (e.g. [shiki](https://github.com/shikijs/shiki)), Monarch tokens are unavailable, and emmet will not work correctly.

Pass `{ tokenizer: 'standard' }` as the options argument to use Monaco's `StandardTokenType` API instead:

```javascript
emmetHTML(monaco, ['html'], { tokenizer: 'standard' })
emmetCSS(monaco, ['css'], { tokenizer: 'standard' })
emmetJSX(monaco, ['javascript'], { tokenizer: 'standard' })
```

## Limitation

Does **NOT** support Emmet for embed CSS inside HTML / JSX / TSX

## License

MIT

---
_Source: https://npm.io/package/emmet-monaco-es · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._