Design JSON

Dragble 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

Property	Location	Purpose
body.values	Top level	Global settings: background color, content width, font family, link styles, preheader text
body.rows[]	Top level	Array of row containers, rendered top to bottom
row.cells	Row	Column width ratios. [1, 1] = two equal columns. [2, 1] = 2/3 + 1/3 split
row.columns[]	Row	Array of column objects, one per cell
column.contents[]	Column	Array of content blocks in this column
content.type	Content block	Block type: paragraph, heading, image, button, divider, html, social, video, table, timer, form, spacer, menu
content.values	Content block	All 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 dragble.getDesign();
await api.saveTemplate(templateId, design);

// Load: pass design to the editor
const savedDesign = await api.getTemplate(templateId);
dragble.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

• Editor Modes -- How editorMode affects the design structure
• Edit Mode vs Live Mode -- Row-level permissions in the JSON (selectable, draggable, deletable)