Build content creation into your app

---

Introduction

Add a production-ready, drag-and-drop email builder to your React app with a single component. react-email-editor lets developers embed Unlayer, load and save designs, listen to editor events, customize configuration, and export responsive HTML.

Use it when you need email template creation inside your app without building and maintaining a full visual editor from scratch.

Video Overview
Watch video overview: https://youtu.be/qp9t74G4VyM

Live Demo

Check out the live demo here: https://react-email-editor-demo.netlify.app/ (Source Code)

Installation

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

Upgrading from 1.x

Version 2.0 is a modernization release — the component API is unchanged, and most apps can upgrade without code changes. Requirements and packaging did change:

• React >= 16.8 and Node >= 18 are now required. (React 15–16.7 never worked with the hooks-based component in 1.7.x; 2.0 just enforces this at install time.)
• Import only from the package root. Deep imports like react-email-editor/dist/... are blocked by the new exports map.
• The published code is ES2019. If you support legacy browsers through an old toolchain that can't parse ES2019, stay on 1.x or transpile node_modules.
• Editors are now destroyed on unmount (a long-standing leak fix).

See the CHANGELOG for the full list.

Usage

Require the EmailEditor component and render it with JSX:

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';

import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';

const App = (props) => {
  const emailEditorRef = useRef<EditorRef>(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    // editor is ready
    // you can load your template here;
    // the design json can be obtained by calling
    // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)
    // or generated from React code with @unlayer/react-elements (renderToJson)
    // const templateJson = { DESIGN JSON GOES HERE };
    // unlayer.loadDesign(templateJson);
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
      </div>

      <EmailEditor ref={emailEditorRef} onReady={onReady} />
    </div>
  );
};

createRoot(document.getElementById('app')!).render(<App />);

See the example source for a reference implementation.

Next.js / React Server Components

The editor renders into the DOM, so the component is client-only. The published bundle includes the 'use client' directive, so with the Next.js App Router you can import it directly from any Client Component — no next/dynamic workaround required.

Methods

All unlayer methods are available in the editor instance (emailEditorRef.current.editor). See the Unlayer Docs for more information, or log the object in the console to explore it. Here are the most used ones:

method	params	description
loadDesign	Object data	Takes the design JSON and loads it in the editor
saveDesign	Function callback	Returns the design JSON in a callback function
exportHtml	Function callback	Returns the design HTML and JSON in a callback function

Properties

• editorId {String} HTML div id of the container where the editor will be embedded (optional)
• minHeight {String} minimum height to initialize the editor with (default 500px)
• onLoad {Function} called when the editor instance is created
• onReady {Function} called when the editor has finished loading
• options {Object} options passed to the Unlayer editor instance (default {})
  • See the Unlayer Docs for all available options.
• style {Object} style object for the editor container (default {})

Support

The email editor output is tested using the most popular email clients.

This is the beginning of the README. Read the rest at the original. Read the full README ↗