Skip to main content

Design JSON

Pexelize stores every design as a JSON object with a defined hierarchy: body contains global settings and an array of rows, each row contains columns, and each column contains content blocks (text, image, button, etc.).

Structure​

Example​

A minimal email design with one row, two columns -- a text block on the left and an image on the right:

{
  "body": {
    "values": {
      "backgroundColor": "#f5f5f5",
      "contentWidth": "600px",
      "contentAlign": "center",
      "fontFamily": {
        "label": "Arial",
        "value": "arial,helvetica,sans-serif"
      },
      "textColor": "#333333",
      "linkStyle": {
        "body": true,
        "linkColor": "#0068a5",
        "linkHoverColor": "#0068a5",
        "linkUnderline": true,
        "linkHoverUnderline": true
      },
      "backgroundImage": {
        "url": "",
        "fullWidth": true,
        "repeat": "no-repeat",
        "position": "center",
        "sizeMode": "cover"
      },
      "preheaderText": "Check out our latest update",
      "_meta": {
        "htmlID": "u_body",
        "htmlClassNames": "u_body"
      }
    },
    "rows": [
      {
        "cells": [1, 1],
        "values": {
          "displayCondition": null,
          "columns": false,
          "backgroundColor": "#ffffff",
          "columnsBackgroundColor": "transparent",
          "backgroundImage": {
            "url": "",
            "fullWidth": true,
            "repeat": "no-repeat",
            "position": "center",
            "sizeMode": "cover"
          },
          "padding": "20px",
          "hideDesktop": false,
          "hideMobile": false,
          "noStackMobile": false,
          "selectable": true,
          "draggable": true,
          "duplicatable": true,
          "deletable": true,
          "_meta": {
            "htmlID": "u_row_1",
            "htmlClassNames": "u_row"
          }
        },
        "columns": [
          {
            "values": {
              "backgroundColor": "transparent",
              "border": {},
              "padding": "10px",
              "_meta": {
                "htmlID": "u_column_1",
                "htmlClassNames": "u_column"
              }
            },
            "contents": [
              {
                "type": "paragraph",
                "values": {
                  "text": "<p>Hello! Welcome to our newsletter.</p>",
                  "textAlign": "left",
                  "lineHeight": "160%",
                  "containerPadding": "10px",
                  "selectable": true,
                  "draggable": true,
                  "duplicatable": true,
                  "deletable": true,
                  "hideDesktop": false,
                  "hideMobile": false,
                  "_meta": {
                    "htmlID": "u_content_1",
                    "htmlClassNames": "u_content_text"
                  }
                }
              }
            ]
          },
          {
            "values": {
              "backgroundColor": "transparent",
              "border": {},
              "padding": "10px",
              "_meta": {
                "htmlID": "u_column_2",
                "htmlClassNames": "u_column"
              }
            },
            "contents": [
              {
                "type": "image",
                "values": {
                  "src": {
                    "url": "https://via.placeholder.com/260x180",
                    "width": 260,
                    "height": 180
                  },
                  "textAlign": "center",
                  "altText": "Placeholder image",
                  "action": {
                    "name": "web",
                    "values": {
                      "href": "https://example.com",
                      "target": "_blank"
                    }
                  },
                  "containerPadding": "10px",
                  "selectable": true,
                  "draggable": true,
                  "duplicatable": true,
                  "deletable": true,
                  "hideDesktop": false,
                  "hideMobile": false,
                  "_meta": {
                    "htmlID": "u_content_2",
                    "htmlClassNames": "u_content_image"
                  }
                }
              }
            ]
          }
        ]
      }
    ]
  },
  "schemaVersion": 1
}

Key parts​

PropertyLocationPurpose
body.valuesTop levelGlobal settings: background color, content width, font family, link styles, preheader text
body.rows[]Top levelArray of row containers, rendered top to bottom
row.cellsRowColumn width ratios. [1, 1] = two equal columns. [2, 1] = 2/3 + 1/3 split
row.columns[]RowArray of column objects, one per cell
column.contents[]ColumnArray of content blocks in this column
content.typeContent blockBlock type: paragraph, heading, image, button, divider, html, social, video, table, timer, form, spacer, menu
content.valuesContent blockAll settings for the block (text, src, colors, padding, visibility, permissions)

Saving and loading​

Save the design JSON to your database when the user is done editing. Load it back to resume editing later.

// Save: get the current design
const design = await pexelize.getDesign();
await api.saveTemplate(templateId, design);

// Load: pass design to the editor
const savedDesign = await api.getTemplate(templateId);
pexelize.loadDesign(savedDesign);
tip

Always save the JSON, not the HTML. JSON is editable -- you can load it back into the editor and users can continue editing where they left off. HTML is a one-way export for sending or publishing.

Column width ratios​

The cells array on each row defines the relative width of each column. The editor normalizes these into proportions:

  • [1] -- single full-width column
  • [1, 1] -- two equal columns (50%/50%)
  • [1, 1, 1] -- three equal columns (33%/33%/33%)
  • [2, 1] -- two columns at 66%/33%
  • [1, 2, 1] -- three columns at 25%/50%/25%

Next steps​