Introducing react-email-craft: A Drop-in Visual Email Template Builder for React

Mailkaro — Sun, 11 Oct 2026 12:00:33 +0000

If you are building a SaaS, CRM, or marketing platform, chances are your users need a way to design custom email templates directly within your application.

Building an in-house visual canvas that exports bulletproof, cross-client HTML (handling Outlook, Apple Mail, Gmail quirks, and nested tables) is an endless maintenance sinkhole. Existing embedded builder providers can often feel heavy, expensive, or complex to embed.

To solve this, we launched react-email-craft, a lightweight, embeddable React email builder SDK designed to drop directly into your modern web apps.

What is react-email-craft?

react-email-craft is an embeddable visual editor component that gives your end-users a clean drag-and-drop experience while outputting production-ready email markup:

Lightweight & Fast: Runs in a sandboxed iframe runtime so your parent bundle stays lean, no editor code ships with your app.
Responsive Preview: Real-time desktop and mobile canvas viewports.
Production-Ready Output: Compiles clean, client-tested email HTML (MJML under the hood) ready to send via Resend, SendGrid, Postmark, or AWS SES.
Familiar API: Drop-in ref methods (loadDesign, saveDesign, exportHtml), migration from react-email-editor / Unlayer is literally one changed import.
Full TypeScript Support: Typed configs, props, and design interfaces out of the box.
Framework siblings: Same editor also ships as vue-email-craft, angular-email-craft, and vanilla-email-craft.

Not sure if it fits? Open the live playground and drag some blocks around, no signup, no install. Or browse 48 ready-made templates to see what your users can start with.

Quick Start

1. Install the package

npm install react-email-craft
# or
pnpm add react-email-craft

2. Embed the Component

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

export default function EmailBuilderView() {
  const emailEditorRef = useRef<MailkaroIframeEditorRef>(null);

  const handleExport = () => {
    emailEditorRef.current?.editor.exportHtml((data) => {
      const { html, design } = data as { html: string; design: unknown };
      // Save the design JSON to your DB and send the HTML via your email API
      console.log("Compiled HTML:", html);
      console.log("Template JSON:", design);
    });
  };

  const handleReady = () => {
    // Editor is initialised; hydrate a saved template if you have one:
    // emailEditorRef.current?.editor.loadDesign(savedDesignJson);
  };

  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <header style={{ padding: "12px 16px", borderBottom: "1px solid #e2e8f0" }}>
        <button onClick={handleExport}>Export Email</button>
      </header>
      <div style={{ flex: 1, minHeight: 0 }}>
        <EmailEditor ref={emailEditorRef} onReady={handleReady} />
      </div>
    </div>
  );
}

That's it, no backend, no account, no token needed to try it. Drag some blocks in, hit "Export Email", and you'll see production-ready HTML in your console.

How It Works

react-email-craft acts as the client-side bridge for the editor engine. The actual builder runs inside a sandboxed iframe hosted on MailKaro's CDN, which keeps your parent bundle tiny and isolates the editor's dependencies from your app.

When you call exportHtml, the editor sends your design JSON to a server-side renderer that compiles it to inbox-safe HTML (built on MJML internally), so you don't have to think about Outlook's VML quirks, Gmail's style stripping, or Apple Mail's dark-mode inversion. Only the design JSON and the pk_live_ token travel to the renderer, no recipient data or custom merge values are sent unless you explicitly pass them.

Paid features (white-labeling, custom blocks, AI assist, Google Drive / S3 integrations) are gated server-side with a pk_live_ publishable token:

<EmailEditor ref={emailEditorRef} token="pk_live_..." onReady={handleReady} />

The free tier gives you the full editor and exportHtml() without any token, you only need one when you want to unlock Pro features. Entitlements never ship to the browser, so your users can't bypass your plan.