Working as a frontend developer for more than a decade, I’ve often faced situations where I needed to embed a code editor inside a React application.
Sometimes it was for building internal tools for my team, and other times it was for client-facing apps where users needed to write and test code directly in the browser. I’ve tested different approaches. Some were quick to implement, while others provided more flexibility and power.
In this tutorial, I’ll walk you through the exact methods I use to add a React code editor component. I’ll share code examples, explain why I chose specific libraries, and show you how to make them work in real-world projects.
Why Use a Code Editor in React?
Before jumping into the methods, let’s quickly cover why this is useful.
- Interactive Learning Apps – For example, building a coding bootcamp portal where students type and run JavaScript code.
- Internal Tools – Imagine creating a JSON editor for your company’s data pipelines.
- Prototyping – Quickly test snippets of code without leaving the browser.
Now, let’s dive into the methods.
Method 1 – Use Monaco Editor (the Engine Behind VS Code)
One of the most powerful editors you can embed is Monaco Editor, the same editor that powers Visual Studio Code.
It’s feature-rich, supports syntax highlighting for dozens of languages, and feels very familiar to developers in the US who already use VS Code daily.
Step 1: Install Monaco Editor
npm install @monaco-editor/reactStep 2: Add Monaco Editor to Your React App
import React from "react";
import Editor from "@monaco-editor/react";
export default function App() {
function handleEditorChange(value) {
console.log("Current code:", value);
}
return (
<div style={{ height: "100vh", width: "100%" }}>
<h2>React Monaco Editor Example</h2>
<Editor
height="90vh"
defaultLanguage="javascript"
defaultValue="// Type your JavaScript code here"
onChange={handleEditorChange}
/>
</div>
);
}I executed the above example code and added the screenshot below.
This example sets up a Monaco Editor in full screen with JavaScript as the default language. The onChange function captures user input, which you can store in state or send to an API.
Method 2 – Use CodeMirror (Lightweight and Flexible)
If you don’t need the full power of Monaco, CodeMirror is a great alternative. It’s lighter, loads faster, and works well in dashboards and admin tools.
Step 1: Install CodeMirror
npm install @uiw/react-codemirrorStep 2: Add CodeMirror to Your App
import React, { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
export default function App() {
const [code, setCode] = useState("// Write your code here");
return (
<div style={{ padding: "20px" }}>
<h2>React CodeMirror Example</h2>
<CodeMirror
value={code}
height="400px"
extensions={[javascript()]}
onChange={(value) => setCode(value)}
/>
<pre>{code}</pre>
</div>
);
}I executed the above example code and added the screenshot below.
This example uses CodeMirror with JavaScript syntax highlighting. The editor value is stored in React state, making it easy to display or process elsewhere in the UI.
Method 3 – Build a Minimal Editor with a Textarea
Sometimes, you don’t need advanced features like autocomplete or syntax highlighting. For quick prototypes or internal tools, a styled <textarea> can serve as a lightweight editor.
Full Example
import React, { useState } from "react";
export default function App() {
const [code, setCode] = useState("// Simple editor using textarea");
return (
<div style={{ padding: "20px" }}>
<h2>Custom Textarea Editor</h2>
<textarea
value={code}
onChange={(e) => setCode(e.target.value)}
style={{
width: "100%",
height: "300px",
fontFamily: "monospace",
fontSize: "14px",
}}
/>
<pre>{code}</pre>
</div>
);
}I executed the above example code and added the screenshot below.
This is the simplest way to let users enter code in React. While it lacks syntax highlighting, it’s fast, lightweight, and requires no extra libraries.
Method 4 – Create a Live Code Editor (Run JavaScript in Browser)
For learning platforms or coding challenges, it’s useful to allow users to write and run code directly in the browser. Here’s how you can build a simple live editor with Monaco and eval().
Full Example
import React, { useState } from "react";
import Editor from "@monaco-editor/react";
export default function App() {
const [output, setOutput] = useState("");
function runCode(code) {
try {
// Unsafe in production – sandboxing recommended
const result = eval(code);
setOutput(String(result));
} catch (error) {
setOutput("Error: " + error.message);
}
}
return (
<div style={{ display: "flex", height: "100vh" }}>
<div style={{ flex: 1 }}>
<Editor
height="100%"
defaultLanguage="javascript"
defaultValue="// Write JS code and click Run"
onChange={(value) => runCode(value)}
/>
</div>
<div style={{ flex: 1, padding: "20px", background: "#f4f4f4" }}>
<h3>Output</h3>
<pre>{output}</pre>
</div>
</div>
);
}This example evaluates JavaScript code entered in the Monaco Editor and displays the result. In production, use a sandbox (like Web Workers or an API) instead of eval() for security.
Performance Tips
From my experience, here are some tips when embedding code editors in React:
- Lazy Load the Editor – Both Monaco and CodeMirror are heavy libraries. Import them only when needed.
- Use Web Workers – For live execution, offload code execution to a worker to avoid blocking the UI.
- Theme Support – Both editors support dark/light themes, which is important for US developers who often prefer dark mode.
Adding a React code editor component is easier than most people think.
If you need a full VS Code experience, go with Monaco Editor.
If you want something lightweight and fast, CodeMirror is a great choice.
And if you only need a basic editor, a styled textarea will do the job.
I’ve used all three in different projects over the past 10+ years, and each has its place depending on the requirements. Try them out, experiment with different setups, and choose the one that best fits your project.
You may also like to read:
- Force a React Component to Re-Render
- Build a React Multi-Select Component
- Use componentDidMount in React Functional Components with useEffect
- React Pagination Component Examples
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
