Getting Started with the MiN8T Plugin SDK

MiN8T Editorial

Developer Relations & Integration

Published April 2, 2026 - Updated April 2, 2026

Your users need to build emails. Maybe you run a marketing automation platform, a CRM with campaign features, or a CMS that sends transactional messages. You could spend months building a custom email editor from scratch -- wrestling with table-based layouts, Outlook quirks, and cross-client rendering bugs. Or you could embed a production-grade drag-and-drop editor into your product in under five minutes.

That is what the MiN8T Plugin SDK does. It gives you a fully embeddable email editor widget -- the same one powering MiN8T's own platform -- that you can drop into any web application. Your users get a world-class editing experience. You get to ship your product faster and focus on what makes your platform unique.

1 What is the Plugin SDK?

The MiN8T Plugin SDK is a JavaScript library that lets you embed MiN8T's drag-and-drop email editor directly into your own web application. Think of it as an email editor microservice with a visual frontend -- you initialize it with a single function call, and your users get a complete design experience with block palettes, responsive previews, image uploads, and HTML export.

Who is it for?

• SaaS builders: If your platform sends emails on behalf of customers (marketing tools, e-commerce platforms, booking systems), the Plugin SDK lets you offer email design without building it yourself. Your users design in your app, you export the HTML and send it through your infrastructure.
• Agencies and white-label providers: Embed the editor under your own brand. The SDK supports custom themes, locked blocks, and restricted editing zones -- perfect for giving clients design freedom while protecting brand guidelines.
• CMS and CRM vendors: Platforms like HubSpot and Salesforce have email builders. If you are building the next contender, the Plugin SDK gives you feature parity on day one. Integrate it into your contact management or content pipeline and ship a complete email workflow.

What you get out of the box

• A full drag-and-drop editor with 50+ content blocks
• Responsive email output tested across 90+ email clients
• Image upload and hosting via MiN8T's CDN
• Save, compile, preview, and export via API
• Locale and theme configuration for white-label embedding
• OAuth and API key authentication
• Framework-specific examples for React, Angular, and Vue
• An interactive playground for testing before you write a line of code

2 Architecture Overview

Understanding how the SDK works under the hood will help you make better integration decisions. The architecture follows a secure, isolated pattern that keeps your application and the editor cleanly separated.

The iframe + PostMessage Bridge

When you initialize the SDK, it creates a sandboxed <iframe> inside a container element you specify. The editor runs entirely within that iframe -- separate origin, separate DOM, separate styles. This means the editor's CSS can never leak into your app, and your app's JavaScript can never accidentally modify the editor's state.

Communication between your application and the editor happens through the browser's window.postMessage API. The SDK wraps this in a clean, promise-based interface so you never have to deal with raw message events yourself.

┌──────────────────────────────────────────────┐
│  YOUR APPLICATION                            │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │  MiN8T SDK (thin JS layer)            │  │
│  │  - initEditor()                       │  │
│  │  - compileEmail()                     │  │
│  │  - getTemplate()                      │  │
│  └──────────┬─────────────────────────────┘  │
│             │ postMessage                     │
│  ┌──────────▼─────────────────────────────┐  │
│  │  <iframe> (sandboxed)                 │  │
│  │  ┌──────────────────────────────────┐  │  │
│  │  │  MiN8T Editor UI                 │  │  │
│  │  │  - Block palette                 │  │  │
│  │  │  - Canvas                        │  │  │
│  │  │  - Property panels               │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘
         │                        ▲
         ▼                        │
┌──────────────────────────────────────────────┐
│  MiN8T API                                   │
│  - Authentication (OAuth / API key)          │
│  - Asset uploads & CDN                      │
│  - Template storage                          │
│  - HTML compilation                          │
└──────────────────────────────────────────────┘

CDN-Delivered Bundle

The SDK bundle is served from MiN8T's global CDN. You include a single <script> tag (or install the npm package) and the library loads asynchronously. The bundle is versioned, so you can pin to a specific release or track the latest stable channel. Average load time is under 200ms on a broadband connection.

Authentication Flow

The SDK supports two authentication methods. For server-to-server integrations, you generate an API key in your MiN8T dashboard and pass it during initialization via the MiN8T-Api-Auth header. For user-facing applications where you need per-user sessions, use the OAuth flow: your backend exchanges credentials for a short-lived token, and you pass that token to initEditor(). The editor handles token refresh automatically.

3 Quick Start: Embed the Editor in 5 Minutes

Let us get the editor running inside a React application. This example assumes you have a React project set up with Create React App, Vite, or Next.js. The same principles apply to Angular and Vue -- only the component lifecycle hooks differ.

Step 1: Install the SDK

You can install via npm or load from the CDN. We recommend npm for production apps because it gives you TypeScript definitions and tree-shaking.

npm install @min8t.com/plugin-sdk

Alternatively, add the CDN script to your index.html:

<script src="https://cdn.min8t.com/sdk/v1/min8t-plugin.js" async></script>

Step 2: Create the Editor Component

import { useEffect, useRef } from 'react';
import { Min8tEditor } from '@min8t.com/plugin-sdk';

interface EmailEditorProps {
  sessionToken: string;
  templateId?: string;
  onSave?: (html: string, design: object) => void;
}

export function EmailEditor({ sessionToken, templateId, onSave }: EmailEditorProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<Min8tEditor | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const editor = new Min8tEditor({
      container: containerRef.current,
      token: sessionToken,
      templateId: templateId ?? 'blank',
      locale: 'en',
      theme: 'light',
      onReady: () => {
        console.log('Editor loaded and ready');
      },
      onSave: (data) => {
        onSave?.(data.html, data.design);
      },
    });

    editor.init();
    editorRef.current = editor;

    return () => {
      min8t.destroy();
    };
  }, [sessionToken, templateId]);

  return (
    <div
      ref={containerRef}
      style={{ width: '100%', height: '100vh' }}
    />
  );
}

Step 3: Use It in Your App

import { EmailEditor } from './components/EmailEditor';

function CampaignPage() {
  const handleSave = async (html: string, design: object) => {
    // Send to your backend
    await fetch('/api/campaigns/draft', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html, design }),
    });
  };

  return (
    <div>
      <h1>Design Your Campaign</h1>
      <EmailEditor
        sessionToken={user.min8tToken}
        onSave={handleSave}
      />
    </div>
  );
}

That is it. Three files, under fifty lines of integration code, and your users have a full drag-and-drop email editor inside your application.

4 Configuration Options

The SDK constructor accepts a configuration object with dozens of options. Here are the ones you will use most frequently, grouped by category.

Locale

The editor UI supports 15+ languages out of the box. Pass an ISO 639-1 code at initialization.

new Min8tEditor({
  locale: 'fr',       // French UI
  // Also supports: en, de, es, pt, it, nl, ja, ko, zh, ru, pl, tr, ar, he
});

Theme

Match the editor to your application's look and feel. The SDK ships with 'light' and 'dark' presets. For deeper customization, pass a theme object that overrides specific CSS variables.

new Min8tEditor({
  theme: {
    base: 'dark',
    overrides: {
      '--editor-accent': '#00B2FE',
      '--editor-sidebar-bg': '#1a1a2e',
      '--editor-font-family': '"Inter", sans-serif',
    },
  },
});

Restrictions

Control what your users can and cannot do. This is critical for agencies and white-label providers who need to enforce brand guidelines.

new Min8tEditor({
  restrictions: {
    canEditHtml: false,         // Hide the HTML code view
    canUploadImages: true,      // Allow image uploads
    canChangeStructure: false,  // Lock the layout structure
    lockedBlocks: ['header', 'footer'],  // Prevent editing specific blocks
    allowedBlockTypes: [        // Only show these in the palette
      'text', 'image', 'button', 'divider', 'social'
    ],
  },
});

Callbacks

The SDK communicates state changes through callbacks you register at init time. These fire when the user performs actions inside the editor.

new Min8tEditor({
  onReady: ()          => { /* editor loaded */ },
  onSave:  (data)      => { /* user clicked save */ },
  onChange: (data)      => { /* any content change (debounced 300ms) */ },
  onError: (err)       => { /* something went wrong */ },
  onImageUpload: (file) => {
    // Optional: intercept uploads and use your own storage
    return myS3Upload(file).then(url => ({ url }));
  },
});

5 Handling Save and Export Events

The editor produces two things: a design JSON (the editable state) and compiled HTML (the final, production-ready email). Understanding how and when to request each is key to a solid integration.

Getting the Design JSON

Call getTemplate() to get the current editor state as a JSON object. This is what you store in your database so users can resume editing later.

// Save the editable design
const design = await editor.getTemplate();
await fetch('/api/templates', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: templateId, design }),
});

Compiling to HTML

When the user is ready to send, call compileEmail(). The SDK sends the design to MiN8T's compilation service, which produces inlined, minified, cross-client-tested HTML.

// Compile for sending
const { html } = await editor.compileEmail();

// The HTML is production-ready:
// - CSS inlined for email client compatibility
// - Outlook conditional comments included
// - Images referenced by absolute CDN URLs
// - Responsive media queries in <style> block

await sendCampaign({ to: audienceList, html });

Preview

Generate a preview URL that opens the compiled email in a new tab or in-app iframe. Useful for approval workflows.

const { previewUrl } = await editor.generatePreview();
window.open(previewUrl, '_blank');

Webhook Integration

For server-side workflows (like auto-saving or triggering approval pipelines), configure a webhook URL in your MiN8T dashboard. The SDK will POST events to your endpoint in real-time.

// Webhook payload example
{
  "event": "template.saved",
  "timestamp": "2026-04-02T14:30:00Z",
  "data": {
    "templateId": "tpl_a1b2c3",
    "projectId": "proj_x9y8z7",
    "version": 12,
    "compiledHtml": "...",
    "designJson": { ... }
  },
  "signature": "sha256=..."
}

6 Sandbox Mode for Demos and Trials

Not ready to commit to a full integration? Sandbox mode lets you try the editor with zero setup -- no API keys, no backend, no authentication. It is designed for three scenarios:

• Evaluating the SDK: Before you sign up, spin up a sandbox to see if the editor meets your product's needs. Drag blocks, test the responsive preview, export HTML. Everything works except persistence -- your session expires after 15 minutes.
• Demo environments: If you are selling a product that will include MiN8T's editor, use Sandbox mode in your demo environment. Prospects can interact with the actual editor instead of watching screenshots.
• Internal prototyping: Building a proof-of-concept? Use Sandbox mode during development so your team does not need to configure authentication until you are ready for production.

Initializing in Sandbox Mode

const editor = new Min8tEditor({
  container: document.getElementById('editor-root'),
  mode: 'sandbox',   // No token required
  locale: 'en',
  theme: 'light',
  onReady: () => {
    console.log('Sandbox editor ready -- 15 min session');
  },
});

editor.init();

Sandbox Limitations

• 15-minute sessions: The editor will display a session expiration notice. Users can restart a new session, but unsaved work is lost.
• No image upload: The CDN upload feature is disabled. Users can reference external image URLs but cannot upload files.
• No persistence: getTemplate() and compileEmail() still work (you can capture the output), but nothing is saved server-side.
• Watermark: A small "Powered by MiN8T" badge appears in the bottom corner. It is removed on paid tiers.

Interactive Playground

If you want to test SDK features without writing any code at all, visit the MiN8T Plugin Playground. It is a browser-based environment where you can toggle configuration options, experiment with restrictions, and see the results in real-time. The playground generates a copyable configuration object you can paste directly into your codebase.

7 SDK Pricing and When to Upgrade

The Plugin SDK uses a tiered pricing model based on monthly active editor sessions (a session starts when initEditor() is called and ends when the user closes the editor or the tab). Here is the breakdown:

When to Upgrade

• Free to Startup: Upgrade when you move from prototype to production. The free tier's 100-session limit is perfect for development, but your first real users will burn through it quickly. The Startup tier also removes the "Powered by MiN8T" watermark, which matters for brand perception.
• Startup to Business: Upgrade when you need webhooks for server-side automation, custom themes for white-labeling, or an SLA guarantee for your enterprise customers. The jump from 5,000 to 50,000 sessions also usually coincides with meaningful revenue -- at 50,000 sessions, your email editor feature is driving real engagement.
• Business to Enterprise: Upgrade when you need dedicated infrastructure (your own isolated editor instance), single sign-on integration, or custom block types built specifically for your use case. Enterprise plans include hands-on onboarding and a named account manager.

Getting Started Today

Here is the fastest path from reading this article to a working integration:

• Try the Playground: Visit min8t.com/developer/playground and experiment with the editor in your browser
• Sign up for a Free account: Generate your API key in the Developer Dashboard
• Install the SDK: npm install @min8t.com/plugin-sdk
• Copy the Quick Start code: Use the React component from Section 3 as your starting point
• Read the API reference: Full documentation at min8t.com/developer/docs

Related Articles

Email Design

The Ultimate Guide to Responsive Email Design

Testing

Email Testing Across 90+ Clients

Deliverability

DMARC Setup: Protect Your Sender Reputation