[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tools-page-html-email-preview":3},{"page":4,"related":196,"variants":210},{"path":5,"name":6,"title":7,"description":8,"checkedAt":9,"sources":10,"faq":62,"related":81,"nuxter":84,"body":87,"tool":194,"preset":195},"\u002Ftools\u002Fhtml-email-preview","HTML email preview","HTML Email Preview: Desktop, Mobile and Dark Mode","A free HTML email preview: see your email at desktop and mobile widths in light, dark and forced dark, with checks for Gmail clipping, alt text and links.","2026-10-07",[11,14,17,20,23,26,29,32,35,38,41,44,47,50,53,56,59],{"label":12,"url":13},"Mailchimp, Gmail is clipping my email","https:\u002F\u002Fmailchimp.com\u002Fhelp\u002Fgmail-is-clipping-my-email\u002F",{"label":15,"url":16},"Klaviyo, Why is my email being clipped?","https:\u002F\u002Fhelp.klaviyo.com\u002Fhc\u002Fen-us\u002Farticles\u002F115000591251",{"label":18,"url":19},"email-bugs, issue 41, where Gmail clips a message","https:\u002F\u002Fgithub.com\u002Fhteumeuleu\u002Femail-bugs\u002Fissues\u002F41",{"label":21,"url":22},"email-bugs, issue 90, how much style Gmail keeps","https:\u002F\u002Fgithub.com\u002Fhteumeuleu\u002Femail-bugs\u002Fissues\u002F90",{"label":24,"url":25},"Can I email, the style element","https:\u002F\u002Fwww.caniemail.com\u002Ffeatures\u002Fhtml-style\u002F",{"label":27,"url":28},"Can I email, the link element","https:\u002F\u002Fwww.caniemail.com\u002Ffeatures\u002Fhtml-link\u002F",{"label":30,"url":31},"Can I email, @media (prefers-color-scheme)","https:\u002F\u002Fwww.caniemail.com\u002Ffeatures\u002Fcss-at-media-prefers-color-scheme\u002F",{"label":33,"url":34},"Can I email, the form element","https:\u002F\u002Fwww.caniemail.com\u002Ffeatures\u002Fhtml-form\u002F",{"label":36,"url":37},"Litmus, The ultimate guide to dark mode for email marketers","https:\u002F\u002Fwww.litmus.com\u002Fblog\u002Fthe-ultimate-guide-to-dark-mode-for-email-marketers",{"label":39,"url":40},"Google, Email sender guidelines","https:\u002F\u002Fsupport.google.com\u002Fa\u002Fanswer\u002F81126",{"label":42,"url":43},"Google, Email sender guidelines FAQ","https:\u002F\u002Fsupport.google.com\u002Fa\u002Fanswer\u002F14229414",{"label":45,"url":46},"RFC 8058, Signaling one-click functionality for list email headers","https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc8058",{"label":48,"url":49},"Customer.io docs, Custom preheader text","https:\u002F\u002Fdocs.customer.io\u002Fjourneys\u002Fchannels\u002Femail\u002Fheaders\u002Fcustom-preheader-text\u002F",{"label":51,"url":52},"MDN, The iframe element","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FElements\u002Fiframe",{"label":54,"url":55},"HTML Standard, the policy container of an about:srcdoc document","https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fbrowsers.html#determining-navigation-params-policy-container",{"label":57,"url":58},"Maizzle docs, Configuration","https:\u002F\u002Fmaizzle.com\u002Fdocs\u002Fdevelopment\u002Fconfiguration",{"label":60,"url":61},"Maizzle docs, CLI","https:\u002F\u002Fmaizzle.com\u002Fdocs\u002Fcli",[63,66,69,72,75,78],{"question":64,"answer":65},"How do I preview an HTML email in dark mode?","Paste the HTML and pick Dark. That view applies your prefers-color-scheme dark rules, which is what Apple Mail, Outlook.com and the Outlook apps do. Forced dark approximates apps that recolour the message themselves, such as the Gmail app on iOS. Check those apps too, because each one recolours differently.",{"question":67,"answer":68},"Why are remote images grey boxes?","Loading them would make your browser contact every image host, and a tracking pixel would record an open. So before the frame renders anything, the preview swaps each remote or relative image for a grey box of the same size with its alt text inside. Images embedded as data URLs still render. Switch on Load remote images to load the https ones from their hosts. The switch is off each time you open the page, and fonts, stylesheets and other files stay blocked either way.",{"question":70,"answer":71},"Does this tool send my email anywhere?","No. The HTML is parsed and rendered in this tab, and it never goes into the address or into browser storage. The page sends no request with it. The only requests it can cause are for the email's https images, after you switch on Load remote images. Closing the tab discards it.",{"question":73,"answer":74},"Will my email look the same in Gmail and Outlook?","Not exactly. Gmail ignores \u003Cstyle> inside the body and caps how much CSS it keeps, classic Outlook for Windows ignores prefers-color-scheme and forms, and each app treats dark mode its own way. This preview uses your browser's engine, so treat it as a first pass and send the final version to the clients your readers use.",{"question":76,"answer":77},"How do I preview a Maizzle email template?","Run npx maizzle build and paste a file from the output folder, which is dist unless output.path says otherwise. The build inlines your CSS, so the built file is much closer to what you send than the template source.",{"question":79,"answer":80},"Why don't scripts or links work in the preview?","The frame is sandboxed with no permissions, so scripts don't run, forms don't submit and nothing can open a window or navigate. Links keep their look and show their address on hover, and the link list under the checks shows every URL.",[82,83],"spf-dkim-dmarc-checker","dmarc-record-generator",{"body":85,"to":86},"Nuxter's emails are Vue templates that Maizzle compiles to inlined HTML when the app builds, sent through Cloudflare Email Service or Resend. Its product and marketing mail carries one-click List-Unsubscribe headers by itself.","\u002Ffeatures",{"type":88,"value":89,"toc":184},"minimark",[90,95,99,103,111,118,122,129,132,136,143,147,154,158],[91,92,94],"h2",{"id":93},"a-browser-preview-is-a-first-pass","A browser preview is a first pass",[96,97,98],"p",{},"Email clients don't render HTML the way browsers do. Each one strips, rewrites or ignores parts of it. This tool renders your HTML with your browser's engine inside a sandboxed frame, then checks what the markup alone can tell: size, styles, images, links and text. That catches the mistakes every client shows. It can't reproduce one particular client, so send the final version to real Gmail, Outlook and Apple Mail inboxes before it reaches customers.",[91,100,102],{"id":101},"dark-mode-is-two-different-things","Dark mode is two different things",[96,104,105,106,110],{},"Some clients honour ",[107,108,109],"code",{},"@media (prefers-color-scheme: dark)",". Can I email lists Apple Mail, Outlook.com and the Outlook apps for Mac, iOS and Android among them. They apply your dark rules and leave the rest of the design alone. Other clients ignore the query and recolour the message themselves. Litmus sorts those into partial inversion, which darkens light backgrounds, and full inversion, which changes dark ones too, and puts the Gmail app on iOS in the second group.",[96,112,113,114,117],{},"A design has to survive both. Dark rules that recolour only some of it leave the rest light, and an app that inverts the message also flips the colours you picked for contrast while leaving images alone, so a dark logo on a transparent background disappears. Declare ",[107,115,116],{},"\u003Cmeta name=\"color-scheme\" content=\"light dark\">"," only once your dark rules cover the whole design: it tells clients the email supports dark mode, and the ones that honour it turn the default page and text colours dark as well.",[91,119,121],{"id":120},"images-alt-text-and-tracking-pixels","Images, alt text and tracking pixels",[96,123,124,125,128],{},"Remote images start as grey boxes here, drawn at their width and height attributes with the alt text inside, so the preview doubles as the view a reader with images off gets. If the message still makes sense in it, it works for them. Give every image an alt attribute: a short description, or ",[107,126,127],{},"alt=\"\""," for spacers and decoration, which screen readers then skip. A width attribute keeps the layout steady in clients that ignore CSS sizes.",[96,130,131],{},"Switch on Load remote images to see the real ones. The preview then keeps https images in img elements, picture sources, background attributes and CSS backgrounds, borders and list markers. It still drops http images, fonts, stylesheets and every other file. Each host sees your request as it would a reader's, so a tracking pixel in the email counts an open. The frame inherits this page's Content Security Policy, which lets https images through on this page, so the preview also gives the frame a policy of its own: inline images only while the switch is off, and https images too while it is on. The switch starts off each time you open the page and never goes into the address.",[91,133,135],{"id":134},"size-styles-and-what-gmail-drops","Size, styles and what Gmail drops",[96,137,138,139,142],{},"When Gmail clips a message it hides the end, which usually holds the unsubscribe link, the postal address and the open pixel. It measures the message as it arrives, with any click-tracking links your sending service swapped in, so a message that passes here with little room can still clip. Inline the styles that matter and keep only media queries in a short ",[107,140,141],{},"\u003Cstyle>"," in the head. The table below gives each limit Gmail and Outlook.com apply and where it comes from.",[91,144,146],{"id":145},"preview-a-maizzle-email","Preview a Maizzle email",[96,148,149,150,153],{},"Preview the built file, not the template: Maizzle turns your classes into inline styles during the build, so the source holds classes no client understands. Drop a file from the output folder, ",[107,151,152],{},"dist"," by default, on the editor. If your sending service adds a footer or tracking, also preview the HTML of a message you sent to yourself.",[91,155,157],{"id":156},"before-you-send","Before you send",[159,160,161,165,168,171,174,181],"ul",{},[162,163,164],"li",{},"The preheader reads well beside the subject line.",[162,166,167],{},"Every image has alt text, and the message makes sense with images off.",[162,169,170],{},"Every link uses https and goes where its text says.",[162,172,173],{},"The design is readable in both the Dark and Forced dark views.",[162,175,176,177,180],{},"Marketing mail has a visible unsubscribe link and the one-click ",[107,178,179],{},"List-Unsubscribe-Post"," header from RFC 8058.",[162,182,183],{},"A test send looks right in Gmail, Outlook and Apple Mail.",{"title":185,"searchDepth":186,"depth":186,"links":187},"",2,[188,189,190,191,192,193],{"id":93,"depth":186,"text":94},{"id":101,"depth":186,"text":102},{"id":120,"depth":186,"text":121},{"id":134,"depth":186,"text":135},{"id":145,"depth":186,"text":146},{"id":156,"depth":186,"text":157},"html-email-preview",null,[197,204],{"path":198,"tool":82,"name":199,"title":200,"description":201,"summary":202,"checkedAt":203},"\u002Ftools\u002Fspf-dkim-dmarc-checker","SPF, DKIM and DMARC checker","SPF DKIM DMARC Checker for Resend and Cloudflare","A free SPF DKIM DMARC checker with presets for Resend, Cloudflare Email, Google and Microsoft 365. Reads the right hosts, counts SPF lookups, explains fixes.","Look up and grade a domain's SPF, DKIM and DMARC, with presets that read the hosts Resend, Cloudflare and others use.","2026-10-06",{"path":205,"tool":83,"name":206,"title":207,"description":208,"summary":209,"checkedAt":203},"\u002Ftools\u002Fdmarc-record-generator","DMARC record generator","DMARC Record Generator with a Staged Rollout","A DMARC record generator built on RFC 9989. Roll out with t=y instead of pct, set np and report addresses, compare with your live record and build SPF too.","Build a DMARC record step by step, roll it out in stages and compare it with the one you publish.",[]]