https://github.com/zalify/easy-email-editor
Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
https://github.com/zalify/easy-email-editor
email-builder email-editor email-template-editor javascript mjml-editor react react-email-editor
Last synced: 6 months ago
JSON representation
Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
- Host: GitHub
- URL: https://github.com/zalify/easy-email-editor
- Owner: zalify
- License: mit
- Created: 2021-03-26T09:33:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-29T12:35:36.000Z (6 months ago)
- Last Synced: 2025-05-03T19:03:18.667Z (6 months ago)
- Topics: email-builder, email-editor, email-template-editor, javascript, mjml-editor, react, react-email-editor
- Language: TypeScript
- Homepage: https://email.maocanhua.cn/
- Size: 12.9 MB
- Stars: 1,887
- Watchers: 24
- Forks: 370
- Open Issues: 28
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: License
Awesome Lists containing this project
- my-awesome-list - easy-email-editor - rich, top open-source SaaS email editor based on React and MJML. | zalify | 2084 | (TypeScript)
README
# Easy email
.svg)
---
## Pro Version Announcement
We are delighted to announce that we now have a more powerful and customizable commercial version available. If it is for internal use only, then the open-source version is sufficient. However, if your editor is a critical feature, I recommend using the commercial version.
Check it out here .
## Free email templates for MJML and HTML.
## Introduction
Easy email is developed based on the [MJML](https://mjml.io/) and has very good compatibility. At the same time, it can generate code through drag-and-drop editing.
| Video Overview |
| :----------------------------------------------: |
| 
|
## Live Demo
Open source version: email.maocanhua.cn
Commercial version: demo.easyemail.pro.
## Getting started
```sh
$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form
```
```js
import 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 (
{({ values }) => {
return (
);
}}
);
}
```
## 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 |
## Development
```sh
$ 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.`
## License
The MIT License