microsoft/monaco-editor

This system is the Monaco Editor, a browser-based code editor that provides core editing capabilities along with extensive language support for syntax highlighting, completion, and diagnostics. It exposes its functionality through a modular ESM architecture, allowing integration via various bundlers like Webpack, Vite, and esbuild, while also offering a dedicated client for Language Server Protocol (LSP) integration. The project includes a comprehensive suite of sample applications and an interactive website playground to demonstrate usage, customization, and accessibility features.

18 changes.

The project transitioned to ES modules by re-exporting the Monaco Editor API and language features through a unified entry point, simplifying integration with modern bundlers. This period involved extensive updates to build tooling, including migrating the website to Webpack and TypeScript, and enhancing the webpack plugin to support Webpack 5 and module workers. Comprehensive testing and sample applications were added to validate functionality across various bundlers like Vite, esbuild, and Parcel, as well as in environments like Electron and Shadow DOM.

19 changes.

The build infrastructure was rewritten in TypeScript to support ESM and AMD packaging, accompanied by new CI scripts for stable and nightly releases. The website underwent a comprehensive rewrite using React and MobX, introducing a modern routing system, accessible components, and an interactive playground with live CSS hot reloading. Extensive new documentation samples were added to demonstrate editor customization, language services, and advanced interaction patterns.

10 changes.

The project overhauled its build infrastructure by migrating both AMD and ESM pipelines to Vite and Rollup, while simultaneously introducing a comprehensive Language Server Protocol client. This period also saw the reorganization of module exports, the addition of new language definitions with lazy loading, and the deprecation of legacy AMD samples in favor of modern ESM workflows.

A new sample project has been added to the \samples/browser-esm-parcel\ directory, demonstrating how to bundle Monaco Editor using Parcel v2. The sample includes an HTML entry point and a JavaScript module that imports the editor's ESM sources and configures \MonacoEnvironment.getWorkerUrl\ to load language workers (JSON, CSS, HTML, TypeScript, and general editor) via URL imports. Users can run the sample by installing dependencies and starting the Parcel dev server, which serves the editor at localhost:9999.

samples/browser-esm-parcel · high confidence

A new sample demonstrating how to bundle Monaco Editor in an Electron application using ESM and Webpack has been added. This sample specifically configures the Electron main process to disable nodeIntegration and enable worldSafeExecuteJavaScript, enforcing a stricter security posture similar to a browser environment. It includes a webpack configuration to bundle the editor and its language workers, along with an HTML entry point that enforces a strict Content Security Policy.

samples/electron-esm-webpack · high confidence

Added a new 'Extending Language Services' chapter to the website playground, featuring ten interactive examples: Code Lens, Color, Completion, Configure JavaScript Defaults, Configure JSON Defaults, Custom Languages, Folding, Hover, Inlay Hints, Model Markers, Semantic Tokens, and Symbols providers. These samples demonstrate how to register custom languages, provide completions, colors, folding ranges, hover information, inlay hints, and semantic tokens, as well as how to configure language defaults and validate models with markers.

website/src/website/data/playground-samples/extending-language-services · high confidence

A new sample project located at samples/browser-esm-vite-react demonstrates a Vite-based React application featuring a Monaco Editor component. The sample includes configuration for TypeScript, Vite, and React, along with a worker setup (userWorker.ts) to handle language services for JSON, CSS, HTML, and TypeScript within the editor.

samples/browser-esm-vite-react · high confidence

New playground samples have been added to the 'Customizing The Appearance' section, providing interactive examples for 'Exposed Colors' (demonstrating the full list of customizable editor color tokens), 'Scrollbars' (showing configuration for scrollbar visibility, size, and arrows), and 'Tokens And Colors' (illustrating how to define custom syntax highlighting rules based on token types).

website/src/website/data/playground-samples/customizing-the-appearence · high confidence

A new sample project has been added to demonstrate how to bundle a minimal Monaco Editor instance using Webpack with ES modules. It includes a configuration that bundles only the core editor, the find widget, and Python language support, along with a script to automatically generate the necessary import statements for languages and features.

samples/browser-esm-webpack-small · high confidence

A new sample demonstrating how to bundle Monaco Editor using esbuild has been added to the samples/browser-esm-esbuild directory. It includes a build script (build.js) that bundles the editor and its language workers into an IIFE format, an entry point (index.js) configuring worker URLs, and supporting HTML files. This provides users with a concrete example of integrating Monaco Editor in a browser environment using esbuild.

samples/browser-esm-esbuild · high confidence

Added new sample applications demonstrating Monaco Editor integration in various environments: a React-based ESM Webpack TypeScript sample, a plain TypeScript ESM Webpack sample, and NW.js AMD samples (v1 and v2). These samples provide reference implementations for setting up the editor with different build tools and module systems.

(repo-wide) · high confidence

A new sample project has been added to demonstrate how to integrate the Monaco Editor with Webpack using the \monaco-editor-webpack-plugin\. This sample includes a Webpack configuration that bundles JavaScript, TypeScript, and CSS language support, along with an HTML entry point and a simple script that initializes a dark-themed editor instance in the browser.

samples/browser-esm-webpack-monaco-plugin · high confidence

The website's utility layer now includes new helper classes to support reactive UI patterns and development workflows. A Debouncer class and a DebouncedComputed utility allow actions and computed values to be delayed, reducing unnecessary processing during rapid state changes. ObservablePromise and ObservableReference provide MobX-backed wrappers for promises and object properties, enabling reactive tracking of asynchronous results and references. An ObservableHistory controller synchronizes the application's internal state with the browser's URL (hash and search params) using MobX autorun, while a hotComponent utility enables live component updates during development by wrapping React components in observables and accepting hot module replacements.

website/src/website/utils · high confidence

The home page now includes a live, editable Monaco editor demo that allows users to write and modify code directly in the browser. This component supports language selection (defaulting to TypeScript), theme switching (Visual Studio, Dark, High Contrast), and demonstrates features like IntelliSense and syntax highlighting, replacing the previous static presentation.

website/src/website/pages/home · high confidence

The new monaco-lsp-client package provides a Language Server Protocol (LSP) client for the Monaco Editor, enabling rich language features such as code completion, hover information, diagnostics, code actions, and formatting. This first iteration introduces the core adapter layer, including the \MonacoLspClient\ entry point, a capabilities registry for handling server capabilities, and a text document synchronizer to bridge Monaco models with LSP text documents. It also implements a comprehensive suite of language feature providers, including completion, hover, signature help, definition, declaration, type definition, implementation, references, document highlights, document symbols, rename, code actions, code lenses, document links, formatting, range formatting, on-type formatting, folding ranges, selection ranges, inlay hints, semantic tokens, and diagnostics.

monaco-lsp-client · high confidence

The repository is initialized with essential configuration and documentation files, including \.gitattributes\ for line-ending normalization, \.gitignore\ patterns for build artifacts, and \.prettierrc\ for code formatting. It also introduces \.mocharc.json\ to configure the Mocha test runner, \.nvmrc\ to specify the Node.js version (24.18.0), and standard documentation files such as \CHANGELOG.md\, \CONTRIBUTING.md\, \LICENSE.txt\, \MAINTAINING.md\, \SECURITY.md\, and \ThirdPartyNotices.txt\.

(repo-wide) · high confidence

A new interactive playground has been added to the website's static assets, allowing users to create and test declarative syntax highlighters using the Monarch library. This tool features a split-pane interface with a language definition editor on the left and a live code preview on the right, supporting multiple sample languages (such as Java, Python, and JavaScript) and theme switching (VS, VS Dark, High Contrast).

website/static · high confidence

A new sample project located at samples/browser-esm-vite demonstrates how to integrate Monaco Editor using Vite and native ES modules. The setup includes a Vite configuration that aliases monaco-editor-core paths to the local VS Code source, a TypeScript configuration targeting ESNext with bundler module resolution, and a main entry point that initializes a TypeScript editor instance in the browser.

samples/browser-esm-vite · high confidence

A new utility module (scripts/lib/index.ts) has been added to support build and release scripts. It provides helpers for running shell commands with output capture, performing shallow git clones to retrieve specific commit IDs, formatting log output for CI systems, writing JSON files, and generating nightly version strings based on the current date. This library centralizes common automation tasks used in the release pipeline.

scripts/lib · high confidence

The 'Interacting with the editor' chapter of the playground samples now includes new examples for adding commands with context keys, binding custom keybindings to existing commands, registering editor actions with chord keybindings, and listening to mouse events. These samples demonstrate how to interact with the editor instance programmatically, including using \createContextKey\, \addCommand\, \addKeybindingRules\, \addAction\, and event listeners like \onMouseMove\ and \onMouseDown\.

website/src/website/data/playground-samples/interacting-with-the-editor · high confidence

A new \include\ loader has been added to the webpack plugin, allowing users to inject global variables and prepend or append import statements to Monaco Editor files. This loader handles module naming conflicts by appending a unique suffix to the user request and supports both Webpack 4 and 5 APIs for stringifying requests, ensuring compatibility across versions.

webpack-plugin/src/loaders · high confidence

The website playground runner has been rewritten to support live CSS updates and a new 'set from' code-binding feature. The runner now listens for 'update-css' messages to instantly apply style changes without a full reload, and it automatically processes comments like \/\* set from 'editor': \*/\ to bind editor content to variables, enhancing the interactive coding experience.

website/src/runner · high confidence

Added new interactive playground samples to the website documentation. The 'Creating The Diff Editor' chapter now includes examples for basic diff setup, inline diff rendering (via \renderSideBySide: false\), and multi-line diff handling. The 'Creating The Editor' chapter has been expanded with samples demonstrating basic editor options (such as \lineNumbers\, \readOnly\, and \theme\), hard wrapping configuration (\wordWrap\, \wrappingIndent\), syntax highlighting for existing HTML elements using \colorizeElement\, and a new example showing how to embed the Monaco editor inside a Shadow DOM web component.

website/src/website/data/playground-samples/creating-the-editor · high confidence

The language definition system has been restructured to support lazy loading, reducing initial startup overhead by deferring the loading of language grammars and configurations until they are actually needed. This change introduces a new registration mechanism in \\_.contribution.ts\ that handles deferred tokenization and configuration loading. Additionally, new language definitions have been added for ABAP, Apex, Azure CLI (azcli), Batch (bat), Bicep, Cameligo, and Clojure, each with their own syntax highlighting, tokenization tests, and language configuration files.

src/languages · high confidence

The AMD build pipeline has been rewritten to use Vite for bundling and Rollup for type declaration generation, replacing the previous build scripts. This change introduces a new plugin (\urlToEsmPlugin\) that rewrites \new URL(...?esm)\ patterns to support Web Workers in the AMD output, and updates the entry point (\editor.main.ts\) to configure the Monaco environment and load workers via blob URLs. The build process now outputs to \out/monaco-editor/\ and includes specific handling for NLS messages and CSS assets, ensuring the AMD distribution is correctly bundled and typed.

build/amd · high confidence

The new AddWorkerEntryPointPlugin now detects the installed Webpack version and uses the appropriate hook API (compiler.hooks.make.tapAsync for Webpack 4+, compiler.plugin for older versions), ensuring the plugin works correctly with Webpack 5 without breaking compatibility with earlier versions.

webpack-plugin/src/plugins · high confidence

A new pre-commit hook has been added to the repository, enabling automated checks to run before each commit. This ensures that code quality and formatting standards are enforced consistently across the project.

.husky · high confidence

The build infrastructure has been rewritten in TypeScript, replacing the previous JavaScript-based scripts. This change introduces a new packaging pipeline that generates both ESM and AMD builds, produces TypeScript declaration files (including a generated \metadata.d.ts\ for language and feature definitions), and updates the output structure. The new system also includes updated scripts for importing TypeScript sources, managing npm dependencies, and generating release metadata.

build · high confidence

The language service workers for CSS, HTML, and JSON have been reorganized to support ES modules. The worker initialization scripts now import from the internal common module, and the worker manager creates workers using dynamic imports with the \?esm\ query parameter (e.g., \./css.worker?esm\). This change ensures that the language features (such as completion, validation, and formatting) are loaded and executed as ES modules, aligning with the project's module system.

(repo-wide) · high confidence

The samples in the \samples/legacy\ directory, which demonstrate the Monaco Editor using the AMD loader (including browser, Electron, iframe, and shadow DOM configurations), are now marked as unsupported and will be removed in future releases. Users are advised to migrate to the ESM version of the editor instead of relying on these legacy AMD-based examples.

samples/legacy · high confidence

The ESM build process in the \build/esm\ directory has been restructured to use Rollup for bundling JavaScript and TypeScript declaration files. This change introduces a new \build.script.ts\ entry point and dedicated configuration files (\rollup.config.mjs\ and \rollup-types.config.mjs\) to handle the build pipeline. It also includes the integration of custom Rollup plugins, such as \rollup-plugin-keep-css-imports\ for handling CSS assets and \rollup-url-to-module-plugin\ for resolving module URLs, ensuring that the ESM output correctly bundles code, types, and static assets.

build/esm · high confidence

The CI pipeline now uses new TypeScript scripts to prepare and build the monaco-editor and monaco-editor-core packages for both stable and nightly releases. The \build-monaco-editor-core-pkg.ts\ script handles cloning the vscode repository, setting the version and commit ID, and running the core build and tests. The \build-monaco-editor-pkg.ts\ script updates the main package version to match the core, merges core dependencies for CVE tracking, and runs the full build, test, and smoke test suite. A new \env.ts\ script validates required environment variables for nightly builds.

scripts/ci · high confidence

The playground page has been rewritten to support advanced debugging and isolation workflows. Users can now bisect Monaco Editor versions to identify regressions, compare the current editor against the latest development build, and load Monaco from specific NPM versions or independent core/language sources. The preview now runs in an isolated iframe hosted at isolated-playground.github.io, and the editor integrates with the @vscode/web-editors client for synchronized editing. Auto-reload is disabled by default, and the UI layout has been adjusted to wrap-reverse for better responsiveness.

website/src/website/pages/playground · high confidence

The package now exposes the Monaco Editor API and built-in language support (CSS, HTML, JSON, TypeScript) through a unified entry point. By re-exporting from \monaco-editor-core\ and registering language features, users can import the editor and its languages directly from this package's main module, simplifying integration with modern module bundlers.

src · high confidence

The monaco-editor-webpack-plugin has been renamed to webpack-plugin. This release updates the plugin to support module workers, allowing users to configure specific editor features and languages via the new options interface. It also adopts breaking changes from the loader-utils library and exposes plugin options types for better TypeScript support.

webpack-plugin/src · high confidence

The editor's module structure has been reorganized to improve import clarity and maintainability. Deprecated entry points in the \src/deprecated\ directory now serve as re-exports of the current language definitions and editor modules. Additionally, a new \src/features\ directory has been introduced, providing granular, individual registration modules for every editor contribution (such as bracket matching, folding, and suggestions) alongside a centralized \register.all.ts\ file for bulk imports. Internal worker initialization and web worker creation logic has also been consolidated into new \src/internal/common\ modules.

(repo-wide) · high confidence

The website source has been rewritten, introducing a new \monaco-loader.ts\ module that manages loading the Monaco editor via both AMD and ESM mechanisms, including support for dynamic \esmUrl\ configuration and language selection. This change adds new shared types in \shared.ts\ to handle communication between the playground runner and the main site, such as CSS updates and code reloads. The TypeScript configuration (\tsconfig.json\) has been updated to target ESNext with Bundler module resolution, and new type declarations (\types.d.ts\) have been added for external dependencies like \lzma\ and \base64-js\.

website/src · high confidence

The website's frontend has been rewritten to use a new React-based routing system. A central App component now manages navigation between Home, Playground, Docs, and Monarch pages using a new Route utility that matches URL paths. The Docs page now embeds documentation content via an iframe, handling history synchronization and applying a default light theme if none is set, while the Monarch page similarly embeds its content in an iframe.

website/src/website/pages · high confidence

The website's navbar and HTML syntax highlighting now meet WCAG 2 AA color contrast requirements. Specifically, the navbar's inactive link color has been adjusted to \#d4c4d9 on a \#68217a background, achieving a contrast ratio of approximately 4.58:1, which exceeds the required 4.5:1 threshold. This change improves accessibility for users with visual impairments.

website/src/website · high confidence

The website's build infrastructure has been rewritten to use Webpack and TypeScript, replacing the previous Gulp-based setup. This change introduces a new configuration structure including \tsconfig.json\ for TypeScript compilation (targeting ESNext with Node module resolution) and \webpack.config.ts\ for bundling. The new build process generates multiple entry points (\index\, \playgroundRunner\, \monacoLoader\) and outputs distinct HTML pages for the main site, playground, docs, and monarch demo. It also configures asset handling via \MiniCssExtractPlugin\ and \CopyPlugin\ to manage static files and Monaco Editor sources, while enforcing code formatting via \.prettierrc.json\ and linting via \tslint.json\.

website · high confidence

The website components have been rewritten in React, introducing a new navigation structure and reusable form controls (Radio, Select, TextBox) to improve the user interface. The Monaco editor integration now ensures the editor is fully loaded before rendering and includes a new accessible theme (VS\_LIGHT\_ADJUSTED) that fixes WCAG 2 AA color contrast issues for syntax highlighting, specifically adjusting attribute name colors to meet accessibility standards.

website/src/website/components · high confidence

A new script, check-playground-samples-js.ts, has been added to the website/scripts directory to enforce type correctness for playground samples during CI. This script iterates over JavaScript files in the playground-samples directory and runs the TypeScript compiler (tsc) with the --target es6 flag to ensure they compile without errors, failing the build if any type issues are detected.

website/scripts · high confidence

The Find widget now correctly manages the tab order for its internal controls. When the widget is hidden or disabled, interactive elements are removed from the tab order to prevent users from accidentally tabbing into invisible controls. When the widget becomes visible, the original tab order is restored, ensuring a smooth and logical keyboard navigation experience.

src/features/find · high confidence

Add JSDOM-based test environment setup; Added AMD smoke test HTML entry point; Added manual TypeScript test pages for custom workers and compiler settings; Added manual test pages for Monaco Editor scenarios; Added smoke test for esbuild packaging; Added smoke tests for Monaco Editor packaging across multiple bundlers.

This release adds the \@vscode/monaco-lsp-client\ package, providing a client for Language Server Protocol integration with \monaco-editor-core\ as a peer dependency. It also introduces the \rollup-plugin-keep-css-imports\ utility to preserve CSS import structures during bundling. The main \monaco-editor\ package is updated to version 0.57.0, incorporating the new LSP client and various dependency upgrades including TypeScript 5.9.3, Vite 7.3.5, and esbuild 0.25.9.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 38 → 57 (+18.6)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 62 → 83 (+21.2)
• Architecture 68 (new)
• Maturity 59 → 59 (-0.2)
• Readiness 21 → 77 (+55.9)
• Security 52 → 68 (+16.8)
• Accessibility 47 (new)

• Dimension evaluation failed
• FileTooLong: sql/keywords.js (src/languages/definitions/sql/keywords.js)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• …and 52 more

• FixmeComment (src/languages/definitions/postiats/postiats.ts)
• FixmeComment (src/languages/definitions/postiats/postiats.ts)
• HackComment (webpack-plugin/src/loaders/include.ts)
• HackComment (webpack-plugin/src/plugins/AddWorkerEntryPointPlugin.ts)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High vulnerability: [GHSA redacted] (package-lock.json)
• High: security finding (details withheld)
• High: security finding (details withheld)
• Low CVE: [GHSA redacted] (package-lock.json)
• Medium CVE: [GHSA redacted] (webpack-plugin/package-lock.json)
• …and 39 more

• 30 commits — 30 feature/other, 0 fixes

• (root) — 10 commits
• website/package-lock.json — 6 commits
• .github/workflows — 3 commits
• samples/package-lock.json — 3 commits
• samples/browser-esm-vite-react — 2 commits
• samples/browser-esm-webpack-typescript-react — 2 commits
• webpack-plugin/package-lock.json — 2 commits
• (repo) — 1 commit
• samples/browser-esm-parcel — 1 commit

• change: Align release build Node version with VS Code 1.139
• change: Bump @babel/core in /samples/browser-esm-vite-react (#5416)
• change: Bump actions/deploy-pages in the github-actions group (#5479)
• change: Bump baseline-browser-mapping from 2.9.19 to 2.11.21 in /website (#5476)
• change: Bump brace-expansion in /website (#5440)
• change: Bump browserslist from 4.28.1 to 4.28.8 in /website (#5468)
• change: Bump electron from 39.8.5 to 39.8.10 in /samples (#5438)
• change: Bump fast-uri from 3.1.2 to 3.1.5 (#5437)
• change: Bump fast-uri from 3.1.2 to 3.1.7 in /samples (#5466)
• change: Bump fast-uri from 3.1.2 to 3.1.7 in /webpack-plugin (#5470)
• change: Bump fast-uri from 3.1.4 to 3.1.7 in /website (#5465)
• change: Bump fast-uri in /samples/browser-esm-webpack-typescript-react (#5436)
• change: Bump fast-uri in /samples/browser-esm-webpack-typescript-react (#5467)
• change: Bump js-yaml from 4.2.0 to 4.3.1 (#5449)
• change: Bump js-yaml from 4.3.1 to 4.3.2 (#5475)
• change: Bump nanoid from 3.3.11 to 3.3.18 in /webpack-plugin (#5469)
• change: Bump postcss from 8.5.12 to 8.5.26 (#5450)
• change: Bump postcss from 8.5.13 to 8.5.26 in /samples (#5439)
• change: Bump postcss from 8.5.15 to 8.5.26 in /samples/browser-esm-vite-react (#5441)
• change: Bump postcss-selector-parser from 7.1.0 to 7.1.5 in /website (#5463)
• …and 10 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

microsoft/monaco-editor was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.