A modern, SSR-friendly React Markdown renderer that preserves the MDAST tree for reuse (e.g., mdast2docx), supports full JSX children, unified plugins, and component overrides.
npm install @md2docx/react-markdown@m2d/react-markdown] 





!npm bundle size
> โจ A modern, SSR-compatible Markdown renderer for React with full MDAST/HAST access โ built for customization, performance, and document generation - docx/pdf.
---
@m2d/react-markdown?@m2d/react-markdown goes beyond traditional React Markdown libraries by focusing on:
- โ
Server-side rendering (SSR) without hooks
- โ
Full JSX children support (not just strings)
- โ
Access to raw MDAST & HAST trees
- โ
Drop-in plugin support via Unified (remark, rehype, etc.)
- โ
Custom component overrides per tag
- โ
Integration with tools like mdast2docx
Compared to react-markdown, this library offers:
| Feature | @m2d/react-markdown โ
| react-markdown โ |
| -------------------------------------- | ------------------------ | ------------------- |
| Full JSX support (not just strings) | โ
| โ |
| SSR-safe (no hooks) | โ
| โ
|
| Client Side component with memoization | โ
| โ |
| MDAST + HAST access via astRef | โ
| โ |
| Component-level overrides | โ
| โ
|
| Unified plugin support | โ
| โ
|
| Tiny bundle (minzipped) | ~35 kB | ~45 kB |
| Built-in DOCX-friendly AST output | โ
| โ |
---
``bash`
pnpm add @m2d/react-markdown
_or_
`bash`
npm install @m2d/react-markdown
_or_
`bash`
yarn add @m2d/react-markdown
---
By default, this package is SSR-safe and has no client-specific hooks.
`tsx`
import { Md } from "@m2d/react-markdown";
`tsx`
import { Md } from "@m2d/react-markdown/client";
This version supports client-side behavior with memoization and dynamic JSX rendering.
---
`tsx
import { Md } from "@m2d/react-markdown/client";
import { toDocx } from "mdast2docx";
import { useRef } from "react";
const astRef = useRef([]);
export default function Page() {
return (
<>
}
onClick={() => {
const doc = toDocx(astRef.current[0].mdast);
// Save or download doc
}}>
Export to DOCX
>
);
}
`
> Note for Server Component use you can replace useRef with custom ref object const astRef = {current: undefined} as AstRef
---
Unlike most markdown renderers, @m2d/react-markdown supports arbitrary JSX as children:
`tsx`
import { Mdx } from "@m2d/react-markdown/server";
// ...
> astRef.current is an array โ one per Markdown string โ each with { mdast, hast }.
> The default export accepts only string children for better optimization.
---
`tsx
import { Md } from "@m2d/react-markdown";
import { Unwrap, Omit } from "@m2d/react-markdown/server";
em: Unwrap,
blockquote: Omit,
code: props =>
}}>
{em is unwrapped\n\n> blockquote is removed}`
;
Use the built-in helpers:
- Unwrap โ renders only childrenOmit
- โ removes element and content entirelyCodeBlock
- - it is your custom component
---
Use any remark or rehype plugin:
`tsx`
{markdown}
---
`ts`
type astRef = {
current: { mdast: Root; hast: HastRoot }[];
};
Useful for:
- ๐ DOCX export (mdast2docx)
- ๐งช AST testing or analysis
- ๐ ๏ธ Custom tree manipulation
---
> TL;DR: @m2d/react-markdown performs competitively with react-markdown, especially on medium and large documents.
>
> ๐ See full benchmarks โ
Benchmarks include:
- Multiple markdown fixture types (short, long, complex, deeply nested)
- Plugin configurations like remark-gfm, remark-math, rehype-rawxychart-beta
- Visual comparisons using interactive Mermaid charts
- Ops/sec, ยฑ%, and future memory profiling
---
We're proposing a major change to the internal astRef structure to better support MDX-style custom components and rendering flexibility:
Key goals:
- Allow to embed child components like JSX/MDX
- Simplify recursive rendering model
- Improve performance and reduce abstraction overhead
- [ ] ๐ Merge JSX + segments into unified AST
- [x] ๐งช Structural test utilities
- [x] ๐งโ๐ซ Next.js + DOCX example
---
- mdast2docx โ Convert MDAST โ .docxunified
- โ Syntax tree ecosystemreact-markdown` โ Popular alternative (less customizable)
-
---
We are deeply grateful to the open-source community whose work made this project possible.
- ๐ฑ react-markdown โ For pioneering a React-based Markdown renderer. This library builds on its ideas while extending flexibility and SSR-readiness.
- ๐ unified โ The brilliant engine powering our markdown-to-AST transformations.
- โจ remark and rehype โ For their modular ecosystems that make parsing and rendering delightful.
- ๐งพ mdast2docx โ Our sister project that inspired the MDAST-first architecture of this library.
> ๐ To the maintainers, contributors, and communities behind these projects โ thank you for your generosity, vision, and dedication to making the web better for everyone.
---
Licensed under the MPL-2.0.
> ๐ก Want to support this project? Sponsor or check out our courses!
---
Built with โค๏ธ by Mayank Kumar Chaudhari