Create a Markdown Editor with live preview using React

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:

• React JS
• CSS
• JSX
• Functional Component in React

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:

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