Templates

Design beautiful email templates using GoodPostal's visual editor, code editor, or a combination of both. Templates use Tailwind utility classes with automatic CSS inlining for consistent rendering across email clients.

Visual Editor

The visual editor provides a drag-and-drop interface for building emails without writing code. It includes a library of pre-built blocks:

Heading - Title or section heading
Text - Paragraph of text with formatting
Image - Single image with an optional link
Logo - Your brand logo
Button - Call-to-action button
Container - Group blocks with a background and padding
Columns - Multi-column layouts (2 to 6 columns)
Divider - Horizontal line separator
Spacer - Vertical spacing control
Footer - Footer with company info and unsubscribe link
Social - Social media icon links
Social Post - Embed an X or TikTok post
Video - Video thumbnail with a play button
Countdown - Live countdown to a date
Progress Bar - Goal progress with a percentage fill
Avatars - Row of avatar images with optional names
Code - Code snippet with syntax highlighting
HTML - Raw HTML for custom content

Working with Blocks

Drag blocks from the component library onto the canvas. Click any block to open its properties panel where you can customize content, colors, padding, alignment, and more.

Drag blocks on the canvas to reorder them. The properties panel on the right controls the selected block's content and styling.

Code Editor

For developers who prefer writing HTML, the code editor provides full control. It features syntax highlighting and a live preview.

Example template HTML

html

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 40px 20px;">
      <h1 style="color: #333; font-size: 24px;">
        Welcome to {{ company_name }}
      </h1>
      <p style="color: #666; font-size: 16px; line-height: 1.5;">
        Hello {{ first_name }}, thanks for joining us!
      </p>
      <a href="https://example.com/get-started"
         style="background: #7CB342; color: white; padding: 12px 24px;
                text-decoration: none; border-radius: 4px;">
        Get Started
      </a>
    </td>
  </tr>
</table>

Bidirectional Sync

Changes in the visual editor are reflected in the code editor and vice versa. You can switch between modes at any time without losing work. This makes it easy to start with the visual editor and then fine-tune the HTML.

Note

When switching from code to visual mode, GoodPostal parses your HTML into visual blocks. Complex or non-standard HTML may not translate perfectly, so preview your template after switching.

Merge Tags

Merge tags let you personalize emails with contact-specific data. Use double curly braces to insert dynamic content:

text

{{ first_name }}     - Contact's first name
{{ last_name }}      - Contact's last name
{{ email }}          - Contact's email address
{{ company_name }}   - Your company name from Email Branding
                       footer settings (falls back to your workspace name)
{{ company_address }} - Your company address from Email Branding
                       footer settings
{{ web_view_url }}   - "View this email in your browser" link
{{ unsubscribe_url }} - Unsubscribe link (required)

Warning

These are the supported tags. Anything else in double curly braces is stripped out of the email before it is sent, so write link targets as plain URLs. A button pointing at {{ cta_url }} ships with an empty link.

Warning

Every email must include an unsubscribe link. GoodPostal automatically adds one to the footer, but if you use a custom template, ensure {{ unsubscribe_url }} is present.

CSS Inlining

GoodPostal automatically inlines CSS when sending emails. This converts Tailwind classes and stylesheet rules into inline styles, ensuring consistent rendering across email clients like Outlook and Gmail.

You do not need to write inline styles manually in the code editor. Write normal CSS and GoodPostal will handle the conversion at send time.

Template Versioning

Autosave keeps your latest edits, and you capture restore points yourself with Save Version. Each snapshot records what changed and who made it, so you can roll back later. You can view the version history and restore any previous version from the template editor.

Auto-save - Your edits are saved automatically as you work, without creating a version
Change notes - Every snapshot requires a short note describing what changed (up to 1,000 characters). Versions are numbered automatically
Restore - Click Restore on any earlier version and confirm. Your current unsaved changes are replaced

Template Categories

Organize your templates into categories like "Newsletters", "Announcements", or "Transactional". Categories help you find the right template quickly when creating a campaign.

Image Library

Upload images directly in the template editor. Images are stored in your workspace and can be reused across templates. Supported formats include JPG, PNG, GIF, and WebP.

Tip

Optimize images before uploading. Large images slow down email loading and may be clipped by email clients. Aim for images under 200KB.

Templates

Join our newsletter