0
# Monaco Editor for React
1

2
Monaco Editor for React provides React components that wrap the Monaco Editor (the same editor that powers VS Code) for easy integration into React applications. The library handles Monaco Editor loading and setup automatically, requiring no webpack configuration or plugins.
3

4
## Package Information
5

6
- **Package Name**: @monaco-editor/react
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @monaco-editor/react`
10
- **Peer Dependencies**: `monaco-editor`, `react` (>=16.8.0), `react-dom` (>=16.8.0)
11

12
## Core Imports
13

14
```typescript
15
import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react";
16
import type { Monaco, Theme } from "@monaco-editor/react";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const Editor = require("@monaco-editor/react").default;
23
const { DiffEditor, useMonaco, loader } = require("@monaco-editor/react");
24
```
25

26
Additional imports for React and Monaco Editor types:
27

28
```typescript
29
import React from "react";
30
import type { editor } from "monaco-editor";
31
```
32

33
## Basic Usage
34

35
```typescript
36
import React from "react";
37
import Editor from "@monaco-editor/react";
38

39
function CodeEditor() {
40
  const handleEditorDidMount = (editor, monaco) => {
41
    console.log("onMount: the editor instance:", editor);
42
    console.log("onMount: the monaco instance:", monaco);
43
  };
44

45
  const handleEditorChange = (value, event) => {
46
    console.log("onChange: current model value:", value);
47
  };
48

49
  return (
50
    <Editor
51
      height="90vh"
52
      defaultLanguage="javascript"
53
      defaultValue="// Welcome to Monaco Editor!"
54
      onMount={handleEditorDidMount}
55
      onChange={handleEditorChange}
56
      theme="vs-dark"
57
    />
58
  );
59
}
60
```
61

62
## Architecture
63

64
Monaco Editor for React is structured around several key components:
65

66
- **Editor Component**: Primary Monaco Editor wrapper providing full editing capabilities
67
- **DiffEditor Component**: Side-by-side code comparison editor for showing differences
68
- **Monaco Loader**: Handles Monaco Editor initialization and loading (@monaco-editor/loader)
69
- **useMonaco Hook**: React hook for accessing the Monaco instance across components
70
- **Type Safety**: Complete TypeScript definitions for all Monaco Editor APIs
71

72
The library uses a lazy loading approach where Monaco Editor is loaded on-demand, improving initial page load times.
73

74
## Capabilities
75

76
### Code Editing
77

78
Primary Monaco Editor component with syntax highlighting, IntelliSense, and advanced editing features for any programming language.
79

80
```typescript { .api }
81
declare const Editor: React.ComponentType<EditorProps>;
82

83
interface EditorProps {
84
  defaultValue?: string;
85
  value?: string;
86
  defaultLanguage?: string;
87
  language?: string;
88
  theme?: Theme | string;
89
  options?: editor.IStandaloneEditorConstructionOptions;
90
  onMount?: OnMount;
91
  onChange?: OnChange;
92
  width?: number | string;
93
  height?: number | string;
94
}
95

96
type OnMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
97
type OnChange = (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
98
type Theme = 'vs-dark' | 'light';
99
```
100

101
[Code Editor](./editor.md)
102

103
### Diff Comparison
104

105
Side-by-side code comparison editor for visualizing differences between two versions of code.
106

107
```typescript { .api }
108
declare const DiffEditor: React.ComponentType<DiffEditorProps>;
109

110
interface DiffEditorProps {
111
  original?: string;
112
  modified?: string;
113
  language?: string;
114
  originalLanguage?: string;
115
  modifiedLanguage?: string;
116
  theme?: Theme | string;
117
  options?: editor.IDiffEditorConstructionOptions;
118
  onMount?: DiffOnMount;
119
  width?: number | string;
120
  height?: number | string;
121
}
122

123
type DiffOnMount = (editor: editor.IStandaloneDiffEditor, monaco: Monaco) => void;
124
```
125

126
[Diff Editor](./diff-editor.md)
127

128
### Monaco Instance Access
129

130
React hook for accessing the Monaco Editor instance and its APIs across components.
131

132
```typescript { .api }
133
function useMonaco(): Monaco | null;
134

135
type Monaco = typeof monaco;
136
```
137

138
[Monaco Hook](./monaco-hook.md)
139

140
### Monaco Loader Configuration
141

142
Utilities for configuring Monaco Editor loading behavior and CDN sources.
143

144
```typescript { .api }
145
declare const loader: {
146
  init(): Promise<Monaco>;
147
  config(options: LoaderConfig): void;
148
  __getMonacoInstance(): Monaco | null;
149
};
150

151
interface LoaderConfig {
152
  paths?: {
153
    vs?: string;
154
  };
155
  "vs/nls"?: {
156
    availableLanguages?: Record<string, string>;
157
  };
158
  monaco?: Monaco;
159
}
160
```
161

162
[Loader Configuration](./loader.md)
163

164
## Types
165

166
### Core Types
167

168
```typescript { .api }
169
// Monaco and React types
170
type Monaco = typeof monaco;
171
type Theme = 'vs-dark' | 'light';
172
type ReactNode = React.ReactNode;
173

174
// Event handler types
175
type OnMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
176
type BeforeMount = (monaco: Monaco) => void;
177
type OnChange = (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
178
type OnValidate = (markers: editor.IMarker[]) => void;
179

180
// Diff editor types
181
type MonacoDiffEditor = editor.IStandaloneDiffEditor;
182
type DiffOnMount = (editor: MonacoDiffEditor, monaco: Monaco) => void;
183
type DiffBeforeMount = (monaco: Monaco) => void;
184
```
185

186
### Monaco Editor Types
187

188
All Monaco Editor types are re-exported from the `monaco-editor` package:
189

190
```typescript { .api }
191
// Monaco Editor interfaces (from monaco-editor package)
192
interface IStandaloneCodeEditor {
193
  // Full Monaco Editor API
194
}
195

196
interface IStandaloneDiffEditor {
197
  // Full Monaco Diff Editor API  
198
}
199

200
interface IStandaloneEditorConstructionOptions {
201
  // Editor configuration options
202
}
203

204
interface IDiffEditorConstructionOptions {
205
  // Diff editor configuration options
206
}
207
```