Skip to content

Create a Markdown Editor using React Hooks and CodeMirror

Create a Markdown Editor with live preview using React

Last Updated : 24 Apr, 2025

In this article, we will be creating a Markdown Editor with a live preview using React. I have used easy-to-understand concepts like functional components and hooks, such as useState, to manage our app's data. Plus, we'll use the handy react-markdown npm package to show Markdown content in our editor.

Output Preview: Let us have a look at how the final output will look like.

Markdown Editor

Prerequisites:

Approach to create Markdown Editor:

For creating the Markdown Editor with live preview using React, we'll start by setting up our development environment with Node.js and npm. Once that's done, we'll initialize a new React project and install the necessary dependencies, including the react-markdown npm package for rendering Markdown content. With our project ready to go, we'll start coding the Markdown Editor component. This component will consist of a textarea where users can input their Markdown content and a preview area where the rendered Markdown will be displayed in real-time. We'll utilize React's useState hook to manage the state of the Markdown content, ensuring that any changes made by the user are immediately reflected in the preview. Once our Markdown Editor component is complete, we'll integrate it into our main App component and add some basic styling to make it visually appealing.

Steps to Create the React App:

Step 1: Create React App

npx create-react-app markdown-editor

Step 2: Install React Markdown NPM Package

npm install react-markdown

Project Structure:

markdown — Project Structure

The updated dependencies in package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^9.0.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Created a MarkdownEditor.js file in the src directory to house the Markdown Editor component, and integrate it into the main App component by replacing the contents of App.js with the provided code snippet.

JavaScript

import React, { useState } from 'react' import ReactMarkdown from 'react-markdown' export default function MarkdownEditor() {     const [markdownInput, setMarkdownInput] = useState()     return (         <div className="App">             <div className="wrapper">                 <div className="head">                     MARKDOWN                 </div>                 <textarea                     autoFocus                     className="textarea"                     value={markdownInput}                     onChange={                         (e) =>                             setMarkdownInput(e.target.value)                     }                 ></textarea>             </div>             <div className="wrapper">                 <div className="head">                     PREIVEW                 </div>                 <ReactMarkdown                     children={markdownInput}                     components={{                         code: MarkComponent,                     }}                 />             </div>         </div>     ) } const MarkComponent = ({ value }) => {     return (         { value }     ) }

JavaScript

import './App.css' import React from 'react' import MarkdownEditor from './MarkdownEditor'  function App() {     return (         <div>             <MarkdownEditor />         </div>     ) } export default App

CSS

body {     height: 100vh;     width: 100%;     overflow: hidden; }  .App {     display: flex;     width: 100%;     height: 100vh;     align-items: center; }  .wrapper {     width: 45%;     height: 80%;     margin: 25px;     outline: none;     display: flex;     padding: 20px;     background: #eceeee;     flex-direction: column;     border: 2px solid #ccc;     overflow: hidden;     overflow-y: auto; }  .head {     width: 100%;     height: 40px;     border-bottom: 1px solid #ddd;     display: flex;     align-items: center;     font-size: 15px; }  textarea {     padding: 15px;     border: none;     outline: none !important;     width: 96%;     height: 100%;     overflow-x: hidden;     font-size: 17px;     resize: none;     background: #eceeee; }  .markdown {     padding: 15px;     border: none;     outline: none !important;     width: 96%;     height: 100%;     resize: none;     overflow-x: hidden;     background: #fff; }

Steps to Run the App:

npm start

Output Preview: Open your browser and navigate to http://localhost:3000

Create a Markdown Editor using React Hooks and CodeMirror

maheshgaikwad

Improve

Article Tags :

Similar Reads

Create a Markdown Editor using React Hooks and CodeMirror

Creating a Markdown Editor with React Hooks and CodeMirror is a great way to build a simple yet powerful text editing tool. CodeMirror is a versatile text editor component that can be easily integrated into React applications. Here's a basic example of how you can create a Markdown editor using Reac

Create a Video Editor using React

Video Editor is one of the useful apps in day-to-day life. In this article, weâ€™ll walk you through the process of building a basic video editing app using React Native. The application enables users to upload, trim, and convert specific scenes to GIFs and then download the final edited file directly

Create a Text Editor App using React-Native

In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor." Preview of final output: Let us have a look at

Create Memes Generator App using React-Native

The MeÂme Generator App is a mobileÂ application that allows users to effortlessly create memes. With its useÂr-friendly interface, useÂrs can choose from a wide collection of popular meÂme templates and add their own customized text to the top and bottom. In this article, we will see how we can bui

Create a meme generator by using ReactJS

In this tutorial, weâ€™ll create a meme generator using ReactJS. In the meme generator, we have two text fields in which we enter the first textÂ and last text. After writing the text when we click theÂ GenÂ button, it creates a meme with an image and the text written on it. Preview Image: PrerequisiteTh

Create a News Reader app using React-Native

Creating the News Reader application using React-Native language is an exciting project. Using this project, the users can read the news in the application itself, by filtering them according to the categories as per their interest. In this article, we will develop the complete News Reader applicati

How to create Emoji Picker in ReactJS ?

Emojis have become an essential part of modern communication, adding a touch of emotion and fun to our messages and applications. In this article, we will explore how to create an Emoji Picker using ReactJS, allowing users to easily select and insert emojis into their text inputs or text areas. Prer

Online Markdown Editor using Django

In this article, we will guide you through the process of creating an Online Markdown Editor using Django. This powerful tool allows users to seamlessly convert HTML code into a polished web output. By simply entering your HTML code into the input field, our Online Markdown Editor will instantly gen

How to develop a Progressive Web App using ReactJS ?

Progressive React Applications respond very fast to user actions. They load fast and are engaging just like a mobile app. They can access Mobile device features, leverage the Operating System, and have a very high reach. It enables Installability, Background Syncing, Caching and Offline Support, and

Create Category Previews Using React And Tailwind CSS

In modern web development creating visually appealing and functional components is essential for enhancing user experience. The goal is to showcase categories with distinct icons and a stylish green background using Tailwinds utility classes for a streamlined and responsive design. This article focu