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.
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 |
|---|
 |
- Open Source: open-source.easyemail.pro
- Pro Version: demo.easyemail.pro
Looking for ready-to-use templates? Check out our free collection of MJML and HTML email templates.
$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-formimport React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, StandardLayout } 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 (
<StandardLayout
showSourceCode={true}
>
<EmailEditor />
</StandardLayout>
);
}}
</EmailEditorProvider>
);
}
| 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<IEmailTemplate, Partial>) => React.ReactNode | ReactNode |
| onSubmit | Config<IEmailTemplate, Partial>['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 |
| 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 |
| 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.
$ git clone git@github.com:zalify/easy-email.git
$ cd easy-email
$ pnpm install
$ pnpm run install-all
$ pnpm run dev
If you need some new features, we always welcome you to submit a PR.
The MIT License
