React30-Project29: Building a Markdown Editor in React

Title image

Introduction

Creating a markdown editor website allows users to seamlessly write and preview markdown content. In this article, we’ll explore the steps to build a Markdown editor website using Tailwind CSS in a React application.

Goals:

To build a markdown editor in react as shown in below UI:

Prerequisites

Before starting the implementation, ensure you have the following prerequisites:

Node.js and npm: Install Node.js from official website to get npm.

Create React App: Set up a new React project using Create React App (CRA)

npx create-react-app markdown-editor

Markdown Editor Library:

Install a markdown editor library. For this example, we’ll use `react-markdown-editor-lite` for text editor and `react-markdown` for markdown preview:

npm install react-markdown-editor-lite
 react-markdown

Implementation

Project Structure
Organize your project structure. Inside the src folder, you might have the following structure:

src
|-- components
|   |-- Header.js
|   |-- MarkdownEditor.js
|   |-- PreviewPane.js
|-- App.js
|-- index.js

Building Components

Header Component(Header.js):

// Header.js
import React from "react";

const Header = () => {
  return (
    <header className="bg-blue-700 text-white py-4">
      <div className="container mx-auto flex justify-center items-center">
        <div className="text-xl font-bold">Markdown Editor</div>
      </div>
    </header>
  );
};

export default Header;

MarkdownEditor Component (MarkdownEditor.js):

import React, { useState } from "react";
import ReactMarkdownEditorLite from "react-markdown-editor-lite";
import "react-markdown-editor-lite/lib/index.css";

const MarkdownEditor = ({ onChange }) => {
  const [content, setContent] = useState("");

  const handleEditorChange = ({ text }) => {
    setContent(text);
    onChange(text);
  };

  return (
    <ReactMarkdownEditorLite value={content} onChange={handleEditorChange} />
  );
};

export default MarkdownEditor;

PreviewPane Component (PreviewPane.js):

import React from "react";
import ReactMarkdown from "react-markdown";

const PreviewPane = ({ content }) => {
  return (
    <div className="markdown-preview bg-gray-100 p-4 rounded-md">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
};

export default PreviewPane;

Integrating Components in App

Now, integrate these components into your App.js file:

import React, { useState } from "react";
import Header from "./components/Header";
import MarkdownEditor from "./components/MarkdownEditor";
import PreviewPane from "./components/PreviewPane";

const App = () => {
  const [markdownContent, setMarkdownContent] = useState("");

  return (
    <div>
    <Header/>
    <div className="container mx-auto p-4 flex">
      <div className="w-1/2 pr-4">
        <MarkdownEditor onChange={setMarkdownContent} />
      </div>
      <div className="w-1/2 pl-4">
        <PreviewPane content={markdownContent} />
      </div>
    </div>
    </div>
  );
};

export default App;

Styling the app

Add below script in `public/index.html` file to integrate TailwindCSS:

<script src="https://cdn.tailwindcss.com"></script>

You should now see markdown editor with preview in your browser.

Currently bold and italic preview works fine. You con customise `react-markdown` library to integrate other rich text editor features.

Explanation of Markdown Editor Library Usage

react-markdown-editor-lite:

This library provides a simple and customizable markdown editor for React.
It offers features like real-time preview, toolbar customization, and easy integration.
MarkdownEditor Component:

Utilizes the react-markdown-editor-lite library to create a markdown editor.
Manages the editor's content state using React's useState.
Passes the editor's content to the parent component through the onChange callback.
PreviewPane Component:

Uses react-markdown to render markdown content in a preview pane.
Applies Tailwind CSS styles for a clean and readable preview.

Live Demo: Codesandbox

Conclusion

In this tutorial, we explored the process of building a Markdown editor website using Tailwind CSS in a React application. The combination of Tailwind CSS for styling and the react-markdown-editor-lite library for markdown editing provides a powerful and efficient solution. The modular structure of components allows for easy customization and extension of functionality. Feel free to enhance this project further by adding features such as saving content, integrating with cloud storage, or supporting additional markdown features. Have a nice day ahead 😁

Check out my YouTube channel for more content:

SaurabhNative — Youtube