0
# React Monaco Editor
1

2
React Monaco Editor provides React components for integrating Microsoft's Monaco Editor (the editor that powers VS Code) into React applications. It offers both a standard MonacoEditor component and a MonacoDiffEditor component for comparing code differences.
3

4
## Package Information
5

6
- **Package Name**: react-monaco-editor
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-monaco-editor monaco-editor`
10

11
## Core Imports
12

13
```typescript
14
import MonacoEditor, { MonacoDiffEditor, monaco } from "react-monaco-editor";
15
```
16

17
For named imports:
18

19
```typescript
20
import { MonacoEditor, MonacoDiffEditor, monaco } from "react-monaco-editor";
21
```
22

23
CommonJS:
24

25
```javascript
26
const MonacoEditor = require("react-monaco-editor").default;
27
const { MonacoDiffEditor, monaco } = require("react-monaco-editor");
28
```
29

30
## Basic Usage
31

32
```typescript
33
import React, { useState } from "react";
34
import MonacoEditor from "react-monaco-editor";
35

36
function CodeEditor() {
37
  const [code, setCode] = useState('// type your code...');
38

39
  const options = {
40
    selectOnLineNumbers: true,
41
    roundedSelection: false,
42
    readOnly: false,
43
    cursorStyle: 'line' as const,
44
    automaticLayout: false,
45
  };
46

47
  return (
48
    <MonacoEditor
49
      width="800"
50
      height="600"
51
      language="javascript"
52
      theme="vs-dark"
53
      value={code}
54
      options={options}
55
      onChange={(newValue) => setCode(newValue)}
56
      editorDidMount={(editor, monaco) => {
57
        console.log('editorDidMount', editor);
58
        editor.focus();
59
      }}
60
    />
61
  );
62
}
63
```
64

65
## Architecture
66

67
React Monaco Editor is built around several key components:
68

69
- **MonacoEditor Component**: Main React wrapper for Monaco Editor providing controlled/uncontrolled modes
70
- **MonacoDiffEditor Component**: React wrapper for Monaco Diff Editor for side-by-side code comparison
71
- **Monaco API Re-export**: Direct access to Monaco Editor APIs and types
72
- **TypeScript Integration**: Full type definitions with Monaco Editor type integration
73
- **Lifecycle Management**: React hooks-based lifecycle with proper cleanup and event handling
74
- **Forward Refs**: Direct access to Monaco editor instances via React refs
75

76
## Capabilities
77

78
### Monaco Editor
79

80
Main code editor component with full Monaco Editor functionality including syntax highlighting, IntelliSense, and customizable themes.
81

82
```typescript { .api }
83
declare const MonacoEditor: React.ForwardRefExoticComponent<
84
  MonacoEditorProps & React.RefAttributes<MonacoEditorHandle>
85
>;
86

87
interface MonacoEditorProps extends MonacoEditorBaseProps {
88
  value?: string | null;
89
  options?: monaco.editor.IStandaloneEditorConstructionOptions;
90
  overrideServices?: monaco.editor.IEditorOverrideServices;
91
  editorWillMount?: EditorWillMount;
92
  editorDidMount?: EditorDidMount;
93
  editorWillUnmount?: EditorWillUnmount;
94
  onChange?: ChangeHandler;
95
  uri?: (monaco: typeof monaco) => monaco.Uri;
96
}
97

98
interface MonacoEditorHandle {
99
  editor: monaco.editor.IStandaloneCodeEditor;
100
}
101
```
102

103
[Monaco Editor](./monaco-editor.md)
104

105
### Monaco Diff Editor
106

107
Diff editor component for side-by-side code comparison with change highlighting and merge capabilities.
108

109
```typescript { .api }
110
declare const MonacoDiffEditor: React.ForwardRefExoticComponent<
111
  MonacoDiffEditorProps & React.RefAttributes<MonacoDiffEditorHandle>
112
>;
113

114
interface MonacoDiffEditorProps extends MonacoEditorBaseProps {
115
  original?: string;
116
  value?: string;
117
  options?: monaco.editor.IDiffEditorConstructionOptions;
118
  overrideServices?: monaco.editor.IEditorOverrideServices;
119
  editorWillMount?: DiffEditorWillMount;
120
  editorDidMount?: DiffEditorDidMount;
121
  editorWillUnmount?: DiffEditorWillUnmount;
122
  onChange?: DiffChangeHandler;
123
  originalUri?: (monaco: typeof monaco) => monaco.Uri;
124
  modifiedUri?: (monaco: typeof monaco) => monaco.Uri;
125
}
126

127
interface MonacoDiffEditorHandle {
128
  editor: monaco.editor.IStandaloneDiffEditor;
129
}
130
```
131

132
[Monaco Diff Editor](./diff-editor.md)
133

134
## Shared Types
135

136
```typescript { .api }
137
interface MonacoEditorBaseProps {
138
  /** Width of editor. Defaults to 100%. */
139
  width?: string | number;
140
  /** Height of editor. Defaults to 100%. */
141
  height?: string | number;
142
  /** The initial value of the auto created model in the editor. */
143
  defaultValue?: string;
144
  /** The initial language of the auto created model in the editor. Defaults to 'javascript'. */
145
  language?: string;
146
  /** Theme to be used for rendering. */
147
  theme?: Theme | (string & NonNullable<unknown>) | null;
148
  /** Optional string classname to append to the editor. */
149
  className?: string | null;
150
}
151

152
type Theme = "vs" | "vs-dark" | "hc-black";
153

154
type EditorConstructionOptions = NonNullable<
155
  Parameters<typeof monaco.editor.create>[1]
156
>;
157

158
type EditorWillMount = (
159
  monaco: typeof monaco
160
) => void | EditorConstructionOptions;
161

162
type EditorDidMount = (
163
  editor: monaco.editor.IStandaloneCodeEditor,
164
  monaco: typeof monaco
165
) => void;
166

167
type EditorWillUnmount = (
168
  editor: monaco.editor.IStandaloneCodeEditor,
169
  monaco: typeof monaco
170
) => void | EditorConstructionOptions;
171

172
type ChangeHandler = (
173
  value: string,
174
  event: monaco.editor.IModelContentChangedEvent
175
) => void;
176

177
type DiffEditorWillMount = (
178
  monaco: typeof monaco
179
) => void | monaco.editor.IStandaloneEditorConstructionOptions;
180

181
type DiffEditorDidMount = (
182
  editor: monaco.editor.IStandaloneDiffEditor,
183
  monaco: typeof monaco
184
) => void;
185

186
type DiffEditorWillUnmount = (
187
  editor: monaco.editor.IStandaloneDiffEditor,
188
  monaco: typeof monaco
189
) => void;
190

191
type DiffChangeHandler = ChangeHandler;
192
```
193

194
## Monaco API Access
195

196
The package re-exports the Monaco Editor API for direct access to Monaco functionality:
197

198
```typescript { .api }
199
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
200
export { monaco };
201
```
202

203
This provides access to Monaco's language services, themes, editor APIs, and all other Monaco Editor functionality.