Easy email

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
• Collect blocks and reuse them at other times
• Defined custom block
• Dynamic rendering

| Video Overview | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | | | Watch video overview:https://www.bilibili.com/video/BV1YQ4y167bb |

Live Demo

Check out the live demo here: http://easy-email-m-ryan.vercel.app

Getting started

$ npm install --save easy-email-editor antd mjml-browser react-final-form

or

$ yarn add easy-email-editor antd mjml-browser react-final-form

import React from "react";
import { BlocksMap, EmailEditor, EmailEditorProvider } from "easy-email-editor";
import "easy-email-editor/lib/style.css";
import "antd/dist/antd.css";

const initialValues = {
  subject: "Welcome to Easy-email",
  subTitle: "Nice to meet you!",
  content: BlocksMap.getBlock("Page").create({}),
};

export function App() {
  return (
    <EmailEditorProvider data={initialValues}>
      {({ values }) => {
        return <EmailEditor height={"calc(100vh - 72px)"} />;
      }}
    </EmailEditorProvider>
  );
}

Docs

Check out documentation for guides and a full API reference.

Examples

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

Development

$ git clone [email protected]:m-Ryan/easy-email.git
$ cd easy-email
$ yarn install

Start the dev server

$ yarn dev

License

The MIT License