Create Your Own Code Editor With React
Published: 2024-04-24 14:04:20

by [Ejiro Thankgod](https://blog.openreplay.com/authors/ejiro-thankgod)




<blockquote><em>
Microsoft created [Monaco Editor](https://microsoft.github.io/monaco-editor/), a browser-based code editor that works with many of their products, including VS Code, Azure DevOps, and Visual Studio Online. The Monaco Editor is designed to provide a quick and efficient coding experience, including auto-completion and syntax highlighting. It also supports a variety of programming languages and technologies, such as JavaScript, TypeScript, HTML, and CSS. This article will show how to use it to create your own editor page.
</em></blockquote>




<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

 
Building a code editor application with React and the [React-Monaco-Editor library](https://www.npmjs.com/package/@monaco-editor/react?activeTab=readme) allows developers to craft advanced code editing environments within their web apps. React, a widely-used JavaScript library for crafting user interfaces, offers a strong basis for developing dynamic and interactive components. Leveraging the React-Monaco-Editor library, built on the powerful Monaco Editor from Microsoft, provides a feature-rich editing experience, including syntax highlighting, code completion, and more. This combination allows developers to create professional-grade code editors that are highly customizable and optimized for performance. This tutorial will explore how to set up a project, create a code editor component, and enhance it with various features using React and the React-Monaco-Editor library.

The React Monaco Editor is a powerful code editor component based on the Monaco Editor by Microsoft. Here are several key aspects that underscore its importance:

* Rich Feature Set: It provides a wide range of essential coding features, such as syntax highlighting, code completion, and code folding, making it easier and more efficient for developers to write code.

* Customization: React Monaco Editor can be easily customized to fit specific requirements, including theme customization and adding custom languages and features.

* Performance: It is highly optimized for performance, providing smooth editing even for large files and complex codebases.

* Integration: It integrates seamlessly with React applications, offering a React component that can be easily added to any React project.

* Compatibility: Since it is based on the Monaco Editor, which powers Visual Studio Code, it provides a familiar editing experience for many developers.

* Community and Support: Being a popular library, React Monaco Editor has a strong community and is well-maintained, ensuring ongoing support and updates.

## Setting up the Development Environment

First of all, we have to create a React project app by running the command:

```bash
npx create-react-app react-monaco-app
```
Next, we’ll install dependencies and libraries that we’ll use later on, such as react-monaco-editor. For styling, we'll install [Chakra UI](https://chakra-ui.com/getting-started/vite-guide) to build beautiful and accessible user interfaces.

```bash
npm i @monaco-editor/react
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```  

### Creating the Code Editor Component

Before building our code components, let’s configure our file structure by clearing the excess boilerplate and some other unwanted files in our React app. In our `index.js,` we’ll  wrap our `App.js` component with `ChakraProvider`, just as we have below:

```javascript
//index.js//
import { ChakraProvider } from "@chakra-ui/react";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
);
```
The `<ChakraProvider>` component helps in setting up Chakra UI in our React application. It provides theme configuration, styled-components, global styles, and accessibility features, enabling us to build the code editor interface.

## Build The Code Editor Component

To begin developing the code editor in React, we’re going to create a `components` folder that will house our code editor component, so we’ll create an `EditorWindow.jsx` file and paste the following code:

```javascript
//EditorWindow.jsx//
import { Box } from "@chakra-ui/react";
import { Editor } from "@monaco-editor/react";
function EditorWindow() {
  return (
    <Box>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue="// some comment"
      />
      ;
    </Box>
  );
}
export default EditorWindow;
```

We create a simple code editor window using the Monaco editor library and wrap it in a layout container from Chakra UI.

After which, we update our `App.js` file by importing `EditorWindow` to the `App` as follows:

```javascript
//App.js//
import { Box } from "@chakra-ui/react";
import EditorWindow from "./components/EditorWindow";
function App() {
  return (
    <Box minH="100vh" bg="#daf5ed" color="gray.500" px={6} py={8}>
      <EditorWindow />
    </Box>
  );
}
export default App;
```

In our `App.js` above, we define the main layout and render the `EditorWindow` component within it, so when we go to our browser, our code editor is set, and we can start writing some scripts.

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710155308814_image.png)

### Manage State to Store Our Value

State management is key to effectively storing and manipulating data within our application. We’ll add some state to our editor to store any value of code we’re writing.

```javascript
//EditorWindow.jsx//
import React, { useRef, useState } from "react";
import { Box } from "@chakra-ui/react";
import { Editor } from "@monaco-editor/react";

const INITIAL_VALUE = "// some comment";
const DEFAULT_LANGUAGE = "javascript";

function EditorWindow() {
  const editorRef = useRef(null);
  const [value, setValue] = useState(INITIAL_VALUE);

  const handleMount = (editor) => {
    editorRef.current = editor;
    editor.focus();
  };

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <Box>
      <Editor
        height="90vh"
        defaultLanguage={DEFAULT_LANGUAGE}
        defaultValue={INITIAL_VALUE}
        onMount={handleMount}
        value={value}
        onChange={handleChange}
      />
    </Box>
  );
}

export default EditorWindow;
```

We manage the state of the code editor by using the `useState` hook to store the editor's content and the `useRef` hook to store a reference to the editor instance. The code also handles mounting the editor and updating its values when the user types.


<CTA_Middle_Cloud />



## Multiple Language Support

We must provide language selection capabilities to make our code editor more adaptable and support numerous programming languages. To this end, we’re going to build a menu button that functions more like a language selector.

Under our root directory, we’ll create a file called constants, and from there, we’ll export languages and their versions. These languages and their versions are specific to our API request, which we’ll come across in this tutorial. We’ll create a `constants.js` file and input the following code:

```javascript
//constants.js//
export const LANG_VERSIONS = {
  javascript: "18.15.0",
  typescript: "5.0.3",
  python: "3.10.0",
};
```

We’ll create `LangSwitch.jsx` in our components folder and import the following code:

```javascript
//LangSwitch.jsx//
import React from "react";
import {
  Box,
  Button,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Text,
} from "@chakra-ui/react";
import { LANG_VERSIONS } from "../constants";
const LangSwitch = ({ language, onSelect }) => {
  const languages = Object.entries(LANG_VERSIONS);
  return (
    <Box ml={2} mb={4}>
      <Text mb={2} fontSize="lg">
        Language:
      </Text>
      <Menu>
        <MenuButton as={Button}>{language}</MenuButton>
        <MenuList>
          {languages.map(([language, version]) => (
            <MenuItem key={language} onClick={() => onSelect(language)}>
              {language}
              <Text as="span" color="gray.600" fontSize="sm">
                ({version})
              </Text>
            </MenuItem>
          ))}
        </MenuList>
      </Menu>
    </Box>
  );
};
export default LangSwitch;
```

We created a language switcher component using Chakra UI components. It allows users to select a programming language from a drop-down menu and displays the corresponding version information. 

We’ll also make an update to our `EditorWindow.jsx` file with a state to update the code editor when a particular language is selected below: 

```javascript
//EditorWindow.jsx//
import React, { useRef, useState } from "react";
import { Box } from "@chakra-ui/react";
import { Editor } from "@monaco-editor/react";
import LangSwitch from "./LangSwitch";

function EditorWindow() {
  const [language, setLanguage] = useState("javascript");
  const editorRef = useRef(null);

  const handleLanguageChange = (newLanguage) => {
    setLanguage(newLanguage);
  };

  return (
    <Box>
      <LangSwitch language={language} onSelect={handleLanguageChange} />
      <Editor
        height="90vh"
        defaultLanguage={language} // Update editor language based on state
        // ... other editor props
        ref={editorRef} // Assign editor reference
      />
    </Box>
  );
}

export default EditorWindow;
```

This code manages the state of which programming language is being used. When you click on a language switcher and select a new language, the window then updates to show the code in the new language you picked. 

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710155768811_image.png)

We’ll also update our `LangSwitch.jsx` by passing the `onSelect` function to the component.

```javascript
//LangSwitch.jsx//
import React from "react";
import {
  Box,
  Menu,
  Button,
  MenuButton,
  MenuList,
  MenuItem,
  Text,
} from "@chakra-ui/react";
import { LANG_VERSIONS } from "../constants";
const LangSwitch = ({ language, onSelect }) => {
  const languages = Object.entries(LANG_VERSIONS);
  return (
    <Box ml={2} mb={4}>
      <Text mb={2} fontSize="lg">
        Language:
      </Text>
      <Menu>
        <MenuButton as={Button}>{language}</MenuButton>
        <MenuList>
          {languages.map(([language, version]) => (
            <MenuItem key={language} onClick={() => onSelect(language)}>
              {language}
              <Text as="span" color="gray.600" fontSize="sm">
                ({version})
              </Text>
            </MenuItem>
          ))}
        </MenuList>
      </Menu>
    </Box>
  );
};
export default LangSwitch;
```

When you click on a language in the menu, it triggers a function called `onSelect` that tells the parent component which language you picked. This allows the parent component to update the display to show code in the selected language. 

Back to our  `EditorWindow.jsx`, we’ll get rid of the `defaultLanguage="javascript"` and pass in `language`, and the value for the language is our listed `language`.

```javascript
//EditorWindow.jsx//
<Editor height="75vh" language={language} ref={editorRef} />;
```

If we go to the browser, we’ll find that our menu dropdown is now responsive, and when we select a language, it gets updated so we can write our code.
![dropdown image](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/image1.gif)

### Update Starter Template

We want a situation whereby when we select a new language, it should update to that language’s starter code or boilerplate per se. If it’s Javascript, we’ll have a Javascript boilerplate. If it’s Python, we’ll have a Python boilerplate.

Back to our  `constants.js`, we’ll update our code below:

```javascript
//constants.js//
export const CODE_TEMPLATES = {
  javascript: `
      function greet(name) {
        console.log("Hello, " + name + "!");
      }
      
      greet("Paul");
      `,
  typescript: `
      type Params = {
        name: string;
      };
      
      function greet(data: Params) {
        console.log("Hello, " + data.name + "!");
      }
      
      greet({ name: "Paul" });
      `,
  python: `
    def greet(name):
        print("Hello, " + name + "!")
      
    greet("Paul")
      `,
};
```     

Inside `constants.js` we define a JavaScript object called `CODE_TEMPLATES` that stores code templates for different programming languages. Each template is a string representing a simple function that greets a person by name.

Inside our `EditorWindow.jsx`, we’ll set the value of our code editor to `CODE_TEMPLATES` imported from `constansts.js`. 

```javascript
//EditorWindow.jsx//
import { CODE_TEMPLATES } from "../constants";

function EditorWindow() {
  const [code, setCode] = useState(CODE_TEMPLATES.javascript);

  const handleLanguageChange = (newLanguage) => {
    setLanguage(newLanguage);
    setCode(CODE_TEMPLATES[newLanguage]);
  };

  return (
    <Box>
      <LangSwitch language={language} onSelect={handleLanguageChange} />
      <Editor height="90vh" language={language} value={code} ref={editorRef} />
    </Box>
  );
}

export default EditorWindow;
```

The `CODE_TEMPLATES` provide initial code in the code editor component when a new language is selected in the drop-down menu. 

![dropdown 2](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/image2.gif)

That’s it for the code editor. Next, create an output display box on the other side of the screen. This output component will take in the code, send it to the API as a request, return it, and display the result.

## Compilation and Output with Piston API

[Piston API](https://piston.readthedocs.io/en/latest/) is a powerful tool for programmatically compiling and executing code in various programming languages. By leveraging the capabilities of the Piston API, developers can seamlessly integrate compilation processes into their applications, enabling dynamic code execution and rapid prototyping.

We will create an output section on our code editor, whereby whenever we write code, we can run the code and get an output with the help of Piston API.

Now, we’ll have to go back to `EditorWindow.jsx` and wrap everything within our component with a `<Box w="50%">` and `<HStack>`.

```javascript
//EditorWindow.jsx//
return (
  <Box>
    <HStack spacing={4}>
      <Box w="50%">
        <LanguageSelector language={language} onSelect={handleLanguageChange} />
        <Editor />
      </Box>
    </HStack>
  </Box>
);
export default CodeEditor;
```

These help to split the screen in half, just as we have below:

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710237784469_image.png)

### Create an Output Component

The space provided is where we’ll build our output component and have an output for whatever code we run. Under the components folder, we’re going to create an `Output.jsx` file and input the following code:

```javascript
//Output.jsx//
import { Box, Button, Text } from "@chakra-ui/react";
const Output = () => {
  return (
    <Box w="50%">
      <Text mb={2} fontSize="lg">
        Output
      </Text>
      <Button variant="outline" colorScheme="green" mb={4}>
        Run Code
      </Button>
      <Box
        height="75vh"
        p={2}
        border="1px solid"
        borderRadius={4}
        borderColor="#333"
      >
        test
      </Box>
    </Box>
  );
};
export default Output;
```

This code creates a box that shows the output of the code we've written. It also includes a button labeled "Run Code" that you can click to execute the code and see its result in the box.
After which, we’ll move to our `EditorWindow.jsx` and Import and return the `Output.jsx`, if we check our browser below:

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710237722997_image.png)

### Compilation with the Piston API

We want a situation whereby when we hit the “Run Code” button, we’ll make an API request from Piston, which will compile our code and display an output (result). So we need to create an `api.js`. Inside the api.js, we’ll execute the API call.

```javascript
//api.js//
import { LANG_VERSIONS } from "./constants";
const API_URL = "https://emkc.org/api/v2/piston/execute";
export const executeCode = async (language, sourceCode) => {
  const data = {
    language: language,
    version: LANG_VERSIONS[language],
    files: [
      {
        content: sourceCode,
      },
    ],
  };
  const response = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
  return await response.json();
};
```

This code defines a function `executeCode` that sends a request to an API to execute code in a specified programming language. It uses the `fetch` function to request a POST API endpoint `https://emkc.org/api/v2/piston/execute` with the provided `language` and `sourceCode`. 

Then, we’ll head back to `Output.jsx` and create functionality for our output.

```javascript
//Output.jsx//
import { Box, Button, Text } from "@chakra-ui/react";
import { useState } from "react";
import { executeCode } from "../api";
const Output = ({ editorRef, language }) => {
  const [output, setOutput] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const runCode = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const sourceCode = editorRef.current.getValue();
      if (!sourceCode) return;
      const { run: result } = await executeCode(language, sourceCode);
      setOutput(result.output);
    } catch (error) {
      setError(error);
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <Box w="50%">
      <Text mb={2} fontSize="lg">
        Output
      </Text>
      <Button
        variant="outline"
        colorScheme="green"
        mb={4}
        isLoading={isLoading}
        onClick={runCode}
      >
        Run Code
      </Button>
      <Box
        height="75vh"
        p={2}
        border="1px solid"
        borderRadius={4}
        borderColor="#333"
        color="#333"
      >
        test
      </Box>
    </Box>
  );
};
export default Output;
```

In the code above, we define three pieces of state for managing the output: the loading state, and any errors that occur during code execution. Also, we define a function `runCode,` which is called when the "Run Code" button is clicked. It sets the loading state to true, clears any previous error message, gets the code from the editor using `editorRef.current.getValue()`, and then calls the `executeCode` function (which sends the code to an API for execution) with the selected language and the code. 

Back to `EditorWindow.jsx`, we’ll create a ref (`editorRef`) to hold a reference to the editor component. Defines a function `handleEditorMount` that receives the editor instance when the editor is mounted. This ensures the editor is focused when mounted, improving the user experience. The rendered `output` receives the `editorRef` and the current `language` as props.

```javascript
//EditorWindow.jsx//

import { CODE_TEMPLATES } from "../constants";
import Output from "./Output";
function EditorWindow() {
  const [language, setLanguage] = useState("javascript");
  const [code, setCode] = useState(CODE_TEMPLATES.javascript);
  const editorRef = useRef(null);
  const handleEditorMount = (editor) => {
    editorRef.current = editor;
    editor.focus();
  };

  return (
    <Box>
      <HStack spacing={4}>
        <Box w="50%">
          <LangSwitch language={language} onSelect={handleLanguageChange} />
          <Editor onMount={handleEditorMount} />
        </Box>
        {<Output editorRef={editorRef} language={language} />}
      </HStack>
    </Box>
  );
}
export default EditorWindow;
```

Now, if we go to our browser and check our console, when we click on run code, we’ll get a response, which is the output of our code block.

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710237651149_image.png)

So let’s restructure our code to display the output in the output box, so back in our `Output.jsx` instead of displaying in the console, we’ll display in the `output` component.

```javascript
//Output.jsx//
import { Box, Button, Text } from "@chakra-ui/react";
import { useState } from "react";
import { executeCode } from "../api";
const Output = ({ editorRef, language }) => {
  return (
    <Box w="50%">
      ....
      <Box
        height="75vh"
        p={2}
        border="1px solid"
        borderRadius={4}
        borderColor="#333"
        color="#333"
      >
        {output}
      </Box>
    </Box>
  );
};
export default Output;
```

There you have it, our web-based code editor. Whenever you pick a language, the code window updates with a starter template for that language. Once you’re done writing your code, you can run it and get an output.

![](https://blog.openreplay.com/images/create-your-own-code-editor-with-react/images/s_8B1B8DAF034CD2EBC3ACB0BDF96CA0411AE576176C4211CC896546F977F2B533_1710238361488_image.png)

*The full code is on [GitHub](https://github.com/EJINEROZ/React-Monaco-App), and it is also fully hosted on [Vercel](https://react-monaco-app.vercel.app/).*

## Support and Limitations of React Monaco Editor
The React Monaco Editor offers extensive code editing and customization functionality, but it also has some limitations. Here's a breakdown.

### Support

* **Languages and Technologies:**  React Monaco Editor supports a wide range of programming languages and technologies thanks to its foundation on the Monaco Editor from VS Code. This includes popular languages like JavaScript, TypeScript, Python, Java, C++, and many more. You can also extend it for custom languages.
* **Features:**  It inherits many features from the Monaco Editor, including code folding, syntax highlighting, automated indentation, code completion (IntelliSense), key shortcuts (highlight, search, undo, etc.), error checking, and code navigation. These features enhance the code editing experience within your React application.
* **Customization:** The editor offers a good degree of customization through props and options. You can control the editor's appearance, behavior, and functionality to fit your specific needs.

### Limitations

* **Focus on Code Editing:** While powerful, React Monaco Editor primarily focuses on code editing functionalities. It might not be ideal for complex scenarios requiring a full-fledged IDE with features like debugging, extensions or marketplaces, terminal integration, version control integration, project management, and AI-assisted integration.
* **Learning Curve:** Setting up and configuring React Monaco Editor can have a learning curve, especially for those unfamiliar with the Monaco Editor or React development.
* **Potential Bundle Size:** Including the Monaco Editor library can increase your React application's bundle size. This might be a concern for performance-critical applications.
* **Browser Compatibility:** While Monaco Editor generally works well across modern browsers, there may be some compatibility issues with older browsers.

## Conclusion

In conclusion, by leveraging the capabilities of React and React-Monaco-Editor, you can construct a powerful and versatile code editor application. This application will empower users with a rich editing experience, syntax highlighting, and code completion, all within a familiar React-based framework. With its modular design and extensive customization options, this code editor can cater to a wide range of development needs and preferences. Whether you're a seasoned programmer or a budding web developer, this React-Monaco-Editor combination provides a robust foundation for building your next-generation code editing application.

## Resources
- [React](https://create-react-app.dev/docs/getting-started/)
- [React-Monaco-Editor](https://www.npmjs.com/package/@monaco-editor/react?activeTab=readme)
- [Chakra UI](https://chakra-ui.com/getting-started/vite-guide)
- [Piston API](https://piston.readthedocs.io/en/latest/)
- [GitHub Repo](https://github.com/EJINEROZ/React-Monaco-App)