React email builder: embed a drag-and-drop editor in your React app

1Install the editor

Add the editor package to your React app. It's a thin wrapper, the editor itself loads from a hosted iframe, so its code never ships in your bundle.

npm install react-email-craft

2Mount the editor with a publishable key

Create a free workspace, generate a publishable key (pk_live_…), and drop the component into a page. Your brand colors come from your workspace Brand Kit, and white-label (your logo in place of the MailKaro badge) comes with Pro.

"use client";
import EmailEditor, { type MailkaroIframeEditorRef } from "react-email-craft";
import { useRef } from "react";

export function EmailDesigner() {
  const ref = useRef<MailkaroIframeEditorRef>(null);

  // The ref API mirrors react-email-editor / Unlayer, callback style.
  const save = () =>
    ref.current?.editor.exportHtml(async ({ design, html }) => {
      await fetch("/api/designs", {
        method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ design, html }), // store the JSON + email-safe HTML
      });
    });

  return (
    <div style={{ height: "100vh" }}>
      <button onClick={save}>Save</button>
      <EmailEditor ref={ref} token="pk_live_your_publishable_key" />
    </div>
  );
}

3Persist the design JSON

Store the design JSON (not just the HTML) so users can reopen and edit later. Reloading is a one-liner, pass the saved JSON back to the editor.

The design is a portable document you own; the HTML is a rendered artifact you can regenerate any time.

// Reopen a saved design, pass the stored JSON back in.
<EmailEditor token="pk_live_..." design={savedDesignJson} />

4Render on your Node backend

For sending, render the design on the server with the backend SDK. It holds a secret server key (sk_live_…) and turns a design into email-safe HTML or MJML, no headless browser required.

// server-side (Node.js), rendering is a pure function, no key needed
import { renderDesign, renderMjml } from "email-craft-sdk";

export function renderEmail(design) {
  const html = renderDesign(design, { fullDocument: true }); // inbox-safe HTML
  const mjml = renderMjml(design);                            // or MJML, if you prefer
  return { html, mjml };
}

5Send it

Hand the rendered HTML to your email service provider (Resend, SendGrid, SES, Postmark, whatever you use). Because the HTML is already email-safe and inlined, it renders consistently across clients.

import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

const { html } = await renderEmail(design);
await resend.emails.send({
  from: "you@yourapp.com", to: user.email, subject: "Welcome!", html,
});