[{"data":1,"prerenderedAt":895},["ShallowReactive",2],{"guide-html-preview-email-templates":3},{"id":4,"title":5,"body":6,"date":887,"description":888,"extension":889,"meta":890,"navigation":414,"path":891,"readingTime":295,"seo":892,"stem":893,"__hash__":894},"guides\u002Fguides\u002Fhtml-preview-email-templates.md","HTML Preview for Email Templates",{"type":7,"value":8,"toc":868},"minimark",[9,14,23,26,30,33,174,185,189,194,354,361,365,378,492,498,502,567,570,574,577,581,584,593,597,606,610,613,673,676,680,683,696,700,703,714,718,828,832,855,859,865],[10,11,13],"h2",{"id":12},"why-email-templates-need-special-previewing","Why Email Templates Need Special Previewing",[15,16,17,18,22],"p",{},"Email HTML is not web HTML. Gmail strips ",[19,20,21],"code",{},"\u003Cstyle>"," blocks. Outlook uses Word's rendering engine. Mobile apps resize tables unpredictably. A template that looks perfect in Chrome might fall apart in an inbox.",[15,24,25],{},"Previewing email templates in a browser is step one — but you also need to understand which CSS properties survive the journey from your code to the recipient's screen.",[10,27,29],{"id":28},"the-constraints-of-email-html","The Constraints of Email HTML",[15,31,32],{},"Email clients vary wildly in CSS support. Here is what you are up against:",[34,35,36,58],"table",{},[37,38,39],"thead",{},[40,41,42,46,49,52,55],"tr",{},[43,44,45],"th",{},"Technique",[43,47,48],{},"Web Pages",[43,50,51],{},"Gmail",[43,53,54],{},"Outlook",[43,56,57],{},"Apple Mail",[59,60,61,84,98,111,124,140,155],"tbody",{},[40,62,63,72,75,78,81],{},[64,65,66,68,69],"td",{},[19,67,21],{}," in ",[19,70,71],{},"\u003Chead>",[64,73,74],{},"Full support",[64,76,77],{},"Stripped",[64,79,80],{},"Partial",[64,82,83],{},"Full",[40,85,86,89,91,93,96],{},[64,87,88],{},"Media queries",[64,90,83],{},[64,92,77],{},[64,94,95],{},"No",[64,97,83],{},[40,99,100,103,105,107,109],{},[64,101,102],{},"Flexbox",[64,104,83],{},[64,106,95],{},[64,108,95],{},[64,110,83],{},[40,112,113,116,118,120,122],{},[64,114,115],{},"CSS Grid",[64,117,83],{},[64,119,95],{},[64,121,95],{},[64,123,83],{},[40,125,126,131,133,136,138],{},[64,127,128],{},[19,129,130],{},"border-radius",[64,132,83],{},[64,134,135],{},"Yes",[64,137,80],{},[64,139,83],{},[40,141,142,147,149,151,153],{},[64,143,144],{},[19,145,146],{},"background-image",[64,148,83],{},[64,150,80],{},[64,152,95],{},[64,154,83],{},[40,156,157,166,168,170,172],{},[64,158,159,162,163],{},[19,160,161],{},"padding"," on ",[19,164,165],{},"\u003Cdiv>",[64,167,83],{},[64,169,77],{},[64,171,135],{},[64,173,83],{},[15,175,176,177,181,182,184],{},"The practical consequence: ",[178,179,180],"strong",{},"you write email HTML like it is 2004."," Tables for layout. Inline styles for everything. No flexbox, no grid, no ",[19,183,21],{}," blocks as your primary styling method.",[10,186,188],{"id":187},"writing-email-safe-html","Writing Email-Safe HTML",[190,191,193],"h3",{"id":192},"use-tables-for-layout","Use Tables for Layout",[195,196,201],"pre",{"className":197,"code":198,"language":199,"meta":200,"style":200},"language-html shiki shiki-themes github-light github-dark","\u003Ctable width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n  \u003Ctr>\n    \u003Ctd width=\"200\" bgcolor=\"#f5f5f5\">\n      Sidebar content\n    \u003C\u002Ftd>\n    \u003Ctd width=\"400\">\n      Main content\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n","html","",[19,202,203,252,262,287,293,303,319,325,334,344],{"__ignoreMap":200},[204,205,208,212,215,219,222,226,229,231,234,237,239,241,245,247,249],"span",{"class":206,"line":207},"line",1,[204,209,211],{"class":210},"sVt8B","\u003C",[204,213,34],{"class":214},"s9eBZ",[204,216,218],{"class":217},"sScJk"," width",[204,220,221],{"class":210},"=",[204,223,225],{"class":224},"sZZnC","\"600\"",[204,227,228],{"class":217}," cellpadding",[204,230,221],{"class":210},[204,232,233],{"class":224},"\"0\"",[204,235,236],{"class":217}," cellspacing",[204,238,221],{"class":210},[204,240,233],{"class":224},[204,242,244],{"class":243},"s7hpK"," border",[204,246,221],{"class":210},[204,248,233],{"class":224},[204,250,251],{"class":210},">\n",[204,253,255,258,260],{"class":206,"line":254},2,[204,256,257],{"class":210},"  \u003C",[204,259,40],{"class":214},[204,261,251],{"class":210},[204,263,265,268,270,272,274,277,280,282,285],{"class":206,"line":264},3,[204,266,267],{"class":210},"    \u003C",[204,269,64],{"class":214},[204,271,218],{"class":217},[204,273,221],{"class":210},[204,275,276],{"class":224},"\"200\"",[204,278,279],{"class":243}," bgcolor",[204,281,221],{"class":210},[204,283,284],{"class":224},"\"#f5f5f5\"",[204,286,251],{"class":210},[204,288,290],{"class":206,"line":289},4,[204,291,292],{"class":210},"      Sidebar content\n",[204,294,296,299,301],{"class":206,"line":295},5,[204,297,298],{"class":210},"    \u003C\u002F",[204,300,64],{"class":214},[204,302,251],{"class":210},[204,304,306,308,310,312,314,317],{"class":206,"line":305},6,[204,307,267],{"class":210},[204,309,64],{"class":214},[204,311,218],{"class":217},[204,313,221],{"class":210},[204,315,316],{"class":224},"\"400\"",[204,318,251],{"class":210},[204,320,322],{"class":206,"line":321},7,[204,323,324],{"class":210},"      Main content\n",[204,326,328,330,332],{"class":206,"line":327},8,[204,329,298],{"class":210},[204,331,64],{"class":214},[204,333,251],{"class":210},[204,335,337,340,342],{"class":206,"line":336},9,[204,338,339],{"class":210},"  \u003C\u002F",[204,341,40],{"class":214},[204,343,251],{"class":210},[204,345,347,350,352],{"class":206,"line":346},10,[204,348,349],{"class":210},"\u003C\u002F",[204,351,34],{"class":214},[204,353,251],{"class":210},[15,355,356,357,360],{},"Tables are the only layout method that works everywhere. Nest them for complex structures — a two-column row is a table inside a ",[19,358,359],{},"\u003Ctd>",".",[190,362,364],{"id":363},"inline-all-styles","Inline All Styles",[15,366,367,368,371,372,374,375,377],{},"Gmail keeps inline ",[19,369,370],{},"style"," attributes but removes ",[19,373,21],{}," blocks in the ",[19,376,71],{},". Tools like Premailer or Juice automate inlining:",[195,379,381],{"className":197,"code":380,"language":199,"meta":200,"style":200},"\u003C!-- Before inlining -->\n\u003Cp class=\"headline\">Welcome\u003C\u002Fp>\n\n\u003Cstyle>.headline { font-size: 24px; color: #333; }\u003C\u002Fstyle>\n\n\u003C!-- After inlining -->\n\u003Cp style=\"font-size: 24px; color: #333;\">Welcome\u003C\u002Fp>\n",[19,382,383,389,410,416,463,467,472],{"__ignoreMap":200},[204,384,385],{"class":206,"line":207},[204,386,388],{"class":387},"sJ8bj","\u003C!-- Before inlining -->\n",[204,390,391,393,395,398,400,403,406,408],{"class":206,"line":254},[204,392,211],{"class":210},[204,394,15],{"class":214},[204,396,397],{"class":217}," class",[204,399,221],{"class":210},[204,401,402],{"class":224},"\"headline\"",[204,404,405],{"class":210},">Welcome\u003C\u002F",[204,407,15],{"class":214},[204,409,251],{"class":210},[204,411,412],{"class":206,"line":264},[204,413,415],{"emptyLinePlaceholder":414},true,"\n",[204,417,418,420,422,425,428,431,435,438,441,445,448,451,453,456,459,461],{"class":206,"line":289},[204,419,211],{"class":210},[204,421,370],{"class":214},[204,423,424],{"class":210},">",[204,426,427],{"class":217},".headline",[204,429,430],{"class":210}," { ",[204,432,434],{"class":433},"sj4cs","font-size",[204,436,437],{"class":210},": ",[204,439,440],{"class":433},"24",[204,442,444],{"class":443},"szBVR","px",[204,446,447],{"class":210},"; ",[204,449,450],{"class":433},"color",[204,452,437],{"class":210},[204,454,455],{"class":433},"#333",[204,457,458],{"class":210},"; }\u003C\u002F",[204,460,370],{"class":214},[204,462,251],{"class":210},[204,464,465],{"class":206,"line":295},[204,466,415],{"emptyLinePlaceholder":414},[204,468,469],{"class":206,"line":305},[204,470,471],{"class":387},"\u003C!-- After inlining -->\n",[204,473,474,476,478,481,483,486,488,490],{"class":206,"line":321},[204,475,211],{"class":210},[204,477,15],{"class":214},[204,479,480],{"class":217}," style",[204,482,221],{"class":210},[204,484,485],{"class":224},"\"font-size: 24px; color: #333;\"",[204,487,405],{"class":210},[204,489,15],{"class":214},[204,491,251],{"class":210},[15,493,494,495,497],{},"Always inline before sending. Writing CSS in ",[19,496,21],{}," during development is fine — just inline it before your final test.",[190,499,501],{"id":500},"use-absolute-urls-for-images","Use Absolute URLs for Images",[195,503,505],{"className":197,"code":504,"language":199,"meta":200,"style":200},"\u003C!-- Wrong — will not load in email -->\n\u003Cimg src=\"images\u002Flogo.png\" alt=\"Logo\">\n\n\u003C!-- Correct — full URL -->\n\u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fimages\u002Flogo.png\" alt=\"Logo\">\n",[19,506,507,512,537,541,546],{"__ignoreMap":200},[204,508,509],{"class":206,"line":207},[204,510,511],{"class":387},"\u003C!-- Wrong — will not load in email -->\n",[204,513,514,516,519,522,524,527,530,532,535],{"class":206,"line":254},[204,515,211],{"class":210},[204,517,518],{"class":214},"img",[204,520,521],{"class":217}," src",[204,523,221],{"class":210},[204,525,526],{"class":224},"\"images\u002Flogo.png\"",[204,528,529],{"class":217}," alt",[204,531,221],{"class":210},[204,533,534],{"class":224},"\"Logo\"",[204,536,251],{"class":210},[204,538,539],{"class":206,"line":264},[204,540,415],{"emptyLinePlaceholder":414},[204,542,543],{"class":206,"line":289},[204,544,545],{"class":387},"\u003C!-- Correct — full URL -->\n",[204,547,548,550,552,554,556,559,561,563,565],{"class":206,"line":295},[204,549,211],{"class":210},[204,551,518],{"class":214},[204,553,521],{"class":217},[204,555,221],{"class":210},[204,557,558],{"class":224},"\"https:\u002F\u002Fexample.com\u002Fimages\u002Flogo.png\"",[204,560,529],{"class":217},[204,562,221],{"class":210},[204,564,534],{"class":224},[204,566,251],{"class":210},[15,568,569],{},"Email clients download images from servers. Relative paths resolve to nothing.",[10,571,573],{"id":572},"preview-workflow-for-email-templates","Preview Workflow for Email Templates",[15,575,576],{},"A solid workflow catches rendering problems before they reach inboxes.",[190,578,580],{"id":579},"step-1-write-and-preview-in-browser","Step 1: Write and Preview in Browser",[15,582,583],{},"Use an HTML preview tool to write and iterate on your template. At this stage, you are checking structure, content, and basic styling.",[15,585,586,587,592],{},"Try our ",[588,589,591],"a",{"href":590},"\u002Ftools\u002Fhtml-preview","HTML Preview"," tool — paste your email template code and see the rendered output instantly.",[190,594,596],{"id":595},"step-2-inline-css","Step 2: Inline CSS",[15,598,599,600,602,603,605],{},"Run your template through an CSS inliner. This merges your ",[19,601,21],{}," rules into inline ",[19,604,370],{}," attributes on each element.",[190,607,609],{"id":608},"step-3-test-in-multiple-clients","Step 3: Test in Multiple Clients",[15,611,612],{},"Do not rely on a single browser view. Use these testing options:",[34,614,615,628],{},[37,616,617],{},[40,618,619,622,625],{},[43,620,621],{},"Tool",[43,623,624],{},"What It Does",[43,626,627],{},"Cost",[59,629,630,641,651,662],{},[40,631,632,635,638],{},[64,633,634],{},"Litmus",[64,636,637],{},"Screenshots across 50+ email clients",[64,639,640],{},"Paid",[40,642,643,646,649],{},[64,644,645],{},"Email on Acid",[64,647,648],{},"Pre-send testing with screenshots",[64,650,640],{},[40,652,653,656,659],{},[64,654,655],{},"Outlook Test Mode",[64,657,658],{},"Preview in Outlook desktop",[64,660,661],{},"Free (if you have Outlook)",[40,663,664,667,670],{},[64,665,666],{},"Gmail Web",[64,668,669],{},"Send to yourself, check web client",[64,671,672],{},"Free",[15,674,675],{},"At minimum, test in Gmail (web), Outlook (desktop), and Apple Mail (iOS).",[190,677,679],{"id":678},"step-4-check-without-images","Step 4: Check Without Images",[15,681,682],{},"Many email clients block images by default. Preview your template with images disabled:",[684,685,686,690,693],"ul",{},[687,688,689],"li",{},"Does the alt text make sense?",[687,691,692],{},"Is the layout still understandable?",[687,694,695],{},"Do background colors fill the space where images would be?",[190,697,699],{"id":698},"step-5-test-on-mobile","Step 5: Test on Mobile",[15,701,702],{},"Send the email to your phone. Open it in the Gmail app, Apple Mail app, and any other client your audience uses. Check that:",[684,704,705,708,711],{},[687,706,707],{},"Text is readable without zooming",[687,709,710],{},"Buttons are large enough to tap",[687,712,713],{},"Single-column layout does not break",[10,715,717],{"id":716},"common-email-template-bugs","Common Email Template Bugs",[34,719,720,733],{},[37,721,722],{},[40,723,724,727,730],{},[43,725,726],{},"Bug",[43,728,729],{},"Cause",[43,731,732],{},"Fix",[59,734,735,755,770,784,795,809],{},[40,736,737,740,746],{},[64,738,739],{},"Extra spacing between table cells",[64,741,742,743],{},"Default ",[19,744,745],{},"cellspacing",[64,747,748,749,162,752],{},"Set ",[19,750,751],{},"cellspacing=\"0\"",[19,753,754],{},"\u003Ctable>",[40,756,757,760,763],{},[64,758,759],{},"Blue links on addresses\u002Fdates",[64,761,762],{},"Gmail auto-linking",[64,764,765,766,769],{},"Use ",[19,767,768],{},"\u003Cspan>"," with inline color inside the link Gmail creates",[40,771,772,775,778],{},[64,773,774],{},"Broken layout in Outlook",[64,776,777],{},"Outlook uses Word renderer",[64,779,765,780,783],{},[19,781,782],{},"mso-"," conditional comments for Outlook-specific fixes",[40,785,786,789,792],{},[64,787,788],{},"Images not loading",[64,790,791],{},"Relative URLs",[64,793,794],{},"Use absolute URLs",[40,796,797,800,803],{},[64,798,799],{},"Font falls back to Times",[64,801,802],{},"Web fonts stripped",[64,804,805,806],{},"Specify a safe fallback stack: ",[19,807,808],{},"font-family: 'Roboto', Arial, sans-serif",[40,810,811,814,817],{},[64,812,813],{},"1px gaps in Outlook",[64,815,816],{},"Image display behavior",[64,818,819,820,823,824,827],{},"Add ",[19,821,822],{},"style=\"display:block;\""," to ",[19,825,826],{},"\u003Cimg>"," tags",[10,829,831],{"id":830},"key-takeaways","Key Takeaways",[684,833,834,837,843,846,849,852],{},[687,835,836],{},"Email HTML requires tables for layout and inline styles for compatibility",[687,838,839,840,842],{},"Gmail strips ",[19,841,21],{}," blocks; Outlook uses Word's rendering engine",[687,844,845],{},"Always inline your CSS before sending — tools like Premailer automate this",[687,847,848],{},"Preview in a browser for structure, then test across real email clients",[687,850,851],{},"Test with images disabled and on mobile devices before sending",[687,853,854],{},"Use absolute URLs for all images and assets",[10,856,858],{"id":857},"try-it-yourself","Try It Yourself",[15,860,861,862,864],{},"Write and preview your email templates in real time with our ",[588,863,591],{"href":590}," tool. Paste your table-based layout, add inline styles, and see exactly how it renders — no setup required.",[370,866,867],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":200,"searchDepth":254,"depth":254,"links":869},[870,871,872,877,884,885,886],{"id":12,"depth":254,"text":13},{"id":28,"depth":254,"text":29},{"id":187,"depth":254,"text":188,"children":873},[874,875,876],{"id":192,"depth":264,"text":193},{"id":363,"depth":264,"text":364},{"id":500,"depth":264,"text":501},{"id":572,"depth":254,"text":573,"children":878},[879,880,881,882,883],{"id":579,"depth":264,"text":580},{"id":595,"depth":264,"text":596},{"id":608,"depth":264,"text":609},{"id":678,"depth":264,"text":679},{"id":698,"depth":264,"text":699},{"id":716,"depth":254,"text":717},{"id":830,"depth":254,"text":831},{"id":857,"depth":254,"text":858},"2026-05-28","Learn how to preview and test HTML email templates in the browser. Covers email client quirks, inline styles, and preview workflows.","md",{"immutable":414},"\u002Fguides\u002Fhtml-preview-email-templates",{"title":5,"description":888},"guides\u002Fhtml-preview-email-templates","XSyz32DnokpPYT5ZDN45VNbxOUJTCcx5OcyhHYZLk08",1780401334531]