[{"data":1,"prerenderedAt":657},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Ftransformers\u002Foverview":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":103,"body":318,"description":651,"extension":652,"meta":653,"navigation":14,"order":18,"path":286,"section":260,"seo":654,"sidebar":14,"stem":655,"toc":14,"__hash__":656},"docs\u002Fdocs\u002Ftransformers\u002Foverview.md",{"type":319,"value":320,"toc":646},"minimark",[321,325,329,332,337,340,408,415,419,422,471,489,539,550,554,561,640,643],[322,323,260],"h1",{"id":324},"transformers",[326,327,328],"p",{},"After Vue SSR renders your template to HTML, Maizzle runs it through a pipeline of transformers that optimize the output for email clients.",[326,330,331],{},"Some of the Transformers help you automate tedious tasks that are required when developing HTML emails, like inlining CSS, automatically adding attributes for better accessibility, or generating plaintext versions of your emails.",[333,334,336],"h2",{"id":335},"defaults","Defaults",[326,338,339],{},"The following transformers are enabled by default:",[341,342,343,355,361,378,392,402],"ul",{},[344,345,346,350,351,354],"li",{},[347,348,349],"code",{},"css.inline"," inlines CSS into element ",[347,352,353],{},"style"," attributes",[344,356,357,360],{},[347,358,359],{},"css.purge"," removes unused CSS",[344,362,363,366,367,370,371,370,374,377],{},[347,364,365],{},"css.shorthand"," rewrites longhand ",[347,368,369],{},"margin"," \u002F ",[347,372,373],{},"padding",[347,375,376],{},"border"," to shorthand",[344,379,380,383,384,387,388,391],{},[347,381,382],{},"css.safe"," escapes Tailwind class names with ",[347,385,386],{},":",", ",[347,389,390],{},"\u002F",", etc.",[344,393,394,397,398,401],{},[347,395,396],{},"html.format"," pretty-prints the output (auto-skipped when ",[347,399,400],{},"html.minify"," is enabled)",[344,403,404,407],{},[347,405,406],{},"html.decodeEntities"," decodes HTML entities",[326,409,410,411,414],{},"Pass ",[347,412,413],{},"false"," on any of these keys to opt out.",[333,416,418],{"id":417},"disabling-transformers","Disabling transformers",[326,420,421],{},"Disable the entire pipeline globally:",[423,424,430],"pre",{"className":425,"code":426,"filename":427,"language":428,"meta":429,"style":429},"language-ts shiki shiki-themes laserwave","export default defineConfig({\n  useTransformers: false,\n})\n","maizzle.config.ts","ts","",[347,431,432,451,466],{"__ignoreMap":429},[433,434,436,440,443,447],"span",{"class":435,"line":18},"line",[433,437,439],{"class":438},"s0ZPN","export",[433,441,442],{"class":438}," default",[433,444,446],{"class":445},"sZNF3"," defineConfig",[433,448,450],{"class":449},"sGGKt","({\n",[433,452,453,457,459,463],{"class":435,"line":13},[433,454,456],{"class":455},"sLaUg","  useTransformers",[433,458,386],{"class":449},[433,460,462],{"class":461},"skd8d"," false",[433,464,465],{"class":449},",\n",[433,467,468],{"class":435,"line":32},[433,469,470],{"class":449},"})\n",[326,472,473,474,481,482,485,486,488],{},"Or per-template via the ",[475,476,478],"a",{"href":477},"\u002Fdocs\u002Fapi\u002Fcomposables#usetransformers",[347,479,480],{},"useTransformers()"," composable inside ",[347,483,484],{},"\u003Cscript setup>",". Pass ",[347,487,413],{}," to disable all transformers, or an object to toggle individual ones:",[423,490,495],{"className":491,"code":492,"filename":493,"language":494,"meta":429,"style":429},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  useTransformers(false)\n  \u002F\u002F or: useTransformers({ inlineCss: false, purgeCss: false })\n\u003C\u002Fscript>\n","emails\u002Fraw.vue","vue",[347,496,497,512,524,530],{"__ignoreMap":429},[433,498,499,502,506,509],{"class":435,"line":18},[433,500,501],{"class":449},"\u003C",[433,503,505],{"class":504},"sb4Pa","script",[433,507,508],{"class":445}," setup",[433,510,511],{"class":449},">\n",[433,513,514,516,519,521],{"class":435,"line":13},[433,515,456],{"class":445},[433,517,518],{"class":449},"(",[433,520,413],{"class":461},[433,522,523],{"class":449},")\n",[433,525,526],{"class":435,"line":32},[433,527,529],{"class":528},"sVsQ9","  \u002F\u002F or: useTransformers({ inlineCss: false, purgeCss: false })\n",[433,531,532,535,537],{"class":435,"line":27},[433,533,534],{"class":449},"\u003C\u002F",[433,536,505],{"class":504},[433,538,511],{"class":449},[540,541,543],"callout",{"type":542},"info",[326,544,545,546,549],{},"Keys set to ",[347,547,548],{},"true"," force-enable that transformer even if it is disabled in the global config.",[333,551,553],{"id":552},"individual-configuration","Individual configuration",[326,555,556,557,560],{},"Each transformer can be configured individually through your config file. For example, CSS inlining and purging are controlled under the ",[347,558,559],{},"css"," key:",[423,562,564],{"className":425,"code":563,"filename":427,"language":428,"meta":429,"style":429},"export default defineConfig({\n  css: {\n    inline: true,\n    purge: true,\n    safe: true,\n    shorthand: true,\n  },\n})\n",[347,565,566,576,586,598,609,620,631,636],{"__ignoreMap":429},[433,567,568,570,572,574],{"class":435,"line":18},[433,569,439],{"class":438},[433,571,442],{"class":438},[433,573,446],{"class":445},[433,575,450],{"class":449},[433,577,578,581,583],{"class":435,"line":13},[433,579,580],{"class":455},"  css",[433,582,386],{"class":449},[433,584,585],{"class":449}," {\n",[433,587,588,591,593,596],{"class":435,"line":32},[433,589,590],{"class":455},"    inline",[433,592,386],{"class":449},[433,594,595],{"class":461}," true",[433,597,465],{"class":449},[433,599,600,603,605,607],{"class":435,"line":27},[433,601,602],{"class":455},"    purge",[433,604,386],{"class":449},[433,606,595],{"class":461},[433,608,465],{"class":449},[433,610,611,614,616,618],{"class":435,"line":52},[433,612,613],{"class":455},"    safe",[433,615,386],{"class":449},[433,617,595],{"class":461},[433,619,465],{"class":449},[433,621,622,625,627,629],{"class":435,"line":128},[433,623,624],{"class":455},"    shorthand",[433,626,386],{"class":449},[433,628,595],{"class":461},[433,630,465],{"class":449},[433,632,633],{"class":435,"line":124},[433,634,635],{"class":449},"  },\n",[433,637,638],{"class":435,"line":48},[433,639,470],{"class":449},[326,641,642],{},"See the individual transformer pages for all available options.",[353,644,645],{},"html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}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 pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}",{"title":429,"searchDepth":13,"depth":13,"links":647},[648,649,650],{"id":335,"depth":13,"text":336},{"id":417,"depth":13,"text":418},{"id":552,"depth":13,"text":553},"How Maizzle transforms rendered HTML into production-ready email code","md",{},{"title":103,"description":651},"docs\u002Ftransformers\u002Foverview","mP9W4DMZqqw-GueIeIU0GUFeQxHsr-fmhEsVKxJhWPA",1781015462132]