Skip to main content

Page

The top-level node in a Easy Email Pro document is the Page Element. It will eventually be converted into a skeleton of mjml, like this.

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

At the same time, as a top-level node, it carries the function of global configuration/style.

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>>;
    globalStyles?: Array<{ content: string; inline: boolean }>;
    breakpoint: string;
    headStyles?: { content: string; inline?: "inline" }[];
    fonts?: { name: string; href: string }[];
    preheader?: string;
    variables?: Array<VariableItem>;
  }
> & {
  type: "page";
};

globalStyles​

mj-style https://documentation.mjml.io/#mj-style

fonts​

mj-font https://documentation.mjml.io/#mj-font

preheader​

Set the preview that will be displayed in the inbox of the recipient.

mj-preview https://documentation.mjml.io/#mj-preview

globalAttributes​

It looks like this. All elements will be applied

{
  "font-size": "14px",
  "color": "blue"
}

categoryAttributes​

It looks like this. All elements corresponding to category will be applied

{
  "BUTTON": {
    "font-size": "14px",
    "color": "blue"
  }
}

blockAttributes​

It looks like this. All elements corresponding to type will be applied

{
  "standard-button": {
    "font-size": "14px",
    "color": "blue"
  }
}

Merge Attributes priority​

merge(
  {},
  elementDefaultAttributes,
  globalAttributes,
  categoryAttributes,
  blockAttributes,
  element.attributes
);