Introduction

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

See demos and docs.

How to install

Install with NPM

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

How to import

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.

How to use

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.

Notes

• When using Vite, add the following into the Vite config:

  {
    optimizeDeps: {
      exclude: ["@hey-web-components/monaco-editor"],
    }
  }

• For React:

  import { MonacoEditor, MonacoDiffEditor } from '@hey-web-components/monaco-editor/react';
  <MonacoEditor></MonacoEditor>
  <MonacoDiffEditor></MonacoDiffEditor>