Preview and validate your email

Before you export, do two checks: validate to catch problems in the template, then preview to see how the email looks. You'll need MJML installed in the template folder for preview (see Install and set up).

Written for dd_emailforge v0.9.2

Keys, screens, and commands may differ in other versions.

Validate with F3

Press F3. If there are no problems, you'll see a "✓ Validation passed" message and you're done. Otherwise the Validation window opens and lists each problem (for example, "Validation — 1 error(s)").
Use j/k to pick a problem and press Enter. dd_emailforge jumps to the block, and to the exact field where it can.
Fix it and press Ctrl+S.
Press F3 again. Repeat until the list is empty.

The Validation window listing a button width error, with the error selected

FormEdit open on the button with the width field highlighted after jumping from the Validation list

Common problems

Problem	Fix
A button's pixel width is smaller than its left + right inner padding	Make the width bigger, reduce the inner padding, or clear the width.
`email-footer.address_lines is empty`	Fill in the footer's Address (one line per row) field. It's required. `Ctrl+S` lets you save it empty, but F3, validate, and export all catch it.
An image uses a local file but there's no `https://` base URL	Set Base URL in [HEAD], or use full `https://` image addresses.

Preview with p

Press p. dd_emailforge opens a preview page in your web browser.
The page shows your email twice, side by side: at 600px (a typical desktop width) and 320px (a small phone). Your subject and preheader (from [HEAD]) appear at the top.
Keep the browser open while you work. Edit a block in the app and press Ctrl+S, and the preview refreshes on its own within a moment. There's no need to reload the page.

What to check

Phone width (320px): columns stack on top of each other. Check that images, text, and buttons still read well when stacked.
Images: every image shows. A broken image usually means a wrong or non-https:// address.
Logo: use a PNG (not SVG). See FAQ.
Links and buttons point to the right pages.
Footer: your address and unsubscribe link are there. In the preview the unsubscribe link still reads *|UNSUB|*. Your email service fills it in when you send.

Good to know

The preview shows how MJML renders your email in a browser. Email apps like Gmail and Outlook each display email a little differently, so always send yourself a test from your email service before sending to your list. dd_emailforge doesn't send test emails itself.

For developers: preview and validate from the CLI

dd_emailforge validate ./ldnddev-monthly
dd_emailforge preview ./ldnddev-monthly            # serves on port 8766
dd_emailforge preview --port 9000 ./ldnddev-monthly

The preview runs mjml -w (watch mode) and writes into a .preview/ folder inside the template. .preview/ is already in .gitignore.
The preview server listens on loopback (your own computer) only. From the app (p) it uses a random port. From the CLI the default is 8766.
The preview page checks for changes about every 0.7 seconds and reloads both frames when the compiled HTML changes. It's driven by template.mjml, which FormEdit Ctrl+S rewrites. Hand-editing template.json outside the app does not refresh the preview; run export (or make the change in the app) to regenerate template.mjml.

validate exit codes, for scripts and CI:

Exit code	Meaning
`0`	Valid. Nothing is printed.
`1`	Validation errors (one `- …` line each on stderr), or the path wasn't found.
`2`	Unsupported `version` in template.json (for example, `unsupported template.json version 99 (expected 1)`).

Warnings are printed to stderr and don't change the exit code.

Previous: Build your first email · Next: Export and send