Help & Documentation

Complete reference for Email Designer — installation, components, export, and troubleshooting.

Getting Started

Email Designer is a drag-and-drop email template builder that runs as a native desktop application on macOS and Windows. All designing happens locally on your machine — no internet connection required, no data sent to our servers.

Installation

  1. Download the installer for your platform from the website
  2. Run the installer — on macOS, open the .dmg and drag to Applications; on Windows, run the .exe installer
  3. Launch Email Designer from your Applications folder or Start Menu
  4. On first launch, choose where to store your projects (default: Documents/NoCodeEmailDesigner)
Supported platforms: macOS 10.14 or later, Windows 10 or later.

Security Notice During Installation

Because Email Designer is independently distributed and not yet registered with Apple or Microsoft's code signing programmes, your operating system may display a security warning during installation. This is standard behaviour for independently published desktop software and does not indicate any risk.

On macOS: You may see a message stating the app "can't be opened because it is from an unidentified developer." To proceed, go to System Settings → Privacy & Security, scroll down, and click "Open Anyway" next to the Email Designer entry. You only need to do this once.

On Windows: Windows Defender SmartScreen may display a "Windows protected your PC" message. Click "More info", then click "Run anyway" to continue with the installation.

Email Designer runs entirely on your local machine. It does not collect personal data, access your files outside its own storage folder, or transmit any information to external servers — apart from a brief licence validation check on launch.

Your First Email

  1. Click Create New Project on the welcome screen
  2. Choose Static Email for a standard template
  3. Drag components from the left panel onto the canvas
  4. Click any component to edit its content and properties in the right panel
  5. Use the Preview button to see how it looks on desktop, tablet, and mobile
  6. Click Export when you're done
Tip: Double-click any text component to edit it inline. Use Ctrl/Cmd+Z to undo and Ctrl/Cmd+Shift+Z to redo.

Components

Email Designer includes 15+ components engineered for maximum compatibility across all major email clients, including Outlook, Gmail, and Apple Mail.

Free Components

  • Text — Rich text editing with inline formatting, font control, colours, and hyperlinks
  • Heading — Section headings with customisable size, weight, and alignment
  • Image — Responsive images with alt text, click-through links, and border radius
  • Button — Bulletproof VML buttons that render correctly in Outlook. Fully customisable colours, padding, and border radius
  • Divider — Horizontal rule with custom colour and thickness
  • Spacer — Precise vertical spacing control

Pro Components

  • Hero Section — Full-width banner with background image, overlay text, and CTA button
  • CTA Block — Call-to-action section with heading, description, and button
  • Columns — 2, 3, or 4-column layouts that automatically stack on mobile
  • Grid — Flexible grid system for complex layouts with nested components
  • Social Links — Social media icon bar with customisable platforms and styling
  • Footer — Pre-structured footer with links, address block, and unsubscribe link
  • Table — Data tables with brand styling and alternating row colours
  • List — Styled bulleted or numbered lists
  • Repeater — Data-driven repeating sections that generate content from your data source
  • Background Image — Full-width background image sections with Outlook fallback

Working with Components

Drag any component from the left panel onto the canvas. Components snap into place vertically. Click a component to see its properties in the right panel. Use the drag handle (⠿) to reorder components. Press Delete to remove a selected component.

Brand Styling

Brand Styling is a Pro feature that lets you define your visual identity once and apply it consistently across all your email templates.

Brand Colours

Define your primary, secondary, accent, and neutral colours. These appear in all colour pickers throughout the editor and can be referenced by text and button styles.

Text Styles

Create named text styles — for example, "Heading 1", "Body Text", "Caption" — each with a specific font, size, weight, line height, and colour. Apply any style to a text component with a single click.

Button Styles

Define reusable button presets with background colour, text style, padding, and border radius. Apply to any button component.

Table Styles

Create table presets with header colours, alternating row colours, border styles, and cell padding.

Templates

Templates are reusable starting points saved from your own designs. The free tier supports up to 5 templates; Pro allows unlimited templates.

Saving a Template

  1. Design your email
  2. Go to File → Save as Template
  3. Enter a name, optional description, and category
  4. Click Save

Using a Template

  1. On the welcome screen, click Browse Templates, or go to File → Browse Templates
  2. Search or filter by category
  3. Click Use Template to open it in the editor

Template Categories

Built-in categories: Marketing, Transactional, Newsletter, Welcome, Notification, Other. Templates can be renamed, recategorized, or deleted from the template browser.

Projects

A project saves your complete email design — all components, text content, brand settings, and data source links. Free tier: up to 3 projects. Pro: unlimited.

Saving & Loading

Press Ctrl/Cmd+S or click the Save button. The first save prompts for a project name; subsequent saves update automatically. Load a project from the welcome screen's recent list or via File → Load Project.

Auto-Save

Email Designer saves your work automatically every few seconds to a recovery file. If the app closes unexpectedly, you will be offered the option to restore your unsaved changes on next launch.

Storage Location

Projects are stored as individual JSON files on your device. The default location is Documents/NoCodeEmailDesigner/projects. You can change this in Settings.

Data-Driven Emails

Data-driven templates (Pro) allow you to create personalised email campaigns by connecting your design to a CSV or JSON data source.

Setting Up a Data-Driven Project

  1. Create a new project and choose Data-Driven Email
  2. Import your data file (CSV or JSON)
  3. The data panel on the right shows available fields and sample records

Inserting Merge Fields

Use the {{field_name}} syntax in any text component to insert a data field. You can also:

  • Type {{ to trigger autocomplete for available fields
  • Drag a field from the data panel directly into a text component
  • Use the field picker button in the inline text toolbar

Previewing Records

Use the record navigator in the data panel to cycle through your records and preview how the email renders with real data.

Bulk Export

Go to Export → Bulk Export to generate one HTML file per data record, with all merge fields replaced with actual values. Files are named using a field value or a sequential index.

Exporting

HTML Export

Generates a single, production-ready HTML file optimized for email clients. Output includes Outlook MSO conditional comments, inline CSS, and responsive media queries.

MJML Export (Pro)

Exports the design as MJML markup for further customization or integration with platforms that accept MJML input.

Bulk Export (Pro)

For data-driven projects, generates one personalised HTML file per data record.

Other Export Options

  • Copy to Clipboard — Copies the generated HTML directly to your clipboard
  • Download .eml — Downloads an .eml file that can be opened in most desktop email clients for testing
  • Send Test Email — Sends a test directly to an inbox via your SMTP settings (see below)

SMTP & Test Email Sending

Send a test email to any inbox directly from the app using your own SMTP credentials. This is for testing only — not for bulk or marketing sends.

Configuring SMTP

  1. Go to Settings → SMTP Settings
  2. Enter your SMTP server details: host, port, username, password, encryption (TLS recommended), and from address
  3. Click Test Connection to verify
  4. Click Save

Common SMTP Configurations

  • Gmail: smtp.gmail.com · Port 587 · TLS · Use an App Password, not your account password
  • Outlook / Office 365: smtp.office365.com · Port 587 · TLS
  • SendGrid: smtp.sendgrid.net · Port 587 · TLS · Username: apikey
  • Amazon SES: email-smtp.[region].amazonaws.com · Port 587 · TLS
Your SMTP credentials are stored locally and are never transmitted to NoCodeDoc servers.

Sending a Test Email

  1. With your design open, click Export → Send Test Email
  2. Enter a recipient address and subject line
  3. Click Send

Accessibility Checker

The Accessibility Checker (Pro) audits your email against common accessibility standards and returns a score from 0–100% with specific, actionable issues.

What Is Checked

  • Image alt text — All images must have a descriptive alt attribute
  • Colour contrast — Text must meet WCAG AA minimum contrast ratios against its background
  • Font size — Body text should be a minimum of 14px for readability
  • Link text — Links must have descriptive labels (not "click here" or "read more")
  • Heading hierarchy — Headings must follow a logical H1 → H2 → H3 order
  • Table headers — Data tables must include <th> header cells

Running the Checker

Click the Accessibility button in the toolbar. The panel shows your overall score and a prioritized list of issues. Click any issue to jump to the affected component.

Licensing

Free vs. Pro

The free tier provides access to 6 core components, up to 3 projects, and 5 templates with HTML export. A Pro license ($49, one-time) removes all limits and unlocks every feature.

Activating Your License

  1. Purchase a Pro license at nocodedoc.com
  2. Your license key will be emailed to you immediately after purchase
  3. In the app, click the key icon in the top bar or attempt to use any Pro-only feature
  4. Paste your license key and click Activate
Activation requires an internet connection to validate your license.
  • One license, one device. Your license key can be activated on a single computer at a time.
  • Move to a new computer. Contact support@nocodedoc.com with your purchase email and we'll transfer it.
  • Lost your key? Email support@nocodedoc.com with the email used to purchase and we'll resend it.

Troubleshooting

Email looks incorrect in Outlook

Email Designer generates Outlook-specific MSO conditional comments and VML backgrounds. If issues persist, confirm you are exporting as HTML (not MJML) and that all images have explicit width and height attributes set in the image properties panel.

SMTP connection fails

  • Verify your host, port, and encryption settings match your provider's documentation
  • For Gmail, use an App Password — your regular Google password will not work
  • Check whether your firewall or antivirus software is blocking outbound SMTP on port 587
  • Try port 465 with SSL if port 587 with TLS fails

License activation fails

  • Ensure you are pasting the complete license key — it is a long alphanumeric string
  • Confirm your device has an active internet connection — activation requires a one-time server check
  • If you see "License already activated on another device", deactivate it on the previous device first
  • Contact support@nocodedoc.com if the issue persists

App will not launch or crashes on startup

  • Delete the app cache folder (NoCodeEmailDesigner in your user data directory) and relaunch
  • On macOS: if you see an "app is damaged" message, open System Settings → Privacy & Security and allow the app to run
  • Confirm your OS is supported: macOS 10.14+ or Windows 10+

Still need help?

Contact our support team at support@nocodedoc.com. Pro license holders receive priority responses.