Remark compiler plugin to convert HAST into React virtual DOM
Latest commit 4f97549 Jan 25, 2017 @Wreulicke Wreulicke committed with Revise README (#2)
* Update

* Update

* fix formatting

* fix formatting

* add missing semicolon


Build Status

Compiles HAST to React with rehype.



npm install rehype-react


The following example shows how to create a markdown input textarea, and corresponding rendered HTML output. The markdown is processed to add a Table of Contents and to render GitHub mentions (and other cool GH features), and to highlight code blocks.

var React = require('react');
var ReactDOM = require('react-dom');
var unified = require('unified');
var markdown = require('remark-parse');
var toc = require('remark-toc');
var github = require('remark-github');
var remark2rehype = require('remark-rehype');
var highlight = require('rehype-highlight');
var rehype2react = require('rehype-react');

var processor = unified()
  .use(github, {
    repository: ''
  .use(rehype2react, {
    createElement: React.createElement

var App = React.createClass({
  getInitialState() {
    return {text: '# Hello\n\n## Table of Contents\n\n## @rhysd'};
  onChange(ev) {
  render() {
    return (<div>
        onChange={this.onChange} />
      <div id='preview'>

ReactDOM.render(<App />, document.getElementById('app'));

Yields (in id="preview", on first render):

<div><h1 id="hello">Hello</h1>
<h2 id="table-of-contents">Table of Contents</h2>
<li><a href="#rhysd">@rhysd</a></li>
<h2 id="rhysd"><a href=""><strong>@rhysd</strong></a></h2></div>


origin.use(rehype2react[, options])

Normally, the used on processor compiles to a string, but this compiler generates a ReactElement instead. It’s accessible through file.contents.

  • createElement (Function, required) — Function to use to create ReactElements;
  • components (Object, default: {}) — Register components;
  • prefix (string, default: 'h-') — Prefix for key to use on generated ReactElements.


MIT © Titus Wormer, modified by Tom MacWright and Mapbox and rhysd.