MailLayers

SDK selection

Choose an email template builder SDK by integration model

Compare MailLayers framework SDKs for React, Next.js, Angular, Vue, and Svelte by lifecycle, iframe isolation, events, assets, and export needs.

Read documentation Open live editor

Published on npm

Version 0.2.2 · Install from npm or review the source on GitHub.

React: 0.2.2 | Angular: 0.1.0 | Vue: 0.1.0 | Svelte: 0.1.0
Package decision
React 18/19 or Next.js App Router
  -> @maillayers/react-email-editor (hosted iframe)

Angular 18–20
  -> @maillayers/angular-email-editor (hosted iframe)

Vue 3.4+
  -> @maillayers/vue-email-editor (hosted iframe)

Svelte 4+
  -> @maillayers/svelte-email-editor (hosted iframe)

Production 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

Use the lightweight SDK for your framework

@maillayers/react-email-editor on npm Source on GitHub
  1. 01

    React and Next.js use the React iframe SDK in a client component. There is no separate Next.js npm package — see the Next.js guide for App Router patterns.

  2. 02

    Angular, Vue, and Svelte each ship a framework-native component that wraps the same hosted editor iframe bridge.

  3. 03

    All integrations require host-owned authentication, persistence, asset storage, and sending. Install the published package for your framework from npm.

Relevant capabilities

What this integration actually supports

Framework lifecycle
Each SDK maps cleanup, updates, events, and imperative methods into its framework’s normal component model.
Typed integration
Published packages include types for configuration, events, asset handlers, and editor handles.
Export boundary
Structured template data supports future editing; HTML output feeds your approval and sending pipeline.

Product boundary: All framework SDKs are hosted-iframe wrappers. MailLayers does not ship a public in-process editor core package — your application owns auth, storage, assets, and delivery.

Related integration guides

ReactNext.jsAngularVueSvelte

Engineering articles

Read implementation notes about editor security, persistence, asset workflows, and framework-specific patterns.

Browse the MailLayers blog

FAQ

Questions specific to this integration

Is there a framework-agnostic browser package?

Choose the SDK for your UI framework. Each package wraps the same hosted MailLayers editor through a secured iframe bridge.

Why is Next.js listed under React?

The React SDK is SSR-import-safe and mounts in a client component. The Next.js guide documents App Router patterns without a separate npm package.

Are the npm commands ready to run?

Yes. All four framework SDKs are published on npm at the versions shown on this site and in the documentation.

Continue with the verified integration guide

Review licensing, allowed domains, events, assets, SSR boundaries, and troubleshooting before production use.

Read docs View pricing