Skip to main content

Quickstart

Getting started​

 npm install --save easy-email-pro-core easy-email-pro-editor easy-email-pro-theme easy-email-pro-kit @arco-design/web-react @arco-themes/react-easy-email-pro mjml-browser slate slate-react slate-history

Create your editor​

import React, { useCallback, useMemo } from "react";
import {
  EmailEditorProps,
  EmailTemplate,
  EmailEditorProvider,
} from "easy-email-pro-editor";
import { BlockManager, ElementType, PluginManager } from "easy-email-pro-core";
import { Retro, ThemeConfigProps } from "easy-email-pro-theme";
import "easy-email-pro-theme/lib/style.css";

// Theme style, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/6979/setting/base/Color
import "@arco-themes/react-easy-email-pro/css/arco.css";
import templateData from "./template.json";

export default function MyEditor() {
  // You can fetch data from the server.
  const initialValues: EmailTemplate | null = useMemo(() => {
    return {
      subject: templateData.subject,
      content: templateData.content,
    };
  }, []);

  // example
  const onUpload = (file: Blob): Promise<string> => {
    return Promise.resolve(
      "https://res.cloudinary.com/dfite2e16/image/upload/v1681907056/clgnivsuj0018z9ltiixmxf6k/ilh6rri61f512i7wb6yd.png"
    );
  };

  const onSubmit: ThemeConfigProps["onSubmit"] = async (values, editor) => {
    console.log(values, editor);
  };

  const onChange: ThemeConfigProps["onChange"] = async (values, editor) => {
    console.log("onChange", values);
  };

  const config = Retro.useCreateConfig({
    // Paid clients fill in the Client ID here. After subscribing to the paid plan, support will send you the client ID
    clientId: process.env.CLIENT_ID,
    height: "calc(100vh - 66px)",
    onUpload,
    initialValues: initialValues,
    onSubmit: onSubmit,
    onChange: onChange,
    showSourceCode: true,
    showLayer: true,
    showPreview: true,
    showSidebar: true,
    compact: false,
    showDragMoveIcon: true,
    showInsertTips: true,
  });

  return (
    <EmailEditorProvider {...config}>
      <Retro.Layout></Retro.Layout>
    </EmailEditorProvider>
  );
}
template.json
{
  "subject": "Welcome to Easy Email Pro",
  "content": {
    "data": {
      "breakpoint": "480px",
      "globalAttributes": {
        "font-family": "Arial, sans-serif"
      }
    },
    "type": "page",
    "children": [
      {
        "type": "standard-section",
        "data": {},
        "attributes": {},
        "children": [
          {
            "type": "standard-column",
            "data": {},
            "attributes": {},
            "children": [
              {
                "type": "placeholder",
                "data": {},
                "attributes": {},
                "children": [
                  {
                    "text": ""
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    "attributes": {
      "background-color": "#f5f5f5",
      "content-background-color": "#ffffff"
    }
  }
}

How it work​

How it work

Demo​

Demo check here https://demo.easyemail.pro. Demo code check here https://github.com/easy-Email-Pro/