Every email is made of blocks stacked in a list. Each block has a type and a props object. Blocks are available on all plans.

Text

Rich-text block with full formatting support (bold, italic, links, font size, color, alignment).

{
  type: 'text',
  props: {
    html:          string,   // inner HTML — edited via the rich text toolbar
    fontSize:      number,   // px, default 16
    fontFamily:    string,
    fontWeight:    string,   // '400' | '600' | '700'
    color:         string,
    textAlign:     'left' | 'center' | 'right',
    lineHeight:    number,   // default 1.6
    letterSpacing: number,   // px, default 0
    paddingTop:    number,
    paddingRight:  number,
    paddingBottom: number,
    paddingLeft:   number,
    hideOnMobile:  boolean,
  }
}

Image

Responsive image block with optional link, alt text, and border radius.

{
  type: 'image',
  props: {
    src:           string,
    alt:           string,
    linkUrl:       string,
    width:         number | 'full',
    height:        number | 'auto',
    align:         'left' | 'center' | 'right',
    objectFit:     'cover' | 'contain',
    objectPosition: string,
    borderRadius:  number,
    paddingTop:    number,
    paddingBottom: number,
    hideOnMobile:  boolean,
  }
}

Button

Call-to-action button with customisable colors, size, alignment, and full-width option.

{
  type: 'button',
  props: {
    label:           string,
    url:             string,
    backgroundColor: string,
    textColor:       string,
    borderRadius:    number,
    fullWidth:       boolean,
    align:           'left' | 'center' | 'right',
    paddingTop:      number,
    paddingRight:    number,
    paddingBottom:   number,
    paddingLeft:     number,
    hideOnMobile:    boolean,
  }
}

Divider

Horizontal rule with configurable thickness, style, and color.

{
  type: 'divider',
  props: {
    color:         string,
    thickness:     number,
    style:         'solid' | 'dashed' | 'dotted',
    paddingTop:    number,
    paddingBottom: number,
    hideOnMobile:  boolean,
  }
}

Spacer

Invisible vertical gap — useful for fine-grained spacing without padding hacks.

{
  type: 'spacer',
  props: {
    height:       number,
    hideOnMobile: boolean,
  }
}

Columns

Multi-column layout block. Each column is an independent drop zone that holds its own child blocks.

{
  type: 'columns',
  props: {
    columns:        number,     // 2 or 3
    columnWidths:   number[],   // flex ratios, e.g. [1, 2] for 1:2
    columnChildren: Block[][],  // child blocks per column
    gap:            number,
    paddingTop:     number,
    paddingBottom:  number,
    hideOnMobile:   boolean,
  }
}

Social

Social media icon row. Supports Facebook, Twitter/X, Instagram, LinkedIn, YouTube, TikTok, GitHub, and a generic web link.

{
  type: 'social',
  props: {
    icons: Array<{
      platform: 'facebook' | 'twitter' | 'instagram' | 'linkedin'
               | 'youtube' | 'tiktok' | 'github' | 'web',
      url:      string,
    }>,
    iconSize:     number,
    spacing:      number,
    align:        'left' | 'center' | 'right',
    paddingTop:   number,
    paddingBottom: number,
    hideOnMobile: boolean,
  }
}

Video

Video thumbnail with a play button overlay. Links to the video URL when clicked in the sent email (email clients don't support inline video playback).

{
  type: 'video',
  props: {
    videoUrl:      string,
    thumbnailUrl:  string,
    altText:       string,
    width:         number | 'full',
    align:         'left' | 'center' | 'right',
    paddingTop:    number,
    paddingBottom: number,
    hideOnMobile:  boolean,
  }
}

HTML

Raw HTML block — drop in any custom markup. Useful for advanced layouts, custom widgets, or pasting code from your design team.

{
  type: 'html',
  props: {
    html:          string,
    paddingTop:    number,
    paddingBottom: number,
    hideOnMobile:  boolean,
  }
}

WARNING

Raw HTML is not sanitized before rendering in the editor preview. Make sure you trust the source.

List

Bullet or numbered list with configurable font, color, and item spacing.

{
  type: 'list',
  props: {
    listType:      'bullet' | 'numbered',
    items:         string[],
    fontSize:      number,
    fontFamily:    string,
    color:         string,
    itemSpacing:   number,
    paddingTop:    number,
    paddingRight:  number,
    paddingBottom: number,
    paddingLeft:   number,
    hideOnMobile:  boolean,
  }
}

hideOnMobile

Every block type supports hideOnMobile: boolean. When true, the block is hidden on screens narrower than 600px via a CSS media query in the compiled HTML output. Useful for desktop-only hero images or decorative spacers.