Build a Simple React JavaScript Interactive Markdown Editor: A Beginner’s Guide

Written by

learnmodernjavascript

in

In the digital age, the ability to format text effectively is crucial. Whether you’re writing blog posts, documentation, or even just taking notes, Markdown has become a popular choice for its simplicity and readability. But what if you could see the formatted output of your Markdown in real-time as you type? That’s where a Markdown editor comes in, and in this tutorial, we’ll build one using React. This project is perfect for beginners and intermediate developers looking to deepen their understanding of React components, state management, and event handling.

Why Build a Markdown Editor?

A Markdown editor provides an immediate visual representation of your Markdown text, making it easier to write and understand. It’s an excellent project for several reasons:

  • Practical Application: Markdown is widely used, so this project has real-world relevance.
  • Component-Based Learning: You’ll learn how to break down a complex task into manageable React components.
  • State Management: You’ll practice managing user input and updating the UI accordingly.
  • Event Handling: You’ll get hands-on experience with handling user interactions.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies is crucial for understanding the code.
  • A code editor (e.g., VS Code, Sublime Text): This is where you’ll write your code.

Setting Up Your React Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app markdown-editor
cd markdown-editor

This command creates a new React project named “markdown-editor” and navigates you into the project directory. Next, start the development server:

npm start

This command starts the development server, and your app should open in your web browser at http://localhost:3000 (or a different port if 3000 is unavailable).

Project Structure

Our Markdown editor will consist of two main components:

  • Editor Component: This component will contain the text area where the user types their Markdown.
  • Preview Component: This component will display the rendered Markdown.

We’ll keep the project structure simple for clarity. All our components will reside in the `src/` directory.

Installing Dependencies

We’ll use a library called `marked` to convert Markdown text into HTML. Install it by running the following command in your terminal:

npm install marked

The `marked` library is a fast Markdown parser and compiler. It takes Markdown text as input and produces HTML as output.

Building the Editor Component

Let’s create the `Editor` component. Create a file named `src/Editor.js` and add the following code:

import React from 'react';

function Editor(props) {
  return (
    <textarea
      id="editor"
      onChange={props.onChange}
      value={props.markdown}
    />
  );
}

export default Editor;

This component is a simple text area. It receives two props: `onChange` (a function to handle changes in the text area) and `markdown` (the current Markdown text). The `onChange` prop is crucial as it will allow us to capture the user’s input.

Building the Preview Component

Now, let’s create the `Preview` component. Create a file named `src/Preview.js` and add the following code:

import React from 'react';
import { marked } from 'marked';

function Preview(props) {
  return (
    <div
      id="preview"
      dangerouslySetInnerHTML={{ __html: marked(props.markdown) }}
    />
  );
}

export default Preview;

The `Preview` component takes the `markdown` prop, passes it to the `marked` function to convert the Markdown to HTML, and then renders the HTML using `dangerouslySetInnerHTML`. Important: Using `dangerouslySetInnerHTML` is generally safe in this context because the content is derived from user input, but we are also using a Markdown parser which helps sanitize the input. However, be mindful of this when rendering dynamic HTML.

Integrating the Components in App.js

Now, let’s integrate these components into our main `App.js` file. Replace the contents of `src/App.js` with the following code:

import React, { useState } from 'react';
import Editor from './Editor';
import Preview from './Preview';
import './App.css'; // Import the CSS file

function App() {
  const [markdown, setMarkdown] = useState('');

  const handleChange = (event) => {
    setMarkdown(event.target.value);
  };

  return (
    <div className="container">
      <Editor markdown={markdown} onChange={handleChange} />
      <Preview markdown={markdown} />
    </div>
  );
}

export default App;

Here’s what’s happening:

  • Import Statements: We import `useState` from React, and our `Editor` and `Preview` components. We also import the `App.css` file to style our components.
  • State: We use the `useState` hook to manage the `markdown` state. This state will hold the current Markdown text. It’s initialized as an empty string.
  • handleChange Function: This function updates the `markdown` state whenever the user types in the `Editor` component.
  • JSX Structure: We render the `Editor` and `Preview` components. We pass the `markdown` state and the `handleChange` function as props to the `Editor` component, and the `markdown` state to the `Preview` component.

Styling the Components (App.css)

To make our Markdown editor look presentable, let’s add some basic styling. Create a file named `src/App.css` and add the following CSS:

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  font-family: sans-serif;
}

#editor {
  width: 50%;
  height: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#preview {
  width: 50%;
  height: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  overflow: auto; /* Enable scrolling if content overflows */
  background-color: #f9f9f9;
}

/* Optional: Add some basic styling for Markdown elements */
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

#preview p {
  margin-bottom: 1em;
}

This CSS provides a basic layout, styles the text area and preview area, and adds some margin to headings and paragraphs in the preview area to improve readability. You can customize this CSS to match your desired aesthetic.

Testing Your Markdown Editor

Now, start typing Markdown in the left-hand text area (the `Editor` component). You should see the formatted output in the right-hand area (the `Preview` component) update in real-time. Try some basic Markdown syntax:

  • `# Heading 1`
  • `## Heading 2`
  • `**Bold text**`
  • `*Italic text*`
  • `- List item`
  • `[Link](https://www.example.com)`
  • `> Blockquote`
  • “ `inline code` “
  • “`
    // Code block
    function hello() {
    console.log(“Hello, world!”);
    }
    “`

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Import Paths: Double-check that your import paths (e.g., `import Editor from ‘./Editor’;`) are correct. This is a frequent source of errors. Use relative paths that accurately reflect your file structure.
  • Missing Dependencies: Ensure you’ve installed the `marked` library using `npm install marked`. If you forget this step, you will encounter an error.
  • Incorrect Prop Passing: Verify that you’re passing the correct props to your components. For example, the `Editor` component expects an `onChange` prop (a function) and a `markdown` prop (a string).
  • `dangerouslySetInnerHTML` Misuse: While we are using `dangerouslySetInnerHTML` here, be cautious when using it with user-provided content. Ensure proper sanitization if the source of the markdown is untrusted. In this case, the `marked` library helps mitigate the risk.
  • CSS Issues: If your styling isn’t working as expected, check your CSS file paths and make sure you’ve linked it correctly in `App.js` (e.g., `import ‘./App.css’;`). Use your browser’s developer tools to inspect the elements and identify CSS conflicts.

Enhancements and Next Steps

This is a basic Markdown editor, but you can enhance it in many ways:

  • Toolbar: Add a toolbar with buttons to insert Markdown formatting (bold, italic, headings, etc.).
  • Live Preview Updates: Implement a feature that automatically updates the preview as you type, without needing to refresh the browser. Our existing implementation already does this.
  • Syntax Highlighting: Integrate a syntax highlighting library (e.g., Prism.js or highlight.js) to highlight code blocks.
  • Theme Customization: Allow users to choose different themes for the editor and preview areas.
  • Save/Load Functionality: Add features to save and load Markdown files from local storage or a server.
  • Error Handling: Implement robust error handling to gracefully manage unexpected situations.
  • Mobile Responsiveness: Ensure the editor works well on different screen sizes by using responsive design techniques.

Key Takeaways

  • You’ve learned how to build a functional Markdown editor using React.
  • You’ve gained experience with state management, event handling, and component composition.
  • You’ve understood how to integrate external libraries like `marked`.
  • You now have a solid foundation for building more complex React applications.

FAQ

Q: Why is my preview not updating?

A: Double-check that your `handleChange` function is correctly updating the `markdown` state and that the `markdown` prop is being passed to both the `Editor` and `Preview` components.

Q: How do I add syntax highlighting?

A: You can integrate a syntax highlighting library like Prism.js or highlight.js. You’ll need to install the library, import its CSS and JavaScript files, and then apply it to your code blocks within the `Preview` component.

Q: Can I use this editor for real-world projects?

A: Yes, absolutely! This is a great starting point for building a more feature-rich Markdown editor that you can use for personal or professional projects. Consider the enhancements mentioned above for more advanced features.

Q: How can I style the editor and preview differently?

A: You can customize the CSS in `App.css` to style the editor and preview areas independently. Use different CSS classes for the text area and the preview area, and then apply different styles to those classes.

Conclusion (without the title)

Building a Markdown editor in React is a rewarding project that combines practical application with fundamental React concepts. By breaking down the problem into manageable components, handling user input, and integrating an external library, you’ve created a useful tool and strengthened your React skills. With the knowledge you’ve gained, you are well-equipped to tackle more complex React projects and continue your journey as a front-end developer. Embrace the iterative process of building and refining your editor, experimenting with new features, and refining the user experience. The possibilities are endless, and the more you build, the more you’ll learn.

More posts