Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zalify/easy-email
Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
https://github.com/zalify/easy-email
email-builder email-editor email-template-editor javascript mjml-editor react react-email-editor
Last synced: about 1 month 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
- Owner: zalify
- License: mit
- Created: 2021-03-26T09:33:29.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-14T16:06:45.000Z (3 months ago)
- Last Synced: 2024-08-13T07:01:42.212Z (about 1 month 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,572
- Watchers: 20
- Forks: 327
- Open Issues: 26
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: License
Awesome Lists containing this project
- awesome-opensource-email - Easy Email - DnD Email Editor based on React.js and MJML. (Editing / Email Builder & Visual Editing Component)
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 .
---
## 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.
## Features:
- Drag and drop editor
- Can be converted into `MJML`, or generated through `MJML`
- Defined custom block
- Dynamic rendering
| Video Overview |
| :----------------------------------------------: |
| 
|
## Live Demo
Check out the live demo here: email.maocanhua.cn
Pro version live demo here: demo.easyemail.pro.
## Getting started
```sh
$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form
```
or
```sh
$ yarn add 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';
// theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color
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. |
| interactiveStyle | { hoverColor?: string; selectedColor?: string;} | Interactive prompt color |
| onUploadImage | (data: Blob) => Promise; | Triggered when an image is pasted or uploaded |
| autoComplete | boolean | Automatically complete missing blocks. For example, Text => Section, will generate Text=>Column=>Section |
| mergeTags | Object | A merge tag is a bit of specific code that allows you to insert dynamic data into emails. Like `{{user.name}}`, and used for preview |
| previewInjectData | Object | Dynamic data for preview, it will overwrite mergeTags. |
| onBeforePreview | (html: string, mergeTags: PropsProviderProps['mergeTags']) => string | Promise You can replace mergeTags when previewing. |
## Development
```sh
$ git clone [email protected]: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