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:
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 loadingoptions
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.