How to Export HTML, Image, and PDF

For full code, check out our live demo

How to get html

EditorHeader.tsx

import { useEditorContext } from "easy-email-pro-theme";
import { useEditorProps } from "easy-email-pro-editor";
import { EditorCore, PluginManager } from "easy-email-pro-core";
import mjml from "mjml-browser";

const { values, mergetagsData } = useEditorContext();
const { universalElementSetting } = useEditorProps();

const onExportHTML = () => {
  const mjmlStr = EditorCore.toMJML({
    element: values.content,
    mode: "production",
    universalElements: universalElementSetting,
    beautify: true,
  });

  const templateHtml = mjml(mjmlStr).html;

  // If you need to get the html merged with mergetagsData, such as when sending a test email
  const finalMergeTagHtml = PluginManager.renderWithData(
    templateHtml,
    mergetagsData
  );

  console.log("Template HTML:", templateHtml);
  console.log("HTML with merge tags:", finalMergeTagHtml);
};

How to get Image

Sometimes we need to generate email thumbnails. The demo uses SVG-based rendering for better quality:

EditorHeader.tsx

import { useEditorContext } from "easy-email-pro-theme";
import { useSlate } from "slate-react";
import { ReactEditor } from "slate-react";
import { Node } from "slate";
import { useEditorState, ActiveTabKeys } from "easy-email-pro-editor";
import { saveAs } from "file-saver";

// Helper functions (you'll need to implement or import dom2Svg and base64ToBlob)
// See demo/src/utils/base64ToBlob.ts for reference

const editor = useSlate();
const { values } = useEditorContext();
const { setActiveTab, activeTab } = useEditorState();

const onExportImage = async () => {
  const activetabRef = { current: activeTab };

  // Export desktop version
  setActiveTab(ActiveTabKeys.DESKTOP);
  const container = ReactEditor.toDOMNode(editor, Node.get(editor, [0]));
  const desktopBlob = await base64ToBlob(await dom2Svg(container));

  // Export mobile version
  setActiveTab(ActiveTabKeys.MOBILE);
  const container2 = ReactEditor.toDOMNode(editor, Node.get(editor, [0]));
  const mobileContainer = document.createElement("div");
  mobileContainer.style.width = "375px";
  mobileContainer.appendChild(container2.cloneNode(true));
  document.body.appendChild(mobileContainer);
  const mobileBlob = await base64ToBlob(await dom2Svg(mobileContainer));
  mobileContainer.parentElement?.removeChild(mobileContainer);

  // Restore previous tab
  setActiveTab(activetabRef.current);

  // Download images
  saveAs(desktopBlob, "desktop.png");
  saveAs(mobileBlob, "mobile.png");
};

How to get PDF

EditorHeader.tsx

const editor = useSlate();

const onExportPDF = async () => {
  const printCSS = document.createElement("style");
  printCSS.innerHTML = `
    @media print {
      body {
          -webkit-print-color-adjust: exact;
          color-adjust: exact;
      }
    }
  `;
  const contentWindow = ReactEditor.getWindow(editor);
  if (contentWindow) {
    contentWindow.document.body.appendChild(printCSS);
    contentWindow.print();
    printCSS.parentElement?.removeChild(printCSS);
  }
};