How to Preview HTML Before Sending
Reviewed by Jerry Croteau, Founder & Editor
Table of Contents
You've spent an hour building an email template in raw HTML. The inline styles are stacked three layers deep, the table layout has nested rows you can barely follow, and you're about to hit send to your entire list. But what does it actually look like?
This is the moment most people either cross their fingers and send, or go through a painful cycle of saving the file, opening it in a browser, tweaking, saving again, and refreshing. There's a faster way.
The Problem with Blind Sending
Email HTML is notoriously tricky. Unlike web pages, email clients strip out most modern CSS, ignore flexbox and grid entirely, and render the same code differently across Gmail, Outlook, Apple Mail, and Yahoo. A template that looks perfect in your code editor might show broken columns in Outlook or missing images in Gmail's mobile app.
The risk isn't just cosmetic. A broken layout signals carelessness to your recipients. For marketing emails, it can tank click-through rates. For transactional emails — order confirmations, password resets, invoices — it can confuse customers and generate support tickets.
Preview First, Send Second
The simplest safeguard is to preview your HTML before it goes anywhere. Paste the raw code into a live previewer, see exactly what renders, and catch problems before they reach a single inbox.
Here's what to look for during a preview check:
Table structure: Email layouts rely on HTML tables since CSS layout is unreliable in email clients. Check that your columns align, your spacing looks right, and nothing collapses on narrow widths. Use a responsive preview toggle to check at desktop, tablet, and mobile breakpoints.
Inline styles: Most email clients strip out <style> blocks in the <head>, so styles need to be inline on each element. If your preview looks styled but you're relying on a <style> tag, that's a red flag — it might work in the previewer but fail in Gmail.
Image paths: Make sure your <img> tags point to absolute URLs (starting with https://), not relative paths. Relative paths work in a browser but break completely in email.
Alt text: Many email clients block images by default until the recipient clicks "show images." Your alt text is what they see first. Preview with images disabled (mentally) and ask: does this still make sense?
Link targets: Click every link in your preview. It's easy to leave placeholder href="#" values or forget to update a URL from staging to production.
A Quick Workflow
Here's the workflow that saves the most time:
Step 1: Write your email HTML in whatever editor you prefer — VS Code, Sublime, even Notepad.
Step 2: Copy the entire HTML and paste it into the HTML Previewer. The rendered output appears instantly.
Step 3: Toggle to mobile width (375px) and check that your layout doesn't break on small screens. This catches the most common email rendering issues.
Step 4: If the code is messy, hit Prettify to clean up the indentation so you can actually read and debug it. If you need to paste it somewhere with a character limit, hit Minify to compress it down.
Step 5: Copy the final HTML and paste it into your email service provider — Mailchimp, SendGrid, ConvertKit, or whatever you use.
Common Email HTML Mistakes to Catch in Preview
Missing <!DOCTYPE>: Some email clients fall into quirks mode without it, rendering your layout unpredictably. Start every email template with <!DOCTYPE html>.
Width over 600px: The standard email width is 600 pixels. Go wider and you'll trigger horizontal scrolling on most clients. Check this in your preview by switching to the tablet breakpoint (768px) — if it looks cramped there, it'll be worse in email.
Background colors on <body>: Gmail strips body styles. Wrap your content in a full-width table and set the background there instead.
Unsupported CSS properties: margin is unreliable in Outlook. Use padding on table cells instead. border-radius doesn't work in older Outlook versions. max-width is ignored by many clients — use fixed widths.
Beyond Email: Other Uses
Email templates are the most common use case, but previewing HTML is useful any time you're working with raw markup — embedding widgets on a website, debugging a CMS output, checking AI-generated HTML, or building landing page sections. The same paste-preview-fix cycle applies.
The HTML Previewer on ProCalc handles all of these. Paste any HTML, see it rendered live, format it with Prettify or compress it with Minify, test responsive breakpoints, and copy the result. No signup, no file saving, no server calls — everything stays in your browser.
Related Calculators
Get smarter with numbers
Weekly calculator breakdowns, data stories, and financial insights. No spam.
Discussion
Be the first to comment!
