Back to battles
mediumupcoming

Email Template Builder

A drag-and-drop email template builder with preview and HTML export.

35 min limit0 participants
javascriptcsshtml
PRD
# Email Template Builder PRD

## Overview
Build a drag-and-drop email template builder that lets users compose email layouts from content blocks, style them visually, preview responsively, and export email-safe HTML.

## Requirements
- Drag-and-drop content blocks: header, text, image, button, divider, columns, footer, and spacer
- Edit block content inline including text, colors, padding, and alignment
- Reorder blocks by dragging them up or down in the template
- Responsive preview with a toggle between desktop and mobile viewport widths
- Block style editor with controls for background color, padding, font size, font family, text color, and border
- Image block with URL input field and alt text
- Button block with configurable link URL, button color, and button text
- Column layouts supporting 1, 2, or 3 columns with content in each
- Global styles panel for body background color, default font, and link color
- Export as table-based email-safe HTML with inline styles
- Copy generated HTML to clipboard with one click
- Template gallery with at least 3 starter templates to choose from
- Undo and redo support for all editing actions
- Save and load templates from localStorage
- Template name and subject line input fields
- Preview mode rendering the email in an isolated iframe

## Tech Stack
- HTML, CSS, JavaScript (vanilla or any framework)
- No email builder libraries — build the drag-and-drop editor and HTML export yourself

## Scoring Criteria
- **Functional (40%)**: Drag-and-drop works, block editing works, HTML export produces valid email markup
- **Quality (20%)**: Clean code, generated HTML renders correctly in email clients, handles edge cases (empty blocks, nested columns)
- **Fidelity (25%)**: All features implemented including responsive preview, undo/redo, starter templates, global styles
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit35 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI