Introducing everything-markdown: A Simple Way to Work with Markdown in JavaScript

When working on an AI chat interface for my project, I wanted to display Markdown-formatted text from AI responses in the UI. This seemed like a common problem—rendering AI-generated Markdown in a React application—so I expected a quick and easy solution.
I turned to ChatGPT, and it suggested a few well-known packages:

• react-markdown for rendering Markdown
• react-syntax-highlighter for styling code blocks

It even provided some starter code to display Markdown content. However, when I tried implementing it, I ran into several issues:

• Text wrapped in ** wasn’t bold
• Code blocks didn’t appear as expected
• Certain Markdown elements didn’t render properly

I kept tweaking, trying different configurations, switching between libraries, and even asking Cursor AI for help. But no matter what I tried, I couldn’t get it to work exactly how I wanted.

At this point, I was tempted to build my own Markdown renderer.

Building My Own Markdown Renderer

In this article, I will walk you through on how I built a markdown renderer and how I think it is the most simple way to render markdowns in your project and what the future holds for everything-markdown

How it works

A sample markdown response from AI looks like this.

Hello\nThis is a **markdown** text\n# Heading looks like this

To render this correctly, everything-markdown processes it in three simple steps:

1. Splitting the Text

   • The text is split on "\n" to break it into individual lines.

2. Vertical Scanning (Line-by-Line Processing)

   • Each line is checked to determine its type:
     • If a line starts with # → it's a heading.
     • If it starts with - → it's a list item.

3. Horizontal Scanning (Inline Formatting)

   • Each line is further scanned character by character:
     • If *text* is found → the text is italicized.
     • If **text** is found → the text is bold.
     • If `code` is found → it's converted into inline code.

This straightforward approach ensures that Markdown is parsed efficiently and displayed correctly in your UI. 🚀

How is everything-markdown Simple to Use?

Before building this package, I tried various existing solutions, but they required a lot of configuration—much of which I didn't fully understand. I'm not saying those options are bad; in fact, they offer extensive customization and control. However, if you're rendering Markdown for the first time, getting them to work properly can be frustrating.

The goal behind everything-markdown is simplicity. It might not be the most feature-rich package yet, but I’m actively adding more capabilities and customization options. If you need a quick, easy-to-use Markdown renderer, everything-markdown is the perfect choice.

Example Usage

Using everything-markdown is as simple as this:

import EverythingMarkdown from 'everything-markdown';

function MyComponent() {
  const markdownText = `Hello\nThis is a **markdown** text\n# Heading looks like this`;

  return <EverythingMarkdown content={markdownText} />;
}

export default MyComponent;

No complex setup, no extra configuration—just straightforward Markdown rendering. 🚀

What’s Next for everything-markdown?

I have big plans for everything-markdown, and this is just the beginning. Here’s what’s coming next:

1. More Customization Options – I plan to add features like custom styles, adjustable line spacing, and more. The goal is to make this package highly customizable so that everyone can tailor it to their needs.

2. Bug Fixes & Improvements – Since I only built this package yesterday, I’m sure there might be some bugs. As I use it more and receive feedback, I’ll actively patch issues and release updated versions. If you encounter a bug, feel free to email me—I’ll make sure to look into it.

3. Open-Sourcing the Project – After refining the package, I plan to make it open-source. This way, the community can contribute, improve, and help shape its future.

4. Performance Optimizations – There’s always room for efficiency improvements, and I’ll be working on optimizing the code to make rendering even faster and smoother.

This is just the start, and I’m excited to see where everything-markdown goes from here! 🚀

---

📖 Check out the package: everything-markdown on npmjs

🐞 Found a bug or have suggestions? Feel free to reach out to me on Twitter, Peerlist, Gmail or open an issue once the project is open-sourced!

💬 Let's connect! If you liked this article or found everything-markdown useful, let me know on Twitter, Peerlist, Gmail.

🌐 Check out my portfolio: samitkapoor.com to see more of my work!

Thanks for reading! Happy coding! 🚀