Webpack loader to render React Components from markdown

Usage no npm install needed!

<script type="module">
  import reactMarkdownLoader from '';


React Markdown

Build Status Known Vulnerabilities

npm version npm downloads Dependency Status [![peerDependency Status][badge-deps-peer]][url-deps-peer] devDependency Status

Webpack loader that parses markdown files and converts them to a React Stateless Component. It will also parse FrontMatter to import dependencies and render components along with it’s source code.

We developed this loader to make the process of creating styleguides for React components easier.


In the FrontMatter you should import the components you want to render with the component name as a key and it's path as the value

  HelloWorld: './hello-world.js',
  '{ Component1, Component2 }': './components.js'


module: {
  loaders: [
      test: /\.md$/,
      loader: 'babel!react-markdown'


import React, { PropTypes } from 'react';

 * HelloWorld
 * @param {Object} props React props
 * @returns {JSX} template
export default function HelloWorld(props) {
  return (
    <div className="hello-world">
      Hello { props.who }

HelloWorld.propTypes = {
  who: PropTypes.string

HelloWorld.defaultProps = {
  who: 'World'

In the markdown File add the render tag to code fenceblocks you want the loader to compile as Components this will output the usual highlighted code and the rendered component.

  HelloWorld: './hello-world.js'
# Hello World

This is an example component

```render html
<HelloWorld />

You can send who to say Hello

```render html
<HelloWorld who="World!!!" />


Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.


Javier Cubides Fernando Pasik
Javier Cubides Fernando Pasik


MIT (c) 2017