Angular Email Template Builder with MJML Integration

Create perfect responsive emails with our drag & drop Angular builders. Powered by MJML for flawless rendering in all email clients, including Outlook.

View Themes

100%

Email Client Support

5

UI Frameworks

4.9/5

User Rating

MJML

Powered

Powerful Features for Modern Email Development

Everything you need to create stunning, responsive emails

Visual Builder

Drag & drop interface for building emails with real-time preview

MJML Integration

Perfect email rendering across all clients with MJML's robust framework

Multiple UI Frameworks

Support for Tailwind, Material, PrimeNG, Bootstrap, and Bulma frameworks

Dark Mode Support

Built-in dark mode support for modern email experiences

TypeScript Support

Full TypeScript support with type-safe templates and components

Export Options

Export to HTML, MJML, or save as reusable templates

How It Works

Create, convert, and deploy email templates with ease. Our solution combines the power of Angular with the simplicity of drag & drop.

1

Create Email Template

Design beautiful email templates using our intuitive Angular application. The drag & drop interface makes it easy for your customers to create professional-looking emails without coding.

2

Convert to HTML

Transform your template into optimized HTML with a single click. Choose between manual conversion or programmatic autosave to fit your workflow.

3

Ready to Use

Your email template is now ready for deployment! The converted HTML is fully responsive and optimized for all major email clients.

Additional Features

Optimized Angular bundle size for better performance
Node.js-based converter with extended functionality
Experimental MJML to object conversion for responsive emails
Open-source converter for complete customization

Choose Your UI Framework

Compare our email builder themes and find the perfect fit for your project

UI Framework	Key Features	Best For
Tailwind Free & Open Source Free and open-source email builder with utility-first approach	Utility-first Classes Dark Mode Support Custom Colors	Modern Development
Material Professional email builder using Angular Material components	Material Design Components Custom Theming System Interactive Form Elements	Enterprise Applications
PrimeNG Feature-rich email builder with enterprise-grade components	Rich UI Component Library DataTable Integration Advanced Form Controls	Data-Rich Applications
Bootstrap In Development Familiar UI with powerful email development features	Bootstrap 5 Grid System Responsive Components RTL Support	Rapid Development
Bulma In Development Modern email builder with clean, intuitive design	Flexbox Based Grid Modular Architecture CSS Variables	Modern Startups

Need a Different UI Framework?

Don't see your preferred UI framework? We can create a custom email builder theme tailored to your specific needs.

Request Custom Framework

Reactive State Management

Harness the power of Angular Signals for reactive, efficient state management in your email builder.

View Documentation

Reactive State Management typescript

      
      
import { injectIIPEmail } from '@wlocalhost/ngx-email-builder';

@Component({ ... })
export class AppComponent {
  readonly currentEmail = injectIIPEmail();

  #effect = effect(() => {
    // This will log the current email value whenever it changes
    console.log(this.currentEmail.value());
  })

  setEmail(email: Email) {
    this.currentEmail.set(email);
  }
}

Open Source MIT License

Technical Specifications

Angular Requirements

Angular 19.0.0 or higher
@angular/cdk
@angular/localize
@angular/ssr
mjml
No other 3rd party dependencies

Production Ready

100% Email Client Compatibility
Responsive by Default
Real-time Preview
Export to HTML
Export to MJML
Export/Import JSON

Go Wild, Skip the UI!

Build powerful emails with just a few lines of code. No UI required.

Programmatically Create Complex Email Structures typescript

      
      
import { injectIIPEmail } from '@wlocalhost/ngx-email-builder';

@Component({ ... })
export class AppComponent {
  readonly currentEmail = injectIIPEmail();

  async createMyNewsletter() {
    this.currentEmail.options({
      name: 'My Newsletter',
      previewText: 'Welcome to my newsletter',
    });
    const structure = this.currentEmail.structures.add('cols_1');
    this.currentEmail.blocks.add(structure, 0, 0, {
      type: 'text',
      context: { innerText: "Some newsletter content" },
    });
    this.currentEmail.blocks.add(structure, 0, 1, {
      type: 'social',
      context: { networks: [{ name: 'twitter', link: 'https://twitter.com/wlocalhost' }] },
    });

    const { html, mjml, errors } = await lastValueFrom(
      this.currentEmail.convert(),
      {
        defaultValue: {
          html: '',
          mjml: '',
          errors: [],
        },
      }
    );

    if (errors.length) {
      console.error(errors);
    } else {
      console.log(html); // Rendered HTML
      console.log(mjml); // MJML source code
    }
  }
}

Ready to Build Perfect Emails?

Start creating responsive, beautiful emails that work across all email clients. Choose your framework and begin building today.

View Themes