Render React components within markdown and markdown as React components!

react, reactjs, react-component, markdown, showdown, react-components
npm install react-showdown@2.3.1


react-showdown Build status Test coverage Dependency Status

Render React components within markdown and markdown as React components!


  • Render markdown as React components.
  • Render React components within the markdown!
  • Full TypeScript Support.
  • Fully tested.
  • Supports all Showdown extensions, like the Twitter Extension and the Youtube Extension.
  • New in 2.0: Supports Showdown Flavors!
  • New in 2.1:
    • Fixes #54: Missing content after a self-closing component. This was fixed by setting the default value of showdown config recognizeSelfClosing to true. Thanks @n1ru4l
    • New feature: add new optional sanitizeHtml prop for sanitizing html before it was rendered. Thanks @n1ru4l aswell.


npm install --save react-showdown


yarn add react-showdown

Use as React component

Example with ES6/JSX:

import React from 'react';
import MarkdownView from 'react-showdown';

export default function App() {
  const markdown = `
# Welcome to React Showdown :+1:

To get started, edit the markdown in \`example/src/App.tsx\`.

| Column 1 | Column 2 |
| A1       | B1       |
| A2       | B2       |

  return (
      options={{ tables: true, emoji: true }}

Use a React component and use it within the markdown with ES6 / TypeScript:

import MarkdownView from 'react-showdown';

function CustomComponent({ name }: { name: string }) {
  return <span>Hello {name}!</span>;

const markdown = `
# A custom component:

<CustomComponent name="world" />`;

<MarkdownView markdown={markdown} components={{ CustomComponent }} />

Available props

  • markdown, string, required
  • flavor, Flavor, optional
  • options, ConverterOptions, optional
  • extensions, showdown extensions, optional
  • components, components, optional

Converter options will be pushed forward to the showdown converter, please checkout the valid options section.


Project is based on the markdown parser Showdown and the html parser htmlparser2.