Best code editor components for React

Interactive code editors are powerful tools that can greatly enhance the user experience on your blog or website. In this article, we’ll explore some of the most popular code editor components for React, examining their features and capabilities. Hopefully, this article will give you a better idea of which one is best for your project. Let’s get started!

Jump ahead:

• React CodeMirror
• Monaco Editor React
• react-simple-code-editor
• React Ace

React CodeMirror

React CodeMirror is a React code editor component that offers a wide array of features and an easy setup. Some of its main features include:

• Multiple language modes
• Multiple themes and custom theme creation options
• Custom styling and sizes
• Additional features like line numbers, autocompletion, code highlighting, and bracket closing

First, install the React CodeMirror package with the code below:

npm i @uiw/react-codemirror

Next, import the CodeMirror component into your React app:

import CodeMirror from "@uiw/react-codemirror";

Simply return the CodeMirror component, and it will render a blank editable box. Then, you can set an initial value, as well as the width and height of the component.

We can also add custom onChange events that will trigger when there is any change made to the code inside the editor. To apply additional features, you can use the extensions prop, as below:

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
function App() {
  const code = "console.log('Code Mirror!');"
  return (
    <CodeMirror
      value={code}
      height="100px"
    />
  );
}
export default App;

Additional features like autocomplete, languages, and themes must be imported separately. In the following example, we’re adding the vscode theme, which you’d install like so:

npm i @uiw/codemirror-theme-vscode

The final code will look like this:

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
function App() {
  const code = "console.log('Code Mirror!');";
  return (
    <CodeMirror
      value={code}
      height="100px"
      theme={vscodeDark}
    />
  );
}
export default App;

Monaco Editor React

Monaco Editor React is a popular library that provides a fully featured code editor from VS Code. It is one of the most powerful code editor components available, offering the following features:

• Support for more than 50 different languages
• Many prebuilt themes, plus the option to create a custom theme
• Code formatting and suggestions
• Syntax highlighting and indentation
• Line numbers, minimap, and suggestions
• Search within the editor using Control + F
• Customizable styling options, including font size, cursor styles, and scrollbar appearance

To get started, install the @monaco-editor/react package:

npm i @monaco-editor/react

Monaco Editor React stands out for its ease of use in comparison to React CodeMirror, requiring fewer external libraries. This makes it simple to change languages and themes, while also allowing you to customize editor properties like width, height, initial value, and onChange events:

import Editor from "@monaco-editor/react";
function App() {
  const code = "console.log('Monaco Editor!');";
  return (
    <Editor
      height="100px"
      language="javascript"
      theme="vs-dark"
      value={code}
    />
  );
}
export default App;

You can add additional features using the options property. Because Monaco Editor React is powered by VS Code, you can find almost any feature imaginable.

In the example below, we’ll incorporate a few of these features, such as custom styling, language and theme specification, code suggestions, and code formatting:

import Editor from "@monaco-editor/react";
function App() {
  const code = "var message = 'Monaco Editor!' \nconsole.log(message);";
  return (
    <Editor
      height="100px"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={{
        inlineSuggest: true,
        fontSize: "16px",
        formatOnType: true,
        autoClosingBrackets: true,
        minimap: { scale: 10 }
      }}
    />
  );
}
export default App;

react-simple-code-editor

As its name suggests, react-simple-code-editor is a lightweight and easy-to-use library. Although it doesn’t offer as many features as the options we covered above, it has a smaller bundle size and offers all the basic features an app would usually require, including:

• Syntax highlighting using third-party libraries
• Customizable indentation
• Wrap text in brackets or parentheses

You should note that react-simple-code-editor isn’t a very powerful library, so large documents can affect the typing speed. Also, it only offers a few options for styling.

To get started, install react-simple-code-editor with the following command. You’ll also need to install a third-party library like Prism for syntax highlighting:

npm i react-simple-code-editor
npm i prismjs

The basic editor features are similar to those we discussed above. You can customize the initial value and a few styling options, such as padding and tab size.

Unlike other editors, however, state management must be implemented by the user to store the code and any changes made in the editor. To do this, you’d use an onValueChange function, which works similarly to the onChange event handler.

A major difference to other editors is that we can edit the CSS using the style property, and you’ll need to import a number of external files. These are for syntax highlighting; Prism is a popular choice, as mentioned above. We can set the highlighting using the highlight prop.

N.B., most of the styling must be done using CSS since the editor itself is simply an empty box.

In the example below, we are using a code state that stores any changes made in the editor. We’ve also added some minor styling using inline CSS:

import { useState } from "react";
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs/components/prism-core";

import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css";

function App() {
  const [code, setCode] = useState(
    "var message = 'Monaco Editor!' \nconsole.log(message);"
  );
  return (
    <Editor
      value={code}
      padding={10}
      onValueChange={(code) => setCode(code)}
      highlight={(code) => highlight(code, languages.js)}
      style={{
        fontFamily: "monospace",
        fontSize: 17,
        border: "1px solid black"
      }}
    />
  );
}
export default App;

React Ace

React Ace is a popular and easy-to-use code editor component. It has almost all the features commonly found in code editors and is much easier to use when compared to libraries like React CodeMirror or Monaco Editor React. Some of its main features include:

• Option to create split editors
• More than 15 different modes and language options
• Many of the most popular themes are available to use, but they must be imported separately
• Multiple styling options, plus the style prop to add custom CSS
• Customizable settings like number of lines, width, height, and autocomplete
• Multiple event handlers, like onChange, onScroll, and onFocus

To get started, install React Ace with the following command:

npm i react-ace

Similar to the previous editors, you can give the Ace editor component an initial value as well as custom event handlers. You can also set the mode and theme. These must be imported separately from the library, however. You can apply additional options using the setOptions property.

In the example below, we’ll add autocompletion, highlight active lines, and some styling:

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";

function App() {
  const code = "var message = 'Monaco Editor!' \nconsole.log(message);";
  return (
    <AceEditor
      height="100px"
      value={code}
      mode="javascript"
      theme="monokai"
      fontSize="16px"
      highlightActiveLine={true}
      setOptions={{
        enableLiveAutocompletion: true,
        showLineNumbers: true,
        tabSize: 2
      }}
    />
  );
}
export default App;

Conclusion

In this article, we reviewed four of the most popular code editor components available for React. Hopefully, now you have an idea of which library is best suited to your project — and if not, you can always build your own!