diragb/easy-email

React.js Drag-and-Drop Email Editor based on MJML. Transform structured JSON data into major email clients compatible HTML. Written in Typescript and supported both in browser and Node.js.

Easy email

Join Our Community

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.

Features:

• Drag and drop editor
• Can be converted into MJML, or generated through MJML
• Defined custom block
• Dynamic rendering
• Easily customize UI when you need
• Theme configuration

Video Overview

Live Demo

Check out the live demo here: https://email.maocanhua.cn

Custom Services

For customized features or paid consultation services, please contact [email protected].

Getting started

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

or

$ yarn add 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, StandardLayout } from 'easy-email-extensions';
import { useWindowSize } from 'react-use';

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() {
  const { width } = useWindowSize();

  const smallScene = width < 1400;

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <StandardLayout
            compact={!smallScene}
            showSourceCode={true}
          >
            <EmailEditor />
          </StandardLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

Examples

Vite: https://github.com/m-Ryan/easy-email-demo

Nextjs: https://github.com/m-Ryan/easy-email-nextjs-demo

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<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.
interactiveStyle	{ hoverColor?: string; selectedColor?: string;}	Interactive prompt color
onUploadImage	(data: Blob) => Promise;	Triggered when an image is pasted or uploaded
onAddCollection	(payload: CollectedBlock) => void;	Add to collection list
onRemoveCollection	(payload: { id: string; }) => void;	Remove from collection list
dashed	boolean	Show dashed
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.

Hotkeys

hotkey	Description
mod+z	undo
mod+y	redo
delete/backspace	delete block
tab / shift + tab	fast select block, if block is focusing,tab select next block & shift + tab select prev block

How does it work?

Packages

• easy-email-core
• easy-email-editor
• easy-email-extensions

Development

$ git clone [email protected]:zalify/easy-email.git
$ cd easy-email


$ yarn  
$ yarn install-all
$ yarn dev

If you need some new features, we always welcome you to submit a PR.

License

The MIT License