Editor Modes

Pexelize supports three editor modes that control the type of content being built: email, web, and popup. Set the mode via the editorMode option when initializing the editor.

Email mode

Build responsive email templates. The content area is constrained to a fixed width (default 600px) to ensure compatibility across email clients.

pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  editorMode: 'email',
  options: {
    features: {
      preheaderText: true,
    },
  },
});

Key characteristics:

• Content width defaults to 600px (configurable via body.values.contentWidth)
• Columns stack vertically on mobile by default
• Preheader text field available in Styles panel
• AMP for Email support (opt-in via features.amp)
• exportHtml() generates email-client-compatible HTML with inline styles and table-based layout

info

Email HTML is fundamentally different from web HTML. The editor generates table-based layouts with inline CSS to work across Outlook, Gmail, Apple Mail, and other clients.

Web mode

Build landing pages and full-width web content. No content width constraint by default.

pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  editorMode: 'web',
});

Key characteristics:

• No fixed content width -- content expands to fill available space
• Full-width rows and sections
• exportHtml() generates a standard HTML document
• No preheader text (email-only feature)
• Suitable for landing pages, microsites, and web content

Popup mode

Build modals and popups with overlay, close button, and animation settings. Requires a popup configuration object.

pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  editorMode: 'popup',
  popup: {
    defaultWidth: '600px',
    defaultHeight: 'auto',
    exportMode: 'full',
    popupId: 'my-popup',
  },
});

Key characteristics:

• Overlay with configurable color and close-on-click behavior
• Close button with position (4 corners), size, color, and offset
• Animation support: 'none' or 'fade' with configurable duration
• Position control: horizontal (left, center, right) and vertical (top, center, bottom)
• Border, border radius, box shadow, and padding settings
• Export modes: 'full' for a complete HTML document, 'partial' for an embeddable fragment

warning

The popup config object is required when editorMode is 'popup'. Without it, popup-specific settings (overlay, close button, animation) will use defaults that may not match your needs.

Comparison

Feature	email	web	popup
Content width	Fixed (600px default)	Full width	Configurable
Responsive column stacking	Yes	Yes	Yes
Preheader text	Yes	No	No
AMP support	Yes (opt-in)	No	No
Overlay & close button	No	No	Yes
Animation	No	No	Yes
Export format	Email HTML (tables + inline CSS)	Standard HTML	Full page or embeddable fragment

Switching modes

The editor mode is set at initialization time. To switch modes, destroy the current editor and re-initialize:

// Switch from email to web
pexelize.destroy();
pexelize.init({
  containerId: 'editor',
  editorKey: 'pk_xxx',
  editorMode: 'web',
});

tip

Store the editorMode alongside the Design JSON in your database. A design created in email mode should always be loaded in email mode -- the HTML output format differs significantly between modes.

Next steps

• Edit Mode vs Live Mode -- Control what users can do in the editor
• Design JSON -- How the mode affects the JSON structure