Building a Custom Markdown Editor in React With Live Preview

A custom markdown editor is a powerful addition to any developer toolset. In this guide, we'll build one from scratch using React, with real-time preview functionality — perfect for blogs, note apps, or internal tools.

Step 1: Set Up Your React Project

Create your project with Vite or CRA, and install a markdown parser. We'll use marked:

npx create-react-app markdown-editor
cd markdown-editor
npm install marked

Step 2: Build the Editor Component

Create a new component MarkdownEditor.js:

import { useState } from "react";
import { marked } from "marked";

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState("# Hello, Markdown!");

  return (
    

       setMarkdown(e.target.value)}
        className="w-full md:w-1/2 h-96 p-2 border border-gray-300"
      />

      <div classname="w-full md:w-1/2 h-96 p-2 border border-gray-300 overflow-auto bg-gray-50" dangerouslysetinnerhtml="{{" __html: marked></div>
    
  );
}

export default MarkdownEditor;

Step 3: Render in App

Update your App.js to use the new editor:

import MarkdownEditor from "./MarkdownEditor";

function App() {
  return (
    

      
Custom Markdown Editor
      
    
  );
}

export default App;

Step 4: Optional Enhancements

• Add syntax highlighting with highlight.js
• Support image uploads or export to Markdown files
• Save editor state in localStorage or a database

Conclusion

You now have a basic but functional Markdown editor with live preview in React. This is a great foundation to build more sophisticated writing tools for your personal projects or SaaS ideas.

For a much more extensive guide on getting the most out of React portals, check out my full 24-page PDF file on Gumroad. It's available for just $10:

Using React Portals Like a Pro.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift