markdown-to-jsx v6 is now available

If you haven’t used markdown-to-jsx in the past, now is a great time! Try it live here:

A shortlist of some of my favorite features:

Want to do something fancy with your h1 tags? It’s as simple as defining an override:

import Markdown from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';

// surprise, it's a div instead!
const MyH1 = ({children, ...props}) => (<div {...props}>{children}</div>);

overrides: {
h1: {
component: MyH1,
props: {
className: 'foo',
# Hello world!
), document.body);


<div class="foo">
Hello World

HTML attributes can also be overridden, with a few exceptions.

Most markdown parsers steer clear of handling HTML and ones targeting JSX often have to resort to using dangerouslySetInnerHTML, an escape hatch that opens up your code to various security risks.

markdown-to-jsx itself had to utilize this functionality in an earlier version, but as of v6 that is no longer the case! It’s all good now.

GFM adds a ton of useful functionality to markdown like HTML tables, task lists, strikethrough formatting, and more.

All this weighs in at just over 5kB gzipped.

Special thanks are owed to the simple-markdown team for creating an extremely simple, but highly-extensible markdown framework. A forked version of their parsing engine is the baseline for all the functionality above and much more to come. 🙏🏼

Check out my other project: buttermilk, beautifully simple routing for React projects



Poetry, tech, other pursuits. 🏳️‍🌈

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store