Creating a Drag-n-Drop Email Editor with React

Introduction

Every time we wanted to add a drag-n-drop email editor in any of our projects, there weren’t many good options available that were polished and reliable enough for commercial use. After months of search, we decided to build one that can be embedded in any web app within 5 minutes. It’s available on GitHub and NPM.

Here’s what it looks like:

Unlayer’s Drag-n-Drop Editor

It takes care of all the unsexy and boring stuff that comes with building a reliable and solid email / page builder. Things like outputting the correct HTML syntax, and making sure it looks and works fine in all old browsers and email clients (Hi, IE & Outlook =).

Getting Started

Installation

The easiest way to use it is to install it from NPM.

npm install react-email-editor --save

Usage

We will first import the editor in our React component.

import EmailEditor from 'react-email-editor'

Next, we’ll render the email editor in our React app.

class App extends Component {
  render() {
    return <div>
      <EmailEditor
        ref={editor => this.editor = editor}
      />
    </div>
  }
}

That’s it. This should render a fully functional drag-n-drop editor in your React app. The EmailEditor component accepts the following props.

• 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 Unlayer editor instance (default {})

Exporting HTML

Now that we have a fully functional email editor, we need to save the HTML it outputs. The editor exposes a method called exportHtml that converts the user design into HTML.

Here’s how that is done…

class App extends Component {
  render() {
    return <div>
      <button onClick={this.exportHtml}>Export HTML</button>

      <EmailEditor
        ref={editor => this.editor = editor}
      />
    </div>
  }

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

Saving Designs

While HTML is the final result of the design, you will need to save the work done in the email editor for future use. There are a number of use cases for this such as:

• Having pre-designed templates
• Saving drafts and resuming work later

Our email editor saves all work in JSON format. You can save the JSON and then pass it when loading the editor again and it will resume from where you left.

Here’s how to do that…

class App extends Component {
  render() {
    return <div>
      <button onClick={this.saveDesign}>Save Design</button>

      <EmailEditor
        ref={editor => this.editor = editor}
      />
    </div>
  }

  saveDesign = () => {
    this.editor.saveDesign(design => {
      console.log('saveDesign', design)
    })
  }
}

Loading Designs

Once you have the JSON saved, you can pass it to the editor using the loadDesign method.

class App extends Component {
  render() {
    return <div>
      <button onClick={this.saveDesign}>Save Design</button>

      <EmailEditor
        ref={editor => this.editor = editor}
        onLoad={this.onLoad}
      />
    </div>
  }

  onLoad = () => {
    const json = /* DESIGN JSON GOES HERE */
    this.editor.loadDesign(json)
  }
}

We hope you use this free React component to build powerful email editing applications.

More Resources

Full Documentation

You can check out Unlayer’s full documentation for all available options.

Live Demo

Check out the live demo here: http://react-email-editor-demo.netlify.com/

Example Source

See the example source for a reference implementation.

Real World Applications

You can check out EmailMonster’s email editor or MailMunch’s email editor and landing page builder for a full demo.

Explainer Video