Skip to main content

Page Element

The Page element is the top-level container node in every Easy Email Pro template. It represents the entire email document and provides global configuration and styling capabilities.

Overview​

The Page element serves two main purposes:

  1. Document Root: Contains all content elements (sections, columns, blocks)
  2. Global Configuration: Defines global styles, fonts, and settings that apply to all elements

MJML Conversion​

The Page element is converted to the MJML document structure:

<mjml>
  <mj-head>
    <mj-attributes></mj-attributes>
    <mj-font />
    <mj-preview />
    <mj-style />
  </mj-head>
  <mj-body>{children}</mj-body>
</mjml>

Structure​

As a top-level node, the Page element carries global configuration and styling functions.

export type PageElement = BasicElement<
  {
    width?: string;
    "background-color"?: string;
    "content-background-color"?: string;

    "link-color"?: string;
    "link-text-decoration"?: string;
    "link-font-weight"?: string;
    "link-font-style"?: string;

    "margin-top"?: string;
    "margin-bottom"?: string;
  },
  {
    globalAttributes?: Record<string, string>;
    classAttributes?: Record<string, Record<string, string>>;
    categoryAttributes?: Record<string, Record<string, string>>;
    blockAttributes?: Record<string, Record<string, string>>;
    headStyles?: Array<{ content: string; inline: boolean }>;
    breakpoint: string;

    fonts?: { name: string; href: string }[];
    preheader?: string;
    variables?: Array<VariableItem>;
  }
> & {
  type: "page";
};

headStyles​

Add custom CSS styles that will be included in the email <head>. Useful for custom styling that can't be achieved with MJML attributes alone.

Reference: MJML mj-style documentation

Example:

{
  headStyles: [
    {
      content: ".custom-class { color: red; }",
      inline: true,
    },
  ],
}

fonts​

Define custom web fonts to be loaded in the email. Each font entry will generate an <mj-font> tag.

Reference: MJML mj-font documentation

Example:

{
  fonts: [
    {
      name: "Roboto",
      href: "https://fonts.googleapis.com/css2?family=Roboto",
    },
  ],
}

preheader​

Set the preview text that appears in email client inboxes (usually after the subject line). This text is typically hidden in the email body but visible in the inbox preview.

Reference: MJML mj-preview documentation

Example:

{
  preheader: "Check out our latest offers and promotions",
}

globalAttributes​

Global attributes are applied to all elements in the template. Use this for setting default values that should apply everywhere.

Example:

{
  "globalAttributes": {
  "font-size": "14px",
    "font-family": "Arial, sans-serif",
    "color": "#333333"
  }
}

This will set a default font size, font family, and color for all text elements.

categoryAttributes​

Category attributes are applied to all elements of a specific category (e.g., all buttons, all text elements).

Example:

{
  "categoryAttributes": {
  "BUTTON": {
      "background-color": "#007bff",
      "color": "#ffffff",
      "border-radius": "4px"
    },
    "TEXT": {
      "font-size": "16px",
      "line-height": "1.5"
    }
  }
}

This applies styling to all buttons and all text elements.

blockAttributes​

Block attributes are applied to all elements of a specific type (e.g., all "standard-button" elements).

Example:

{
  "blockAttributes": {
  "standard-button": {
      "padding-top": "12px",
      "padding-bottom": "12px"
    },
    "standard-paragraph": {
      "margin-bottom": "16px"
    }
  }
}

This applies styling to all instances of specific block types.

classAttributes​

Class attributes allow you to apply styles to elements with specific CSS classes.

Example:

{
  "classAttributes": {
    ".highlight": {
      "background-color": "#ffff00",
      "font-weight": "bold"
    },
    ".muted": {
      "opacity": "0.6"
    }
  }
}

Attribute Priority Order​

When multiple attribute sources define the same property, they are merged in this priority order (highest to lowest):

  1. Element-specific attributes (element.attributes) - Highest priority
  2. Block attributes (blockAttributes[element.type])
  3. Category attributes (categoryAttributes[element.category])
  4. Global attributes (globalAttributes)
  5. Element default attributes - Lowest priority
merge(
  {},
  elementDefaultAttributes,      // 5. Defaults (lowest priority)
  globalAttributes,               // 4. Global
  categoryAttributes,             // 3. Category
  blockAttributes,                // 2. Block type
  element.attributes              // 1. Element-specific (highest priority)
);

This means element-specific attributes will always override global, category, and block attributes.

Complete Page Example​

{
  "type": "page",
  "data": {
    "breakpoint": "480px",
    "globalAttributes": {
      "font-family": "Arial, sans-serif",
      "font-size": "14px"
    },
    "categoryAttributes": {
      "BUTTON": {
        "background-color": "#007bff"
      }
    },
    "fonts": [
      {
        "name": "Roboto",
        "href": "https://fonts.googleapis.com/css2?family=Roboto"
      }
    ],
    "preheader": "Preview text here"
  },
  "attributes": {
    "width": "600px",
    "background-color": "#f5f5f5",
    "content-background-color": "#ffffff"
  },
  "children": [
    {
      "type": "standard-section",
      "children": [
        {
          "type": "standard-column",
          "children": [
            {
              "type": "standard-paragraph",
              "children": [{ "text": "Email content" }]
            }
          ]
        }
      ]
    }
  ]
}