Convert Figma logo to code with AI

microsoft logomonaco-editor

A browser based code editor

39,782
3,549
39,782
573

Top Related Projects

In-browser code editor (version 5, legacy)

26,643

Ace (Ajax.org Cloud9 Editor)

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

19,096

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

29,602

A completely customizable framework for building rich text editors. (Currently in beta.)

6,645

rich text 富文本编辑器

Quick Overview

Monaco Editor is a powerful, open-source code editor that powers Visual Studio Code. It's a versatile, browser-based code editing component that can be embedded in web applications, providing features like syntax highlighting, code completion, and error checking for various programming languages.

Pros

  • Rich feature set including intellisense, code folding, and multi-cursor editing
  • Supports a wide range of programming languages out of the box
  • Highly customizable and extensible
  • Excellent performance, even with large files

Cons

  • Can be complex to set up and configure for specific use cases
  • Large bundle size may impact load times for web applications
  • Limited mobile device support
  • Steep learning curve for advanced customizations

Code Examples

  1. Basic editor setup:
import * as monaco from 'monaco-editor';

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'console.log("Hello, world!");',
    language: 'javascript'
});
  1. Adding custom language support:
monaco.languages.register({ id: 'myCustomLanguage' });
monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
    tokenizer: {
        root: [
            [/\[error.*/, "custom-error"],
            [/\[notice.*/, "custom-notice"],
            [/\[info.*/, "custom-info"],
            [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
        ]
    }
});
  1. Implementing a custom theme:
monaco.editor.defineTheme('myTheme', {
    base: 'vs-dark',
    inherit: true,
    rules: [
        { token: 'custom-info', foreground: '808080' },
        { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
        { token: 'custom-notice', foreground: 'FFA500' },
        { token: 'custom-date', foreground: '008800' },
    ],
    colors: {
        'editor.foreground': '#FFFFFF'
    }
});
monaco.editor.setTheme('myTheme');

Getting Started

To use Monaco Editor in your project:

  1. Install the package:

    npm install monaco-editor
    
  2. Import and initialize the editor:

    import * as monaco from 'monaco-editor';
    
    const editor = monaco.editor.create(document.getElementById('editor-container'), {
        value: '// Your code here',
        language: 'javascript',
        theme: 'vs-dark'
    });
    
  3. Make sure to include the necessary CSS:

    <link rel="stylesheet" data-name="vs/editor/editor.main" href="path/to/monaco-editor/min/vs/editor/editor.main.css">
    

Remember to properly configure your build process to handle Monaco Editor's web workers for optimal performance.

Competitor Comparisons

In-browser code editor (version 5, legacy)

Pros of CodeMirror 5

  • Lighter weight and faster performance for simpler use cases
  • More extensive plugin ecosystem with a wider range of community-contributed addons
  • Easier to customize and extend due to its modular architecture

Cons of CodeMirror 5

  • Less feature-rich out of the box compared to Monaco Editor
  • Limited language intelligence capabilities (e.g., autocomplete, refactoring)
  • Older version with reduced modern browser optimizations

Code Comparison

Monaco Editor:

monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
    language: 'javascript'
});

CodeMirror 5:

CodeMirror(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
    mode: 'javascript'
});

Both editors offer similar basic setup, but Monaco Editor provides more advanced features and configuration options out of the box. CodeMirror 5 relies more on plugins and addons for extended functionality, which can be beneficial for customization but may require more setup for complex use cases.

26,643

Ace (Ajax.org Cloud9 Editor)

Pros of Ace

  • Lighter weight and faster loading times
  • More extensive language support out-of-the-box
  • Easier to customize and extend with plugins

Cons of Ace

  • Less modern UI and default styling
  • Fewer advanced features like IntelliSense and debugging support
  • Less active development and community support

Code Comparison

Monaco Editor:

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
    value: 'console.log("Hello, world!");',
    language: 'javascript'
});

Ace:

import * as ace from 'ace-builds';

const editor = ace.edit('editor');
editor.setTheme('ace/theme/monokai');
editor.session.setMode('ace/mode/javascript');

Both editors offer similar basic setup, but Monaco provides more advanced configuration options out-of-the-box. Ace requires additional plugins for advanced features, while Monaco includes them by default.

Monaco Editor is better suited for complex, IDE-like environments, particularly for web-based development tools. Ace is more appropriate for simpler code editing needs or when a lighter-weight solution is required.

The choice between the two depends on the specific requirements of your project, considering factors such as performance, features, and integration complexity.

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

Pros of Quill

  • Lightweight and easy to integrate
  • Rich text editing with a focus on user-friendly formatting
  • Extensive customization options for toolbar and modules

Cons of Quill

  • Less suitable for code editing compared to Monaco
  • Limited language support and syntax highlighting capabilities
  • Smaller community and fewer extensions available

Code Comparison

Monaco Editor:

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
    language: 'javascript'
});

Quill:

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: [['bold', 'italic'], ['link', 'image']]
    }
});

Summary

Monaco Editor is a powerful code editor with extensive language support and features tailored for developers. It excels in syntax highlighting, IntelliSense, and code completion. Quill, on the other hand, is a rich text editor designed for content creation and formatting. It's more suitable for applications requiring text editing with basic formatting options.

While Monaco Editor is the go-to choice for code-centric projects, Quill shines in scenarios where user-friendly text editing is the primary focus. The choice between the two depends on the specific requirements of your project and the type of editing experience you want to provide to your users.

19,096

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

Pros of Lexical

  • Lightweight and modular architecture, allowing for easier customization and extension
  • Built-in collaboration features and real-time editing support
  • Better accessibility and internationalization support out of the box

Cons of Lexical

  • Less mature ecosystem and community compared to Monaco Editor
  • Fewer language-specific features and syntax highlighting options
  • Steeper learning curve for developers new to React-based editors

Code Comparison

Monaco Editor:

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
    value: 'console.log("Hello, world!");',
    language: 'javascript'
});

Lexical:

import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';

function Editor() {
  return (
    <LexicalComposer initialConfig={{...}}>
      <PlainTextPlugin contentEditable={<ContentEditable />} placeholder={<div>Enter some text...</div>} />
    </LexicalComposer>
  );
}

Both editors offer powerful text editing capabilities, but Monaco Editor excels in providing a more comprehensive IDE-like experience, while Lexical focuses on flexibility and modern web technologies. Monaco Editor is better suited for code-centric applications, whereas Lexical shines in content-focused scenarios with real-time collaboration needs.

29,602

A completely customizable framework for building rich text editors. (Currently in beta.)

Pros of Slate

  • More flexible and customizable for rich text editing
  • Better suited for complex document structures
  • Easier to implement collaborative editing features

Cons of Slate

  • Steeper learning curve due to its flexibility
  • Less out-of-the-box functionality compared to Monaco Editor
  • Smaller community and fewer ready-made extensions

Code Comparison

Monaco Editor:

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
    language: 'javascript'
});

Slate:

const editor = withReact(createEditor())
const [value, setValue] = useState(initialValue)

return (
    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
        <Editable />
    </Slate>
)

Monaco Editor is more focused on code editing and provides a powerful, feature-rich experience out of the box. It's ideal for scenarios like online IDEs or code snippets. Slate, on the other hand, is a flexible framework for building custom rich text editors. It's better suited for complex document editing tasks and allows for more customization, but requires more setup and configuration.

6,645

rich text 富文本编辑器

Pros of UEditor

  • Rich text editing capabilities with WYSIWYG interface
  • Built-in support for image uploading and management
  • Extensive customization options for toolbar and plugins

Cons of UEditor

  • Less active development and community support
  • Limited language support compared to Monaco Editor
  • Heavier footprint and potentially slower performance

Code Comparison

Monaco Editor:

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello world!");\n}',
    language: 'javascript'
});

UEditor:

var ue = UE.getEditor('container', {
    toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline']],
    initialContent: '<p>Hello world!</p>'
});

Key Differences

Monaco Editor is a lightweight, powerful code editor that excels in syntax highlighting and language support. It's ideal for developers and code-centric applications. UEditor, on the other hand, is a full-featured rich text editor designed for content creation and management, with a focus on user-friendly WYSIWYG editing.

Monaco Editor offers better performance and a more modern codebase, while UEditor provides a more comprehensive set of text formatting and media handling features out of the box. The choice between the two depends on whether the primary use case is code editing or rich content creation.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Monaco Editor

Versions Versions Feature Requests Bugs

The Monaco Editor is the fully featured code editor from VS Code. Check out the VS Code docs to see some of the supported features.

image

Try it out

Try out the editor and see various examples in our interactive playground.

The playground is the best way to learn about how to use the editor, which features is supports, to try out different versions and to create minimal reproducible examples for bug reports.

Installing

> npm install monaco-editor

You will get:

  • inside /esm: ESM version of the editor (compatible with e.g. webpack)
  • inside /dev: AMD bundled, not minified
  • inside /min: AMD bundled, and minified
  • inside /min-maps: source maps for min
  • monaco.d.ts: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).

It is recommended to develop against the dev version, and in production to use the min version.

Concepts

Monaco editor is best known for being the text editor that powers VS Code. However, it's a bit more nuanced. Some basic understanding about the underlying concepts is needed to use Monaco editor effectively.

Models

Models are at the heart of Monaco editor. It's what you interact with when managing content. A model represents a file that has been opened. This could represent a file that exists on a file system, but it doesn't have to. For example, the model holds the text content, determines the language of the content, and tracks the edit history of the content.

URIs

Each model is identified by a URI. This is why it's not possible for two models to have the same URI. Ideally when you represent content in Monaco editor, you should think of a virtual file system that matches the files your users are editing. For example, you could use file:/// as a base path. If a model is created without a URI, its URI will be inmemory://model/1. The number increases as more models are created.

Editors

An editor is a user facing view of the model. This is what gets attached to the DOM and what your users see visually. Typical editor operations are displaying a model, managing the view state, or executing actions or commands.

Providers

Providers provide smart editor features. For example, this includes completion and hover information. It is not the same as, but often maps to language server protocol features.

Providers work on models. Some smart features depends on the file URI. For example, for TypeScript to resolve imports, or for JSON IntelliSense to determine which JSON schema to apply to which model. So it's important to choose proper model URIs.

Disposables

Many Monaco related objects often implement the .dispose() method. This method is intended to perform cleanups when a resource is no longer needed. For example, calling model.dispose() will unregister it, freeing up the URI for a new model. Editors should be disposed to free up resources and remove their model listeners.

Documentation

Issues

Create issues in this repository for anything related to the Monaco Editor. Please search for existing issues to avoid duplicates.

FAQ

❓ What is the relationship between VS Code and the Monaco Editor?

The Monaco Editor is generated straight from VS Code's sources with some shims around services the code needs to make it run in a web browser outside of its home.

❓ What is the relationship between VS Code's version and the Monaco Editor's version?

None. The Monaco Editor is a library and it reflects directly the source code.

❓ I've written an extension for VS Code, will it work on the Monaco Editor in a browser?

No.

Note: If the extension is fully based on the LSP and if the language server is authored in JavaScript, then it would be possible.

❓ Why all these web workers and why should I care?

Language services create web workers to compute heavy stuff outside of the UI thread. They cost hardly anything in terms of resource overhead and you shouldn't worry too much about them, as long as you get them to work (see above the cross-domain case).

❓ What is this loader.js? Can I use require.js?

It is an AMD loader that we use in VS Code. Yes.

❓ I see the warning "Could not create web worker". What should I do?

HTML5 does not allow pages loaded on file:// to create web workers. Please load the editor with a web server on http:// or https:// schemes.

❓ Is the editor supported in mobile browsers or mobile web app frameworks?

No.

❓ Why doesn't the editor support TextMate grammars?

Contributing / Local Development

We are welcoming contributions from the community! Please see CONTRIBUTING for details how you can contribute effectively, how you can run the editor from sources and how you can debug and fix issues.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

License

Licensed under the MIT License.

NPM DownloadsLast 30 Days