Monaco Vs CodeMirror in React

I have been practicing a lot of algorithms problems to prepare for job interviews and found that there was no specific tool where I can store my code topic wise and edit it later. So I created a website for it [https://www.codingnotesonline.com/].

To create this web tool, I tried two javascript-based code editors (codeMirror & Monaco) and will be talking about things that worked for me, and maybe it helps you too in your project.

Monaco
It is among the top editors which you can use in your react project and also the editor that powers the famous VS code.

Basic Code Syntax

import React, { useState } from "react";
import Editor from "@monaco-editor/react";

function App() {
  const [theme, setTheme] = useState("light");
  const [language, setLanguage] = useState("javascript");
  const [isEditorReady, setIsEditorReady] = useState(false);

  function handleEditorDidMount() {
    setIsEditorReady(true);
  }

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  function toggleLanguage() {
    setLanguage(language === "javascript" ? "python" : "javascript");
  }

  return (
    <>
      <button onClick={toggleTheme} disabled={!isEditorReady}>
        Toggle theme
      </button>
      <button onClick={toggleLanguage} disabled={!isEditorReady}>
        Toggle language
      </button>

      <Editor
        height="90vh" // By default, it fully fits with its parent
        theme={theme}
        language={language}
        value={"javascript"}
        editorDidMount={handleEditorDidMount}
        loading={"Loading..."}
      />
    </>
  );
}

export default App;

Playground: [https://codesandbox.io/s/wizardly-varahamihira-zwv28?file=/src/monaco.js]
Monaco React : [https://monaco-react.surenatoyan.com/]

Advantages:

• Written in Typescript
• Supports several languages and themes
• Auto-completion is one of the strongest tools of Monaco in comparison to other editors.
• Bracket matching
• Errors & warnings
• Tones of editor options [https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html]
• Lot of developers use VS code and choosing Monaco can help you attract such customer base due to their familiarity with the editor.

Disadvantages:

• One of the major disadvantages that it does not support mobile browsers or webview apps. This was the only reason I didn't choose this editor as I wanted to convert my webpage in a mobile app using webview.

Code Mirror

Code mirror has been in the community for a long time and several versions of it have been released. There is a lot of similarity between the mirror and Monaco in terms of the options that they provide.

Basic Code Syntax

import {Controlled as CodeMirror} from 'react-codemirror2'

//Import Uncontrolled if you don't want to make any changes in the code like saving or manipulating code data.

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }} // used in controlled component

  onChange={(editor, data, value) => {
  }}
/>

Playground : [https://codesandbox.io/s/objective-keller-0w0mb?file=/src/codeMirror.js]
CodeMirror React : [https://github.com/scniro/react-codemirror2]

Advantages:

• Code mirror code is clean, concise, and easy to understand. If you are looking for adding custom functionality then code mirror would be a better choice over Monaco and also supports mobile browsers.

• It is used in several big projects as a dev tool for Firefox, Chrome, and Safari, in Light Table, Adobe Brackets, Bitbucket, and many others.

• Other features include support of more 100 languages, various themes, split views, autocompletion and many other
  [https://codemirror.net/]

Disadvantage

• Written in Javascript(Type definition might not be perfect)

Several other sources where I found a comparison of code editors which could be useful in deciding the code editor as per your need

Link:[https://www.npmtrends.com/ace-code-editor-vs-codemirror-vs-monaco-editor]

Link: https://stackshare.io/stackups/codemirror-vs-monaco-editor

As per my understanding and research, there are three code editors in the market (Monaco, CodeMirror, Ace-code-editor) which are widely used. Ace-code-editor is similar to the other two in terms of features and functionality but does not support the mobile browser well.

Comments

[Miriam Soloveichik]

Nice post. Another point that I realized from experience with the both, codemirror and monaco, is that codemirror is better suited for short read-only snippets (like including a code example in an article) and monaco editor is better for real editing/long code

[Greggman]

Why would you use an editor for "read only" snippet?

[Veera Srivastava]

for showing in a blogpost etc.

[Greggman]

That's kind of waste though. Using either one is downloading megs of javascript just to display some static code (because read-only). For read only, either use something like highlight.js (at build time or on the page) and simple CSS. Much better for users than having them download megs of js to display read-only code.

[Veera Srivastava]

Yup, you are right but it is an alternative, also, Codemirror is Used in devtools for various browsers like Chrome and Firefox, and is sponsored by codepen and many other big organisations, this gives an assurance that this third party library is not going to go anywhere without notice and ghost and break my application, as you wouldn't believe that these browsers would rely on something so weak that it runs out of service so soon, also I used to use codemirror when I was very new as if you go to youtube to learn something, you'd find tonnes of quality content relying around code mirror, the only thing is that codemirror as such a big market that it won't be broken very easily, with that being said monaco-editor does come from Microsoft and hence will not break anyways but codemirror is old and has a big market which is probably the main reason why people are using it extensively till date.

[Miriam Soloveichik]

Using Monaco is not waste.
With monaco-editor-webpack-plugin it's easy to remove irrelevant features from Monaco (like edit, autocomplete, etc.) so it's not that heavy
For long code snippets with folder structures the Monaco has better user experience than code-mirror