@monaco-editor/react

@monaco-editor/react wraps the Monaco editor, the same code-editing engine that powers VS Code, in a single React component so you can add a full-featured code editor to any app without ejecting create-react-app, hand-rolling webpack loaders, or configuring rollup/vite plugins to load Monaco’s worker files.

Under the hood it delegates loading to the companion @monaco-editor/loader package, which fetches Monaco from a CDN or local node_modules asynchronously and caches a single shared instance. The library exposes an Editor component for single-file editing, a DiffEditor for side-by-side diffs, and a useMonaco hook for consumers that need direct access to the underlying monaco API, all with first-class TypeScript types.

What You Get

• An Editor component with controlled/uncontrolled value modes, syntax highlighting for dozens of languages, and live validation via onValidate
• A DiffEditor component for side-by-side original/modified comparisons using the same Monaco diff engine as VS Code
• A useMonaco hook and loader utility for reaching the raw monaco API outside the component tree (custom languages, themes, editor commands)
• Automatic model creation and caching per file path, plus view-state (cursor, scroll, selection) preservation when switching between multiple open models
• Full TypeScript typings for every prop, the monaco namespace, and editor/diff-editor instances, with no separate @types package to install

Common Use Cases

• Embedding a code editor in an internal admin tool, low-code platform, or config editor without maintaining custom webpack/rollup loader rules
• Building an in-browser IDE or coding playground (e.g. a course platform or API sandbox) with multi-file, multi-model editing
• Adding a JSON/YAML/SQL config editor with real-time validation markers surfaced through onValidate
• Showing before/after diffs of generated or user-edited code (migrations, AI code suggestions, PR previews) with DiffEditor

Under The Hood

Architecture — The Editor component (src/Editor/Editor.tsx) is a thin imperative wrapper: on mount it calls loader.init() from the sibling @monaco-editor/loader package to fetch and cache a single shared monaco instance, then a useEffect gated by isMonacoMounting/isEditorReady calls createEditor() to instantiate monaco.editor.create() inside a ref’d <div> rendered by MonacoContainer (which also owns the loading placeholder and width/height sizing). Models are created or reused per file path via getOrCreateModel in src/utils/index.ts, and a module-level viewStates Map keyed by path preserves cursor/scroll/selection state across model switches. DiffEditor (src/DiffEditor/DiffEditor.tsx) follows the identical mount/create/dispose lifecycle but instantiates monaco.editor.createDiffEditor() with original/modified models. A custom useUpdate hook (vs. plain useEffect) gates every prop-driven update (options, value, language, theme, line) so none fire until isEditorReady is true, avoiding races with the async Monaco load.

Tech Stack — TypeScript (93% of the codebase), built with tsup (esbuild-based) into dual ESM/CJS bundles with generated .d.ts files; tested with Vitest, @testing-library/react, and jsdom via snapshot tests; linted with ESLint 9’s flat config plus typescript-eslint; pre-commit hooks via Husky. The only runtime dependency is @monaco-editor/loader (same author), which does the actual asynchronous fetch of the monaco-editor package from a CDN or node_modules — monaco-editor, react, and react-dom are all peer dependencies, keeping the installed footprint small and letting consumers pin their own Monaco version.

Code Quality — Each of the four components (Editor, DiffEditor, MonacoContainer, Loading) has a co-located snapshot test, and the utility functions in src/utils/index.ts (getOrCreateModel, createModel, createModelUri) carry JSDoc comments explaining intent and parameters. Refs are used deliberately to avoid stale closures inside async callbacks (onMountRef, beforeMountRef, valueRef), and effect cleanup correctly disposes Monaco models, editor instances, and change-marker listeners. The tests themselves are shallow — mostly render-plus-snapshot rather than asserting on editor behavior — which is a real gap given how much imperative Monaco API surface (executeEdits, pushUndoStop, restoreViewState) the component manages directly.

API Design — The public surface is deliberately small: a default Editor export, a named DiffEditor, a useMonaco hook, and a re-exported loader. A working editor is a single JSX line (<Editor height="90vh" defaultLanguage="javascript" defaultValue="..." />), and prop names (defaultValue/value, defaultLanguage/language, defaultPath/path) deliberately mirror React’s own controlled/uncontrolled <input> conventions so the learning curve for React developers is near zero. Escape hatches (onMount, beforeMount) hand back the raw editor and monaco instances for anything the wrapper doesn’t cover, and the README documents every prop plus framework-specific notes (Next.js SSR, Electron) that address the most common integration friction points.