Switch branches/tags
Nothing to show
Latest commit 348877f Oct 9, 2017 @adeelraza adeelraza Added MIT license

React Email Editor

The excellent drag-n-drop email editor by as a React.js wrapper component. This is the most powerful and developer friendly visual email builder for your app.

Video Overview
React Email Editor
Watch video overview:

Live Demo

Check out the live demo here: (Source Code)

Blog Post

Here's a blog post with a quickstart guide:


The easiest way to use React Email Editor is to install it from NPM and include it in your own React build process.

npm install react-email-editor --save


Require the EmailEditor component and render it with JSX:

import React, { Component } from 'react'
import { render } from 'react-dom'

import EmailEditor from 'react-email-editor'

class App extends Component {
  render() {
    return <div>
      <h1>react-email-editor Demo</h1>

        <button onClick={this.exportHtml}>Export HTML</button>

        ref={designer => this.designer = designer}

  exportHtml = () => {
    this.designer.exportHtml(data => {
      const { design, html } = data
      console.log('exportHtml', html)

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


  • style Object style object for the editor container (default {})
  • minHeight String minimum height to initialize the editor with (default 500px)
  • onLoad Function called when the editor has finished loading
  • options Object options passed to the Unroll editor instance (default {})

See the Unroll Docs for all available options.


  • loadDesign - function(Object data) - Takes the design JSON and loads it in the editor
  • saveDesign - function(Function callback) - Returns the design JSON in a callback function
  • exportHtml - function(Function callback) - Returns the design HTML and JSON in a callback function

See the example source for a reference implementation.


Copyright (c) 2017 Unroll. MIT Licensed.