Monaco Vs CodeMirror  in React
Tags: codenewbie, javascript, react, productivity
Published: 2020-08-09 14:57:37

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

```jsx
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
```jsx
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ww48jrzrpc2bmw3d0qal.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ouf6pkjuuydp9vvxumdn.png)

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.