MailLayers
Embedded Email Builder SDK

Embed the hosted MailLayers editor using lightweight framework SDKs

Published iframe wrappers for React, Next.js, Angular, Vue, and Svelte — while your application keeps control of authentication, templates, asset storage, permissions, HTML export, and email delivery.

Open EditorRead DocsBook Demo

$ npm install @maillayers/react-email-editor

Published on npm · React · Next.js · Angular 18–20 · Vue 3.4+ · Svelte 4+

MailLayers Editor
Live product
Drag blocks · edit in inspector · export HTMLOpen Editor →
React · Next.js · Angular · Vue · Svelte
Template JSON
HTML export
Domain & API key validation
Your app owns storage & delivery
Product

The actual MailLayers editor — not a mockup

Drag blocks into the canvas, configure content in the inspector, save template JSON, and export email HTML into your own testing and delivery workflow.

MailLayers editor showing blocks panel, email canvas, and inspector properties
How it works

From account to embedded editor

Create your license, secure it to an allowed domain, install the matching framework SDK, and mount the hosted editor in your product.

01

Create account

Sign in with Google to create your free organization and MailLayers license.

02

Create API key

Generate an organization-scoped SDK key and copy the secret when it is shown once.

03

Add allowed domain

Allowlist the exact hostname where your embedded editor will run.

04

Install the SDK

Install the published SDK for React, Next.js, Angular, Vue, or Svelte.

05

Embed editor

Mount the editor with your API key and connect template state to your application.

Framework integrations

One hosted editor, lightweight framework SDKs

Embed the hosted MailLayers editor using published iframe wrappers for React, Next.js, Angular, Vue, and Svelte.

React
npm install @maillayers/react-email-editor
Next.js
npm install @maillayers/react-email-editor
Angular
npm install @maillayers/angular-email-editor
Vue
npm install @maillayers/vue-email-editor
Svelte
npm install @maillayers/svelte-email-editor
Features

Everything you need to embed email creation

Polished builder UX, developer-friendly SDK APIs, and production-grade controls — without building a custom editor from scratch.

Drag-and-drop editor
Visual block-based editing with rows, columns, and styling controls your users expect.
React, Next.js, Angular, Vue & Svelte
Published iframe SDKs for every major UI framework — mount the hosted editor with a lightweight wrapper.
Template export/import
Persist templates as structured JSON for versioning, drafts, and multi-tenant storage.
Responsive preview
Review desktop and mobile layouts before exporting HTML into your own sending workflow.
Reusable blocks
Build content systems with saved blocks and consistent brand components.
Custom branding
Control themes, chrome, and embedding behavior so the editor feels native in your product.
License validation
Domain and API key enforcement to protect production embeds across customer tenants.
Domain & API key controls
Restrict SDK usage to approved origins with per-project keys and allowed-domain policies.
HTML export
Export email HTML while your backend remains responsible for storage, approval, testing, and delivery.
Integration

Embed in a few lines of React

Install the published SDK, pass your API key and embed token, and wire onChange to your persistence layer. Your app controls storage, permissions, and export.

React integration
Mount the editor and sync exported HTML with your app state.
"use client";

import { MailLayersEmailEditor } from "@maillayers/react-email-editor";

export function TemplateEditor({ embedToken }: { embedToken: string }) {
  return (
    <MailLayersEmailEditor
      apiKey={process.env.NEXT_PUBLIC_MAILLAYERS_API_KEY!}
      embedToken={embedToken}
      initialHtml="<h1>Welcome</h1>"
      onChange={(html) => saveDraft(html)}
    />
  );
}
Use cases

Where teams embed MailLayers

Customer-facing SaaS editors, marketing platforms, CRM tools, agencies, and internal admin — one SDK, your storage, your delivery pipeline.

SaaS email template editors
Let customers design onboarding, lifecycle, and transactional emails inside your product.
Marketing platforms
Power campaign builders and template libraries without maintaining a custom editor.
CRM & messaging tools
Embed visual editing for sales sequences, outreach templates, and team messaging.
Agencies
White-label email creation for client portals with reusable blocks and brand controls.
Internal admin tools
Give ops and marketing teams a governed editor while engineering keeps control of data and delivery.
View integration guide
Security and data flow

The editor handles authoring. Your product stays in control.

MailLayers validates the integration and produces editor output; your application remains the authority for users, storage, assets, approvals, and delivery.

Exact allowed domains
Bind each browser SDK key to the exact production and staging host origins that are permitted to mount the editor.
Scoped browser credentials
Use the browser SDK key for license validation. React managed embeds also receive a short-lived token from your authenticated backend.
Your data boundary
Your application owns user authorization, template persistence, approval history, and the downstream sending system.
Host-controlled assets
Connect uploads, listing, and deletion to your storage across all framework SDKs.
JSON and HTML output
Keep structured templates for later editing and store exported HTML when your workflow needs an immutable sending snapshot.
Host applicense and origin validationeditortemplate JSON / exported HTMLyour storage and sending pipeline
Get started

Ship email editing inside your SaaS

Open the live editor, read the integration docs, or book a demo to plan your rollout.

Start freeRead DocsContact Sales