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

Written by

learnmodernjavascript

in

In the world of web development, understanding how to handle and display formatted text is a fundamental skill. Markdown, a lightweight markup language, is widely used for its simplicity and readability, making it perfect for everything from writing documentation to creating blog posts. In this tutorial, we’ll dive into building a React-based Markdown Previewer. This project will not only teach you the basics of React but also show you how to integrate external libraries and handle user input effectively. This project is ideal for beginners and intermediate developers looking to expand their React knowledge and build something practical.

Why Build a Markdown Previewer?

A Markdown Previewer is a valuable tool for anyone who writes in Markdown. It allows you to see how your Markdown text will render as HTML in real-time. This is incredibly useful for:

  • Content Creators: Writers, bloggers, and anyone who uses Markdown to format their content can instantly visualize how their text will appear.
  • Developers: Developers often use Markdown for README files, documentation, and comments in code. A previewer helps ensure the formatting is correct.
  • Learning Markdown: If you’re new to Markdown, a previewer helps you understand how different Markdown syntax elements translate into HTML.

By building this project, you’ll gain practical experience with React components, state management, event handling, and integrating external libraries. Plus, you’ll have a useful tool at the end of it!

Prerequisites

Before you start, make sure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript: You should be familiar with the fundamentals of these web technologies.
  • Node.js and npm (or yarn) installed: These are required to manage project dependencies and run the development server.
  • A code editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.).
  • A browser: Chrome, Firefox, or any modern web browser will do.

Setting Up Your React Project

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

npx create-react-app markdown-previewer

This command sets up a new React project with all the necessary configurations. Once the installation is complete, navigate into your project directory:

cd markdown-previewer

Now, start the development server:

npm start

This will open your React app in your browser, typically at http://localhost:3000.

Project Structure and Core Components

Our Markdown Previewer will consist of two primary components:

  • Markdown Input Component: This component will contain a text area where the user can enter Markdown text.
  • Preview Component: This component will display the rendered HTML output of the Markdown text.

The core logic will involve taking the user’s input from the input component, converting it from Markdown to HTML, and displaying it in the preview component. We’ll use a library to handle the Markdown-to-HTML conversion.

Installing the Markdown Parser Library

To convert Markdown to HTML, we’ll use the ‘marked’ library. ‘marked’ is a popular and easy-to-use Markdown parser for JavaScript. Install it using npm:

npm install marked

This command installs ‘marked’ and adds it to your project’s dependencies.

Building the Markdown Input Component

Let’s create the `MarkdownInput` component. Inside the `src` folder, create a new file named `MarkdownInput.js`. Add the following code:

import React, { useState } from 'react';

function MarkdownInput({ onInputChange }) {
  const [inputText, setInputText] = useState('');

  const handleChange = (e) => {
    const text = e.target.value;
    setInputText(text);
    onInputChange(text);
  };

  return (
    <div className="input-container">
      <textarea
        className="markdown-input"
        value={inputText}
        onChange={handleChange}
        placeholder="Enter Markdown here..."
      />
    </div>
  );
}

export default MarkdownInput;

Let’s break down this code:

  • Import React and useState: We import `useState` to manage the input text.
  • useState Hook: We initialize `inputText` to an empty string. This state variable holds the current Markdown text entered by the user.
  • handleChange Function: This function is called every time the user types in the textarea. It updates the `inputText` state and calls the `onInputChange` prop function.
  • Textarea: This is the HTML textarea element where the user enters the Markdown. The `value` is bound to the `inputText` state, and the `onChange` event calls the `handleChange` function.
  • onInputChange prop: This prop is a function passed from the parent component. It’s used to communicate the input text to the parent component, which will handle the Markdown parsing.

Next, let’s create the `Preview` component, which will display the rendered HTML.

Creating the Preview Component

Create a new file called `Preview.js` in the `src` folder. Add the following code:

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

function Preview({ markdownText }) {
  const html = marked.parse(markdownText);

  return (
    <div className="preview-container" dangerouslySetInnerHTML={{ __html: html }} />
  );
}

export default Preview;

Here’s what this code does:

  • Import React and marked: We import React and the `marked` library.
  • parse Method: The `marked.parse(markdownText)` method converts the Markdown text into HTML.
  • dangerouslySetInnerHTML: We use `dangerouslySetInnerHTML` to render the HTML. This is necessary because React normally escapes HTML to prevent cross-site scripting (XSS) attacks. However, in this case, we’re intentionally rendering HTML that’s generated from user input, so we need to use this attribute. Make sure you sanitize the input on the server side in a real-world application to prevent security vulnerabilities.

Integrating Components in App.js

Now, let’s integrate these components into our main `App.js` file. Open `src/App.js` and replace its content with the following:

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

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

  const handleInputChange = (text) => {
    setMarkdown(text);
  };

  return (
    <div className="app-container">
      <MarkdownInput onInputChange={handleInputChange} />
      <Preview markdownText={markdown} />
    </div>
  );
}

export default App;

Let’s break down the code:

  • Import Components: We import `MarkdownInput`, `Preview`, and the `App.css` file.
  • useState Hook: We initialize the `markdown` state to an empty string. This state will hold the Markdown text.
  • handleInputChange Function: This function updates the `markdown` state whenever the input in `MarkdownInput` changes.
  • Component Integration: We render the `MarkdownInput` and `Preview` components. We pass the `handleInputChange` function as a prop to `MarkdownInput` and the `markdown` state as a prop to `Preview`.

Styling the Application (App.css)

Create a file named `App.css` in the `src` directory and add some basic styles to make your Markdown Previewer visually appealing. Here’s a basic example:

.app-container {
  display: flex;
  flex-direction: row;
  padding: 20px;
  height: 100vh;
}

.input-container {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.preview-container {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-y: scroll;
}

.markdown-input {
  width: 100%;
  height: 80vh;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: none;
  outline: none;
}

Feel free to customize the CSS to your liking. The above styles create a basic layout with two columns: one for the input and one for the preview.

Testing and Debugging

Now, run your application using `npm start`. You should see a text area on the left and a preview area on the right. Try typing some Markdown in the text area, and you should see the rendered HTML in the preview area.

If something isn’t working, here are some common issues and how to fix them:

  • Markdown not rendering: Make sure you’ve installed the `marked` library correctly and that you’re importing and using it properly in your `Preview` component.
  • CSS not applying: Double-check that you’ve imported your CSS file in `App.js` and that your CSS selectors are correct.
  • Input not updating: Make sure the `onChange` event is correctly attached to your textarea in `MarkdownInput.js` and that the `handleChange` function is updating the state correctly.
  • Errors in the console: Open your browser’s developer console (usually by pressing F12) and check for any error messages. These messages can provide valuable clues about what’s going wrong.

Common Mistakes and How to Avoid Them

Here are some common mistakes beginners make when building a React Markdown Previewer and how to avoid them:

  • Incorrect Library Import: Make sure you’re importing the `marked` library correctly. Double-check the import statement in your `Preview.js` file: `import { marked } from ‘marked’;`
  • Incorrect State Management: Ensure that the state is being updated correctly in the `MarkdownInput` component and that the updated state is passed to the `Preview` component as a prop. Use the `useState` hook correctly.
  • Forgetting `dangerouslySetInnerHTML`: When rendering HTML from Markdown, you must use `dangerouslySetInnerHTML`. However, be aware of the security implications. Sanitize user input on the server side in a real-world application to prevent XSS attacks.
  • CSS Issues: Ensure your CSS is correctly linked and that your CSS selectors match your HTML elements. Use the browser’s developer tools to inspect the elements and see if the styles are being applied.
  • Not Handling Edge Cases: Consider what happens if the user enters invalid Markdown or very long text. You might want to add error handling or performance optimizations.

Enhancements and Next Steps

Once you have the basic Markdown Previewer working, you can add several enhancements:

  • Syntax Highlighting: Use a library like Prism.js or highlight.js to add syntax highlighting to code blocks in your Markdown.
  • Toolbar: Add a toolbar with buttons to insert Markdown syntax, such as bold, italics, headers, and links.
  • Live Preview: Implement a live preview feature where the preview updates as the user types, without waiting for a keypress.
  • Markdown Editor Features: Implement features like auto-complete for Markdown syntax.
  • Error Handling: Implement error handling to gracefully handle cases where the Markdown might be malformed.
  • More Styling: Improve the overall look and feel of the application with more advanced CSS.

Key Takeaways

  • Component-Based Architecture: React applications are built using components. Each component is responsible for rendering a piece of the UI.
  • State Management: The `useState` hook is used to manage the state of your components. When the state changes, the component re-renders.
  • Event Handling: Event handlers (like `onChange`) are used to respond to user interactions (like typing in a text area).
  • External Libraries: You can use external libraries (like `marked`) to add functionality to your application.
  • Props: Props are used to pass data from parent components to child components.

FAQ

Here are some frequently asked questions about building a React Markdown Previewer:

  1. Can I use a different Markdown parser library? Yes, you can. There are several Markdown parser libraries available in JavaScript. ‘marked’ is just one option.
  2. How do I add syntax highlighting? You can use libraries like Prism.js or highlight.js. Import the library, apply the appropriate CSS, and use the library’s functions to highlight code blocks.
  3. How do I handle user input? Use the `onChange` event on the input element (e.g., textarea) and update the component’s state with the user’s input.
  4. How do I prevent XSS attacks? Always sanitize user input on the server side. In this simple previewer, we’re not doing this, but in a real-world application, it’s essential.

Building a Markdown Previewer in React is an excellent project for learning and practicing React concepts. You’ve now seen how to create a basic previewer, understand the structure, and add features. By understanding the basics, you can build upon this foundation and create a more complex and feature-rich application. This project provides a solid foundation for understanding React components, state management, and the integration of external libraries, all while creating a useful tool. The skills gained here are transferable to many other React projects, making this an ideal starting point for your React journey.

More posts