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

$ 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 git@github.com:m-Ryan/easy-email.git
$ cd easy-email
$ yarn install

Start the dev server

$ yarn dev

License

The MIT License

wang1xiang/easy-email