Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @insidersbyte/react-markdown-editor with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactMarkdownEditor = require("@insidersbyte/react-markdown-editor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@insidersbyte/react-markdown-editor v1.0.0

React Markdown editor with preview and drag and drop image support


npm (scoped)
Build Status Coverage Status Code Climate bitHound Overall Score
Dependency Status peerDependency Status devDependency Status


React Markdown editor with preview, built with react-markdown-renderer.



npm install @insidersbyte/react-markdown-editor --save

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom';
import MarkdownEditor from '@insidersbyte/react-markdown-editor';
import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css';

class App extends React.Component {
    constructor() {

        this.state = {
            markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',

        this.updateMarkdown = this.updateMarkdown.bind(this);

    updateMarkdown(event) {
        this.setState({ markdown: });

    render() {
        return (

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


  • value (string) - the raw markdown that will be converted to html (required)
  • onChange (function) - called when a change is made (required)
  • options (object) - the options for remarkable (see here) (default: { })


You can either write your own css for this component or use the one provided. If you want to write your own look at react-markdown-editor.styl for an idea on how to style this component.


Contributions are very welcome!

Please note that by submitting a pull request for this project, you agree to license your contribution under the MIT License to this project.


Published under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free