Skip to content

React Component

Unlayer editor is also available as a React component.


The easiest way to use it 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(html => {
      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)
  • options - Object - options passed to the Unlayer editor instance (default {})

See the example source for a reference implementation.