@mailkaro/angular

A white-label drag-and-drop email editor for Angular — a drop-in for angular-email-editor and a developer-friendly Unlayer alternative. The editor loads from a hosted iframe, so no editor code ships in your bundle (~3 KB), and your backend renders send-ready, email-safe HTML + MJML via @mailkaro/sdk.

Install

npm install @mailkaro/angular

Usage

import { Component, ViewChild } from "@angular/core";
import { EmailEditorComponent } from "@mailkaro/angular";

@Component({
  standalone: true,
  imports: [EmailEditorComponent],
  template: `
    <button (click)="save()">Save</button>
    <email-editor #editor token="pk_live_your_key" style="height: 100vh"></email-editor>
  `
})
export class AppComponent {
  @ViewChild("editor") editor!: EmailEditorComponent;

  save() {
    this.editor.editor?.exportHtml(({ design, html }) => {
      // store `design` (JSON) + `html` (email-safe HTML)
    });
  }
}

• Get a publishable pk_live_… token from your MailKaro dashboard (free tier includes the full editor).
• The component.editor handle mirrors angular-email-editor / Unlayer: loadDesign, saveDesign, exportHtml, setMergeTags, …
• Outputs: (load) / (ready) (with the handle) and (updated). An EmailEditorModule is also exported for NgModule apps.

Learn more

• Docs · React + Node guide · Render MJML on the server
• Also available: @mailkaro/editor (React), @mailkaro/vue, @mailkaro/vanilla, @mailkaro/sdk (Node).