DemoBuy

Campaigns

Last updated on 2026-08-27

The campaign system is the core of the Email Marketing Kit. It covers the complete lifecycle of an email campaign -- from composing content in a block-based editor to reviewing performance after delivery.

Campaign List (/campaigns)

The campaign list page shows all campaigns in a filterable, sortable table.

Features

  • Status filtering -- filter by draft, scheduled, sending, sent, or paused
  • Status badges -- color-coded badges using the StatusBadge component
  • Performance metrics -- sent count, open rate, click rate, and revenue displayed inline
  • Date display -- sent date or scheduled date with relative time formatting
  • Campaign actions -- edit, duplicate, pause, or delete via dropdown menu

Campaign Statuses

Status Description Badge Color
draft Campaign is being composed Muted
scheduled Scheduled for future delivery Info (blue)
sending Currently being delivered Warning (amber)
sent Delivery complete Success (green)
paused Delivery paused mid-send Destructive (red)

Data Model

interface Campaign {
  id: string;
  name: string;
  subject: string;
  preheader: string;
  status: 'draft' | 'scheduled' | 'sending' | 'sent' | 'paused';
  fromName?: string;
  fromEmail?: string;
  replyTo?: string;
  sent?: number;
  openRate?: number;
  clickRate?: number;
  revenue?: number;
  sentAt?: string | null;
  scheduledAt?: string | null;
  createdAt: string;
  stats?: CampaignStats;
  listIds: string[];
  segmentIds: string[];
  excludeSegmentIds?: string[];
  templateId?: string | null;
  variants?: CampaignVariant[];
}

Campaign Detail (/campaigns/[id])

The campaign detail page provides a comprehensive report for a sent campaign.

Sections

  • Header -- campaign name, subject line, send date, and status
  • Delivery stats -- sent, delivered, opened, clicked, bounced, unsubscribed counts
  • Rate cards -- open rate, click rate, bounce rate with trend indicators
  • Revenue attribution -- total revenue generated by this campaign
  • Top clicked links -- URL list with click counts and unique click percentages
  • Device breakdown -- desktop, mobile, and tablet percentages
  • Geographic data -- opens by country with country codes and open rates

Block-Based Email Editor (/campaigns/builder)

The email editor is the most complex screen in the kit. It provides a drag-and-drop interface for composing emails using content blocks.

Layout

The editor uses a split-panel layout:

  • Left panel -- block palette (available block types) and block settings
  • Center panel -- email canvas with live preview
  • Right panel -- global styles and block properties (via Sheet drawer)

Block Types

The editor supports 14 content block types:

Block Type Icon Description
header -- Email header with logo and navigation
hero -- Hero section with image, headline, and CTA
text Type Rich text content block
image Image Image block with alt text and link
button MousePointerClick Call-to-action button with customizable styles
divider Minus Horizontal divider/spacer
columns Columns Multi-column layout (2 or 3 columns)
social Share2 Social media icon links
video Play Video placeholder with thumbnail
html Code Custom HTML block
product ShoppingBag Product card with image, title, price, and CTA
countdown Timer Countdown timer for urgency
menu Menu Navigation menu links
footer -- Email footer with unsubscribe link

Block Styles

Every block supports customizable styles:

interface EmailBlockStyles {
  backgroundColor?: string;
  textColor?: string;
  fontSize?: string;
  fontWeight?: string;
  textAlign?: 'left' | 'center' | 'right';
  padding?: string;
  margin?: string;
  borderRadius?: string;
  borderWidth?: string;
  borderColor?: string;
  width?: string;
  height?: string;
  maxWidth?: string;
  lineHeight?: string;
  fontFamily?: string;
}

Editor Features

  • Drag-and-drop reordering -- grip handles on each block for repositioning
  • Block selection -- click a block to open its settings panel
  • Desktop/mobile preview -- toggle between viewport sizes
  • Undo/redo -- navigation through editing history
  • Global styles -- background color, content width, font family, text color, link color, button colors
  • Real-time preview -- changes are reflected immediately in the canvas

How the Editor Works

  1. Blocks are defined in data/seed.ts as EmailBlock[] with unique IDs
  2. Templates reference blocks by ID in their blocks array
  3. The editor renders blocks in order, each wrapped with drag handles and selection states
  4. Selecting a block opens a Sheet drawer with block-specific settings
  5. Global styles are applied from the EmailTemplateGlobalStyles interface

Subject & Preheader Editor (/campaigns/builder/subject)

A focused editor for composing the subject line and preheader text.

Features

  • Subject line input -- with character count and length indicator
  • Preheader input -- with character count and preview text guidance
  • From name -- configurable sender display name
  • From email -- configurable sender email address
  • Reply-to -- separate reply-to email address

Audience Picker (/campaigns/builder/audience)

Select who receives the campaign.

Features

  • List selection -- choose from available mailing lists with subscriber counts
  • Segment inclusion -- add segments to narrow the audience
  • Segment exclusion -- exclude specific segments from the send
  • Estimated reach -- live count of estimated recipients based on selections
  • Audience summary -- preview of selected lists, included segments, and excluded segments

Scheduling (/campaigns/builder/schedule)

Configure when the campaign is delivered.

Options

  • Send immediately -- deliver as soon as the campaign is activated
  • Schedule for later -- set a specific date and time with timezone selection
  • Optimal send time -- suggestions for best delivery times based on audience engagement patterns

Browse and select from pre-built email templates.

Features

  • Category filtering -- browse templates by category
  • Template preview -- thumbnail preview of each template
  • Template details -- name, description, and block composition
  • One-click selection -- select a template to pre-populate the editor

Data Model

interface EmailTemplate {
  id: string;
  name: string;
  category: string;
  description?: string;
  thumbnail?: string;
  blocks: string[]; // Array of block IDs
  globalStyles?: EmailTemplateGlobalStyles;
  previewUrl?: string;
  createdAt: string;
  updatedAt?: string;
}

Email Preview (/campaigns/preview)

Preview the composed email before sending.

Features

  • Desktop preview -- full-width email render
  • Mobile preview -- narrow viewport simulation
  • Block rendering -- all block types rendered with their configured styles
  • Global style application -- background, fonts, and colors applied from template settings

A/B Testing (/campaigns/ab-test)

Set up A/B test variants to optimize campaign performance.

Features

  • Variant creation -- create multiple variants (A, B, etc.) with different subject lines or content
  • Split ratio configuration -- set the percentage of audience that receives each variant
  • Winning criteria -- choose the metric to determine the winner (open rate, click rate, revenue)
  • Statistical significance -- indicators showing when results are statistically significant

Data Model

interface CampaignVariant {
  id: string;
  campaignId: string;
  name: string;
  subject: string;
  preheader?: string;
  splitPercent: number;
  sent: number;
  openRate: number;
  clickRate: number;
  stats?: CampaignStats;
  isWinner?: boolean;
}

Previous

Screens

Next

Automations