angular-email-craft

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 email-craft-sdk.

Install

npm install angular-email-craft

Usage

import { Component, ViewChild } from "@angular/core";
import { EmailEditorComponent } from "angular-email-craft";

@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, …
• Exports called without a callback return a promise: const { html } = await editor.exportHtml(). registerCallback takes Unlayer's image (upload; done({ error }) on failure), selectImage (your own image library) and previewHtml (change what Preview shows).
• Unlayer's displayConditions option and setDisplayConditions work (a row picker; the chosen before / after wrap the row in the export), and so does features.textEditor.customButtons (onAction({ text }, done) runs on your page).
• Custom tools: editor.registerTool({ name, label, options, values, renderer: { Viewer: editor.createViewer({ render }), exporters: { email } } }) (Unlayer's call, e.g. in (ready)). The tool shows in the Content panel; its code runs on your page and each block keeps its exported HTML, so exports do not wait for it. Tools are registered again when a changed input re-mounts the editor. See Custom tools.
• Outputs: (load) / (ready) (with the handle), (updated), and (error) when the editor is not running as it was set up ({ code, message }: invalid_embed_token, domain_not_allowed, token_expired or runtime_unreachable (the editor then runs on the free plan), or editor_not_started (the frame did not answer in 20 seconds: a wrong embedUrl, or the frame was refused)). An EmailEditorModule is also exported for NgModule apps.
• Inputs: token, embedUrl, runtimeUrl, apiBaseUrl, project, displayMode (email | web | popup | document), mergeTags, design, minHeight, fonts, inboxPreview (false hides the Gmail / Apple Mail preview), connectorHeaders, s3, googleDrive, locale, and onImageUpload (a function that uploads in your app and resolves { url, alt? }). Changing token, displayMode, inboxPreview, fonts or another mount-time input re-mounts the editor; mergeTags updates live.
• The package is published with Angular partial compilation (Angular 17 to 22, AOT and JIT). Server-side rendering is safe: the editor mounts only in the browser.

Building a PDF, letter, landing page, or popup

displayMode picks the canvas type: "email" (default, email-width), "document" (US Letter, use this for PDFs and printed letters), "web" (landing pages), "popup" (narrow modals). For PDFs or letters you also want [inboxPreview]="false" so the Gmail / Apple Mail preview strip is hidden.

<email-editor token="pk_live_..." displayMode="document" [inboxPreview]="false"></email-editor>

Learn more

• Docs · React + Node guide · Render MJML on the server
• Also available: react-email-craft (React), vue-email-craft, vanilla-email-craft, email-craft-sdk (Node).