Build a Next.js Interactive Web-Based Markdown Editor with Preview

Written by

javascriptdebugged

in

In the world of web development, we often encounter the need to create and display formatted text. Whether it’s for writing blog posts, documentation, or even simple notes, the ability to format text using Markdown is a valuable skill. This tutorial will guide you through building an interactive web-based Markdown editor and previewer using Next.js, a popular React framework. This project is perfect for beginners and intermediate developers looking to enhance their skills in front-end development, understand the power of Markdown, and learn how to leverage the capabilities of Next.js.

Why Build a Markdown Editor?

Markdown is a lightweight markup language that allows you to format text using a simple syntax. It’s widely used because it’s easy to read, write, and convert into HTML. Building a Markdown editor is a practical project for several reasons:

  • Practical Skill: It teaches you how to handle user input, process text, and display it in a formatted manner.
  • Real-World Application: Markdown is used everywhere, from GitHub README files to content management systems.
  • Framework Familiarity: It helps you understand how to use a framework like Next.js to build interactive web applications.
  • SEO Benefits: Well-formatted content with proper use of headings and paragraphs is crucial for SEO. This project teaches you how to control the formatting.

What You Will Learn

By the end of this tutorial, you will have built a fully functional Markdown editor that allows users to:

  • Enter Markdown text in a text area.
  • See a live preview of the formatted HTML.
  • Understand how to use Next.js for routing, state management, and styling.
  • Learn about the integration of external libraries for Markdown parsing.

Prerequisites

Before you start, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need these to manage project dependencies.
  • Basic knowledge of JavaScript and React: Familiarity with components, props, and state will be helpful.
  • A code editor: VS Code, Sublime Text, or any editor of your choice.

Step-by-Step Guide

1. Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app markdown-editor-app
cd markdown-editor-app

This command creates a new Next.js project named “markdown-editor-app”. It also navigates you into the project directory.

2. Installing Dependencies

We’ll need a library to convert Markdown text into HTML. A popular choice is `marked`. Install it using npm or yarn:

npm install marked
# or
yarn add marked

3. Creating the Editor Component

Let’s create a new component to hold our Markdown editor and preview. Create a new file named `Editor.js` inside the `components` directory (create the directory if it doesn’t exist):

// components/Editor.js
import { useState } from 'react';
import marked from 'marked';

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

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

  const html = marked.parse(markdown);

  return (
    <div className="editor-container">
      <textarea
        className="markdown-input"
        value={markdown}
        onChange={handleChange}
        placeholder="Enter Markdown here..."
      />
      <div className="preview" dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

export default Editor;

Let’s break down this code:

  • Import Statements: We import `useState` from React for managing state and `marked` for parsing Markdown.
  • State: `markdown` is a state variable that stores the Markdown text entered by the user. It’s initialized as an empty string.
  • handleChange Function: This function updates the `markdown` state whenever the user types in the text area.
  • marked.parse(): This function converts the Markdown text into HTML.
  • JSX: The component renders a text area for input and a `div` element to display the preview. The `dangerouslySetInnerHTML` prop is used to inject the HTML generated from Markdown.

4. Integrating the Editor into the Page

Now, let’s integrate the `Editor` component into our main page. Open `pages/index.js` and modify it as follows:

// pages/index.js
import Editor from '../components/Editor';
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Markdown Editor</title>
        <meta name="description" content="A simple Markdown editor built with Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1>Markdown Editor</h1>
        <Editor />
      </main>
    </div>
  );
}

In this code:

  • We import the `Editor` component.
  • We include the `Editor` component within the `main` element.

5. Styling the Editor

To make our editor look better, let’s add some styles. Open `styles/Home.module.css` and add the following CSS:

/* styles/Home.module.css */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.editor-container {
  display: flex;
  width: 100%;
  max-width: 800px;
  margin-top: 20px;
}

.markdown-input {
  width: 50%;
  height: 400px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.preview {
  width: 50%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 20px;
  overflow-y: scroll;
}

@media (max-width: 768px) {
  .editor-container {
    flex-direction: column;
  }

  .markdown-input,
  .preview {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
}

This CSS provides basic styling for the container, input area, and preview area. It also includes a media query to adjust the layout for smaller screens.

6. Running the Application

Now, start the development server by running:

npm run dev
# or
yarn dev

Open your browser and go to `http://localhost:3000`. You should see your Markdown editor!

Common Mistakes and How to Fix Them

1. Incorrect Dependency Installation

Mistake: Forgetting to install the `marked` library or installing it incorrectly.

Fix: Make sure you run `npm install marked` or `yarn add marked` in your project directory. Verify that the dependency is listed in your `package.json` file.

2. Incorrect Import Paths

Mistake: Using the wrong import paths for components or modules.

Fix: Double-check the file paths in your `import` statements. Relative paths are relative to the current file.

3. Missing Styles

Mistake: Not including the CSS file or applying the correct class names.

Fix: Ensure that you have imported the CSS file (e.g., `import styles from ‘./styles/Home.module.css’`) and that you’re applying the correct class names to your HTML elements (e.g., `<div className={styles.container}>`).

4. Using `dangerouslySetInnerHTML` Incorrectly

Mistake: Misusing `dangerouslySetInnerHTML` without proper sanitization.

Fix: While `dangerouslySetInnerHTML` is necessary for displaying the parsed HTML, be cautious about the source of the Markdown. If you’re allowing user-generated Markdown, consider using a library like DOMPurify to sanitize the HTML output and prevent potential security vulnerabilities like cross-site scripting (XSS) attacks. For this simple editor, the risk is low, but it’s a good practice to be aware of.

5. Markdown Parsing Issues

Mistake: Markdown not rendering correctly, or certain Markdown features not working.

Fix: Review your Markdown syntax to ensure it’s correct. The `marked` library supports standard Markdown syntax. If you want to use advanced features, check `marked`’s documentation for specific configurations.

Enhancements and Next Steps

This is a basic Markdown editor. You can enhance it in several ways:

  • Add Toolbar: Implement a toolbar with buttons to insert Markdown formatting (bold, italics, headings, etc.).
  • Implement Live Preview: Improve the live preview to update in real-time as the user types.
  • Add Syntax Highlighting: Use a library like Prism.js or highlight.js to highlight code blocks in the preview.
  • Implement File Upload: Allow users to upload Markdown files and save the content.
  • Add Themes: Implement light and dark themes for the editor.
  • Add Autosave: Implement auto-saving of the Markdown content to local storage.

Summary/Key Takeaways

This tutorial has shown you how to build a functional Markdown editor using Next.js. You’ve learned how to handle user input, use Markdown parsing libraries, and create a live preview. You’ve also gained hands-on experience in component creation, state management, and basic styling with CSS modules. This project serves as a great introduction to Next.js and Markdown, providing a solid foundation for more complex web development projects. By following these steps, you’ve taken a significant step forward in your journey to becoming a proficient front-end developer. Remember to experiment with the code, try out the enhancements, and explore the possibilities that Next.js and Markdown offer. The ability to create user-friendly text editors is a valuable skill in the modern web development landscape. Keep practicing and building, and you’ll continue to improve your skills.

FAQ

1. Can I use a different Markdown parsing library?

Yes, you can. The `marked` library is just one option. Other popular libraries include `markdown-it`. The process will be similar; you’ll install the library, import it, and use its parsing functions to convert Markdown to HTML.

2. How can I add a toolbar to the editor?

You can add a toolbar by creating a new component with buttons that insert Markdown formatting. When a button is clicked, you would update the text area’s value by inserting the appropriate Markdown syntax. For example, clicking a bold button would insert `**` at the current cursor position.

3. How do I handle code blocks with syntax highlighting?

You can use a library like Prism.js or highlight.js. You’ll need to include the library’s CSS and JavaScript files. Then, in your preview area, you’ll need to tell the library to highlight the code blocks by adding a class like `language-javascript` to the `<code>` element. This can usually be done by configuring the Markdown parser to add this class or by post-processing the HTML output.

4. How can I deploy this application?

Next.js applications can be deployed to various platforms, including Vercel (which is recommended), Netlify, or your own server. Vercel provides a seamless deployment experience for Next.js projects. You can deploy your project by connecting your repository to Vercel and following the on-screen instructions.

5. What if I want to allow users to upload images?

To allow image uploads, you’ll need to add a file input to your editor. When a user selects an image, you’ll upload it to a storage service (like Cloudinary, AWS S3, or a similar service) and insert the Markdown syntax for an image (`![alt text](image_url)`) into the text area, using the URL from the storage service. This typically involves using the `fetch` API to send the image data to your chosen storage service and then updating the text area with the appropriate Markdown.

Building this Markdown editor is an excellent starting point for learning about Next.js and Markdown. It combines practical coding with relevant technologies and provides a useful tool. With this foundation, you can now explore more advanced features and expand your skills in web development.

More posts