Monaco-Editor-ES

Installation

npm i monaco-editor-es

Usage

Step 1 - Import the script

import '../node_modules/monaco-editor-es/editor.main.js'

Step 2 - Define where the workers are located

const workersDir = new URL('../node_modules/monaco-editor-es/workers/', import.meta.url)
self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    switch(label) {
      case 'json':
        return `${workersDir}json.worker.js`
      case 'css':
        return `${workersDir}css.worker.js`
      case 'html':
        return `${workersDir}html.worker.js`
      case 'typescript':
      case 'javascript':
        return `${workersDir}ts.worker.js`
      default:
        return `${workersDir}editor.worker.js`
    }
  }
}

Step 3 - Create the MonacoEditor

monaco.editor.create(document.getElementById('#editor'), {
  language: 'javascript,
  theme: 'vs-dark'
})

For more info on Monaco Editor see the Official Documentation