react-markdown
A React component that renders Markdown text as React elements, without raw HTML injection.
- Stars
- 15.9k
- Forks
- 920
- Licence
- MIT
- Language
- JavaScript
- Last update
- 1 months ago
- Type
- Library
What it is
react-markdown is a React component you give a string of Markdown, and it turns that text into React elements on the page. It avoids dangerouslySetInnerHTML, so it is designed to be safe by default against XSS. You can add plugins to change how Markdown is processed and swap normal HTML tags for your own React components.
- Render a Markdown string from an API as formatted content in a React page
- Add GitHub-style tables and task lists by passing remark-gfm as a remark plugin
- Replace rendered headings or links with your own React components
- Restrict which HTML tags can appear by using allowedElements or disallowedElements
Great for
- React developers who need to display Markdown content such as comments, docs, or posts
- Beginners who want safe Markdown rendering without writing HTML parsing code
- Projects that want to replace rendered tags like h2 with custom React components
- Teams that need GitHub Flavored Markdown tables, task lists, or strikethrough via a plugin
Not ideal for
- People who want JavaScript or JSX embedded inside Markdown files; the README points to MDX for that
- Developers who already know unified well and want a hooks-based alternative; the README points to react-remark or rehype-react
- Projects that are not using React
How to get it
- 1
Install with a package manager
You'll need: Node.js 16+ · React
Install with npm
npm install react-markdown - 2
Run it
- Install the package with npm install react-markdown
- Import Markdown from 'react-markdown' in your React component
- Render it with <Markdown>{markdown}</Markdown>, passing your Markdown string as children
- Optionally add remarkPlugins={[remarkGfm]} to enable extra syntax
- 3
Get the most out of it
- Add remark-gfm through the remarkPlugins prop for tables, strikethrough, footnotes, and task lists
- Use the components prop to map tags like h2 or a to your own React components
- Use allowElement, allowedElements, or disallowedElements to filter which elements appear
- Use MarkdownHooks when you need async plugins on the client, with a fallback prop while processing
Downloads
Strengths
- Safe by default, with no dangerouslySetInnerHTML needed according to the README
- Lets you replace rendered elements with custom React components
- Supports plugins from the unified ecosystem such as remark-gfm
Trade-offs
- The package is ESM only, which may need configuration in older build setups
- Async plugins need MarkdownAsync or MarkdownHooks rather than the basic synchronous component
- Full GFM support requires adding a separate plugin
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-markdown (this) | 15.9k | Library | beginner | 1 months ago | React developers who need to display Markdown content such as comments, docs, or posts |
| mdx | 19.8k | Library | intermediate | 7 days ago | Developers building documentation or content sites in React, Preact, or Vue |
| tui.editor | 18k | Library | intermediate | 2.3 years ago | Web developers who want an embeddable Markdown editor in their own site or app |
| turndown | 11.5k | Library | beginner | 19 days ago | Developers who need to convert HTML content, such as web pages or rich text editor output, into Markdown |
| vditor | 11.4k | Library | intermediate | 19 days ago | Developers who want to embed a Markdown editor in a web app |
| markdown-it | 22k | Library | intermediate | 13 days ago | JavaScript or TypeScript developers who need to render Markdown in a Node.js or browser project |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.