@maillune/sdk

A white-label, drag-and-drop email builder you embed in your app with a single web component.

What it is

Drop <email-builder> into any web app — React, Vue, Angular, or plain HTML — and your users get a production-quality drag-and-drop email editor. No UI to build, no editor logic to maintain.

• 10 block types: text, image, button, divider, spacer, columns, social, video, HTML, list
• Dark mode, custom accent colors, white-label support
• Template library, auto-save, undo/redo, mobile preview
• Merge tags for dynamic personalisation
• Compiles to email-client-safe HTML

Install

npm install @maillune/sdk

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/@maillune/sdk/dist/email-builder.umd.js"></script>

Quick start

Get an API key at app.maillune.com, then:

<div style="height: 700px">
  <email-builder
    api-key="mms_live_YOUR_KEY"
    user-id="user_123"
  ></email-builder>
</div>

<script type="module">
  import '@maillune/sdk';

  const builder = document.querySelector('email-builder');

  builder.addEventListener('eb:save', (e) => {
    console.log('Design JSON:', e.detail.json);
  });
</script>

React

import '@maillune/sdk';

export function EmailEditor({ userId }: { userId: string }) {
  return (
    <div style={{ height: 700 }}>
      <email-builder
        api-key={process.env.NEXT_PUBLIC_MMS_API_KEY}
        user-id={userId}
        theme="auto"
      />
    </div>
  );
}

Imperative API

const builder = document.querySelector('email-builder');

builder.load(blockTree);         // load a saved design
builder.save();                  // programmatic save → fires eb:save
builder.getJson();               // get current BlockTree without saving
builder.togglePreview();         // open the preview modal
builder.updateConfig({ ... });   // hot-update config without remounting

Events

| Event | e.detail | Description | |---|---|---| | eb:save | { json: BlockTree } | User clicked Save | | eb:export | { html: string } | User clicked Export HTML | | eb:error | { code, message } | Recoverable error |

Configuration

builder.updateConfig({
  theme:        'dark',
  locale:       'en',           // 'en' | 'sv' | 'fr'
  accentColor:  '#ef4444',      // Agency+ plan
  brandName:    'Acme Mailer',  // Agency+ plan
  hideBranding: true,           // Agency+ plan
  mergeTags: [
    { name: 'First name', value: '{{first_name}}', sample: 'Jane' },
  ],
  onSave:   (json) => saveToDb(json),
  onExport: (html) => sendEmail(html),
});

Plans

| | Free | Pro $69/mo | Agency $199/mo | Enterprise | |---|---|---|---|---| | Renders / month | 500 | 10,000 | 100,000 | Unlimited | | Templates | ✗ | ✓ | ✓ | ✓ | | Custom fonts | ✗ | ✓ | ✓ | ✓ | | HTML export | ✗ | ✓ | ✓ | ✓ | | White-label | ✗ | ✗ | ✓ | ✓ |

Full docs →

License

MIT