Email Builder Angular Library

An Angular 20 compatible email template builder library that helps you create, customize, and manage responsive email templates using Syncfusion UI components.

Features

• Drag and drop email blocks
• Create responsive email templates
• Customize text, images, buttons, dividers, spacers, and social blocks
• Image gallery support
• Template preview support
• MJML-based email generation
• Syncfusion-powered UI components
• Angular 20 support

Installation

Install the package using npm:

npm install mike-email-builder

Install required peer dependencies:

npm install @angular/cdk @syncfusion/ej2-angular-popups @syncfusion/ej2-angular-navigations

Import the required Syncfusion styles in your project:

@import "@syncfusion/ej2-base/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material.css";
@import "@syncfusion/ej2-popups/styles/material.css";
@import "@syncfusion/ej2-navigations/styles/material.css";

Configuration

Import the email builder module and configure it using forRoot().

import { EmailBuilderModule } from 'email-builder';

@NgModule({
  imports: [
    EmailBuilderModule.forRoot({
      apiPath: 'https://api.example.com',
      uploadImagePath: '/upload/image',
      xApiKey: 'YOUR_API_KEY'
    })
  ]
})
export class AppModule {}

Basic Usage

Add the email builder component where you want to display the editor.

<email-builder></email-builder>

The builder will initialize with the default configuration.

Saving Template

You can get the generated email template using the builder service.

import { EmailBuilderService } from 'email-builder';

constructor(
  private emailBuilderService: EmailBuilderService
) {}

saveTemplate() {
  const template = this.emailBuilderService.getTemplate();

  console.log(template);
}

The returned template contains:

• Email structure
• Block configuration
• MJML content
• HTML output

Loading Existing Template

You can load a previously saved template.

loadTemplate() {

  const template = {
    id: 1,
    content: '<mjml>...</mjml>'
  };

  this.emailBuilderService.loadTemplate(template);

}

Preview Email

Open email preview using the builder service.

previewEmail() {

  this.emailBuilderService.preview();

}

The preview supports:

• Desktop view
• Mobile view
• Responsive email rendering

Working With Images

The library provides image gallery support.

Open Image Gallery

this.emailDialogService.openImageGallery();

Select Image

this.emailDialogService.selectImage(
  'https://example.com/image.png'
);

The selected image will automatically update the image block.

Custom Configuration

You can customize available blocks.

Example:

EmailBuilderModule.forRoot({

  blocks: [
    'text',
    'image',
    'button',
    'divider',
    'spacer',
    'social'
  ]

});

Block Types

The builder supports the following blocks:

Text Block

Used for creating text content.

Example:

{
  type: 'text',
  content: 'Welcome to our service'
}

Image Block

Used for adding images.

Example:

{
  type: 'image',
  src: 'https://example.com/logo.png'
}

Button Block

Used for creating CTA buttons.

Example:

{
  type: 'button',
  text: 'Click Here',
  url: 'https://example.com'
}

Divider Block

Used for adding separators.

Example:

{
  type: 'divider'
}

Spacer Block

Used for adding spacing between sections.

Example:

{
  type: 'spacer',
  height: '20px'
}

Social Block

Used for adding social media links.

Example:

{
  type: 'social',
  networks: [
    {
      name: 'facebook',
      url: 'https://facebook.com'
    }
  ]
}

Export HTML Email

Generate final email HTML:

const html =
  this.emailBuilderService.exportHTML();

console.log(html);

The generated HTML can be used directly with email providers.

Export MJML

Generate MJML content:

const mjml =
  this.emailBuilderService.exportMJML();

console.log(mjml);

MJML can be converted into responsive HTML email format.

API Configuration

| Property | Description | | --------------- | ---------------------- | | apiPath | Base API URL | | uploadImagePath | Image upload endpoint | | xApiKey | API authentication key |

Example:

{
  apiPath: "https://api.example.com",
  uploadImagePath: "/images/upload",
  xApiKey: "API_KEY"
}

Events

Subscribe to builder events:

this.emailBuilderService.templateChanged$
.subscribe(template => {

  console.log(template);

});

Available events:

• Template changed
• Block selected
• Image selected
• Template saved

Responsive Mode

The builder automatically supports:

• Desktop email layout
• Tablet layout
• Mobile email layout

Use preview mode to validate responsive behavior before exporting.

Browser Support

Supported browsers:

• Chrome
• Edge
• Firefox
• Safari

License

MIT License