@monaco-editor/loader

@monaco-editor/loader is a small utility that handles the configuration and download process for Monaco Editor, the code editor that powers VS Code, without requiring webpack (or any other bundler) configuration. It wraps Monaco’s own AMD loader script behind a simple .config()/.init() API, returning a cancelable promise that resolves with the fully-loaded monaco instance.

Extracted from the popular @monaco-editor/react wrapper once its loading logic grew large enough to be useful on its own, it now serves as the shared loading layer for framework wrappers (React, Vue, Angular) as well as vanilla JS integrations. It supports loading Monaco from a CDN, from local static files, or from the monaco-editor npm package directly.

What You Get

• A .config() method to point Monaco’s source loading at a CDN path, local static files, or an installed monaco-editor npm package
• An .init() method returning a cancelable promise that resolves to the loaded monaco instance
• Locale configuration for Monaco’s vs/nls internationalization system
• Bundler-agnostic loading — no webpack, Rollup, or other build-tool configuration required
• TypeScript type definitions bundled via a monaco-editor peer dependency

Common Use Cases

• Bootstrapping Monaco Editor in a vanilla JS or non-React app without bundler-specific configuration
• Building custom framework wrappers (Vue, Angular, Svelte) around Monaco Editor
• Loading Monaco from local files in Electron apps that can’t reach external CDNs
• Deferring Monaco initialization to the client in SSR frameworks like Next.js

Under The Hood

Architecture — The library’s entry point (src/index.js) exposes a singleton loader object built by composing a config module (src/config/index.js, holding CDN paths and NLS locale defaults) with a loader module (src/loader/index.js) that injects Monaco’s AMD loader script into the page and wraps its callback-based API in a cancelable promise (src/utils/makeCancelable.js). Small functional utilities (deepMerge, compose, curry, isObject) implement config merging without a utility-library dependency.

Tech Stack — Plain JavaScript (ES modules) built with Rollup into CJS, ESM, and UMD bundles (lib/cjs, lib/es, lib/umd), with TypeScript types shipped separately via types.d.ts. It has a peer dependency on monaco-editor (for types and optional local loading) and no other runtime dependencies, keeping the published package minimal.

Code Quality — Tests live in src/spec.js and run via Jest (npm test), with linting enforced through ESLint (npm run lint) as part of the prepublishOnly pipeline, and Husky hooks configured via prepare. Development activity is low per the health-score data, consistent with a small, stable utility that reached feature-completeness years ago and now sees maintenance-only releases.

API Design — The two-method API (.config(), .init()) is deliberately minimal: configure once, then call .init() wherever the editor is needed, with the returned promise’s .cancel() method solving the common React unmount-race-condition problem for free. The README documents distinct recipes for CDN, local-file, and npm-package loading modes, plus dedicated notes for Electron and Next.js quirks, reflecting real integration pain points the library was built to solve.