0
# Monaco Editor
1

2
Monaco Editor is a browser-based code editor that powers Visual Studio Code. It provides a comprehensive editing experience with syntax highlighting, IntelliSense, error detection, and support for multiple programming languages in web environments.
3

4
## Package Information
5

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

11
## Core Imports
12

13
For ES Modules:
14

15
```typescript
16
import * as monaco from 'monaco-editor';
17
```
18

19
For AMD (RequireJS):
20

21
```javascript
22
require(['vs/editor/editor.main'], function(monaco) {
23
    // Use monaco
24
});
25
```
26

27
For specific sub-modules (ES Modules):
28

29
```typescript
30
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
31
```
32

33
For Node.js environments:
34

35
```javascript
36
const monaco = require('monaco-editor');
37
```
38

39
For script tag usage:
40

41
```html
42
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
43
<script>
44
require.config({ paths: { 'vs': './node_modules/monaco-editor/min/vs' }});
45
require(['vs/editor/editor.main'], function() {
46
    // Monaco is now available as global
47
});
48
</script>
49
```
50

51
## Basic Usage
52

53
```typescript
54
import * as monaco from 'monaco-editor';
55

56
// Configure worker environment
57
self.MonacoEnvironment = {
58
    getWorkerUrl: function (moduleId, label) {
59
        if (label === 'json') {
60
            return './json.worker.bundle.js';
61
        }
62
        if (label === 'css' || label === 'scss' || label === 'less') {
63
            return './css.worker.bundle.js';
64
        }
65
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
66
            return './html.worker.bundle.js';
67
        }
68
        if (label === 'typescript' || label === 'javascript') {
69
            return './ts.worker.bundle.js';
70
        }
71
        return './editor.worker.bundle.js';
72
    }
73
};
74

75
// Create an editor instance
76
const editor = monaco.editor.create(document.getElementById('container'), {
77
    value: 'console.log("Hello, Monaco!");',
78
    language: 'javascript'
79
});
80
```
81

82
## Architecture
83

84
Monaco Editor is built around several key concepts:
85

86
### Models
87
Models represent the text content and metadata of files. Each model is identified by a unique URI and contains the text content, language information, edit history, and diagnostic markers.
88

89
### Editors
90
Editors are visual components that display and allow editing of models. Monaco provides standalone editors for single files and diff editors for comparing two versions.
91

92
### Providers
93
Providers supply language-specific features like code completion, hover information, and error diagnostics. They work with models based on language and URI patterns.
94

95
### Disposables
96
Many Monaco objects implement a `.dispose()` method for proper cleanup and resource management.
97

98
## Core Capabilities
99

100
### [Editor Management](./editor-core.md)
101
Creating, configuring, and managing editor instances including standalone and diff editors, themes, and view options.
102

103
```typescript
104
const editor = monaco.editor.create(container, options);
105
const diffEditor = monaco.editor.createDiffEditor(container, options);
106
```
107

108
### [Models and URIs](./models-and-uris.md)
109
Managing text models, URIs, and content operations including model creation, content manipulation, and cleanup.
110

111
```typescript
112
const model = monaco.editor.createModel(content, language, uri);
113
const uri = monaco.Uri.parse('file:///example.ts');
114
```
115

116
### [Language Support](./languages-and-providers.md)
117
Language registration, tokenization, and provider registration for IntelliSense features across 80+ supported languages.
118

119
```typescript
120
monaco.languages.register({ id: 'myLanguage' });
121
monaco.languages.setMonarchTokensProvider('myLanguage', definition);
122
```
123

124
### [TypeScript Language Service](./typescript-language.md)
125
Advanced TypeScript and JavaScript language features including full compiler API access, type checking, and IntelliSense.
126

127
```typescript
128
monaco.languages.typescript.typescriptDefaults.setCompilerOptions(options);
129
monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, filePath);
130
```
131

132
### [Other Language Services](./other-languages.md)
133
JSON schema validation, CSS/SCSS/Less support, and HTML/Handlebars language features.
134

135
```typescript
136
monaco.languages.json.jsonDefaults.setDiagnosticsOptions(options);
137
monaco.languages.css.cssDefaults.setOptions(options);
138
```
139

140
### [Workers and Environment](./workers-and-environment.md)
141
Web worker configuration, cross-domain setup, and environment configuration for optimal performance.
142

143
```typescript
144
self.MonacoEnvironment = {
145
    getWorker: function(moduleId, label) {
146
        return new Worker('./worker.js');
147
    }
148
};
149
```