Monaco Editor
True ESM Build

A native ES-module build of the Monaco Editor — no AMD, no CommonJS, no bundler magic required. Import directly in the browser or wire into any modern bundler.

â–ķ Open Playground ⭐ View on GitHub ðŸ“Ķ npm

Why this package?

⚡

Native ESM

All modules are true import/export ES modules — no AMD loader, no require().

🌐

Works in the Browser

Import directly from a CDN or node_modules with a bare <script type="module">.

🔗

Bundler Friendly

Full compatibility with Vite, Rollup, Webpack, esbuild, and other modern build tools via standard ESM exports.

ðŸŽĻ

CSS Included

All required styles are in /min. Adopt them as a CSSStyleSheet or via a plain <link>.

🔄

Auto-updated

A GitHub Actions workflow tracks Monaco Editor releases and updates this package automatically.

ðŸŠķ

Same API

100% Monaco Editor API — no wrapper, no abstraction. Switch from the official package with a one-line import change.

Quick Start

1

Install

npm install @node-projects/monaco-editor-esm
2

Import the editor

import * as monaco from '@node-projects/monaco-editor-esm/esm/vs/editor/editor.main.js';
3

Load the CSS in your HTML file

Always add this <link> to your top-level index.html. Monaco's CSS contains @font-face rules for the Codicon icon font — browsers ignore @font-face inside adoptedStyleSheets or Shadow DOM, so the link tag in the main document is required for icons to render. 

<link rel="stylesheet" href="node_modules/@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css">

If you are using a Web Component you may additionally adopt the sheet for scoped styles, but the top-level <link> must still be present: 

import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type: 'css' };
shadowRoot.adoptedStyleSheets.push(editorStyle);
4

Create an editor instance

const editor = monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, Monaco!");',
  language: 'javascript',
  theme: 'vs-dark',
});