{"id":13484938,"url":"https://github.com/react-monaco-editor/react-monaco-editor","last_synced_at":"2026-06-10T10:03:15.829Z","repository":{"id":37550477,"uuid":"67396709","full_name":"react-monaco-editor/react-monaco-editor","owner":"react-monaco-editor","description":"Monaco Editor for React.","archived":false,"fork":false,"pushed_at":"2026-06-01T11:42:55.000Z","size":4385,"stargazers_count":4189,"open_issues_count":87,"forks_count":387,"subscribers_count":19,"default_branch":"master","last_synced_at":"2026-06-01T13:22:15.616Z","etag":null,"topics":["editor","monaco-editor","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-monaco-editor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-09-05T07:11:05.000Z","updated_at":"2026-06-01T11:40:28.000Z","dependencies_parsed_at":"2023-02-06T11:15:18.742Z","dependency_job_id":"c1bc0cdf-f795-4dba-99ef-cbf1c9c54460","html_url":"https://github.com/react-monaco-editor/react-monaco-editor","commit_stats":{"total_commits":807,"total_committers":82,"mean_commits":9.841463414634147,"dds":0.4560099132589839,"last_synced_commit":"e8c823fa5e0156687e6129502369f7e1521d061b"},"previous_names":["superraytin/react-monaco-editor"],"tags_count":82,"template":false,"template_full_name":null,"purl":"pkg:github/react-monaco-editor/react-monaco-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-monaco-editor%2Freact-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-monaco-editor%2Freact-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-monaco-editor%2Freact-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-monaco-editor%2Freact-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-monaco-editor","download_url":"https://codeload.github.com/react-monaco-editor/react-monaco-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-monaco-editor%2Freact-monaco-editor/sbom","scorecard":{"id":765525,"data":{"date":"2025-08-11","repo":{"name":"github.com/react-monaco-editor/react-monaco-editor","commit":"55ba714b9012e7b14d959e91d828892990d9e873"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.3,"checks":[{"name":"Code-Review","score":5,"reason":"Found 1/2 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/merge-dependabot.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/react-monaco-editor/react-monaco-editor/merge-dependabot.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/react-monaco-editor/react-monaco-editor/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/react-monaco-editor/react-monaco-editor/test.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":10,"reason":"17 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/merge-dependabot.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 29 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"18 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T00:39:21.213Z","repository_id":37550477,"created_at":"2025-08-23T00:39:21.213Z","updated_at":"2025-08-23T00:39:21.213Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34146870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","monaco-editor","react"],"created_at":"2024-07-31T17:01:39.391Z","updated_at":"2026-06-10T10:03:15.808Z","avatar_url":"https://github.com/react-monaco-editor.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Browser editor","Editor Components","前端常见效果库","React"],"sub_categories":["代码编辑器","Component"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/2723376/55211710-2f76e000-5228-11e9-887b-67faca78c4b9.png\" width=\"150\" height=\"150\" /\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ereact-monaco-editor\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[Monaco Editor](https://github.com/Microsoft/monaco-editor) for React.\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n![Test](https://github.com/react-monaco-editor/react-monaco-editor/workflows/Test/badge.svg)\n\n[npm-url]: https://npmjs.org/package/react-monaco-editor\n[downloads-image]: http://img.shields.io/npm/dm/react-monaco-editor.svg\n[npm-image]: http://img.shields.io/npm/v/react-monaco-editor.svg\n\n\u003c/div\u003e\n\n## Examples\n\nTo build the examples locally, run:\n\n```bash\nyarn\ncd example\nyarn\nyarn start\n```\n\nThen open `http://localhost:8886` in a browser.\n\n## Installation\n\n```bash\nyarn add react-monaco-editor\n```\n\n## Using with Webpack\n\n```js\nimport React from 'react';\nimport { createRoot } from \"react-dom/client\";\nimport MonacoEditor from 'react-monaco-editor';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      code: '// type your code...',\n    }\n  }\n  editorDidMount(editor, monaco) {\n    console.log('editorDidMount', editor);\n    editor.focus();\n  }\n  onChange(newValue, e) {\n    console.log('onChange', newValue, e);\n  }\n  render() {\n    const code = this.state.code;\n    const options = {\n      selectOnLineNumbers: true\n    };\n    return (\n      \u003cMonacoEditor\n        width=\"800\"\n        height=\"600\"\n        language=\"javascript\"\n        theme=\"vs-dark\"\n        value={code}\n        options={options}\n        onChange={::this.onChange}\n        editorDidMount={::this.editorDidMount}\n      /\u003e\n    );\n  }\n}\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render(\u003cApp /\u003e);\n```\n\nAdd the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`:\n\n```js\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\nmodule.exports = {\n  plugins: [\n    new MonacoWebpackPlugin({\n      // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options\n      languages: ['json']\n    })\n  ]\n};\n```\n\nSidenote: Monaco Editor uses CSS imports internally, so if you're using CSS Modules in your project - you're likely to get conflict by default. In order to avoid that - separate css-loader for app and monaco-editor package:\n\n```js\n// Specify separate paths\nconst path = require('path');\nconst APP_DIR = path.resolve(__dirname, './src');\nconst MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');\n\n{\n  test: /\\.css$/,\n  include: APP_DIR,\n  use: [{\n    loader: 'style-loader',\n  }, {\n    loader: 'css-loader',\n    options: {\n      modules: true,\n      namedExport: true,\n    },\n  }],\n}, {\n  test: /\\.css$/,\n  include: MONACO_DIR,\n  use: ['style-loader', 'css-loader'],\n}\n```\n\n## Properties\n\nAll the properties below are optional.\n\n- `width` width of editor. Defaults to `100%`.\n- `height` height of editor. Defaults to `100%`.\n- `value` value of the auto created model in the editor.\n- `defaultValue` the initial value of the auto created model in the editor.\n- `language` the initial language of the auto created model in the editor.\n- `theme` the theme of the editor\n- `options` refer to [Monaco interface IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html).\n- `overrideServices` refer to [Monaco Interface IEditorOverrideServices](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOverrideServices.html). It depends on Monaco's internal implementations and may change over time, check github [issue](https://github.com/Microsoft/monaco-editor/issues/935#issuecomment-402174095) for more details.\n\n- `onChange(newValue, event)` an event emitted when the content of the current model has changed.\n- `editorWillMount(monaco)` an event emitted before the editor mounted (similar to `componentWillMount` of React).\n- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React).\n- `editorWillUnmount(editor, monaco)` an event emitted before the editor unmount (similar to `componentWillUnmount` of React).\n\n## Events \u0026 Methods\n\nRefer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditor.html).\n\nThe monaco interfaces available by import\n```js\nimport { monaco } from 'react-monaco-editor';\n```\n\n## Q \u0026 A\n\n### I don't get syntax highlighting / autocomplete / validation.\n\nMake sure to use the [Monaco Webpack plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) or follow the [instructions on how to load the ESM version of Monaco](https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md).\n\n### How to interact with the MonacoEditor instance\n\nUsing the first parameter of `editorDidMount`, or using a `ref` (e.g. `\u003cMonacoEditor ref={monacoEditorRef}\u003e`).\n\n```js\nconst monacoEditorRef = useRef(null);\nreturn (\u003c\u003e\n  \u003cbutton onClick={() =\u003e monacoEditorRef.current.editor.focus()}\u003eFocus\u003c/button\u003e\n  \u003cMonacoEditor ref={monacoEditorRef} /\u003e\n\u003c/\u003e)\n```\n\n### How to get value of editor\n\nUsing `this.refs.monaco.editor.getValue()` or via method of `Model` instance:\n\n```js\nconst model = this.refs.monaco.editor.getModel();\nconst value = model.getValue();\n```\n\n### Do something before editor mounted\n\nFor example, you may want to configure some JSON schemas before editor mounted, then you can go with `editorWillMount(monaco)`:\n\n```js\nclass App extends React.Component {\n    editorWillMount(monaco) {\n        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n            validate: true,\n            schemas: [{\n                uri: \"http://myserver/foo-schema.json\",\n                fileMatch: ['*'],\n                schema: {\n                    type: \"object\",\n                    properties: {\n                        p1: {\n                            enum: [ \"v1\", \"v2\"]\n                        },\n                        p2: {\n                            $ref: \"http://myserver/bar-schema.json\"\n                        }\n                    }\n                }\n            }]\n        });\n    }\n    render() {\n        return (\n          \u003cMonacoEditor language=\"json\" editorWillMount={this.editorWillMount} /\u003e\n        );\n    }\n}\n```\n\n### Use multiple themes\n\n[Monaco only supports one theme](https://github.com/Microsoft/monaco-editor/issues/338).\n\n### How to use the diff editor\n\n```js\nimport React from 'react';\nimport { MonacoDiffEditor } from 'react-monaco-editor';\n\nclass App extends React.Component {\n  render() {\n    const code1 = \"// your original code...\";\n    const code2 = \"// a different version...\";\n    const options = {\n      //renderSideBySide: false\n    };\n    return (\n      \u003cMonacoDiffEditor\n        width=\"800\"\n        height=\"600\"\n        language=\"javascript\"\n        original={code1}\n        value={code2}\n        options={options}\n      /\u003e\n    );\n  }\n}\n```\n\n### Usage with `create-react-app`\n\nThe easiest way to use the `react-monaco-editor` with `create-react-app` is to use the [react-app-rewired](https://github.com/timarney/react-app-rewired) project. For setting it up, the following steps are required:\n\n1. Install `react-app-rewired`: `npm install -D react-app-rewired`\n2. Replace `react-scripts` by `react-app-rewired` in the scripts section of your `packages.json`\n2. Create a `config-overrides.js` in the root directory of your project with the following content:\n\n```javascript\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\n\nmodule.exports = function override(config, env) {\n  config.plugins.push(new MonacoWebpackPlugin({\n    languages: ['json']\n  }));\n  return config;\n}\n```\n\nFor more information checkout the documentation of `react-app-rewired` [here](https://github.com/timarney/react-app-rewired).\n\n# License\n\nMIT, see the [LICENSE](/LICENSE.md) file for detail.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-monaco-editor%2Freact-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-monaco-editor%2Freact-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-monaco-editor%2Freact-monaco-editor/lists"}