node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



A markdown editor using React/Reflux.

Build Status Code Climate License Latest Version Total Downloads


Demo here:


npm install --save react-markdown-editor


From the UI:

  • Bold
  • Italic
  • Header
  • Subheader
  • Link
  • Unordered List
  • Inline Images

Of course it is a regular markdown editor (using the nice markdown-js library), so you are not limited to the UI.


To render the component:

var React = require('react');
var MarkdownEditor = require('react-markdown-editor').MarkdownEditor;
var TestComponent = React.createClass({
    render: function() {
        return (
            <MarkdownEditor initialContent="Test" iconsSet="font-awesome"/>
React.render(<TestComponent />, document.getElementById('content'));

<MarkdownEditor /> takes two required props:

- initialContent which is the text you want the textarea to contain on initialization.
- iconsSet which is the icons provider you want to use. It can either be font-awesome or materialize-ui

Optional props:

  • onContentChange, function to be called on each content change (as the property name says!)

You can also listen to content changes on the editor. If you are using Reflux, by listening to the changes on MarkdownEditorContentStore. To be able to do so, just require('react-markdown-editor').MarkdownEditorContentStore;


You can modify the styles directly by modifying the styles declared in dist/MarkdownEditor.js. The pre-existing styles assume that you are using Bootstrap and Font Awesome. ## TODO

  • Better solution for styles
  • Cross-browsers testing
  • Move to Redux


cd Example
npm install
open index.html


You can open an issue on the github repo, or contact me directly by email.


Please, if you are using this package, let me know. I am interested to know what you think of it, even if it was on a tiny side-project.


Editing tab Preview tab