Embedding the Unlayer email editor into your Angular application should be simple. However, sometimes you might run into common Angular development pitfalls.
From broken AMP blocks and vanishing custom tools to watermarks that just don’t go away in production, small missteps in setup can snowball into hours of debugging.
If you’re struggling with messy initialization, missing features, or unresponsive exports, chances are your integration isn’t scoped, modularized, or configured correctly.
This guide will break down the most common issues developers face when embedding Unlayer in Angular, with hands-on fixes for each, including:
✅ How to modularly set up Unlayer inside an Angular component
⚙️ Enabling AMP/Carousel functionality the right way
🔁 Loading HTML templates (and when to use the Classic Editor)
🧩 Troubleshooting missing custom tools or watermark issues in production
🛠️ Understanding version management to avoid surprise regressions
Let’s jump into each one and make sure your Unlayer setup is clean, stable, and production-ready.
1. Messy Initialization of Unlayer in Angular
Setting up Unlayer in your Angular app can quickly get out of hand, especially if everything lives inside a single file or the editor logic isn’t modular. This not only clutters your main app file but also makes scaling and reusing the editor component harder.
Things get even trickier when you try to integrate features like AMP, custom tools, or dynamic configurations, especially when the initialization isn’t properly scoped or abstracted.
✅ Fix: Use a dedicated Angular Component for Unlayer
Here’s a step-by-step guide on how to initialize the Unlayer editor properly in your Angular app.
Step 1: Install the Angular wrapper
Install Unlayer Angular Component in your Angular app by executing:
npm install angular-email-editor --save or yarn add angular-email-editor
Step 2: Add the Unlayer editor code
Inside the src/app folder, add the Unlayer Angular component to your app.component.ts file. Full docs are available here: Angular Component
import { Component } from '@angular/core';
import { isPlatformBrowser, CommonModule, NgIf } from '@angular/common';
import { EmailEditorModule } from 'angular-email-editor';
@Component({
selector: 'app-root',
standalone: true,
imports: [EmailEditorModule],
template: `
<email-editor
[options]="editorOptions"
(onLoad)="editorLoaded()"
(onReady)="editorReady($event)">
</email-editor>
`,
})
export class AppComponent {
editorOptions = {
// provide Unlayer parameters here
};
editorLoaded() {
console.log('Editor loaded');
}
editorReady(unlayer: any) {
console.log('Editor is ready', unlayer);
}
}
Step 3: Pass your projectId, displayMode, version, amp, and customJS in the options prop (editorOptions in this example) as shown below
editorOptions = {
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: 'email' as 'email', // replace with "web", or "document", or "popup"
version: 'latest',
};
Step 4: Run your Angular app
Once your editor logic is cleanly encapsulated, your app is easier to maintain and ready for adding more advanced Unlayer features (like AMP and custom tools) without the chaos.
2. AMP or Carousel Block Not Rendering in Angular
You’ve added an AMP-powered carousel block to your email while designing it with Unlayer’s editor, expecting it to deliver a smooth and dynamic user experience. However, nothing renders in the preview or the exported HTML.
This is a common frustration among developers when they’re embedding Unlayer in Angular.
The root cause?
AMP mode isn’t enabled in your Unlayer configuration. Without that flag, the editor quietly skips rendering AMP components, leaving you scratching your head and wasting time figuring out what went wrong.
✅ Fix: Enable AMP in your Unlayer editor configuration
To properly enable AMP (and unlock blocks like Carousel), you need to explicitly pass the amp: true flag inside the editorOptions during initialization.
Here’s how to do it in Angular:
editorOptions = {
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: 'email' as 'email', // replace with "web", or "document", or "popup"
version: 'latest',
amp: true,
};
Also important:
Once AMP is enabled in the config, make sure to toggle the AMP preview mode inside the Unlayer editor UI. Otherwise, AMP blocks like Carousel won’t be visible during design.
Exporting AMP HTML
If you want to export your email with AMP HTML included (for sending or further customization), pass the AMP flag in the exportHtml() method:
unlayer.exportHtml(function (data) {
var json = data.design;
var html = data.html;
var ampHTML = data.amp.html; // extract the HTML with AMP
console.log("Design JSON:", json);
console.log("Design AMP HTML:", ampHTML);
console.log("Design HTML:", html);
}, { amp: true }); // enables AMP in the HTML output
3. Can’t Load Raw HTML Templates into Unlayer Editor
You’ve got an existing HTML email or landing page template ready to go, but when you try loading it into Unlayer, nothing works. That’s because the standard Unlayer editor doesn’t accept raw HTML; it only supports design objects in JSON format.
This limitation becomes a blocker when migrating existing templates into the Unlayer environment for further editing or reuse.
✅ Fix: Use the Classic (Legacy) Editor Mode for raw HTML
To work with raw HTML templates, you’ll need to switch to Unlayer’s Classic (Legacy) editor. This mode allows you to import and edit raw HTML using a WYSIWYG interface.
Here’s what you need to know:
Supports raw HTML import: You can load existing email or landing page HTML directly.
No drag-and-drop: This mode disables Unlayer’s advanced visual editor features (like content blocks and layout components).
Best used for minor edits or migration workflows, not for building new templates from scratch.
📘 Read more: Legacy Templates
4. Blocks Not Rendering or Missing Features? You Might Be Using the Wrong Editor Version
Everything seems correctly set up, but a content block won’t render, or a feature you saw in Unlayer’s docs isn’t available in your editor. Sound familiar?
This usually happens when you’re using the wrong version of the Unlayer editor.
Unlayer offers multiple version modes, and loading an outdated or unstable one can lead to missing functionality, rendering issues, or unpredictable behavior, especially in production environments.
✅ Fix: Use the right version for your environment
Unlayer gives you full control over which version of the editor to load. Picking the right one ensures your integration is both stable and up to date with the features you need.
Here are your options:
latest: Ideal for development and testing. You’ll get access to the newest updates and experimental features—but it may not always be stable.
stable: Recommended for production. It’s the most tested version and minimizes the risk of regressions or bugs.
Specific version (e.g., 1.248.0): Best for locking in a known-good state. This ensures your editor doesn’t unexpectedly change due to upstream updates.
🔧 How to specify your editor version in Angular
Here’s how you can control the editor version in your config:
If you’re using vanilla JS, set the version flag in the unlayer.init() call:
unlayer.init({
id: "editor-container",
projectId: 123456, // replace with project ID with yours
displayMode: "email", // replace with "web", or "document", or "popup"
version: "latest",
});
For Angular users, pass the same config through the options prop:
editorOptions = {
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: 'email' as 'email', // replace with "web", or "document", or "popup"
version: 'latest',
};
💡 Best practice tip
Use latest while developing so you can test new features early. Before going live, switch to stable or a pinned version to avoid surprises from automatic updates.
📘 Read more: Version Management
5. Watermark Still Showing or Premium Features Missing After Upgrading?
You’ve upgraded to a paid Unlayer plan expecting watermark-free emails and premium features, but in production, the watermark still shows, and some features don’t work. Everything runs perfectly on localhost, so it’s tempting to think the problem lies in your code.
But the real issue?
Your production domain isn’t authorized in the Unlayer Console. While Unlayer automatically whitelists localhost for testing, manual domain authorization is required to unlock paid features in live environments.
✅ Fix: Whitelist your production domain in the Unlayer Console
To enable premium features and remove the watermark in production, follow these steps:
Open your app in the browser where the Unlayer editor is embedded.
Right-click > Inspect and go to the Network tab.
Refresh the page and look for a network request called session (or similar).
Under the Payload, find the domain value—this is the exact domain Unlayer needs to recognize.
Go to the Unlayer Console →
Navigate to Settings > Deployment > Allowed Domains.
Paste your production domain in the “Allowed Domains” field and save.
Refresh your app. The watermark should disappear, and all paid features should now be active.
6. Custom Tool Not Showing Up in Unlayer Editor (Angular)
You’ve built a custom tool, bundled it, added it to your Angular app, but it’s nowhere to be seen in the Unlayer editor. No errors, no logs, no clue what’s missing.
This is a common issue in Angular integrations and usually comes down to one of two things:
The tool's JavaScript isn’t properly bundled and hosted, or
It hasn’t been correctly registered using the customJS property.
Without the right setup, Unlayer won’t load your custom code, and nothing appears in the editor UI.
✅ Fix: Bundle, host, and register your custom tool correctly
To get your custom tool working in Angular, follow these steps:
1. Implement the Custom Tool
Implement your custom tool code in a separate JS file.
🔗 Helpful Resources
Want to dive deeper into creating or debugging custom tools in Unlayer? These resources will help:
📘 Unlayer Docs – Create a Custom Tool Step-by-step documentation on how to build, register, and configure your own custom tools in Unlayer. Read the guide →
🧩 Live Example – Simple Custom Tool See a working demo of a basic custom tool and how it integrates with the editor. A great reference if you're just getting started. View the example →
2. Host the JS file publicly
Upload the custom tool JS file to a public URL. You can use:
Your own web server
A CDN
GitHub Pages
Netlify
AWS S3, etc.
3. Register the Tool via customJS
Update your Angular config to register the tool using the customJS property in editorOptions:
editorOptions = {
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: 'email' as 'email', // replace with "web", or "document", or "popup"
version: 'latest',
customJS: “https://yourdomain.com/custom-tool.js”,
};
With proper hosting, and registration in place, your custom tool should now load and display as expected inside the Unlayer editor.
7. Custom Tool Works in Editor but Shows as “Missing” in Exports
You’ve successfully integrated a custom tool into the Unlayer editor, and it renders perfectly during design. But when you export to HTML, PDF, or image, it shows up as “Missing.”
This is a frustrating issue that usually points to two culprits:
The custom tool’s JavaScript file isn’t publicly accessible.
The tool wasn’t registered with proper exporter functions, which are required for exportable formats.
Without these, Unlayer’s server can’t process your custom tool and replaces it with a “Missing” placeholder during export.
✅ Fix: Host the tool publicly and register exporters correctly
To fix this, make sure you cover both requirements:
1. Host the Tool on a Public URL
Ensure your custom tool’s JS file is accessible over the internet via a secure (HTTPS) public URL.
You can host it on:
AWS S3
Netlify
GitHub Pages
Vercel
Any CDN or your own server
Then, pass this URL in the customJS property when initializing the editor and using the export APIs.
Ensure your tool’s registration includes valid exporters for email, web, popup, and document displayModes.
2. Define Exporters in registerTool
When registering your tool in the JS file, make sure you define exporters for each display mode you plan to support (email, web, document, popup).
Unlayer uses exporters to convert tools into exportable content in different formats, such as HTML, PDF, and image. If you skip this step, the server has no idea how to interpret your tool, leading to a “Missing” placeholder.
Wrap Up
From modular setup and AMP configuration to handling versioning, domain whitelisting, and custom tool integration, these common pitfalls can derail even experienced developers if overlooked.
By following the solutions outlined above, you’ll be better equipped to build a clean, scalable, and fully functional Unlayer integration in your Angular app.
If you’re facing issues we haven’t covered here—or need help with other Angular development common pitfalls—feel free to drop a comment or reach out to our customer support team. We’re here to help!
