> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequenzy.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Email Editor
> Build beautiful emails with the visual block editor and AI assistant
# Email Editor
The Sequenzy email editor is a visual, block-based editor that makes it easy to create professional emails. You can drag and drop components, customize styling, and even use AI to generate or copy email designs.
## Editor Overview
The editor consists of three main areas:
1. **Canvas** - The central area where you build your email
2. **Block Library** - Left sidebar with available components
3. **AI Assistant** - Right sidebar for AI-powered content generation
## Default Components
The email editor provides a comprehensive set of building blocks:
### Text Components
| Component | Description |
| ------------- | ----------------------------------- |
| **Heading 1** | Large title text for main headlines |
| **Heading 2** | Medium title for section headers |
| **Heading 3** | Small title for subsections |
| **Paragraph** | Standard body text |
| **Lead** | Emphasized introductory text |
### Buttons
| Component | Description |
| -------------------- | ------------------------------------------ |
| **Primary Button** | Main call-to-action with filled background |
| **Secondary Button** | Subtle button with border outline |
| **Pill Button** | Rounded button style |
### Layout
| Component | Description |
| ------------------ | ------------------------------------------------------- |
| **Spacer (S/M/L)** | Adds vertical spacing (16px, 32px, 64px) |
| **Divider** | Horizontal line separator |
| **Two Columns** | Side-by-side layout |
| **Three Columns** | Three-column layout |
| **Repeat** | Repeats child blocks for each item in an array variable |
### Media
| Component | Description |
| --------- | ---------------------------------- |
| **Image** | Upload or link to images |
| **Logo** | Company logo with automatic sizing |
### Feedback
| Component | Description |
| -------------- | ------------------------------------------------------ |
| **Poll** | One-click answer buttons with up to eight options |
| **NPS Survey** | A 0-10 recommendation scale for measuring customer NPS |
Both components save each recipient's latest answer to a subscriber attribute
and emit a `poll.answered` event for segmentation and automations. See
[Polls & NPS Surveys](/concepts/polls) for setup, styling, results, and API
examples.
### Product Blocks
Product blocks can render a fixed product from your synced catalog or a dynamic product from merge-tag data.
Use synced products when the email should always show the same item. Use dynamic product data when the product comes from an event, such as a replenishment or back-in-stock sequence.
Dynamic product blocks can read values such as:
* `{{product.title}}`
* `{{product.imageUrl}}`
* `{{product.url}}`
* `{{product.price}}`
* `{{event.product.title}}`
* `{{event.product.imageUrl}}`
* `{{event.product.url}}`
* `{{event.product.price}}`
The preview data panel detects product variable groups, including event-scoped product groups like `event.product`, so you can preview the same email with different sample products before sending.
### Repeat Blocks
Use a **Repeat** block to render one group of child blocks per item in a list.
The block settings start with one question - **What to show** - with a single
choice per answer:
* **Recommended products** - picked automatically per recipient. Also
available as a one-click **Recommended products** block in the picker's
Commerce section. A **Ranking** setting chooses the strategy: personalized
for each recipient (browsing first, then similar shoppers, then
store-popular, then newest in stock), best sellers by recent order volume,
newest products, or the recipient's recently viewed items. Activity-based
strategies accept an **Activity window** (default 30 days). A product never
repeats within a list or across lists in the same email. You can optionally
narrow recommendations with catalog filters. See
[Product Recommendations](/concepts/product-recommendations) for the full
behavior and attribution stats.
* **Store catalog** - your synced catalog, sorted by newest, price, or title,
with optional filters by tag, collection, vendor, product type, or price
range, resolved at send time. Out-of-stock products are excluded by default.
Recommended and catalog lists share two fine-tuning toggles:
* **Skip already-purchased products** leaves out anything the recipient bought
in the last year. It is on by default for recommendations and off by default
for catalog lists.
* **Match the trigger event's product** only shows products related to the
product on the event that triggered the email - for example, a
browse-abandonment sequence recommending items related to the viewed
product. You choose which attributes must overlap: tags, collection,
product type, or brand, and whether products need to match **any** of the
selected attributes or **all** of them. The default is any shared tag,
collection, or type. The event's own product is never shown, and the toggle
is ignored for sends without a product event, such as campaigns.
The remaining choices:
* **Hand-picked products** - choose exactly which products to show and in what
order. Titles, images, prices, and stock stay synced with your store.
* **Campaign list** - a personalized list computed by the campaign's
personalization rules.
* **Custom variable** - point the block at an array in your data, such as
order items. A source path of `items` reads the `items` array from
transactional API variables and lets child blocks use scoped merge tags like
`{{item.title}}`, `{{item.description}}`, and `{{item.number}}`.
Product lists resolve at send time in campaigns, sequences, and test sends, so
filters also work inside automation emails. Child blocks read product fields
through the item alias: `{{product.title}}`, `{{product.imageUrl}}`,
`{{product.price}}`, `{{product.url}}`, and `{{product.buttonText}}`. The item
alias lives under **Advanced** in the block settings.
**Item templates.** The block settings include ready-made layouts - a card
grid, a single-product spotlight, compact thumbnail rows, and a minimal text
list - so you can restyle a repeated list in one click. Applying a template
replaces the blocks inside the list.
The preview data panel shows editable rows for variable-backed repeat sources.
Store-product lists preview with real products from your catalog instead.
### Sections
| Component | Description |
| ---------------- | ---------------------------------------------------------- |
| **Card** | Boxed content section |
| **Feature Card** | Card with emoji icon |
| **CTA Block** | Call-to-action section with title, description, and button |
| **Quote** | Styled testimonial or quote |
| **List** | Checkmark list for features/benefits |
| **Alert** | Important notice or warning box |
| **Signature** | Email signature block |
| **HTML** | Custom email-safe HTML snippet |
### Footer & Social
| Component | Description |
| ----------------- | ------------------------------------------------- |
| **Social Links** | Social media icons (X, LinkedIn, Instagram, etc.) |
| **Simple Footer** | Minimal footer with unsubscribe link |
| **Full Footer** | Complete footer with address and links |
## Working with Blocks
### Adding Blocks
1. Click a block in the left sidebar
2. It appears at the bottom of your email
3. Drag to reorder as needed
### Editing Blocks
1. Click a block to select it
2. Edit text directly in the canvas
3. Use the settings icon for advanced options
### Formatting Text
Select any text in a text or heading block to open the formatting toolbar. From
there you can apply:
* **Bold** (⌘/Ctrl+B), **Italic** (⌘/Ctrl+I), and **Underline** (⌘/Ctrl+U)
* **Strikethrough** and **inline code**
* **Text color**, **links**, **bullet and numbered lists**, and **alignment**
#### Markdown Shortcuts
The editor recognizes common markdown as you type:
| Type | Result |
| ------------------- | ----------------------- |
| `# `, `## `, `### ` | Heading 1, 2, or 3 |
| `- ` or `1. ` | Bullet or numbered list |
| `` `code` `` | Inline code |
#### Code
Use **inline code** for short fragments like coupon codes, variable names, or
short commands. Wrap the text in single backticks (`` `SAVE10` ``) or select it
and click **Code** in the toolbar.
For longer snippets, add a dedicated **Code block** from the `/` insert menu (or
the add-block button). It is a standalone block you can drag and reorder like
any other. Type your code directly into it across as many lines as you need -
indentation and line breaks are preserved exactly, and **Enter** simply adds a
new line.
##### Code themes
Give a code block a color theme to match your email's style. Open the block's
**settings** panel and pick from **Light** (the default), **Dark**,
**Midnight**, **Terminal**, or **Solarized**.
Themes use plain inline background and text colors (no syntax highlighting), so
they render consistently across email clients.
Code blocks render identically in the editor and the delivered email, so what
you see while editing is what your subscribers receive.
### Working With HTML Blocks
Use the **HTML** block when one section of your email needs custom markup.
1. Add the **HTML** block from the component panel or slash menu
2. Paste your snippet into the inline code editor
3. Review the live preview below the editor
4. Keep the HTML snippet-focused; use the full HTML editor only when the entire email is custom code
HTML blocks support merge tags like `{{ FIRST_NAME }}` and are rendered in the
same email pipeline as the rest of your blocks.
### Block Actions
When you select a block, you'll see action buttons:
* **Settings** - Open block configuration panel
* **Duplicate** - Create a copy of the block
* **Delete** - Remove the block
### Reusable Components
You can save your own reusable components from the same block editor.
1. Select a block and click **Save Block** in the Components sidebar to save that block for reuse
2. Click **Save Section** to save multiple adjacent top-level blocks as one reusable component
3. Open **AI** in the Components sidebar if you want Sequenzy to generate a reusable section from a prompt
4. Insert saved components later from the sidebar, the inline add menu, or drag and drop
Saved components use the same email blocks as the main editor, so after you
insert one you can keep editing it like any other part of your email.
### Drag and Drop
Blocks can be reordered by:
1. Hovering over the block
2. Clicking the grip handle on the left
3. Dragging to the new position
## Fonts
Choose from 50+ fonts to match your brand. The font applies to your entire email and can be changed in the Email Style panel.
### Selecting a Font
1. Open the Email Style panel (left sidebar, gear icon)
2. Click the "Font family" dropdown
3. Select a font—the dropdown shows a preview of each option
4. Your email updates immediately
### System Fonts
These fonts are installed on most devices and render consistently across all email clients:
| Font | Style | Best for |
| --------------- | ---------- | ------------------------ |
| System | Sans-serif | Clean, native look |
| Arial | Sans-serif | Universal compatibility |
| Helvetica | Sans-serif | Professional, modern |
| Georgia | Serif | Elegant, readable |
| Times New Roman | Serif | Traditional, formal |
| Verdana | Sans-serif | Highly readable |
| Trebuchet MS | Sans-serif | Friendly, casual |
| Tahoma | Sans-serif | Compact, clean |
| Courier New | Monospace | Code snippets, technical |
### Web Fonts
Web fonts from Google Fonts give you more design options. They render in modern email clients (Gmail, Apple Mail, Outlook.com) with automatic fallbacks for older clients.
**Popular sans-serif fonts:**
* Inter, Roboto, Open Sans, Lato, Montserrat, Poppins
* DM Sans, Manrope, Plus Jakarta Sans, Space Grotesk
**Serif fonts:**
* Merriweather, Playfair Display, Lora, PT Serif
* Source Serif 4, Libre Baskerville, EB Garamond
**Display fonts:**
* Bebas Neue, Oswald, Anton
**Monospace fonts:**
* Roboto Mono, Fira Code, JetBrains Mono, Space Mono
Web fonts may not display in all email clients. Older versions of Outlook for
Windows use system font fallbacks. Always test your emails if exact font
rendering is critical.
### Font Fallbacks
All fonts include fallback stacks. If the primary font doesn't load, the email gracefully falls back:
```
"Inter" → System UI → Arial → sans-serif
"Playfair Display" → Times New Roman → serif
"Fira Code" → Courier New → monospace
```
This ensures your email remains readable regardless of the recipient's email client.
## AI Email Assistant
The AI assistant helps you create emails faster by generating content or copying designs from images.
### Generating Content
Type a prompt to generate email content:
* "Write a welcome email for new users"
* "Create a promotional email for our summer sale"
* "Make this email more engaging"
### Copying Email Designs
You can copy email designs from screenshots or images:
1. Click the attachment icon in the AI chat
2. Upload a screenshot of an email you want to recreate
3. Type "Copy this email design" or similar prompt
4. The AI will recreate the structure using Sequenzy blocks
When copying emails, the AI preserves the structure and layout while adapting
content to use your company information and personalization variables.
### Example Prompts
**Creating new emails:**
* "Write a 3-email welcome sequence"
* "Create an abandoned cart reminder"
* "Generate a product announcement email"
**Modifying existing content:**
* "Make the headline more compelling"
* "Add a testimonial section"
* "Shorten this email"
**Copying from images:**
* "Copy this email design" (with image attached)
* "Recreate this layout with my brand colors"
* "Use this structure but change the content to be about \[topic]"
## Personalization Variables
Use variables to personalize emails for each subscriber:
| Variable | Description |
| --------------------- | -------------------------- |
| `{{FIRST_NAME}}` | Subscriber's first name |
| `{{LAST_NAME}}` | Subscriber's last name |
| `{{EMAIL}}` | Subscriber's email address |
| `{{UNSUBSCRIBE_URL}}` | Unsubscribe link |
To insert a variable:
1. Click where you want the variable
2. Type `{{` to see available options
3. Select the variable from the dropdown
## Preview & Testing
### Preview Mode
Toggle between desktop and mobile preview to see how your email looks on different devices.
### Send Test Email
Before sending a campaign:
1. Click "Send Test"
2. Select a subscriber to receive the test
3. Check the email in your inbox
## Best Practices
### Design Tips
1. **Start with a logo** - Add brand recognition at the top
2. **Use clear headings** - Break up content with hierarchy
3. **One primary CTA** - Focus attention on the main action
4. **Add whitespace** - Use spacers to improve readability
5. **Include footer** - Always have unsubscribe and company info
### Content Tips
1. **Keep it concise** - Respect your readers' time
2. **Personalize** - Use variables for a personal touch
3. **Mobile-first** - Most emails are read on mobile
4. **Clear value** - Lead with what's in it for the reader
## Related
Send one-time email broadcasts
Build automated email workflows
Send triggered emails via API
Learn about subscriber data