Email

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/email/email.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['email'],
    email: {
        title: 'Newsletter',
        font: 'Inter, Helvetica, Arial, sans-serif',
        body: {
            background: '#f5f5f5',
            padding: '32px 20px'
        },
        content: {
            width: '600px',
            background: '#ffffff'
        }
    }
});

Options

Email options define template styles and defaults. They merge with built-in EmailConfig defaults.

• title (string)
  • default ''
  • Email subject / title metadata.
• preheader (string | false)
  • default false
  • Preview line shown in inboxes.
• font (string)
  • default 'Helvetica, Arial, sans-serif'
  • Body font family.
• linkFont (string | false)
  • default false
  • Optional Google Fonts URL.
• spacing (string)
  • default '32px'
  • Default vertical spacing between blocks.
• gutter (string)
  • default '24px'
  • Column gutter in multi-column layouts.
• mobileWidth (string)
  • default '420px'
  • Width of the mobile preview frame.
• previewTheme ('light' | 'dark')
  • default 'light'
  • Initial preview theme.
• previewDarkButton (boolean)
  • default true
  • Show the dark-preview toolbar button.
• dark (boolean)
  • default true
  • Include dark-mode CSS in export when enabled.

Style objects

Keys body, content, text, h1–h4, link, button, quote, pre, and divider hold CSS-like defaults for the email template. Values are camelCase property names (fontSize, borderRadius, …). Set a property to false to turn it off (for example no border on content).

Built-in defaults:

{
    body: {
        background: '#ffffff',
        padding: '32px 20px 64px 20px'
    },
    content: {
        width: '600px',
        background: '#ffffff',
        padding: '0',
        borderRadius: false,
        border: false
    },
    text: {
        fontSize: '16px',
        lineHeight: '1.618',
        color: '#333333'
    },
    h1: {
        fontSize: '36px',
        fontWeight: 'bold',
        lineHeight: '1.3',
        letterSpacing: '0',
        textTransform: 'none',
        color: '#000000'
    },
    h2: {
        fontSize: '24px',
        fontWeight: 'bold',
        lineHeight: '1.3',
        letterSpacing: '0',
        textTransform: 'none',
        color: '#000000'
    },
    h3: {
        fontSize: '20px',
        fontWeight: 'bold',
        lineHeight: '1.4',
        letterSpacing: '0',
        textTransform: 'none',
        color: '#000000'
    },
    h4: {
        fontSize: '16px',
        fontWeight: 'bold',
        lineHeight: '1.4',
        letterSpacing: '0',
        textTransform: 'none',
        color: '#000000'
    },
    link: {
        color: '#046BFB'
    },
    button: {
        padding: '16px',
        fontSize: '16px',
        fontWeight: '500',
        background: '#000000',
        color: '#ffffff',
        borderRadius: '8px'
    },
    quote: {
        borderLeft: '2px solid #ccc',
        background: false,
        padding: '0 0 0 24px',
        color: '#000000',
        fontWeight: 'bold',
        fontStyle: 'italic'
    },
    pre: {
        fontFamily: 'monospace',
        fontSize: '14px',
        lineHeight: 1.618,
        padding: '20px',
        borderRadius: false,
        border: false,
        color: '#333333',
        background: '#f5f5f5'
    },
    divider: {
        size: '1px',
        background: '#000000'
    }
}

Override only the fields you need — nested objects are deep-merged with these defaults:

Redactor('#entry', {
    plugins: ['email'],
    email: {
        quote: {
            borderLeft: '4px solid #087F5B',
            fontStyle: 'normal'
        },
        button: {
            background: '#7FF3D0',
            color: '#000000'
        }
    }
});

padding, fontSize, and other untouched button fields stay at their built-in values.

Email meta blocks

Saved email HTML may include hidden <div> blocks at the top of the document. On load (setContent, paste, import) the plugin reads them, applies the values, and removes the blocks from the editor. On export (getEmail, getJson) they are written back when set.

preheader

Preview line shown in inbox lists (not visible in the email body).

<div class="email-preheader">Your order #39574867 has shipped</div>

options

JSON object with the same shape as plugin email options — deep-merged into the active template styles.

<div class="email-options">
{
    "title": "Order receipt",
    "font": "Inter, Helvetica, Arial, sans-serif",
    "link": {
        "color": "#087F5B"
    },
    "button": {
        "background": "#7FF3D0",
        "color": "#000000"
    }
}
</div>

style

Custom CSS injected into the email preview and export <head>.

<div class="email-style">
.email-content a { text-decoration: underline; }
h1 { letter-spacing: -0.02em; }
</div>

Language strings

en: {
    email: {
        button: 'Button',
        'mobile-view': 'Mobile view',
        'preview-dark': 'Dark preview',
        'style-panel': 'Style panel',
        spacing: 'Spacing',
        padding: 'Padding',
        'margin-bottom': 'Margin bottom',
        alignment: 'Alignment',
        'size-and-color': 'Size & color',
        body: 'Body',
        background: 'Background',
        content: 'Content',
        'border-width': 'Border width',
        'border-color': 'Border color',
        radius: 'Radius',
        size: 'Size',
        color: 'Color',
        'align-left': 'Align left',
        'align-center': 'Align center',
        'align-right': 'Align right'
    }
}

Events

email:preview:show

Fired when email preview is shown.

email:preview:hide

Fired when email preview is hidden.

app.on('email:preview:show', () => {
    console.log('preview open');
});

API

getEmail

Exports email-ready HTML (table layout, inlined styles when tidy is true).

const html = app.email.getEmail();

getEmailText

Returns plain-text version of the email body.

const text = app.email.getEmailText();

getJson

Returns block JSON plus email meta (preheader, options, style).

const json = app.email.getJson();

getTitle / getPreheader

Returns current title and preheader strings.

app.email.getTitle();
app.email.getPreheader();

setContent

Loads email HTML and rebuilds the template.

app.email.setContent('<h1>Hello</h1><p>Body copy.</p>');

setJson

Loads JSON blocks with optional email meta.

app.email.setJson({ blocks: [ /* … */ ], preheader: 'Preview line' });

showPreview / hidePreview / togglePreview

Opens or closes the mobile email preview overlay.

app.email.showPreview({ mobile: true });
app.email.hidePreview();
app.email.togglePreview();

togglePreviewDark

Opens preview in dark mode.

app.email.togglePreviewDark();