[{"data":1,"prerenderedAt":383},["ShallowReactive",2],{"category-code":3},{"slug":4,"title":5,"description":6,"resourceCount":7,"subcategories":8},"code","Code","Frameworks, generators, templates, and references for hand-coding and testing HTML, CSS, and AMP email markup across every major email client.",82,[9,46,85,96,133,170,207,238,264,295,315,347],{"slug":10,"title":11,"description":12,"resourceCount":13,"preview":14},"amp","AMP for Email","Documentation, demos, and guides for building interactive AMP emails that work in Gmail.",5,[15,22,28,34,40],{"name":16,"url":17,"description":18,"type":19,"slug":20,"source":21},"AMP Demos by Salesforce","https:\u002F\u002Famp-demos.herokuapp.com\u002F","This is a collection of AMP for Email examples written for and tested in SFMC.","collection","amp-demos-by-salesforce","emailresourc-es",{"name":23,"url":24,"description":25,"type":26,"slug":27,"source":21},"Awesome AMP for Email","https:\u002F\u002Fgithub.com\u002Favigoldman\u002Fawesome-amp-for-email","A repository of awesome resources and tools for AMP for Email.","repository","awesome-amp-for-email",{"name":29,"url":30,"description":31,"type":32,"slug":33,"source":21},"How to Extract AMP4email Markup from Gmail","https:\u002F\u002Falicelicode.medium.com\u002Fhow-to-extract-amp4email-markup-from-gmail-8499b1958a31","Guide by Alice Li on how to grab valid AMP4email markup code from your Gmail inbox so that you can play around with it yourself.","article","how-to-extract-amp4email-markup-from-gmail",{"name":35,"url":36,"description":37,"type":38,"slug":39,"source":21},"Official AMP for Email Documentation","https:\u002F\u002Famp.dev\u002Fdocumentation\u002Fguides-and-tutorials\u002Fstart\u002Fcreate_email\u002F","Learn how to build AMP emails from the offical documentation.","documentation","official-amp-for-email-documentation",{"name":41,"url":42,"description":43,"type":44,"slug":45,"source":21},"The Definitive Guide to AMP for Email","https:\u002F\u002Fwww.mailmodo.com\u002Fguides\u002Famp-for-email\u002F","Learn how to create interactive emails using AMP framework and its use cases.","blog","the-definitive-guide-to-amp-for-email",{"slug":47,"title":48,"description":49,"resourceCount":50,"preview":51},"code-editors","Code Editors","Text editors and live-coding tools built or commonly used for writing email HTML.",7,[52,58,63,69,75,80],{"name":53,"url":54,"description":55,"type":56,"slug":57,"source":21},"Adobe Dreamweaver","https:\u002F\u002Fwww.adobe.com\u002Fproducts\u002Fdreamweaver.html","Code editor made for creating responsive emails used by email developers.","application","adobe-dreamweaver",{"name":59,"url":60,"description":61,"type":56,"slug":62,"source":21},"Atom","https:\u002F\u002Fatom.io\u002F","A hackable text editor for the 21st Century built by GitHub.","atom",{"name":64,"url":65,"description":66,"type":67,"slug":68,"source":21},"Email on Acid Editor","https:\u002F\u002Fwww.emailonacid.com\u002Femail-editor\u002F","Build your code from scratch, or make your code edits and test code changes in real time.","service","email-on-acid-editor",{"name":70,"url":71,"description":72,"type":73,"slug":74,"source":21},"HTML email previewer","https:\u002F\u002Fmailninja.co\u002Femail-previewer","Preview your emails with this simple and FREE tool.","utility","html-email-previewer",{"name":76,"url":77,"description":78,"type":67,"slug":79,"source":21},"Parcel","https:\u002F\u002Fparcel.io","Parcel is the email coding platform that streamlines your development workflow to help you rapidly code high-quality emails.","parcel",{"name":81,"url":82,"description":83,"type":56,"slug":84,"source":21},"Sublime Text","https:\u002F\u002Fwww.sublimetext.com\u002F","A sophisticated text editor for code, markup and prose.","sublime-text",{"slug":19,"title":86,"description":87,"resourceCount":88,"preview":89},"Collections","Curated collections of email code examples and references.",1,[90],{"name":91,"url":92,"description":93,"type":94,"slug":95,"source":21},"Free Marketo Email Templates","https:\u002F\u002Fstensul.com\u002Femail-templates\u002Fmarketo\u002F","Completely free, professional Marketo Email Templates. Easily upload and customize to your needs. Fully responsive, tested in over 100 email clients.","templates","free-marketo-email-templates",{"slug":97,"title":98,"description":99,"resourceCount":100,"preview":101},"dark-mode","Dark Mode","Guides and simulators for handling dark mode rendering quirks across Outlook, Gmail, and Apple Mail.",9,[102,107,112,117,122,128],{"name":103,"url":104,"description":105,"type":32,"slug":106,"source":21},"Dark Mode Email Guide","https:\u002F\u002Fwww.litmus.com\u002Fblog\u002Fthe-ultimate-guide-to-dark-mode-for-email-marketers\u002F","Break down of which email clients offer Dark Mode, how each client’s Dark Mode settings impact your email designs, and what you can do to improve your emails for subscribers that read in Dark Mode.","dark-mode-email-guide",{"name":108,"url":109,"description":110,"type":73,"slug":111,"source":21},"Dark Mode for Email Simulator","https:\u002F\u002Fproofjump.com\u002Femail-source-converter\u002F","Check how your email looks like in Dark Mode.","dark-mode-for-email-simulator",{"name":113,"url":114,"description":115,"type":32,"slug":116,"source":21},"Fixing Problems With Borders in Dark Mode","https:\u002F\u002Fwebdesign.tutsplus.com\u002Farticles\u002Ffixing-problems-with-borders-in-dark-mode-email-design--cms-39410","Nicole Merlin takes you through what is happening to your borders, as well as how fix any problems you’re having with them.","fixing-problems-with-borders-in-dark-mode",{"name":118,"url":119,"description":120,"type":32,"slug":121,"source":21},"Gmail dark mode fix","https:\u002F\u002Fwww.hteumeuleu.com\u002F2021\u002Ffixing-gmail-dark-mode-css-blend-modes\u002F","Fixing Gmail’s dark mode issues with CSS Blend Modes discovered by Rémi Parmentier.","gmail-dark-mode-fix",{"name":123,"url":124,"description":125,"type":126,"slug":127,"source":21},"Guide to Dark Mode","https:\u002F\u002Fparcel.io\u002Fguides\u002Fdark-mode","Learn how to code and optimize emails for dark mode and improve the user experience of your email marketing campaigns. Discover key techniques and tips to ensure your emails look great in dark mode, and reach a wider audience on various devices.","guide","guide-to-dark-mode",{"name":129,"url":130,"description":131,"type":32,"slug":132,"source":21},"How I Create Dark Mode Friendly Mailers","https:\u002F\u002Fruwanthisulanjali.medium.com\u002Fhow-i-created-dark-mode-friendly-mailers-d40e15e2a5f5","Learn how we can make our mailers dark mode friendly from my research findings and experiments.","how-i-create-dark-mode-friendly-mailers",{"slug":134,"title":135,"description":136,"resourceCount":137,"preview":138},"frameworks","Frameworks","Markup languages and boilerplates, like MJML and Maizzle, that make responsive email coding easier.",6,[139,144,149,154,160,165],{"name":140,"url":141,"description":142,"type":4,"slug":143,"source":21},"Cerberus","https:\u002F\u002Ftedgoas.github.io\u002FCerberus\u002F","A few simple, but solid patterns for responsive HTML emails. Even in Outlook and Gmail.","cerberus",{"name":145,"url":146,"description":147,"type":4,"slug":148,"source":21},"Foundation for Emails","https:\u002F\u002Fget.foundation\u002Femails","Quickly create responsive HTML emails that work. Even on Outlook.","foundation-for-emails",{"name":150,"url":151,"description":152,"type":4,"slug":153,"source":21},"HEML","https:\u002F\u002Fheml.io\u002F","HEML is an open source markup language for building responsive email.","heml",{"name":155,"url":156,"description":157,"type":4,"slug":158,"source":159},"Inky","https:\u002F\u002Fgithub.com\u002Ffoundation\u002Finky","A templating language from Zurb Foundation that compiles simple HTML tags into complex, responsive email markup.","inky","awesome-email-marketing",{"name":161,"url":162,"description":163,"type":4,"slug":164,"source":21},"Maizzle","https:\u002F\u002Fmaizzle.com","Build HTML emails with Tailwind CSS and advanced, email-specific post-processing.","maizzle",{"name":166,"url":167,"description":168,"type":4,"slug":169,"source":21},"MJML","https:\u002F\u002Fmjml.io","MJML is a markup language designed to make responsive email easy.","mjml",{"slug":171,"title":172,"description":173,"resourceCount":174,"preview":175},"generators","Generators","Tools that generate bulletproof buttons, background images, tables, and other tricky email markup for you.",14,[176,181,186,191,196,201],{"name":177,"url":178,"description":179,"type":73,"slug":180,"source":21},"Bulletproof Background Images","https:\u002F\u002Fbackgrounds.cm\u002F","Create rock-solid background images for your HTML email with some help from VML and CSS.","bulletproof-background-images",{"name":182,"url":183,"description":184,"type":73,"slug":185,"source":21},"Bulletproof Email Buttons","https:\u002F\u002Fbuttons.cm\u002F","Design gorgeous buttons using progressively enhanced VML and CSS.","bulletproof-email-buttons",{"name":187,"url":188,"description":189,"type":73,"slug":190,"source":21},"Bulletproof Email Lists","https:\u002F\u002Flists.cm\u002F","Build Semantically Correct, Naturally Responsive HTML Lists for Email.","bulletproof-email-lists",{"name":192,"url":193,"description":194,"type":73,"slug":195,"source":21},"Bulletproof Pardot Email Button Generator","https:\u002F\u002Fjennamolby.com\u002Fbulletproof-pardot-email-button-generator\u002F","Create beautiful buttons for your Pardot emails, without VML. Simply select your button colors, fonts, font sizes, padding, etc and copy and paste the generated HTML into your Pardot email or Pardot email template.","bulletproof-pardot-email-button-generator",{"name":197,"url":198,"description":199,"type":73,"slug":200,"source":21},"Charts generator","https:\u002F\u002Fthesimplepostmaster.com\u002Ftools\u002Fcharts.html","Generate a flexible set of charts that you can send in your emails.","charts-generator",{"name":202,"url":203,"description":204,"type":205,"slug":206,"source":21},"Email Layout Calculator","https:\u002F\u002Fjulie.io\u002Femail-layout-calculator\u002F","Create a bulletproof responsive email grid with tables that works in all major clients. Made by Julie Ng.","","email-layout-calculator",{"slug":208,"title":209,"description":210,"resourceCount":13,"preview":211},"hacks-and-bugs","Hacks & Bugs","Repositories and write-ups documenting rendering bugs and the CSS hacks that fix them.",[212,217,222,227,233],{"name":213,"url":214,"description":215,"type":26,"slug":216,"source":21},"Email Bugs","https:\u002F\u002Fgithub.com\u002Fhteumeuleu\u002Femail-bugs\u002Fissues","A repository for documenting bugs in webmails and email applications.","email-bugs",{"name":218,"url":219,"description":220,"type":26,"slug":221,"source":21},"ESPs HTML bugs","https:\u002F\u002Fgithub.com\u002FBadsender-com\u002Fesp-html-bugs","A repository for documenting ESPs HTML interpretation bugs and oddities.","esps-html-bugs",{"name":223,"url":224,"description":225,"type":32,"slug":226,"source":21},"Fixing bugs with Outlook specific CSS","https:\u002F\u002Fcm.engineering\u002Ffixing-bugs-with-outlook-specific-css-f4b8ae5be4f4","A walkthrough by Stig Morten Myre on different techniques you can use to fix Outlook bugs.","fixing-bugs-with-outlook-specific-css",{"name":228,"url":229,"description":230,"type":231,"slug":232,"source":21},"How to Target Email Clients","https:\u002F\u002Fhowtotarget.email\u002F","Crowdsourced email development techniques for singling out email clients and platforms.","website","how-to-target-email-clients",{"name":234,"url":235,"description":236,"type":32,"slug":237,"source":21},"Making sense of Outlook’s rendering engine","https:\u002F\u002Fwww.hteumeuleu.com\u002F2020\u002Foutlook-rendering-engine\u002F","A deep dive into Outlook's rendering engine and a look at ways to tame the beasts that are the Windows versions of Outlook.","making-sense-of-outlook-s-rendering-engine",{"slug":239,"title":240,"description":241,"resourceCount":242,"preview":243},"html-and-css-support","HTML & CSS Support","Compatibility tables showing which HTML and CSS features each email client actually supports.",4,[244,249,254,259],{"name":245,"url":246,"description":247,"type":231,"slug":248,"source":21},"Can I email","https:\u002F\u002Fwww.caniemail.com\u002F","Support tables for HTML and CSS in emails.","can-i-email",{"name":250,"url":251,"description":252,"type":231,"slug":253,"source":21},"caniuse.email","https:\u002F\u002Fcaniuse.email\u002F","Compatibility tables for CSS support in HTML emails.","caniuse-email",{"name":255,"url":256,"description":257,"type":231,"slug":258,"source":21},"ESP Kinetic Code Support","http:\u002F\u002Ffreshinbox.com\u002Fresources\u002Fesp-support.php","Check to see if your ESP supports sending emails containg dynamic and interactive CSS.","esp-kinetic-code-support",{"name":260,"url":261,"description":262,"type":231,"slug":263,"source":21},"The Ultimate Guide to CSS","http:\u002F\u002Fwww.campaignmonitor.com\u002Fcss\u002F","A complete breakdown of the CSS support for email clients.","the-ultimate-guide-to-css",{"slug":265,"title":266,"description":267,"resourceCount":13,"preview":268},"interactive","Interactive Email","Techniques and demos for building interactive email experiences with CSS and AMP.",[269,274,280,285,290],{"name":270,"url":271,"description":272,"type":19,"slug":273,"source":21},"Interactive Email Collection","https:\u002F\u002Fcodepen.io\u002Fcollection\u002FDyJaxy","A CodePen collection of interactive emails curated by Wilbert Heinen.","interactive-email-collection",{"name":275,"url":276,"description":277,"type":278,"slug":279,"source":21},"Interactive email tutorial","https:\u002F\u002Fcodepen.io\u002Favigoldman\u002Fpen\u002FPjxEbj","A CodePen walkthrough on how interactive email works.","tutorial","interactive-email-tutorial",{"name":281,"url":282,"description":283,"type":19,"slug":284,"source":21},"Interactive Email Tutorials Collection","https:\u002F\u002Ffreshinbox.com\u002Fblog\u002Fcategory\u002Finteractive-email-2\u002F","A collection of interactive email demos and tutorials by Justin Khoo.","interactive-email-tutorials-collection",{"name":286,"url":287,"description":288,"type":32,"slug":289,"source":21},"Punched Card Coding","https:\u002F\u002Fwww.webdesignerdepot.com\u002F2015\u002F10\u002Fpunched-card-coding-the-secret-of-interactive-email\u002F","Mark Robbins gives a walkthrough on the punched card coding technique for achieving complex interactivity in email.","punched-card-coding",{"name":291,"url":292,"description":293,"type":32,"slug":294,"source":21},"Tesla Configurator & Battery Range Calculator Interactive HTML Email","https:\u002F\u002Fnivenranchhod.medium.com\u002Ftesla-configurator-battery-range-calculator-interactive-html-email-experiment-c222145021ff","An article by Niven Ranchhod about a personal challenge to build a complex & real world interactive email.","tesla-configurator-and-battery-range-calculator-interactive-html-email",{"slug":296,"title":297,"description":298,"resourceCount":299,"preview":300},"snippets","Snippets","Reusable, community-tested HTML and CSS snippets for common email layout problems.",3,[301,305,310],{"name":302,"url":303,"description":304,"type":26,"slug":302,"source":21},"email-css-resets","https:\u002F\u002Fgithub.com\u002FJayOram\u002Femail-css-resets","A repository to hold all CSS resets from past and present email clients.",{"name":306,"url":307,"description":308,"type":231,"slug":309,"source":21},"Good Email Code","https:\u002F\u002Fwww.goodemailcode.com\u002F","Email code resources website full of snippets and explanations by Mark Robbins.","good-email-code",{"name":311,"url":312,"description":313,"type":19,"slug":314,"source":21},"Litmus Community Snippets","https:\u002F\u002Flitmus.com\u002Fcommunity\u002Fsnippets","A collection of HTML email snippets submitted by Litmus users.","litmus-community-snippets",{"slug":94,"title":316,"description":317,"resourceCount":318,"preview":319},"Templates","Free, developer-ready HTML and AMP email templates you can adapt for your own campaigns.",11,[320,325,330,335,340,342],{"name":321,"url":322,"description":323,"type":19,"slug":324,"source":21},"BEE Free Templates","https:\u002F\u002Fbeefree.io\u002Ftemplates\u002F","1200+ Free & Professional Email Templates available for export to any platform.","bee-free-templates",{"name":326,"url":327,"description":328,"type":94,"slug":329,"source":21},"Codedmails","https:\u002F\u002Fcodedmails.com\u002F","Save yourself the pain of coding HTML emails and use our tested, accessible and beautiful emails.","codedmails",{"name":331,"url":332,"description":333,"type":19,"slug":334,"source":21},"Free high-quality email templates","https:\u002F\u002Ftabular.email\u002Ftemplates","Tabular provides quality over quantity when it comes to email templates.","free-high-quality-email-templates",{"name":336,"url":337,"description":338,"type":94,"slug":339,"source":21},"Free HTML and AMP Email Template","https:\u002F\u002Fwww.mailmodo.com\u002Femail-templates\u002F","200+ free HTML and AMP email templates to create engaging interactive emails.","free-html-and-amp-email-template",{"name":91,"url":341,"description":93,"type":94,"slug":95,"source":21},"https:\u002F\u002Fstensul.com\u002Femail-templates\u002Fmarketo",{"name":343,"url":344,"description":345,"type":19,"slug":346,"source":21},"Free Pardot Email Templates","https:\u002F\u002Fstensul.com\u002Femail-templates\u002Fpardot","Completely free, professional Pardot Email Templates. Easily upload and customize to your needs. Fully responsive, tested in over 100 email clients.","free-pardot-email-templates",{"slug":348,"title":349,"description":350,"resourceCount":351,"preview":352},"utilities","Utilities","Converters, minifiers, and inliners for cleaning up and preparing email HTML before you send.",12,[353,358,363,368,373,379],{"name":354,"url":355,"description":356,"type":73,"slug":357,"source":21},"alter.email","https:\u002F\u002Falter.email","Transform every part of your HTML emails.","alter-email",{"name":359,"url":360,"description":361,"type":73,"slug":362,"source":21},"Detergent","https:\u002F\u002Fdetergent.io\u002F","A tool to prepare text for pasting into HTML.","detergent",{"name":364,"url":365,"description":366,"type":73,"slug":367,"source":21},"Email Comb","https:\u002F\u002Femailcomb.com\u002F","Removes unused CSS from email templates.","email-comb",{"name":369,"url":370,"description":371,"type":73,"slug":372,"source":21},"Email Crush","https:\u002F\u002Fhtmlcrush.com\u002F","Minify HTML mixed with anything.","email-crush",{"name":374,"url":375,"description":376,"type":377,"slug":378,"source":21},"Email Platform Status","https:\u002F\u002Fwww.emailplatformstatus.com\u002F","This site browses the 4927 emails from Really Good Emails to count the use of certain HTML and CSS features.","data","email-platform-status",{"name":380,"url":109,"description":381,"type":73,"slug":382,"source":21},"Email Source Converter","Convert email from Gmail, Yahoo! Mail or Outlook.com into HTML.","email-source-converter",1786453924797]