Block objects

A design's structure follows a fixed three-level hierarchy: body → rows → columns → contents. Every block object — body, row, column, content — shares the same envelope:

{
  id?: string;     // editor-assigned stable identifier
  values: object;  // styling and behavior for this block
  // …container-specific arrays of children below
}

The shape of values depends on the block type and (for content blocks) on the display mode (email vs web vs document vs popup) — the embedded editor only surfaces options that make sense in the current mode.

Body

The top-level container inside the Design object. Wraps an ordered list of rows and the body-level styling.

{
  "id": "body-1",
  "rows": [
    /* Row objects */
  ],
  "values": {
    "backgroundColor": "#ffffff",
    "contentWidth": "600px",
    "fontFamily": { "label": "Arial", "value": "arial,helvetica,sans-serif" }
  }
}

Field	Type	Notes
id	string	Editor-assigned stable identifier. Optional in the wire format.
rows	Row[]	Ordered list of rows.
values	object	Body-level styling — background color, default font, content width, and so on.

Email designs also accept headers and footers arrays — see Design object → Email-only fields.

Row

A horizontal slice of the body. Holds one or more columns and a cells layout that controls how the columns split the row's width.

{
  "id": "u_row_1",
  "cells": [12],
  "columns": [
    /* Column objects */
  ],
  "values": {
    "columnsBackgroundColor": "",
    "backgroundColor": "",
    "padding": "0px",
    "hideDesktop": false,
    "hideMobile": false
  }
}

Field	Type	Notes
id	string	Editor-assigned stable identifier. Optional in the wire format.
cells	number[]	The 12-column-grid layout for this row, e.g. [12] for a single full-width column, [6, 6] for two equal halves, [4, 8] for a 1/3-2/3 split. The numbers must sum to 12.
columns	Column[]	One column entry per cell — cells.length === columns.length.
values	object	Row-level styling: padding, background colors, device visibility, anchors, and so on.

Column

A vertical slice of a row. Holds a stack of content blocks and column-level styling.

{
  "id": "u_column_1",
  "contents": [
    /* Content objects */
  ],
  "values": {
    "backgroundColor": "",
    "padding": "0px",
    "border": {}
  }
}

Field	Type	Notes
id	string	Editor-assigned stable identifier. Optional in the wire format.
contents	Content[]	Ordered stack of content blocks rendered inside the column.
values	object	Column-level styling: background, padding, borders.

Content (envelope)

Every content block in a column shares a tagged-union envelope. The type field discriminates which content type the values shape comes from — see Content types for the full enumeration.

{
  id?: string;
  type: 'text' | 'image' | 'button' | 'heading' | 'divider'
      | 'html' | 'video' | 'social' | 'menu' | 'timer'
      | 'custom';
  // 'custom' blocks also carry a `slug: string` identifying the registered tool
  values: object; // shape depends on `type` (and on the display mode)
}

See Content types for the per-type values shapes.

Related

• Design object — the root that wraps everything.
• Content types — what goes inside column.contents.
• Validate — verify a block tree conforms to the schema.