Markdown is the backbone of the modern web—from documentation to personal blogs. But for too long, React developers have had to choose between "lightweight but insecure" or "robust but heavy."
Today, I’m thrilled to announce the launch of markdown-parser-react v3.0.0. This is a ground-up rewrite designed for the security-conscious, performance-driven developer.
Why an Overhaul?
The Core Reason was the Move to Token-Based Rendering
In previous versions, we relied on standard HTML rendering. In v3, we’ve moved entirely away from dangerouslySetInnerHTML.
The core of the library is now a Token-based React Renderer. Instead of generating a raw HTML string, we parse Markdown into an AST (Abstract Syntax Tree) and convert those tokens directly into React nodes using React.createElement.
What does this mean for you?
Security by Design: It is inherently protected against most XSS attacks because we aren't injecting raw strings into the DOM.
Performance: It integrates perfectly with the React Lifecycle and Virtual DOM, ensuring smoother updates and flawless hydration in SSR environments like Next.js.
The "Everything is a Component" Philosophy: Because every part of your markdown is now a React node, you can treat it like any other part of your app.
What’s New in v3?
1. Advanced Component Overrides (The Killer Feature)
This is where v3 truly shines. You can now swap any standard Markdown element for a custom React component.
Want to replace a standard <a> tag withnext/link for client-side navigation? Or maybe turn <h1> tags into beautifully styled Shadcn/UI headers? Now you can:
<Markdown
content={content}
options={{
components: {
h1: ({ children }) => <CustomHeader level={1}>{children}</CustomHeader>,
a: (props) => <InternalLink {...props} />,
code: ({ children, language }) => <MySyntaxHighlighter lang={language}>{children}</MySyntaxHighlighter>
}
}}
/>
2. GitHub-Style Alerts & Native Footnotes
We’ve added native support for blockquote callouts ([!NOTE], [!TIP], etc.) and common markdown footnotes ([^1]). This makes the library perfect for academic writing, technical docs, or citation-heavy blogs.
3. Advanced Math (TeX/LaTeX)
Math is no longer an afterthought. With support for inline ($) and block ($$) equations, you can use the onRenderMath hook to integrate engines like KaTeX or MathJax effortlessly.
4. Semantic DX (Developer Experience)
- WCAG Compliant: New asArticle, id, and aria props ensure your rendered content is accessible.
- Strictly Typed: Full TypeScript support for a better IDE experience.
- Secure Defaults: sanitizeHtml is now enabled by default.
The Vision: Code Media Labs
With v3, markdown-parser-react officially transitions under the Code Media Labs branding. Our mission is to build lightweight, high-performance tools that solve real-world problems for the modern web and open-source those tools for everyone to use.
This package is a core component of the ecosystem we are building. By making markdown rendering safe and extensible, we’re setting the stage for more complex systems.
What's Next?
Our focus at Code Media Labs is currently split between infrastructure and intelligence:
Synapse: Our upcoming "Intelligent Factory Operating System." We are applying the same high-performance standards used in this library to build a robust ERP platform for industrial environments.
Mira: Our internal intelligence engine.** Mira isn't just about sentiment analysis; it's a multimodal suite**. It combines high-speed demographic analytics with a custom TTS (Text-to-Speech) system built on top of Piper. Whether it's parsing public sentiment or giving that data a voice, Mira is designed for speed and privacy.
Get Started
If you’re looking for a markdown solution that doesn’t compromise on security or React-native features, give v3 a spin.
Install it now:
npm install markdown-parser-react
Check out the docs:
Markdown-Parser-React
I’d love to hear your feedback! Let’s build a better, safer web together. And as always, Happy Coding
Follow me for more updates on Next.js, TypeScript, and our journey at Code Media Labs.
Top comments (0)