Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

Simple React Markdown Editor

This makes it easy to add a simple markdown editing widget to any TextArea element. example


CodePen Demo


npm install react-simple-markdown-editor


  • Entirely customizable. Modify CSS easily with props, or add custom classes and modify CSS with stylesheets. Define which buttons are visible.
  • The only package dependencies are react and lodash, minimizing risk.


In your code:


import {SimpleMarkdownEditor} from 'react-simple-markdown-editor';


var SimpleMarkdownEditor = require('react-simple-markdown-editor');

In your React render() function:

<SimpleMarkdownEditor textAreaID={"myTextAreaElement"} />

Rendering Markdown

Use another library like react-remarkable in combination with this. Then set the source of the remarkable component to the value of your TextArea element.



SimpleMarkdownEditor.propTypes = {
    // Required props
    textAreaID: PropTypes.string.isRequired,

    // Optional props
    styles: PropTypes.object,
    containerClass: PropTypes.string,
    buttonClass: PropTypes.string,
    enabledButtons: PropTypes.object,
    buttonHtmlText: PropTypes.object,
    additionalProps: PropTypes.object

textAreaID (String, Required): The ID of the TextArea element you want the editor attached to. When you press buttons in this widget, the text in this TextArea will be modified.

styles: (Object, optional): Used to overwrite inline CSS without using your own stylesheets.

Existing properties:

container: {
button: {
    fontFamily: 'Georgia, serif',
    backgroundColor: '#333536',
    color: 'white',
    marginRight: '5px',
    float: 'left',
    width: '25px',
    borderRadius: '4px',
    textAlign: 'center',
    cursor: 'pointer'

For instance, if you want to add a border to each button: <SimpleMarkdownEditor styles={{button: {border: '1px solid green'}}} />

containerClass and buttonClass (String, optional): Provide classes to the container and button elements, so you can overwrite them using your own CSS stylesheets. An alternative to setting the styles prop.

enabledButtons: (Object, optional): Hide any buttons you don't want to show. All of them default to showing. Buttons:

    bold: true,
    italic: true,
    strike: true,
    code: true,
    quote: true,
    h1: true,
    h2: true,
    h3: true,
    bullet: true,
    link: true,
    image: true

For instance, if you want to hide the link button: <SimpleMarkdownEditor enabledButtons={{link: false}} />

buttonHtmlText: (Object, optional): Change the display text of any buttons, including any HTML markup. Defaults:

    bold: 'B',
    italic: '<i>I</i>',
    strike: '<s>S</s>',
    code: '&lt; &gt;',
    quote: '&ldquo; &rdquo;',
    h1: 'H1',
    h2: 'H2',
    h3: 'H3',
    bullet: '&#8226;',
    link: '#',
    image: '[i]'

For instance, if you want to change code to be a square quote to be 2 right arrows: <SimpleMarkdownEditor buttonHtmlText={{code: '&#9633;', quote: '&#8649;'}} />

additionalProps: (Object, optional): Add arbitrary props to any button. For instance: <SimpleMarkdownEditor additionalProps={{bold: {title: "bold"}}} />


MIT, use for free. If you like this, give it a star.


Simple react markdown editor widget you can attach to any TextArea element to provide rich markdown capabilities. Requires few dependencies




No releases published
You can’t perform that action at this time.