React Component

unlayer/react-email-editor is open source

Star, browse the source, file issues, or contribute.

Star on GitHub

Installation

npm install react-email-editor

Basic usage

src/EmailComponent.jsx

import React, { useRef } from 'react';
import EmailEditor from 'react-email-editor';

export default function EmailComponent() {
  const emailEditorRef = useRef(null);

  const onReady = (unlayer) => {
    // Editor is ready. Optionally load a saved design here:
    // unlayer.loadDesign(savedDesign);
  };

  const exportHtml = () => {
    emailEditorRef.current?.editor.exportHtml((data) => {
      const { design, html } = data;
      console.log('HTML output:', html);
    });
  };

  const saveDesign = () => {
    emailEditorRef.current?.editor.saveDesign((design) => {
      console.log('Design JSON:', design);
    });
  };

  return (
    <div>
      <div>
        <button onClick={exportHtml}>Export HTML</button>
        <button onClick={saveDesign}>Save Design</button>
      </div>
      <EmailEditor ref={emailEditorRef} onReady={onReady} />
    </div>
  );
}

Render it from your app:

src/App.jsx

import EmailComponent from './EmailComponent';

export default function App() {
  return <EmailComponent />;
}

onReady fires once the editor has fully loaded. Inside it, you can call any of the methods below — most commonly loadDesign to populate the editor with a saved template.

TypeScript

react-email-editor ships its own types. Pass the editor ref the right shape with EditorRef, and type the onReady handler with EmailEditorProps['onReady']:

src/EmailComponent.tsx

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

export default function EmailComponent() {
  const emailEditorRef = useRef<EditorRef>(null);

  const onReady: EmailEditorProps['onReady'] = (unlayer) => {
    // unlayer is fully typed here
  };

  return <EmailEditor ref={emailEditorRef} onReady={onReady} />;
}

Configuration

Pass editor configuration through the options prop. The shape matches the full unlayer.init configuration:

<EmailEditor
  ref={emailEditorRef}
  onReady={onReady}
  options={{
    projectId: 1234, // replace with your Unlayer Project ID
    displayMode: 'email',
    version: 'latest',
    appearance: {
      theme: 'modern_light',
    },
    features: {
      ai: true,
      textEditor: {
        spellChecker: true,
      },
    },
  }}
/>

Loading a saved design

const onReady = (unlayer) => {
  const savedDesign = /* fetch from your backend */;
  unlayer.loadDesign(savedDesign);
};

Methods

Available on emailEditorRef.current.editor:

Method	Params	Description
loadDesign	Object data	Loads a saved design JSON into the editor
saveDesign	Function callback	Returns the current design JSON via callback
exportHtml	Function callback	Returns the rendered HTML and design JSON via callback

Props

Name	Type	Description	Default
style	Object	Style for the editor container	{}
minHeight	String	Minimum height to initialize the editor with	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. See the configuration options for everything available.	{}
tools	Object	Configuration for built-in and custom tools	{}
appearance	Object	Configuration for appearance and theme	{}

Example

A full working reference implementation lives in the react-email-editor demo.