Build a Markdown Editor in React: India Tutorial

Building a Markdown editor is a fantastic project for any Indian developer looking to level up their React skills. It's a practical, portfolio-worthy application that combines core React concepts with real-world utility, teaching you state management, parsing, and component design—skills highly valued by companies from TCS to Flipkart. For students and job-seekers, this project demonstrates your ability to build interactive tools, a common requirement in frontend roles offering ₹6-12 LPA for freshers.

Why Build a Markdown Editor in React?

In India's competitive tech landscape, a strong portfolio is as crucial as your degree. A Markdown editor project is more than just another tutorial; it's a showcase of your proficiency with React, the library powering thousands of Indian startups like Razorpay and Swiggy. This project helps you understand:

• Component Architecture: Structuring a live-preview editor logically.
• State Management: Handling real-time text input and parsed output efficiently.
• Third-party Integration: Using libraries like marked.js for parsing, a common task in development jobs.
• Styling & UX: Creating a clean, functional interface.

It's the kind of hands-on experience that interviewers at Infosys, HCL, and product-based companies look for beyond theoretical knowledge.

Prerequisites and Setup

Before you start coding, ensure your development environment is ready. You'll need a basic understanding of HTML, CSS, JavaScript (ES6+ features like arrow functions), and fundamental React concepts (JSX, components, state, and hooks).

1. Install Node.js and npm: Download the LTS version from the official website. Verify installation by running node --version and npm --version in your terminal.
2. Create a New React App: Use the official Create React App tool. In your terminal, navigate to your projects folder and run: npx create-react-app markdown-editor cd markdown-editor
3. Install a Markdown Parser: We'll use the popular marked library. Install it via npm: npm install marked
4. Optional - A CSS Framework: For quick styling, you can use Tailwind CSS or Bootstrap. Install as per their official docs.

Building the Core Editor Component

The heart of the application is a component that maintains the raw Markdown text and its parsed HTML equivalent.

Creating the State and Layout

Start by creating a new component file, MarkdownEditor.js. You'll use the useState hook to manage the editor's input.

import React, { useState } from 'react';
import { marked } from 'marked'; // Import the parser

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('# Hello, Markdown!'); // Initial text

  return (
    <div className="editor-container">
      <div className="editor-pane">
        <h3>Editor</h3>
        <textarea
          id="editor"
          value={markdown}
          onChange={(e) => setMarkdown(e.target.value)}
          className="editor-textarea"
        />
      </div>
      <div className="preview-pane">
        <h3>Preview</h3>
        <div
          id="preview"
          className="preview-content"
          dangerouslySetInnerHTML={{ __html: marked(markdown) }}
        />
      </div>
    </div>
  );
}

export default MarkdownEditor;

This code sets up a two-pane layout. The textarea is a controlled component; its value is tied to the markdown state. Every keystroke updates the state via onChange.

Implementing the Preview with Marked.js

The dangerouslySetInnerHTML attribute is React's way of inserting raw HTML. The marked() function converts our Markdown state string into HTML. To make the preview safer and add custom styling, configure marked:

// Place this before the component function
marked.setOptions({
  breaks: true, // Converts line breaks to <br>
  gfm: true, // Enables GitHub Flavored Markdown
});

Adding Essential Features and Styling

A basic editor works, but adding features makes it portfolio-ready.

Feature 1: A Toolbar with Common Actions

Add a simple toolbar above the textarea to insert common Markdown syntax (headers, bold, links). This teaches you about DOM manipulation and state updates.

const insertMarkdown = (syntax) => {
  const textarea = document.getElementById('editor');
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const selectedText = markdown.substring(start, end);
  const newText = markdown.substring(0, start) + syntax + selectedText + syntax + markdown.substring(end);
  setMarkdown(newText);
};

// Inside your return, add a toolbar div
<div className="toolbar">
  <button onClick={() => insertMarkdown('**')}><b>B</b></button>
  <button onClick={() => insertMarkdown('# ')}>H1</button>
  <button onClick={() => insertMarkdown('[Link](url)')}>Link</button>
  <button onClick={() => insertMarkdown('`')}>Code</button>
</div>

Feature 2: Responsive Styling with CSS

Use Flexbox or CSS Grid to make the layout responsive. Style the panes, textarea, and preview to look like a professional tool. Consider using a monospace font (like Courier New, Monaco) for the editor and a clean sans-serif for the preview.

.editor-container {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  height: 90vh;
  gap: 20px;
  padding: 20px;
}
@media (min-width: 768px) {
  .editor-container {
    flex-direction: row; /* Side-by-side on desktop */
  }
}
.editor-pane, .preview-pane {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  overflow: auto;
}
.editor-textarea {
  width: 100%;
  height: 80%;
  font-family: monospace;
  padding: 10px;
  border: none;
  resize: none;
}
.preview-content {
  padding: 10px;
  line-height: 1.6;
}

Testing and Debugging Your Application

Before deployment, rigorously test your editor. Check for common issues:

• State Sync: Does the preview update instantly with every keystroke?
• XSS Safety: While marked is generally safe, be cautious. You can sanitize the HTML output using a library like DOMPurify (npm install dompurify) for production.
• Performance: Typing very long documents should not lag. If it does, consider debouncing the onChange handler.
• Mobile Responsiveness: Test the layout on different screen sizes. Do the panes stack correctly?

Run your app locally with npm start and test all toolbar buttons and direct Markdown syntax.

Deployment and Adding to Your Portfolio

Once your editor is polished, deploy it so recruiters can see a live demo. Vercel and Netlify offer excellent free tiers and are incredibly simple to use with React projects.

1. Build your project for production: npm run build
2. Drag and drop the generated build folder to Netlify's dashboard, or connect your GitHub repository to Vercel for automatic deployments.
3. Add the live project link to your resume, LinkedIn profile, and GitHub README.

Make your GitHub repository impressive by including a clear README.md (written in your own editor!) with a project description, features, live demo link, and setup instructions.

Next Steps

Congratulations on building a practical React project! To deepen your full-stack skills and make your portfolio even stronger, explore related free courses. Learn backend development to save user documents with our Node.js & Express guides, or enhance your editor's UI by studying advanced React patterns. Finally, browse all free web development courses to systematically build the skills that Indian tech companies are hiring for.