How to Create Live Markdown Editor in React Js

In this tutorial, we are going to learn how to create a simple live markdown editor in React js application using third party packages.

To make the live markdown editor component in React, we will install and use react-markdown, @material-ui/icons, @material-ui/core, and react-syntax-highlighter modules.

The react-markdown is a notable module available through the node package manager; it helps to render markdown in React component. It is quite a popular package, and it gets more or less 110000 downloads every week.

This post will show you how to integrate react-markdown in react and easily render the markdown in react app.

React Js Create Live Markdown Editor Example

• Step 1: Create React App
• Step 2: Install React Markdown Package
• Step 3: Create Markdown Component
• Step 4: Style Markdown Component
• Step 5: Update App Js File
• Step 6: View App in Browser

Create React App

Head over to the command-line tool, type the command, and hit enter to install the create react app tool globally:

npm install create-react-app --global

Execute the command to install a new React application:

npx create-react-app react-demo

Then, move into the app folder:

cd react-demo

Install React Markdown Package

In this step, we will type React markdown and a couple of other modules that will help us build the live markdown component in React.

npm install react-markdown @material-ui/icons @material-ui/core react-syntax-highlighter

Create Markdown Component

In the src/ directory, make a new /components folder then also create the LiveMarkdown.js file.

Then, you have to update the given code into the file.

import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import SyntaxHighlighter from 'react-syntax-highlighter'
import VisibilityIcon from '@material-ui/icons/Visibility'
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'
export default function LiveMarkdown() {
  const [markdownInput, setMarkdownInput] = useState()
  return (
    <div className="App">
      <div className="wrapper">
        <div className="head">
          <VisibilityIcon />
          MARKDOWN
        </div>
        <textarea
          autoFocus
          className="textarea"
          value={markdownInput}
          onChange={(e) => setMarkdownInput(e.target.value)}
        ></textarea>
      </div>
      <div className="wrapper">
        <div className="head">
          <VisibilityIcon />
          PREIVEW
        </div>
        <ReactMarkdown
          children={markdownInput}
          components={{
            code: MarkComponent,
          }}
        />
      </div>
    </div>
  )
}
const MarkComponent = ({ value, language }) => {
  return (
    <SyntaxHighlighter language={language ?? null} style={docco}>
      {value ?? ''}
    </SyntaxHighlighter>
  )
}

Style Markdown Component

In this step, we will design the markdown component, open the src/App.css file and add the following code into the file.

body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.App {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
}
.wrapper {
  width: 45%;
  height: 60%;
  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;
}

Update App Js File

Open the App.js file, in this file you have to import the LiveMarkdown component at the same time declare the component inside the App() function.

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

View App in Browser

We are now ready to test the live markdown in React, execute the given command:

npm start

Your app will serve on the following url:

http://localhost:3000

Conclusion

In this guide, we have learned how to pretty simply build a live markdown editor in React js application. We have built a markdown editor in React using the react markdown and react-syntax-highlighter packages.