DEV Community: Mailkaro

Add a drag and drop email builder to your Angular app (full tutorial)

Mailkaro — Sun, 25 Oct 2026 03:36:07 +0000

Every SaaS eventually hears the same request: "Can we design our own emails inside your app?"

Most teams either spend months building an editor, or pay per seat for one they can't control.

In this post we add a complete drag and drop email builder to a fresh Angular app, step by step. It's the written version of a 9 minute video where every step is filmed for real, nothing cut.

🎥 Watch the video: https://www.linkedin.com/feed/update/urn:li:activity:7519630925253615616

What you need: an Angular 17 to 22 app (ours is a fresh ng new on Angular 22) and Node 18 or newer.

1. Create an account and a token

Sign up at mailkaro.com. Sign in is passwordless: every sign in uses a one time code sent to your email, and an account can only be signed in on one device at a time.

Then open Embed & API, click Generate new token, and choose which features the token exposes, for example:

Save, export and history
Uploads and assets
AI Assistant

You get two keys:

Key	Starts with	Where it goes
Publishable	`pk_live_`	your frontend
Secret	`sk_live_`	your server only, never in frontend code

2. Install and render

npm install angular-email-craft

Put the publishable key in src/environments/environment.ts:

export const environment = {
  mailkaroKey: "pk_live_...",
};

Then render the editor. It's one standalone component:

import { Component } from "@angular/core";
import { EmailEditorComponent } from "angular-email-craft";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  imports: [EmailEditorComponent],
  template: `<email-editor [token]="token" minHeight="100vh" />`,
})
export class App {
  token = environment.mailkaroKey;
}

That's the full editor: the canvas in the middle, blocks and settings on the right.

Tip: the starter app.html is a placeholder page. Use the inline template above (or empty app.html) so the editor gets the whole page.

NgModule app? Import EmailEditorModule from angular-email-craft instead.

3. Save and reopen a design

The (ready) output hands you the editor. Add two buttons. exportHtml gives you the design (JSON describing everything on the canvas) and the HTML. Store the design: that's what reopens the email later.

import { Component } from "@angular/core";
import { EmailEditorComponent, type EditorApi } from "angular-email-craft";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  imports: [EmailEditorComponent],
  template: `
    <button (click)="save()">Save</button>
    <button (click)="open()">Open</button>
    <email-editor [token]="token" minHeight="90vh" (ready)="editor = $event" />
  `,
})
export class App {
  token = environment.mailkaroKey;
  editor?: EditorApi;

  save() {
    this.editor?.exportHtml(({ design, html }) => {
      localStorage.setItem("design", JSON.stringify(design)); // your database in a real app
    });
  }

  open() {
    const saved = localStorage.getItem("design");
    if (saved) this.editor?.loadDesign(JSON.parse(saved));
  }
}

Called without a callback, exportHtml() returns a promise, so const { design, html } = await this.editor!.exportHtml() works too.

4. Merge tags

Each merge tag has a label, the value your email service fills in, and a sample:

mergeTags = {
  first_name: { label: "First name", value: "{{first_name}}", sample: "Alex" },
  company: { label: "Company", value: "{{company}}", sample: "Acme" },
};

<email-editor [token]="token" [mergeTags]="mergeTags" minHeight="90vh" (ready)="editor = $event" />

In a text block, your users pick Insert merge tag. The tag lands as a labelled pill, so they can see exactly where each field goes.

5. Render email-safe HTML on your server

Sending needs finished HTML, and you can make it on your own server from the saved design. In a server folder next to your app:

npm install email-craft-sdk express

// server/index.mjs
import express from "express";
import { renderDesign, renderMjml } from "email-craft-sdk";

const app = express();
app.use(express.json({ limit: "2mb" }));

app.post("/render", (req, res) => {
  const html = renderDesign(req.body.design, { fullDocument: true });
  const mjml = renderMjml(req.body.design);
  res.json({ html, mjml });
});

app.listen(3001, () => console.log("Server on http://localhost:3001"));

There's no headless browser, no network call, and no key needed. It runs inside your backend.

6. Decide what each user can do

The plan unlocks when both keys work together: the publishable key in the browser, and the secret key on your server. Add one route:

import { Mailkaro } from "email-craft-sdk";

const mailkaro = Mailkaro.fromEnv(); // reads MAILKARO_SERVER_KEY (sk_live_...)

app.get("/mailkaro/embed-runtime", async (_req, res) => {
  res.json(await mailkaro.resolveRuntime());
});

Point the editor at it with runtimeUrl:

<email-editor
  [token]="token"
  runtimeUrl="/mailkaro/embed-runtime"
  [mergeTags]="mergeTags"
  minHeight="90vh"
  (ready)="editor = $event" />

In development, let the Angular dev server forward these routes to Node, so they run on the same origin as your app. Create proxy.conf.json:

{
  "/mailkaro": { "target": "http://localhost:3001" },
  "/render": { "target": "http://localhost:3001" }
}

and point ng serve at it in angular.json (under serve):

"options": { "proxyConfig": "proxy.conf.json" }

Your server answers, and the secret key never leaves it.

7. Your own storage and your own AI

Add your S3 bucket and AI provider key to the server's .env, then three small routes:

import multer from "multer";

app.post("/mailkaro/ai", async (req, res) => {
  res.json(await mailkaro.ai(req.body.method, req.body.input));
});

const upload = multer();
app.post("/mailkaro/upload", upload.single("file"), async (req, res) => {
  res.json(await mailkaro.uploadAsset({
    buffer: req.file.buffer,
    filename: req.file.originalname,
    contentType: req.file.mimetype,
    scopeId: "demo", // your tenant or workspace id
  }));
});

app.get("/mailkaro/assets", async (_req, res) => {
  res.json(await mailkaro.listAssets({ scopeId: "demo" }));
});

Now the image library has an Amazon S3 tab with your bucket's images, and new uploads go straight into it. The AI assistant runs on your own key and builds emails right on the canvas. The keys stay on the server, and the browser never sees them.

Already on angular-email-editor?

Install angular-email-craft and change the import:

// before
import { EmailEditorComponent } from "angular-email-editor";
// after
import { EmailEditorComponent } from "angular-email-craft";

Your template, your (loaded) / (ready) handlers and your exportHtml / loadDesign calls keep working, and every design you saved with Unlayer opens as it is.

The whole loop

One token
One standalone component
Two calls to save and reopen
One function to render on your server
One route that decides what each user can do

The free plan covers the editor itself. Pro unlocks storage, AI and more, and the first month is free with no card.

Try it without signing up: mailkaro.com/demo
Angular docs: mailkaro.com/docs/angular
npm: angular-email-craft

Next in the series: the same setup in Vue and plain JavaScript.

Which one does your product need first: the email editor, or the AI writing the emails? Tell me in the comments.

Add a drag and drop email builder to your React app (full tutorial)

Mailkaro — Thu, 22 Oct 2026 19:23:12 +0000

Your users want to design their own emails. You don't want to spend months building an editor.

In this post we add a complete drag and drop email builder to a fresh Vite + React app, step by step. It's the written version of a 9 minute video where every step is filmed for real.

🎥 Watch the video: https://www.linkedin.com/feed/update/urn:li:activity:7519114078284562432

What you need: a React app (ours is a fresh Vite app) and Node 18 or newer.

1. Create an account and a token

Sign up at mailkaro.com. Sign in is passwordless: every sign in uses a one time code sent to your email, and an account can only be signed in on one device at a time.

Then open Embed & API, click Generate new token, and choose which features the token exposes, for example:

Save, export and history
Uploads and assets
AI Assistant

You get two keys:

Key	Starts with	Where it goes
Publishable	`pk_live_`	your frontend
Secret	`sk_live_`	your server only, never in frontend code

2. Install and render

npm install react-email-craft

Put the publishable key in .env.local:

VITE_MAILKARO_KEY=pk_live_...

Then render the editor:

import EmailEditor from "react-email-craft";

export default function App() {
  return (
    <EmailEditor
      token={import.meta.env.VITE_MAILKARO_KEY}
      style={{ height: "100vh" }}
    />
  );
}

That's the full editor: the canvas in the middle, blocks and settings on the right.

Tip: Vite's starter index.css centres everything in a narrow box. Replace it with body { margin: 0; } so the editor gets the whole page.

Next.js: add "use client" at the top of the file, or import the editor with ssr: false.

3. Save and reopen a design

Add a ref and two buttons. exportHtml hands you the design (JSON describing everything on the canvas) and the HTML. Store the design: that's what reopens the email later.

import { useRef } from "react";
import EmailEditor from "react-email-craft";

export default function App() {
  const ref = useRef(null);

  const save = () =>
    ref.current.editor.exportHtml(({ design, html }) => {
      localStorage.setItem("design", JSON.stringify(design)); // your database in a real app
    });

  const open = () => {
    const saved = localStorage.getItem("design");
    if (saved) ref.current.editor.loadDesign(JSON.parse(saved));
  };

  return (
    <>
      <button onClick={save}>Save</button>
      <button onClick={open}>Open</button>
      <EmailEditor ref={ref} token={import.meta.env.VITE_MAILKARO_KEY} style={{ height: "90vh" }} />
    </>
  );
}

4. Merge tags

Each merge tag has a label, the value your email service fills in, and a sample:

<EmailEditor
  ref={ref}
  token={import.meta.env.VITE_MAILKARO_KEY}
  mergeTags={{
    first_name: { label: "First name", value: "{{first_name}}", sample: "Alex" },
    company: { label: "Company", value: "{{company}}", sample: "Acme" },
  }}
/>

In a text block, your users pick Insert merge tag. The tag lands as a labelled pill, so they can see exactly where each field goes.

5. Render email-safe HTML on your server

Sending needs finished HTML, and you can make it on your own server from the saved design:

npm install email-craft-sdk express

import express from "express";
import { renderDesign, renderMjml } from "email-craft-sdk";

const app = express();
app.use(express.json({ limit: "2mb" }));

app.post("/render", (req, res) => {
  const html = renderDesign(req.body.design, { fullDocument: true });
  const mjml = renderMjml(req.body.design);
  res.json({ html, mjml });
});

app.listen(3001, () => console.log("Server on http://localhost:3001"));

There's no headless browser, no network call, and no key needed. It runs inside your backend.

6. Decide what each user can do

The plan unlocks when both keys work together: the publishable key in the browser, and the secret key on your server. Add one route:

import { Mailkaro } from "email-craft-sdk";

const mailkaro = Mailkaro.fromEnv(); // reads MAILKARO_SERVER_KEY (sk_live_...)

app.get("/mailkaro/embed-runtime", async (_req, res) => {
  res.json(await mailkaro.resolveRuntime());
});

Point the editor at it with runtimeUrl:

<EmailEditor
  ref={ref}
  token={import.meta.env.VITE_MAILKARO_KEY}
  runtimeUrl="/mailkaro/embed-runtime"
  /* ...mergeTags, style */
/>

In development, let Vite forward these routes to Node, so they run on the same origin as your app:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: { "/mailkaro": "http://localhost:3001", "/render": "http://localhost:3001" },
  },
});

Your server answers, and the secret key never leaves it.

7. Your own storage and your own AI

Add your S3 bucket and AI provider key to the server's .env, then three small routes:

import multer from "multer";

app.post("/mailkaro/ai", async (req, res) => {
  res.json(await mailkaro.ai(req.body.method, req.body.input));
});

const upload = multer();
app.post("/mailkaro/upload", upload.single("file"), async (req, res) => {
  res.json(await mailkaro.uploadAsset({
    buffer: req.file.buffer,
    filename: req.file.originalname,
    contentType: req.file.mimetype,
    scopeId: "demo", // your tenant or workspace id
  }));
});

app.get("/mailkaro/assets", async (_req, res) => {
  res.json(await mailkaro.listAssets({ scopeId: "demo" }));
});

The whole loop

One token
One component
Two calls to save and reopen
One function to render on your server
One route that decides what each user can do

The free plan covers the editor itself. Pro unlocks storage, AI and more, and the first month is free with no card.

Try it without signing up: mailkaro.com/demo
Docs: mailkaro.com/docs

Next in the series: the same setup in Angular, Vue and plain JavaScript.

We built an embeddable drag-and-drop email editor for React

Mailkaro — Wed, 21 Oct 2026 05:44:33 +0000

"Can I design my own emails in your app?"

If you build a SaaS product, a customer has probably asked you this. We kept running into it, and every time we had two options: build an email editor ourselves and lose months, or embed someone else's and pay extra just to put our own logo on it.

So we built the editor we wished we'd had. It's called MailKaro.

🎥 Watch the 2-minute launch video: https://lnkd.in/p/dGitG93i

What it is

MailKaro is a drag-and-drop email builder you embed in your own product. Your users get blocks, a live preview, merge tags, and a library of starter templates, so nobody starts from a blank page.

Adding it takes one component

npm install react-email-craft

import EmailEditor from "react-email-craft";

export function EmailBuilder() {
  return <EmailEditor token="pk_live_xxx" style={{ height: "80vh" }} />;
}

That's the whole integration. There are also packages for Vue, Angular and plain JavaScript.

Already using react-email-editor?

Change one import, and your existing designs still load:

- import EmailEditor from "react-email-editor";
+ import EmailEditor from "react-email-craft";

No rewrite, no migration project.

It stays yours

Emails render on your own server: renderDesign(design) returns email-safe HTML and renderMjml(design) returns MJML. They're pure functions, with no headless browser.
Images go to your own S3 bucket.
AI runs on your own key.
Secret keys never reach the browser. The frontend only gets a publishable key.

Pricing

The free plan includes the full editor. Pro is $60 a month and adds white-label (your logo), custom themes and CSS, real-time collaboration, saved versions and 5 embed tokens. The first month is free, no credit card.

Try it

Live demo, no sign-up: https://mailkaro.com/demo
Starter templates: https://mailkaro.com/templates
Docs and pricing: https://mailkaro.com

I'd love feedback from anyone who has had to build or embed an email editor. What was the hardest part for you?

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.

DEV Community: Mailkaro

Add a drag and drop email builder to your Angular app (full tutorial)

1. Create an account and a token

2. Install and render

3. Save and reopen a design

4. Merge tags

5. Render email-safe HTML on your server

6. Decide what each user can do

7. Your own storage and your own AI

Already on angular-email-editor?

The whole loop

Add a drag and drop email builder to your React app (full tutorial)

1. Create an account and a token

2. Install and render

3. Save and reopen a design

4. Merge tags

5. Render email-safe HTML on your server

6. Decide what each user can do

7. Your own storage and your own AI

The whole loop

We built an embeddable drag-and-drop email editor for React

What it is

Adding it takes one component

Already using react-email-editor?

It stays yours

Pricing

Try it

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

What is react-email-craft?

Quick Start

1. Install the package

2. Embed the Component

How It Works

Links