vite-plugin-monaco-editor

Install the plugin as a development dependency using yarn or npm. Ensure you have monaco-editor already installed in your project.

yarn add vite-plugin-monaco-editor -D

# or

npm install --save-dev vite-plugin-monaco-editor

Add the monacoEditorPlugin to your vite.config.ts plugins array.

import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [monacoEditorPlugin()],
});

To use Monaco Editor in a Vite project, import and initialize the monacoEditorPlugin in your vite.config.ts. This plugin handles the bundling of language workers and configures the MonacoEnvironment so the editor can correctly locate and load them.

By default, the plugin includes all supported language workers. You can customize which workers are included, change the public path for serving files, or configure the global API behavior.

import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [
    monacoEditorPlugin({
      // Configuration options go here
    })
  ]
});

To avoid importing all features and languages, you can manually import specific ESM modules and the editor API. This is useful for optimizing your bundle.

1. Create a custom entry point (e.g., customMonaco.ts):

import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export { monaco };

2. Use the custom entry point in your application:

import { monaco } from './customMonaco.ts';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});

To include all features and languages of the Monaco Editor, use a wildcard import from monaco-editor.

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});

The resolveMonacoPath function returns a resolved absolute path for a given Monaco file, attempting to locate it within the local node_modules directory first before falling back to standard resolution.

import { resolveMonacoPath } from 'vite-plugin-monaco-editor';

const filePath = resolveMonacoPath('monaco-editor/esm/vs/editor/editor.worker.js');

The languageWorksByLabel object allows you to look up the IWorkerDefinition (containing the label and the ESM entry path) using the language label as a key. This is useful when programmatically configuring which workers the plugin should bundle.

// Example lookup
const worker = languageWorksByLabel['typescript'];
// Returns: { label: 'typescript', entry: 'monaco-editor/esm/vs/language/typescript/ts.worker' }

The isCDN function determines if a given publicPath is a CDN URL. It returns true if the path starts with http:, https:, file:, or //.

import { isCDN } from 'vite-plugin-monaco-editor';

const isRemote = isCDN('https://cdn.example.com/monaco/'); // returns true
const isLocal = isCDN('/assets/monaco/'); // returns false

The plugin provides a predefined list of language workers that can be used for Monaco Editor functionality. These workers are mapped via labels to their specific ESM entry points within the monaco-editor package.

Supported EditorLanguageWorks labels include:

• editorWorkerService (Core editor service)
• css
• html
• json
• typescript

// Available labels for EditorLanguageWorks:
// 'css' | 'html' | 'json' | 'typescript' | 'editorWorkerService'