Easy email

The most developer-friendly email editor based on MJML

---

💼 Looking for more features? Check out Easy Email Pro with cross-browser support, responsive design, and premium components.

---

Introduction

Easy email is developed based on the MJML and has very good compatibility. At the same time, it can generate code through drag-and-drop editing. | Video Overview | | :--------------------------------------------: | | |

🎮 Live Demo

• Open Source: open-source.easyemail.pro

• Pro Version: demo.easyemail.pro

📧 Free Email Templates

Looking for ready-to-use templates? Check out our free collection of MJML and HTML email templates.

🚀 Getting Started

$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form

import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, SimpleLayout } from 'easy-email-extensions';

import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';
import '@arco-themes/react-easy-email-theme/css/arco.css';

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

export default function App() {

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <SimpleLayout>
            <EmailEditor />
          </SimpleLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

⚙️ Configuration

| property | Type | Description | | ------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | | height | string / number | Set the height of the container | | data | interface IEmailTemplate { content: IPage; subject: string; subTitle: string; } | Source data | | children | ( props: FormState,helper: FormApi>) => React.ReactNode | ReactNode | | onSubmit | Config>['onSubmit']; | Called when the commit is triggered manually | | fontList | { value: string; label: string; }[]; | Default font list. | | onUploadImage | (data: Blob) => Promise; | Triggered when an image is pasted or uploaded |

📊 Open Source vs Pro Version

| Feature | Open Source Version | Pro Version | | ------------------------- | -------------------- | ------------------------------------------------------------------------- | | Browser Compatibility | Only supports Chrome | Compatible with various browsers (uses iframe) | | React 19 Support | ❌ Not supported | ✅ Supported | | Responsive Design | ❌ Not available | ✅ Supports different UI for desktop and mobile | | AMP block | ❌ Not available | ✅ Accordion, Carousel, Form, Product, Reviews, Lucky Wheel | | Migration | ❌ Not available | ✅ Seamless migration from Unlayer templates | | Advanced Features | Basic features only | Unsplash library, File Manager, Block Studio, and many more custom blocks | | Technical Support | Community support | Professional technical support with faster response times | Learn more about Easy Email Pro.

📄 License

The MIT License