Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

Angular Component

Unlayer editor is also available as a Angular component.

Installation

The easiest way to use it is to install it from npm and include it in your own Angular build process.

Npm

npm install angular-email-editor --save

Yarn

yarn add angular-email-editor

Usage

Next, you'll need to import the Email Editor module in your app's module.

app.module.ts

import { EmailEditorModule } from 'angular-email-editor';

@NgModule({
  imports: [ EmailEditorModule ],
});

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-email-editor';

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;
  
  editorLoaded() {
    // load the design json here
    // this.emailEditor.editor.loadDesign({});
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data) => console.log('exportHtml', data));
  }
}

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor (loaded)="editorLoaded($event)"></email-editor>
</div>

Methods

MethodParamsDescription
loadDesign Object dataTakes the design JSON and loads it in the editor
saveDesign Function callbackReturns the design JSON in a callback function
exportHtml Function callbackReturns the design HTML and JSON in a callback function

See the example source for a reference implementation.

Properties

NameTypeDescriptionDefault Value
minHeightStringMinimum height to initialize the editor with500px
optionsObjectOptions passed to the Unlayer editor instance{}
toolsObjectConfiguration for the built-in and custom tools{}
appearanceObjectConfiguration for appearance and theme{}
loadedFunctionCalled when the editor has finished loading
projectIdIntegerUnlayer project ID (optional)

Example

See the example source for a reference implementation.

Updated 4 months ago


Angular Component


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.