# monaco-editor-wrapper

> Wrapper for monaco-vscode-editor-api and monaco-languageclient

Latest version **6.12.0** (published 2025-08-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install monaco-editor-wrapper
pnpm add monaco-editor-wrapper
yarn add monaco-editor-wrapper
bun add monaco-editor-wrapper
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 6.12.0 |
| Published | 2025-08-21 |
| First published | 2022-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.10.0 |
| Dependencies | 29 |
| Unpacked size | 198.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1366 |
| Author | TypeFox |
| Maintainers | kaisalmen |
| Keywords | monaco-editor, monaco-languageclient, typescript, vscode |

## Links

- npm: https://www.npmjs.com/package/monaco-editor-wrapper
- Repository: https://github.com/TypeFox/monaco-languageclient
- Homepage: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/README.md
- Issues: https://github.com/TypeFox/monaco-languageclient/issues
- npm.io page: https://npm.io/package/monaco-editor-wrapper

## Dependencies (29)

- [vscode](https://npm.io/package/vscode.md) npm:@codingame/monaco-vscode-extension-api@~20.2.1
- [vscode-ws-jsonrpc](https://npm.io/package/vscode-ws-jsonrpc.md) ~3.5.0
- [monaco-languageclient](https://npm.io/package/monaco-languageclient.md) ~9.11.0
- [vscode-languageclient](https://npm.io/package/vscode-languageclient.md) ~9.0.1
- [@codingame/monaco-vscode-api](https://npm.io/package/@codingame/monaco-vscode-api.md) ~20.2.1
- [vscode-languageserver-protocol](https://npm.io/package/vscode-languageserver-protocol.md) ~3.17.5
- [@codingame/monaco-vscode-editor-api](https://npm.io/package/@codingame/monaco-vscode-editor-api.md) ~20.2.1
- [@codingame/monaco-vscode-extension-api](https://npm.io/package/@codingame/monaco-vscode-extension-api.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-cs](https://npm.io/package/@codingame/monaco-vscode-language-pack-cs.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-de](https://npm.io/package/@codingame/monaco-vscode-language-pack-de.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-es](https://npm.io/package/@codingame/monaco-vscode-language-pack-es.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-fr](https://npm.io/package/@codingame/monaco-vscode-language-pack-fr.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-it](https://npm.io/package/@codingame/monaco-vscode-language-pack-it.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-ja](https://npm.io/package/@codingame/monaco-vscode-language-pack-ja.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-ko](https://npm.io/package/@codingame/monaco-vscode-language-pack-ko.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-pl](https://npm.io/package/@codingame/monaco-vscode-language-pack-pl.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-ru](https://npm.io/package/@codingame/monaco-vscode-language-pack-ru.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-tr](https://npm.io/package/@codingame/monaco-vscode-language-pack-tr.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-pt-br](https://npm.io/package/@codingame/monaco-vscode-language-pack-pt-br.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-zh-hans](https://npm.io/package/@codingame/monaco-vscode-language-pack-zh-hans.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-zh-hant](https://npm.io/package/@codingame/monaco-vscode-language-pack-zh-hant.md) ~20.2.1
- [@codingame/monaco-vscode-language-pack-qps-ploc](https://npm.io/package/@codingame/monaco-vscode-language-pack-qps-ploc.md) ~20.2.1
- [@codingame/monaco-vscode-theme-service-override](https://npm.io/package/@codingame/monaco-vscode-theme-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-views-service-override](https://npm.io/package/@codingame/monaco-vscode-views-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-editor-service-override](https://npm.io/package/@codingame/monaco-vscode-editor-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-monarch-service-override](https://npm.io/package/@codingame/monaco-vscode-monarch-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-textmate-service-override](https://npm.io/package/@codingame/monaco-vscode-textmate-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-workbench-service-override](https://npm.io/package/@codingame/monaco-vscode-workbench-service-override.md) ~20.2.1
- [@codingame/monaco-vscode-theme-defaults-default-extension](https://npm.io/package/@codingame/monaco-vscode-theme-defaults-default-extension.md) ~20.2.1

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 6.12.0 (latest) — 2025-08-21
- 6.10.0-next.0 (next) — 2025-08-08
- 6.11.0 — 2025-08-14
- 6.10.0 — 2025-08-11
- 6.9.0 — 2025-06-24
- 6.8.1 — 2025-06-17
- 6.8.0 — 2025-05-28
- 6.7.0 — 2025-05-06
- 6.7.0-next.2 — 2025-05-05
- 6.7.0-next.1 — 2025-04-11
- 6.7.0-next.0 — 2025-04-04
- 6.6.0 — 2025-03-13
- 6.6.0-next.1 — 2025-03-13
- 6.6.0-next.0 — 2025-03-07
- 6.5.0 — 2025-03-06
- … 127 more at https://npm.io/package/monaco-editor-wrapper/versions

## README

# Monaco Editor and Monaco Languageclient Wrapper

This packages provides a wrapped `monaco-editor` with or without language support (main package export). The `monaco-languageclient` can be activated to connect to a language server either via jsonrpc over a websocket to an external server process or via language server protocol for browser where the language server runs in a web worker.

## CHANGELOG

All changes are noted in the [CHANGELOG](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/CHANGELOG.md).

## Getting Started

This is npm package is part of the [monaco-languageclient mono repo](https://github.com/TypeFox/monaco-languageclient). Please follow the main repositories [instructions](https://github.com/TypeFox/monaco-languageclient#getting-started) to get started with local development.

## Configuration

With release >2.0.0, the configuration approach is completely revised.

The `UserConfig` now contains everything and is passed to the `start` function of the wrapper along with the HTML element `monaco-editor` is bound to.

[@codingame/monaco-vscode-api](https://github.com/CodinGame/monaco-vscode-api) implements the VSCode api and redirects calls to `monaco-editor`. It allows to add serivccs that are usually only available in VSCode and not with pure `monaco-editor`.
 `UserConfig` allows two possible configuration modes:

- **Classic**: Configure `monaco-editor` as you would when using it directly, [see](./src/editorAppClassic.ts)
- **Extended**: Configure `monaco-editor` like a VSCode extension, [see](./src/editorAppExtended.ts)

[This](https://github.com/CodinGame/monaco-vscode-api#monaco-standalone-services) is the list of services defined by [@codingame/monaco-vscode-api](https://github.com/CodinGame/monaco-vscode-api).
The following services are enabled by default in both editor modes:

- layout
- environment
- extension
- files
- quickAccess
- languages
- model
- configuration

**Extended** mode adds the following and thereby disables monarch grammars:

- theme
- textmate

If you want any further services than the ones initialized by default, you should use the **extended** mode as some service (like *theme* and *textmate*) are incompatible with the **classic** mode.

Monarch grammars and themes can only be used in **classic** mode and textmate grammars and themes can only be used in **extended** mode.

## Usage

Monaco Editor with Python language support in web worker and relying on extended mode:

```ts
import '@codingame/monaco-vscode-python-default-extension';
import { MonacoEditorLanguageClientWrapper, WrapperConfig } from 'monaco-editor-wrapper';
import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';

// no top-level await
const run = async () => {
  const wrapper = new MonacoEditorLanguageClientWrapper();
  const wrapperConfig: WrapperConfig = {
    $type: 'extended',
    htmlContainer: document.getElementById('monaco-editor-root')!,
    editorAppConfig: {
      codeResources: {
        modified: {
                uri: '/workspace/hello.py',
                text: 'print("Hello, World!")'
        }
      },
      monacoWorkerFactory: configureDefaultWorkerFactory
    }
  };

  await wrapper.initAndStart(wrapperConfig);
}
```

## Examples

For a detailed list of examples please look at [this section](<https://github.com/TypeFox/monaco-languageclient#examples-overview>) in the main repository.

## License

[MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/LICENSE)

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