Configuration

Complete reference for all PexelizeConfig / EditorOptions properties passed when initializing the editor.

Initialization Options

These are the top-level properties passed to pexelize.init() or the framework component:

Option	Type	Required	Default	Description
containerId	string	Yes	—	The DOM element ID to mount the editor.
editorKey	string	Yes	—	Editor key for authentication (from the Pexelize Dashboard). Starts with px_.
editorMode	'email' | 'web' | 'popup'	No	'email'	Builder mode.
designMode	'edit' | 'live'	No	'live'	Admin vs end-user permissions.
design	DesignJson | null	No	—	Initial design to load.
popup	PopupConfig	No	—	Popup builder configuration (required when editorMode is 'popup').
callbacks	PexelizeCallbacks	No	{}	Lifecycle and action callbacks. See Callbacks.
options	EditorOptions	No	{}	All editor configuration (see below).

Editor Options

These are nested under options in the SDK's PexelizeConfig:

Option	Type	Required	Default	Description
user	UserConfig	Yes	—	Current user identity.
locale	string	No	'en'	BCP-47 locale for the editor UI (e.g. 'fr', 'de', 'ja').
translations	Record<string, Record<string, string>>	No	{}	Custom translation overrides keyed by locale.
textDirection	'ltr' | 'rtl'	No	'ltr'	Text direction for the editor UI and content.
mergeTags	MergeTag[]	No	[]	Dynamic merge tags available in the text editor (e.g. {{first_name}}).
designTags	Record<string, string>	No	{}	Key/value pairs replaced in HTML at export time.
specialLinks	SpecialLink[]	No	[]	Custom link types shown in the link picker (e.g. unsubscribe, view-in-browser).
modules	Module[]	No	[]	Reusable content modules available in the content panel.
displayConditions	DisplayCondition[]	No	[]	Conditions users can apply to rows for conditional rendering.
appearance	AppearanceConfig	No	{}	Theme, accent color, and layout settings.
tools	ToolsConfig	No	{}	Show, hide, or lock individual content tools.
customTools	CustomTool[]	No	[]	Register custom content tools.
fonts	FontDefinition[]	No	[]	Custom fonts available in the editor.
bodyValues	BodyValues	No	{}	Default body-level values (background color, content width, font family).
header	DesignJson	No	—	Locked header row rendered above the editable area.
footer	DesignJson	No	—	Locked footer row rendered below the editable area.
editor	EditorConfig	No	{}	Editor behavior settings.
features	FeaturesConfig	No	{}	Enable/disable editor features.
assetStorage	AssetStorageConfig	No	—	Image/file upload configuration.
ai	AIConfig	No	{ mode: 'disabled' }	AI feature configuration. See AI Overview.
callbacks	PexelizeCallbacks	No	{}	Lifecycle and action callbacks. See Callbacks.

UserConfig

interface UserConfig {
  id: string;
  name: string;
  email: string;
  avatar?: string; // URL to avatar image
}

AppearanceConfig

Option	Type	Default	Description
theme	'light' | 'dark'	'light'	Editor color theme.
accentColor	AccentColor	'#4f46e5'	Accent color for buttons and highlights.
layout	'full' | 'compact'	'full'	Editor layout mode.
panels	PanelConfig	{}	Show/hide specific panels (content, blocks, settings).
borderRadius	'none' | 'sm' | 'md' | 'lg'	'md'	Border radius for editor UI elements.

ToolsConfig

Controls visibility and behavior of content tools in the sidebar:

interface ToolsConfig {
  text?: ToolConfig;
  image?: ToolConfig;
  button?: ToolConfig;
  divider?: ToolConfig;
  spacer?: ToolConfig;
  social?: ToolConfig;
  video?: ToolConfig;
  html?: ToolConfig;
  heading?: ToolConfig;
  menu?: ToolConfig;
  timer?: ToolConfig;
}

interface ToolConfig {
  enabled?: boolean;   // show/hide the tool (default: true)
  locked?: boolean;    // prevent user from modifying tool properties (default: false)
  properties?: Record<string, {
    enabled?: boolean;
    locked?: boolean;
    defaultValue?: any;
  }>;
}

EditorConfig

Option	Type	Default	Description
minRows	number	1	Minimum number of rows in the design.
maxRows	number	Infinity	Maximum number of rows allowed.
autoSave	boolean	false	Enable auto-save (fires the autoSave event).
autoSaveInterval	number	30000	Auto-save interval in milliseconds.
mode	EditorMode	'email'	Editor mode: 'email' or 'web'.

FeaturesConfig

Option	Type	Default	Description
preview	boolean	true	Show/hide the preview button.
undo	boolean	true	Enable undo/redo.
stockImages	boolean	true	Enable stock image browser.
imageUpload	boolean	true	Enable image file uploads.
imageEditor	boolean	true	Enable built-in image cropping/editing.
modules	boolean	true	Enable saved modules panel.
specialLinks	boolean	true	Show special links in link picker.
displayConditions	boolean	true	Show display condition UI on rows.
exportHtml	boolean	true	Enable HTML export.
exportImage	boolean	true	Enable image export.
exportPdf	boolean	true	Enable PDF export.

AssetStorageConfig

Option	Type	Description
uploadUrl	string	URL to POST image uploads to.
uploadHeaders	Record<string, string>	Additional headers sent with upload requests.
onUpload	(file: File) => Promise<{ url: string }>	Custom upload handler (overrides uploadUrl).
maxFileSize	number	Max file size in bytes (default: 5MB).
acceptedFormats	string[]	Accepted MIME types (default: ['image/png', 'image/jpeg', 'image/gif', 'image/webp']).

AIConfig

Option	Type	Description
mode	'pexelize' | 'external' | 'disabled'	AI mode. See AI Overview.
features	AIFeaturesConfig	Enable/disable individual AI features.
callbacks	AICallbacks	Callback handlers for external mode.

Example: Full Configuration

const config: PexelizeConfig = {
  user: { id: '1', name: 'Jane Doe', email: 'jane@example.com' },
  locale: 'en',
  textDirection: 'ltr',
  mergeTags: [
    { name: 'First Name', value: '{{first_name}}' },
    { name: 'Company', value: '{{company}}' },
  ],
  appearance: {
    theme: 'light',
    accentColor: '#4f46e5',
  },
  tools: {
    html: { enabled: false },
    video: { enabled: false },
  },
  editor: {
    mode: 'email',
    autoSave: true,
    autoSaveInterval: 15000,
  },
  features: {
    exportPdf: false,
  },
  assetStorage: {
    onUpload: async (file) => {
      const form = new FormData();
      form.append('file', file);
      const res = await fetch('/api/upload', { method: 'POST', body: form });
      return res.json();
    },
  },
  ai: { mode: 'pexelize' },
};

info

Options not specified use their default values. At the top level, containerId and editorKey are required. Within options, only user is required.