Skip to main content

React Setup

This guide covers setting up Unlayer in a React application using the official react-email-editor package.

Installation​

npm install react-email-editor
# or
yarn add react-email-editor

Basic Usage​

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

function App() {
  const emailEditorRef = useRef(null);

  const onReady = () => {
    // Editor is ready
    // You can load a design here if needed
    // emailEditorRef.current.editor.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);
      // Save to your backend
    });
  };

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

export default App;

Configuration Options​

Pass options as props to customize the builder:

<EmailEditor
  ref={emailEditorRef}
  onReady={onReady}
  options={{
    displayMode: 'email',
    appearance: {
      theme: 'modern_light',
    },
    features: {
      textEditor: {
        spellChecker: true,
      },
    },
  }}
/>

Loading a Saved Design​

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

What's Next​