{"id":15192,"library":"react-monaco-editor","title":"Monaco Editor for React Applications","description":"react-monaco-editor provides a React component wrapper for the Monaco Editor, which is the code editor that powers VS Code. Currently stable at version 0.59.0, the package generally follows the updates of its `monaco-editor` peer dependency, releasing updates to ensure compatibility and add minor features or fixes. Its release cadence is moderate, with several patch and minor versions released per quarter, often driven by dependency updates or small feature enhancements. This library simplifies the integration of a powerful, feature-rich code editor into React applications, abstracting away much of the complex setup required by the standalone Monaco Editor, particularly concerning Webpack configuration and instance management. It exposes a declarative API through props, making it straightforward to embed a full-featured code editing experience.","status":"active","version":"0.59.0","language":"javascript","source_language":"en","source_url":"https://github.com/react-monaco-editor/react-monaco-editor","tags":["javascript","monaco","editor","react","vscode","typescript"],"install":[{"cmd":"npm install react-monaco-editor","lang":"bash","label":"npm"},{"cmd":"yarn add react-monaco-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-monaco-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core editor library providing the actual editing functionality. Required at runtime.","package":"monaco-editor","optional":false},{"reason":"react-monaco-editor is a React component and requires React to function.","package":"react","optional":false},{"reason":"Required for rendering React components into the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The main component is a default export. Using named import will result in an error.","wrong":"import { MonacoEditor } from 'react-monaco-editor';","symbol":"MonacoEditor","correct":"import MonacoEditor from 'react-monaco-editor';"},{"note":"This is a Webpack plugin (a separate package) used in `webpack.config.js` for bundling Monaco Editor assets. It's typically consumed via CommonJS `require` in Node.js-based Webpack configurations.","wrong":"import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';","symbol":"MonacoWebpackPlugin","correct":"const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');"},{"note":"For TypeScript users, import types using `import type`. The `editorDidMount` callback exposes `editor` (IStandaloneCodeEditor) and `monaco` (the global monaco API instance). The specific `EditorDidMount` type shown here reflects the signature of the callback, using types from `monaco-editor`.","wrong":"import { MonacoEditorProps, EditorDidMount } from 'react-monaco-editor';","symbol":"MonacoEditorProps, EditorDidMount","correct":"import type { MonacoEditorProps } from 'react-monaco-editor';\nimport type { editor } from 'monaco-editor';\n\ntype EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: typeof editor) => void;"}],"quickstart":{"code":"import React from 'react';\nimport { createRoot } from \"react-dom/client\";\nimport MonacoEditor from 'react-monaco-editor';\n\ninterface AppState {\n  code: string;\n}\n\nclass App extends React.Component<{}, AppState> {\n  constructor(props: {}) {\n    super(props);\n    this.state = {\n      code: `function helloWorld() {\n  console.log(\"Hello, Monaco!\");\n  // You can customize language, theme, and options.\n  const now = new Date();\n  return \\`Current time: \\${now.toLocaleTimeString()}\\`;\n}`,\n    };\n    this.onChange = this.onChange.bind(this);\n    this.editorDidMount = this.editorDidMount.bind(this);\n  }\n\n  editorDidMount(editor: any, monaco: any) {\n    console.log('editorDidMount instance:', editor);\n    console.log('monaco global instance:', monaco);\n    editor.focus();\n    // Example: add a new command (Ctrl+Enter)\n    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {\n      alert('Ctrl+Enter pressed!');\n    });\n  }\n\n  onChange(newValue: string, event: any) {\n    console.log('Editor content changed:', newValue);\n    this.setState({ code: newValue });\n  }\n\n  render() {\n    const { code } = this.state;\n    const options = {\n      selectOnLineNumbers: true,\n      automaticLayout: true, // Essential for responsive editors\n      scrollBeyondLastLine: false,\n      minimap: {\n        enabled: true,\n      },\n      fontSize: 14,\n    };\n    return (\n      <div style={{ height: 'calc(100vh - 40px)', width: '100%', padding: '20px' }}>\n        <h2>Interactive Code Editor (TypeScript)</h2>\n        <MonacoEditor\n          width=\"100%\"\n          height=\"100%\"\n          language=\"typescript\"\n          theme=\"vs-dark\"\n          value={code}\n          options={options}\n          onChange={this.onChange}\n          editorDidMount={this.editorDidMount}\n        />\n      </div>\n    );\n  }\n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Failed to find the root element to render the app.\");\n}","lang":"typescript","description":"This quickstart renders a full-height, interactive Monaco editor instance within a React component. It demonstrates initial value setting, language configuration, theme selection, and how to handle `onChange` and `editorDidMount` events, including adding a custom editor command. It is designed to be directly runnable within a modern React setup using `createRoot`."},"warnings":[{"fix":"Review your `theme` prop configuration and ensure compatibility with Monaco Editor v0.9+ options. Consult the Monaco Editor documentation for updated theme names and structures.","message":"Version 0.9.0 introduced breaking changes related to the underlying Monaco Editor upgrade and the `theme` option. Users upgrading from versions prior to 0.9.0 may need to adjust their theme configurations.","severity":"breaking","affected_versions":"<0.9.0"},{"fix":"Install `monaco-editor-webpack-plugin` and add it to your `webpack.config.js`. Implement separate CSS loader rules for your application's CSS and `node_modules/monaco-editor` to avoid conflicts (e.g., disable CSS Modules for Monaco's CSS).","message":"Integrating `react-monaco-editor` with Webpack requires the `monaco-editor-webpack-plugin` (a separate package) and often specific CSS loader configurations to handle Monaco Editor's internal CSS imports, especially when using CSS Modules in your project. Incorrect setup leads to missing styles, worker loading failures, or build errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `monaco-editor` is installed: `npm install monaco-editor` or `yarn add monaco-editor`. Always check the peer dependency range specified in `react-monaco-editor`'s `package.json` to install a compatible version.","message":"`react-monaco-editor` lists `monaco-editor` as a peer dependency. This means you must explicitly install `monaco-editor` in your project. Mismatching versions between `react-monaco-editor` and `monaco-editor` can lead to runtime issues or unexpected behavior due to API incompatibilities.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Downgrade your React and React DOM versions to be within the `^16.8.0 <20.0.0` range. Monitor the `react-monaco-editor` repository for official support for React v20+.","message":"The library has peer dependencies on `React >=16.8.0 <20.0.0` and `react-dom >=16.8.0 <20.0.0`. Attempting to use `react-monaco-editor` with React v20 or newer will result in compatibility issues or runtime errors, particularly related to hooks or deprecated lifecycle methods.","severity":"breaking","affected_versions":">=0.1.0 (with React v20+)"},{"fix":"Use `overrideServices` with caution and thoroughly test your implementation against new `monaco-editor` versions. Consult the Monaco Editor GitHub issues for discussions on specific service overrides.","message":"The `overrideServices` prop allows advanced customization of Monaco's internal services. However, this relies on Monaco's internal implementations, which are not part of its public API and `may change over time` without notice, potentially causing unexpected behavior in future Monaco Editor updates.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Install `monaco-editor` explicitly: `npm install monaco-editor` or `yarn add monaco-editor`. If using an older version of `react-monaco-editor` (e.g., <0.10.0), this was a known issue, fixed by upgrading. [cite: `0.10.0` release notes]","cause":"The `monaco-editor` package, a peer dependency, is not installed or not resolvable by your build system.","error":"Error: Cannot find module 'monaco-editor'"},{"fix":"Install the plugin: `npm install monaco-editor-webpack-plugin --save-dev` or `yarn add monaco-editor-webpack-plugin --dev`. Then, add it to your `webpack.config.js` plugins array.","cause":"The `monaco-editor-webpack-plugin` is required for Webpack-based projects but has not been installed or correctly configured.","error":"Module not found: Error: Can't resolve 'monaco-editor-webpack-plugin'"},{"fix":"Configure separate CSS loader rules in `webpack.config.js`. Apply `style-loader` and `css-loader` without `modules: true` specifically for files within `node_modules/monaco-editor`, while maintaining CSS Modules for your application's own CSS.","cause":"Your Webpack configuration is not correctly handling CSS imports from the `monaco-editor` package, often due to conflicts with CSS Modules or incorrect loader setup.","error":"ModuleParseError: Module was not found: 'monaco-editor/esm/vs/editor/editor.main.css'"},{"fix":"Verify that you only have one version of React installed (`npm ls react` or `yarn why react`). Ensure `react` and `react-dom` peer dependencies of `react-monaco-editor` are satisfied by a single, compatible version in your project. This might involve resolving dependency tree conflicts or adjusting bundler configurations.","cause":"This error often indicates that multiple instances of React are loaded in your application, which can happen with incompatible peer dependencies or misconfigured bundlers.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}