@maillayers/react

React wrapper for the MailLayers embeddable email editor. React is the supported framework for production integrations.

Install

npm install @maillayers/react react react-dom

Peer dependencies: react and react-dom ^18 or ^19.
@maillayers/core and its dependencies install automatically. Browser-only — mount client-side (no SSR of the editor root).

Quick start

import { MailLayersEditor } from "@maillayers/react";

export function App() {
  return (
    <div style={{ height: "100vh" }}>
      <MailLayersEditor
        apiKey="your-api-key"
        darkMode
        onChange={(template) => console.log("changed", template.id)}
        onSave={async (template) => {
          await fetch(`/api/templates/${template.id}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(template),
          });
        }}
        onExport={({ html, json }) => console.log(html.length, json.length)}
      />
    </div>
  );
}

Give the host element a defined height (e.g. 100vh). The editor fills its container.

Save and export

| Action | What to implement | |--------|-------------------| | Toolbar Save / Cmd+S | onSave and/or persistTemplate on config — wires persistence so Save does not show a failure state | | Autosave | autosaveIntervalMs={30000} plus onSave | | Export drawer | onExport receives { html, json, template } | | Remote API | Optional customDomain + apiKey for PUT .../api/templates/:id |

onSave is bridged to persistTemplate when you do not pass persistTemplate explicitly.

Next.js (without @maillayers/nextjs)

Load client-only:

import dynamic from "next/dynamic";

const MailLayersEditor = dynamic(
  () => import("@maillayers/react").then((m) => m.MailLayersEditor),
  { ssr: false }
);

Vanilla JS

Use @maillayers/core — see packages/core/README.md.

API

| Prop | Description | |------|-------------| | apiKey | Required | | darkMode | Editor chrome | | theme / branding | Brand tokens | | onChange | Document changed | | onSave | Save / autosave persistence | | onExport | Export HTML + JSON | | onPreview | Preview event | | className | Wrapper class |

All MailLayersConfig options except container are supported.

Docs

• QUICK_START.md
• PRODUCTION.md
• examples/react-vite

License

MIT