Angular Quickstart

Get a drag-and-drop email editor running in Angular in under 2 minutes.

Prerequisites

You need an editorKey from the Pexelize Dashboard. This authenticates your editor instance.

Step 1: Install

npm install @pexelize/angular-editor

Step 2: Import the module

Standalone (Angular 14+)

Import the component directly in your standalone component:

src/app/email-editor/email-editor.component.ts

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK } from '@pexelize/angular-editor';

@Component({
  selector: 'app-email-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <div style="padding: 8px">
      <button (click)="handleExportHtml()">Export HTML</button>
    </div>
    <pexelize-editor
      #editor
      editorKey="YOUR_EDITOR_KEY"
      editorMode="email"
      height="600px"
      (ready)="onReady($event)"
      (change)="onChange($event)"
    ></pexelize-editor>
  `,
})
export class EmailEditorComponent {
  @ViewChild('editor') editorComponent!: PexelizeEditorComponent;

  onReady(editor: PexelizeSDK): void {
    console.log('Editor is ready', editor);
  }

  onChange(data: { design: any; type: string }): void {
    console.log('Design changed:', data.type);
  }

  async handleExportHtml(): Promise<void> {
    const html = await this.editorComponent.exportHtml();
    console.log('Exported HTML:', html);
  }
}

NgModule

Import PexelizeEditorModule in your module:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PexelizeEditorModule } from '@pexelize/angular-editor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, PexelizeEditorModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Then use <pexelize-editor> in any component within that module.

Replace placeholder

Replace YOUR_EDITOR_KEY with the editor key from your Pexelize Dashboard.

You should see a drag-and-drop email editor with a toolbar on the right, content blocks on the left, and a canvas in the center.

Step 3: Export HTML

The component exposes SDK methods directly. Access them via @ViewChild:

async handleExportHtml(): Promise<void> {
  const html = await this.editorComponent.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
}

Save and load designs

// Save the current design
handleSave(): void {
  this.editorComponent.saveDesign((design) => {
    // Send design JSON to your backend
    this.http.post('/api/designs', design).subscribe();
  });
}

// Load a previously saved design
handleLoad(design: any): void {
  this.editorComponent.loadDesign(design);
}

Available outputs

Output	Payload	Description
(ready)	PexelizeSDK	Editor initialized and interactive
(load)	unknown	Design loaded into the canvas
(change)	{ design, type }	User modified the design
(error)	Error	Initialization or runtime error
(commentAction)	CommentAction	Comment created/edited/resolved (requires collaboration)

Direct SDK access

For advanced use cases, call getEditor() to get the underlying PexelizeSDK instance:

const sdk = this.editorComponent.getEditor();
sdk?.showPreview('mobile');

Next steps

• Load and save designs — persist user work to your backend
• Customize appearance — theme, colors, dark mode
• Angular reference — full input/output and method API