@hey-web-components/monaco-editor is a web component wrapper for monaco-editor.

Getting started to use monaco-editor with code as simple as:

<script type="module" src="https://unpkg.com/@hey-web-components/monaco-editor"></script>
<hey-monaco-editor></hey-monaco-editor>

See demos and docs.

npm i @hey-web-components/monaco-editor

To obtain it directly from the CDN, it can be imported by simply adding a script tag like this:

<script
  type="module"
  src="https://unpkg.com/@hey-web-components/monaco-editor"
></script>

If it is installed locally, then it can be imported by adding a script tag like this:

<script
  type="module"
  src="node_modules/@hey-web-components/monaco-editor/dist/cdn/index.js"
></script>

Assuming it is installed locally by using NPM, then it can be imported like this:

import '@hey-web-components/monaco-editor';

This import statement would define the custom elements automatically.

For standard editor:

<hey-monaco-editor></hey-monaco-editor>

For diff editor:

<hey-monaco-diff-editor></hey-monaco-diff-editor>

More details can be found from demos and docs.

This wrapper does not contain the monaco-editor library, it will fetch the library accroding to the vs path (from the AMD bundle of the monaco-editor library). Thus, different versions of monaco-editor can be used. The default vs path value is set to a CDN url but it can be replaced with a custom path.

To set a custom vs path, simply import and call setVsPath() function before loading the components.

import {setVsPath} from '@hey-web-components/monaco-editor';
setVsPath('the/custom/path');

Alternatively, the vs path can be set by setting __MONACO_VS_PATH__ property of the window object.

window.__MONACO_VS_PATH__ = 'the/custom/path';

• For React, it is recommended to use @lit-labs/react to convert the web elements into React components.