dragble-angular-editor

AI-powered Angular component for building email templates with drag-and-drop. Embed a full-featured AI-powered email editor into your Angular app — create responsive HTML emails, newsletters, transactional email templates, and email marketing campaigns visually without writing code.

Dragble is a modern AI-powered email builder and email template editor that lets your users design professional emails with a visual drag-and-drop interface.

Website | Documentation | Dashboard

Features

• Drag-and-drop email template builder with 20+ content blocks
• Responsive HTML email output compatible with all major email clients
• Newsletter editor with merge tags, dynamic content, and display conditions
• Visual email designer — no HTML/CSS knowledge required for end users
• Export to HTML, JSON, image, PDF, or ZIP
• Built-in image editor, AI content generation, and collaboration tools
• Full TypeScript support
• Works with NgModule and standalone components (Angular 14+)

Installation

The SDK is loaded from CDN automatically — you only need to install the Angular package.

npm install dragble-angular-editor

yarn add dragble-angular-editor

pnpm add dragble-angular-editor

Editor Key

An editorKey is required to use the editor. You can get one by creating a project on the Dragble Developer Dashboard.

Usage

NgModule

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { DragbleEditorModule } from "dragble-angular-editor";
import { AppComponent } from "./app.component";

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

import { Component, ViewChild } from "@angular/core";
import {
  DragbleEditorComponent,
  DesignJson,
  DragbleSDK,
} from "dragble-angular-editor";

@Component({
  selector: "app-email-editor",
  template: `
    <div class="toolbar">
      <button (click)="handleSave()">Save</button>
      <button (click)="handleExport()">Export HTML</button>
    </div>
    <dragble-editor
      #editor
      [editorKey]="'YOUR_EDITOR_KEY'"
      [editorMode]="'email'"
      [height]="800"
      (ready)="onReady($event)"
      (change)="onChange($event)"
    ></dragble-editor>
  `,
})
export class EmailEditorComponent {
  @ViewChild("editor") editor!: DragbleEditorComponent;

  onReady(sdk: DragbleSDK): void {
    console.log("Editor ready!", sdk);
  }

  async onChange(data: { design: DesignJson; type: string }): Promise<void> {
    // Design JSON is available directly from the callback
    console.log("Design JSON:", data.design);

    // To get HTML, call exportHtml on the editor
    const html = await this.editor.exportHtml();
    console.log("HTML:", html);
  }

  async handleSave(): Promise<void> {
    const design = await this.editor.getDesign();
    console.log("Design:", design);
  }

  async handleExport(): Promise<void> {
    const html = await this.editor.exportHtml();
    console.log("HTML:", html);
  }
}

Standalone Component (Angular 17+)

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";

@Component({
  selector: "app-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      [editorKey]="'YOUR_EDITOR_KEY'"
      [editorMode]="'email'"
      (ready)="onReady($event)"
    ></dragble-editor>
  `,
})
export class EditorComponent {
  @ViewChild("editor") editor!: DragbleEditorComponent;

  onReady(): void {
    console.log("Editor ready!");
  }
}

Inputs

Input	Type	Default	Description
editorKey	string	required	Editor key for authentication
design	DesignJson | ModuleData | null	undefined	Initial design to load
editorMode	EditorMode	"email"	"email", "web", or "popup"
popup	PopupConfig	undefined	Popup configuration
contentType	EditorContentTypeValue	undefined	Set to "module" for single-row mode
ai	AIConfig	undefined	AI features configuration
locale	string	undefined	UI locale
translations	Record<string, Record<string, string>>	undefined	Translation overrides
textDirection	TextDirection	undefined	"ltr" or "rtl"
language	Language	undefined	Template language
appearance	AppearanceConfig	undefined	Visual customization
tools	ToolsConfig	undefined	Tool enable/disable
customTools	DragbleToolConfig[]	undefined	Custom tool definitions
features	FeaturesConfig	undefined	Feature toggles
fonts	FontsConfig	undefined	Fonts configuration
bodyValues	Record<string, unknown>	undefined	Body-level values
header	unknown	undefined	Locked header row
footer	unknown	undefined	Locked footer row
mergeTags	MergeTagsConfig	undefined	Merge tags configuration
specialLinks	SpecialLinksConfig	undefined	Special links configuration
modules	Module[]	undefined	Custom modules
displayConditions	DisplayConditionsConfig	undefined	Display conditions
editor	EditorBehaviorConfig	undefined	Editor behavior settings
customCSS	string[]	undefined	Custom CSS URLs
customJS	string[]	undefined	Custom JS URLs
height	string | number	"600px"	Editor height
minHeight	string | number	"600px"	Minimum height
options	Partial<EditorOptions>	undefined	Additional editor options
callbacks	Omit<DragbleCallbacks, ...>	undefined	SDK callbacks

| collaboration | boolean \| CollaborationFeaturesConfig | undefined | Collaboration settings | | user | UserInfo | undefined | Current user info | | designMode | "edit" \| "live" | undefined | Template permissions mode |

Outputs

Output	Payload Type	Description
ready	DragbleSDK	Emitted when the editor is ready
load	unknown	Emitted when a design is loaded
change	{ design: DesignJson; type: string }	Emitted on every design change
error	Error	Emitted when an error occurs
commentAction	CommentAction	Emitted on comment events

Methods

Access methods via @ViewChild:

@ViewChild('editor') editor!: DragbleEditorComponent;

Design

Method	Returns	Description
loadDesign(design, options?)	void	Load a design
loadBlank(options?)	void	Load a blank design
getDesign()	Promise	Get the current design

Export

Method	Returns	Description
exportHtml(options?)	Promise<string>	Export as HTML
exportJson()	Promise<DesignJson>	Export as JSON
exportPlainText()	Promise<string>	Export as plain text
exportImage(options?)	Promise<ExportImageData>	Export as image
exportPdf(options?)	Promise<ExportPdfData>	Export as PDF
exportZip(options?)	Promise<ExportZipData>	Export as ZIP

Configuration

Method	Returns	Description
setMergeTags(config)	void	Update merge tags
setSpecialLinks(config)	void	Update special links
setModules(modules)	void	Update custom modules
setFonts(config)	void	Update fonts
setBodyValues(values)	void	Update body values
setToolsConfig(config)	void	Update tools config
setAppearance(config)	void	Update appearance
setEditorMode(mode)	void	Change editor mode
setEditorConfig(config)	void	Update editor config
setLocale(locale, translations?)	void	Change locale
setTextDirection(direction)	void	Set text direction
setLanguage(language)	void	Set template language
setDisplayConditions(config)	void	Update display conditions
setOptions(options)	void	Update editor options
setBrandingColors(config)	void	Update branding colors

Editor Actions

Method	Returns	Description
save()	void	Trigger a save event
undo()	void	Undo last action
redo()	void	Redo last action
canUndo()	Promise<boolean>	Check if undo is available
canRedo()	Promise<boolean>	Check if redo is available
showPreview(device?)	void	Show design preview
hidePreview()	void	Hide preview
audit(options?)	Promise<AuditResult>	Run design audit

Tools & Widgets

Method	Returns	Description
registerTool(config)	Promise	Register a custom tool
unregisterTool(id)	Promise	Unregister a tool
getTools()	Promise	Get registered tools
createWidget(config)	Promise	Create a widget
removeWidget(name)	Promise	Remove a widget

Events

Method	Returns	Description
addEventListener(event, callback)	() => void	Subscribe to an event; returns unsubscribe function
removeEventListener(event, callback)	void	Remove an event listener

TypeScript

All types are exported from dragble-angular-editor:

import type {
  DesignJson,
  EditorMode,
  DragbleSDK,
  MergeTagsConfig,
  AppearanceConfig,
  FeaturesConfig,
  ToolsConfig,
  FontsConfig,
} from "dragble-angular-editor";

Contributing

See CONTRIBUTING.md for guidelines on how to contribute to this project.

License

MIT