Integration architecture
An embedded email editor with a clear product boundary
Embed visual email authoring while your application controls identity, permissions, templates, assets, approvals, and delivery.
Published on npm
Version 0.2.2 · Install from npm or review the source on GitHub.
npm install @maillayers/{react,angular,vue,svelte}-email-editorProduction integration
Content, assets, security, and lifecycle
A useful embedded email editor is more than a mounted component. Plan the persistence and trust boundaries before connecting it to customer data.
Editor data methods
Use getHtml() for a sendable snapshot and getJson() for structured editor state. Call reload() only when staged content or configuration should start a new iframe handshake; use ready, load, change, save, and status callbacks for normal updates.
Assets
Implement upload, list, and delete handlers against storage owned by your application. Validate file type and size on the server, authorize each tenant-scoped object, return HTTPS URLs, and treat delete as an authenticated operation.
API keys and allowed domains
Use a browser SDK key only from an exact configured origin. Keep privileged secrets on your server, issue scoped embed tokens after authenticating the user, and do not treat iframe messages as trusted until origin and payload validation pass.
Multiple instances
Give each mounted editor stable state and separate callbacks. Avoid reusing one imperative ref across instances, and unmount inactive editors when tabs or routes no longer need them so listeners and iframe resources are released.
Performance
Reserve editor height to prevent layout shift, defer mounting until the authoring UI is needed, and show a stable loading fallback. Avoid remounting the iframe for ordinary form-state changes; prefer events and staged reloads.
Troubleshooting
If the editor does not become ready, verify the allowed origin, browser key, embed-token lifetime, editor URL, and Content Security Policy. For missing saves, inspect callback errors and confirm the host persistence request succeeds independently of the iframe.
Integration
Separate authoring from application authority
- 01
Your backend authenticates users, selects the permitted tenant/project, and issues any short-lived managed-editor token.
- 02
The browser integration validates its SDK license and embedding domain before enabling the editor surface.
- 03
Your application receives template changes and HTML exports, stores them, and decides when and how email is tested or sent.
Relevant capabilities
What this integration actually supports
Product boundary: MailLayers is the hosted editing surface, not an authentication provider, asset store, approval engine, ESP, or email delivery service. Each framework SDK is a lightweight iframe wrapper — not an in-process editor core.
Engineering articles
Read implementation notes about editor security, persistence, asset workflows, and framework-specific patterns.
Browse the MailLayers blogFAQ
Questions specific to this integration
Does MailLayers send email?
No. It exports editor state and HTML; your application owns testing and delivery.
Where are templates stored?
In storage controlled by your application. Keep JSON for future editing and HTML snapshots where your workflow requires them.
How are production embeds restricted?
Use a browser SDK key with exact allowed domains and keep privileged token issuance on your authenticated backend.
Continue with the verified integration guide
Review licensing, allowed domains, events, assets, SSR boundaries, and troubleshooting before production use.