Quick Start Guide

Get started with Easy Email Pro in minutes.

Prerequisites

Option 1: Use Demo Templates

Browse our collection of starter templates at our GitHub repositories.

Option 2: Manual Setup

Install the required packages:

pnpm install 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

Basic Implementation

Create your editor component:

import React, { useMemo, useRef } from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import {
  EditorContextProps,
  Retro,
  ThemeConfigProps,
} from "easy-email-pro-theme";
import "easy-email-pro-theme/lib/style.css";
import mjml from "mjml-browser";
// 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";
import { EditorCore } from "easy-email-pro-core";
import axios from "axios";

export default function MyEditor() {
  const instanceRef = (useRef < EditorContextProps) | (null > null);

  // You can fetch data from the server.
  const initialValues: EmailTemplate = 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 mjmlStr = EditorCore.toMJML({
      element: values.content,
      mode: "production",
      beautify: true,
    });

    const html = mjml(mjmlStr).html;

    await axios.post("/your-server-url", {
      content: values.content,
      subject: values.subject,
      html: html,
    });
  };

  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,
    instanceRef: instanceRef,
    height: "calc(100vh - 66px)",
    onUpload,
    initialValues: initialValues,
    onSubmit: onSubmit,
    onChange: onChange,
    showSourceCode: true,
    showLayer: true,
    showPreview: true,
    showSidebar: true,
    showBlockPaths: 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

Next Steps

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