[{"data":1,"prerenderedAt":3696},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fmigrate\u002Freact-email":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":246,"body":318,"description":3690,"extension":3691,"meta":3692,"navigation":14,"order":18,"path":245,"section":243,"seo":3693,"sidebar":14,"stem":3694,"toc":14,"__hash__":3695},"docs\u002Fdocs\u002Fmigrate\u002Freact-email.md",{"type":319,"value":320,"toc":3676},"minimark",[321,326,330,335,338,341,610,630,635,638,775,779,1626,1630,1633,1636,1816,1819,1948,1951,1957,1967,2162,2165,2276,2282,2304,2315,2319,2331,2485,2494,2506,2652,2664,2671,2675,2681,2684,3130,3134,3673],[322,323,325],"h1",{"id":324},"migrating-from-react-email","Migrating from React Email",[327,328,329],"p",{},"If you're coming from React Email, Maizzle's API and component model will feel familiar.",[331,332,334],"h2",{"id":333},"component-map","Component map",[327,336,337],{},"Maizzle has almost 100% parity with React Email's core components, making it very easy to migrate: keep using the same component names, just switch to Vue SFCs instead of JSX.",[327,339,340],{},"Here's a quick reference for how React Email components map to Maizzle equivalents:",[342,343,344,356],"table",{},[345,346,347],"thead",{},[348,349,350,353],"tr",{},[351,352,246],"th",{},[351,354,355],{},"Maizzle",[357,358,359,376,389,402,415,428,441,454,467,480,493,506,519,532,545,558,571,584,597],"tbody",{},[348,360,361,368],{},[362,363,364],"td",{},[365,366,367],"code",{},"\u003CHtml>",[362,369,370],{},[371,372,373],"a",{"href":68},[374,375,69],"strong",{},[348,377,378,383],{},[362,379,380],{},[365,381,382],{},"\u003CHead>",[362,384,385],{},[371,386,387],{"href":58},[374,388,59],{},[348,390,391,396],{},[362,392,393],{},[365,394,395],{},"\u003CBody>",[362,397,398],{},[371,399,400],{"href":29},[374,401,30],{},[348,403,404,409],{},[362,405,406],{},[365,407,408],{},"\u003CContainer>",[362,410,411],{},[371,412,413],{"href":50},[374,414,51],{},[348,416,417,422],{},[362,418,419],{},[365,420,421],{},"\u003CSection>",[362,423,424],{},[371,425,426],{"href":126},[374,427,127],{},[348,429,430,435],{},[362,431,432],{},[365,433,434],{},"\u003CRow>",[362,436,437],{},[371,438,439],{"href":122},[374,440,123],{},[348,442,443,448],{},[362,444,445],{},[365,446,447],{},"\u003CColumn>",[362,449,450],{},[371,451,452],{"href":46},[374,453,47],{},[348,455,456,461],{},[362,457,458],{},[365,459,460],{},"\u003CHeading>",[362,462,463],{},[371,464,465],{"href":61},[374,466,62],{},[348,468,469,474],{},[362,470,471],{},[365,472,473],{},"\u003CText>",[362,475,476],{},[371,477,478],{"href":138},[374,479,139],{},[348,481,482,487],{},[362,483,484],{},[365,485,486],{},"\u003CLink>",[362,488,489],{},[371,490,491],{"href":78},[374,492,79],{},[348,494,495,500],{},[362,496,497],{},[365,498,499],{},"\u003CButton>",[362,501,502],{},[371,503,504],{"href":34},[374,505,35],{},[348,507,508,513],{},[362,509,510],{},[365,511,512],{},"\u003CImg>",[362,514,515],{},[371,516,517],{"href":71},[374,518,72],{},[348,520,521,526],{},[362,522,523],{},[365,524,525],{},"\u003CHr>",[362,527,528],{},[371,529,530],{"href":64},[374,531,65],{},[348,533,534,539],{},[362,535,536],{},[365,537,538],{},"\u003CPreview>",[362,540,541],{},[371,542,543],{"href":110},[374,544,111],{},[348,546,547,552],{},[362,548,549],{},[365,550,551],{},"\u003CCodeBlock>",[362,553,554],{},[371,555,556],{"href":38},[374,557,39],{},[348,559,560,565],{},[362,561,562],{},[365,563,564],{},"\u003CCodeInline>",[362,566,567],{},[371,568,569],{"href":42},[374,570,43],{},[348,572,573,578],{},[362,574,575],{},[365,576,577],{},"\u003CMarkdown>",[362,579,580],{},[371,581,582],{"href":82},[374,583,83],{},[348,585,586,591],{},[362,587,588],{},[365,589,590],{},"\u003CFont>",[362,592,593],{},[371,594,595],{"href":54},[374,596,55],{},[348,598,599,604],{},[362,600,601],{},[365,602,603],{},"\u003CTailwind>",[362,605,606],{},[371,607,608],{"href":134},[374,609,135],{},[327,611,612,613,615,616,618,619,623,624,626,627,629],{},"Most components can do even more than what you're used to in React Email: the ",[365,614,499],{}," supports VML fallback for Outlook on Windows, ",[365,617,512],{}," has built-in support for dark mode fallbacks and ",[371,620,622],{"href":621},"\u002Fdocs\u002Fglossary#a11y","a11y",", and layout components like ",[365,625,408],{}," or ",[365,628,447],{}," work  everywhere even when sizing them with Tailwind.",[631,632,634],"h3",{"id":633},"maizzle-components","Maizzle components",[327,636,637],{},"These have no React Email equivalent, here's some stuff you've been missing out on:",[342,639,640,650],{},[345,641,642],{},[348,643,644,647],{},[351,645,646],{},"Component",[351,648,649],{},"Purpose",[357,651,652,663,674,685,696,707,718,729,740,751,764],{},[348,653,654,660],{},[362,655,656],{},[371,657,658],{"href":75},[374,659,76],{},[362,661,662],{},"Opinionated skeleton with email-safe defaults",[348,664,665,671],{},[362,666,667],{},[371,668,669],{"href":94},[374,670,95],{},[362,672,673],{},"Render content only for Outlook",[348,675,676,682],{},[362,677,678],{},[371,679,680],{"href":86},[374,681,87],{},[362,683,684],{},"Render content everywhere except Outlook",[348,686,687,693],{},[362,688,689],{},[371,690,691],{"href":98},[374,692,99],{},[362,694,695],{},"Outlook background images with VML",[348,697,698,704],{},[362,699,700],{},[371,701,702],{"href":130},[374,703,131],{},[362,705,706],{},"Vertical and horizontal spacing",[348,708,709,715],{},[362,710,711],{},[371,712,713],{"href":90},[374,714,91],{},[362,716,717],{},"Prevent orphaned words",[348,719,720,726],{},[362,721,722],{},[371,723,724],{"href":118},[374,725,119],{},[362,727,728],{},"Emit content verbatim, bypassing Vue parsing",[348,730,731,737],{},[362,732,733],{},[371,734,735],{"href":146},[374,736,147],{},[362,738,739],{},"Add base URLs and tracking query params",[348,741,742,748],{},[362,743,744],{},[371,745,746],{"href":106},[374,747,107],{},[362,749,750],{},"Render content only in the plaintext output",[348,752,753,761],{},[362,754,755],{},[371,756,758],{"href":757},"\u002Fdocs\u002Fcomponents\u002Fnotplaintext",[374,759,760],{},"NotPlaintext",[362,762,763],{},"Render content everywhere except in the plaintext output",[348,765,766,772],{},[362,767,768],{},[371,769,770],{"href":114},[374,771,115],{},[362,773,774],{},"Generate inline QR codes using tables",[331,776,778],{"id":777},"side-by-side","Side-by-side",[780,781,782,1327],"code-tabs",{},[783,784,785],"code-tab",{"label":246},[786,787,793],"pre",{"className":788,"code":789,"filename":790,"language":791,"meta":792,"style":792},"language-tsx shiki shiki-themes laserwave","import {\n  Html,\n  Head,\n  Body,\n  Container,\n  Heading,\n  Text,\n  Button,\n  Preview,\n  Tailwind,\n  pixelBasedPreset,\n} from 'react-email'\n\ninterface WelcomeEmailProps {\n  name: string\n}\n\nexport function WelcomeEmail({ name }: WelcomeEmailProps) {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead \u002F>\n      \u003CTailwind config={{ presets: [pixelBasedPreset] }}>\n        \u003CBody className=\"bg-white font-sans\">\n          \u003CPreview>Welcome to Acme — let's get started.\u003C\u002FPreview>\n          \u003CContainer className=\"p-6\">\n            \u003CHeading className=\"text-2xl\">Hi {name}\u003C\u002FHeading>\n            \u003CText className=\"text-slate-600\">\n              Thanks for signing up. Click below to verify your email.\n            \u003C\u002FText>\n            \u003CButton\n              href=\"https:\u002F\u002Fexample.com\u002Fverify\"\n              className=\"bg-blue-600 text-white px-5 py-3 box-border\"\n            >\n              Verify email\n            \u003C\u002FButton>\n          \u003C\u002FContainer>\n        \u003C\u002FBody>\n      \u003C\u002FTailwind>\n    \u003C\u002FHtml>\n  )\n}\n\nWelcomeEmail.PreviewProps = {\n  name: 'Alex',\n} satisfies WelcomeEmailProps\n","emails\u002Fwelcome.tsx","tsx","",[365,794,795,807,816,823,830,837,844,851,858,865,872,879,897,902,913,926,931,935,964,972,996,1006,1037,1058,1079,1099,1135,1154,1159,1168,1175,1190,1205,1211,1217,1226,1236,1246,1256,1266,1272,1277,1282,1299,1316],{"__ignoreMap":792},[796,797,799,803],"span",{"class":798,"line":18},"line",[796,800,802],{"class":801},"s0ZPN","import",[796,804,806],{"class":805},"sGGKt"," {\n",[796,808,809,813],{"class":798,"line":13},[796,810,812],{"class":811},"sU-n2","  Html",[796,814,815],{"class":805},",\n",[796,817,818,821],{"class":798,"line":32},[796,819,820],{"class":811},"  Head",[796,822,815],{"class":805},[796,824,825,828],{"class":798,"line":27},[796,826,827],{"class":811},"  Body",[796,829,815],{"class":805},[796,831,832,835],{"class":798,"line":52},[796,833,834],{"class":811},"  Container",[796,836,815],{"class":805},[796,838,839,842],{"class":798,"line":128},[796,840,841],{"class":811},"  Heading",[796,843,815],{"class":805},[796,845,846,849],{"class":798,"line":124},[796,847,848],{"class":811},"  Text",[796,850,815],{"class":805},[796,852,853,856],{"class":798,"line":48},[796,854,855],{"class":811},"  Button",[796,857,815],{"class":805},[796,859,860,863],{"class":798,"line":23},[796,861,862],{"class":811},"  Preview",[796,864,815],{"class":805},[796,866,867,870],{"class":798,"line":140},[796,868,869],{"class":811},"  Tailwind",[796,871,815],{"class":805},[796,873,874,877],{"class":798,"line":56},[796,875,876],{"class":811},"  pixelBasedPreset",[796,878,815],{"class":805},[796,880,881,884,887,890,894],{"class":798,"line":80},[796,882,883],{"class":805},"}",[796,885,886],{"class":801}," from",[796,888,889],{"class":805}," '",[796,891,893],{"class":892},"sXiT_","react-email",[796,895,896],{"class":805},"'\n",[796,898,899],{"class":798,"line":36},[796,900,901],{"emptyLinePlaceholder":14},"\n",[796,903,904,908,911],{"class":798,"line":73},[796,905,907],{"class":906},"sIihq","interface",[796,909,910],{"class":906}," WelcomeEmailProps",[796,912,806],{"class":805},[796,914,915,919,923],{"class":798,"line":132},[796,916,918],{"class":917},"sLaUg","  name",[796,920,922],{"class":921},"sb4Pa",":",[796,924,925],{"class":906}," string\n",[796,927,928],{"class":798,"line":66},[796,929,930],{"class":805},"}\n",[796,932,933],{"class":798,"line":112},[796,934,901],{"emptyLinePlaceholder":14},[796,936,937,940,943,947,950,953,955,957,959,962],{"class":798,"line":40},[796,938,939],{"class":801},"export",[796,941,942],{"class":906}," function",[796,944,946],{"class":945},"sZNF3"," WelcomeEmail",[796,948,949],{"class":805},"({",[796,951,952],{"class":917}," name ",[796,954,883],{"class":805},[796,956,922],{"class":921},[796,958,910],{"class":906},[796,960,961],{"class":805},")",[796,963,806],{"class":805},[796,965,966,969],{"class":798,"line":44},[796,967,968],{"class":801},"  return",[796,970,971],{"class":805}," (\n",[796,973,974,977,979,982,985,988,991,993],{"class":798,"line":84},[796,975,976],{"class":805},"    \u003C",[796,978,69],{"class":921},[796,980,981],{"class":945}," lang",[796,983,984],{"class":921},"=",[796,986,987],{"class":805},"\"",[796,989,990],{"class":892},"en",[796,992,987],{"class":805},[796,994,995],{"class":805},">\n",[796,997,998,1001,1003],{"class":798,"line":96},[796,999,1000],{"class":805},"      \u003C",[796,1002,59],{"class":921},[796,1004,1005],{"class":805}," \u002F>\n",[796,1007,1008,1010,1012,1015,1017,1020,1023,1025,1028,1031,1034],{"class":798,"line":88},[796,1009,1000],{"class":805},[796,1011,135],{"class":921},[796,1013,1014],{"class":945}," config",[796,1016,984],{"class":921},[796,1018,1019],{"class":805},"{{",[796,1021,1022],{"class":917}," presets",[796,1024,922],{"class":805},[796,1026,1027],{"class":805}," [",[796,1029,1030],{"class":811},"pixelBasedPreset",[796,1032,1033],{"class":805},"]",[796,1035,1036],{"class":805}," }}>\n",[796,1038,1039,1042,1044,1047,1049,1051,1054,1056],{"class":798,"line":100},[796,1040,1041],{"class":805},"        \u003C",[796,1043,30],{"class":921},[796,1045,1046],{"class":945}," className",[796,1048,984],{"class":921},[796,1050,987],{"class":805},[796,1052,1053],{"class":892},"bg-white font-sans",[796,1055,987],{"class":805},[796,1057,995],{"class":805},[796,1059,1060,1063,1066,1069,1072,1075,1077],{"class":798,"line":144},[796,1061,1062],{"class":805},"          \u003C",[796,1064,1065],{"class":921},"Preview",[796,1067,1068],{"class":805},">",[796,1070,1071],{"class":917},"Welcome to Acme — let's get started.",[796,1073,1074],{"class":805},"\u003C\u002F",[796,1076,1065],{"class":921},[796,1078,995],{"class":805},[796,1080,1082,1084,1086,1088,1090,1092,1095,1097],{"class":798,"line":1081},25,[796,1083,1062],{"class":805},[796,1085,51],{"class":921},[796,1087,1046],{"class":945},[796,1089,984],{"class":921},[796,1091,987],{"class":805},[796,1093,1094],{"class":892},"p-6",[796,1096,987],{"class":805},[796,1098,995],{"class":805},[796,1100,1101,1104,1106,1108,1110,1112,1115,1117,1119,1122,1125,1128,1131,1133],{"class":798,"line":92},[796,1102,1103],{"class":805},"            \u003C",[796,1105,62],{"class":921},[796,1107,1046],{"class":945},[796,1109,984],{"class":921},[796,1111,987],{"class":805},[796,1113,1114],{"class":892},"text-2xl",[796,1116,987],{"class":805},[796,1118,1068],{"class":805},[796,1120,1121],{"class":917},"Hi ",[796,1123,1124],{"class":805},"{",[796,1126,1127],{"class":811},"name",[796,1129,1130],{"class":805},"}\u003C\u002F",[796,1132,62],{"class":921},[796,1134,995],{"class":805},[796,1136,1137,1139,1141,1143,1145,1147,1150,1152],{"class":798,"line":148},[796,1138,1103],{"class":805},[796,1140,139],{"class":921},[796,1142,1046],{"class":945},[796,1144,984],{"class":921},[796,1146,987],{"class":805},[796,1148,1149],{"class":892},"text-slate-600",[796,1151,987],{"class":805},[796,1153,995],{"class":805},[796,1155,1156],{"class":798,"line":120},[796,1157,1158],{"class":917},"              Thanks for signing up. Click below to verify your email.\n",[796,1160,1161,1164,1166],{"class":798,"line":136},[796,1162,1163],{"class":805},"            \u003C\u002F",[796,1165,139],{"class":921},[796,1167,995],{"class":805},[796,1169,1170,1172],{"class":798,"line":116},[796,1171,1103],{"class":805},[796,1173,1174],{"class":921},"Button\n",[796,1176,1177,1180,1182,1184,1187],{"class":798,"line":108},[796,1178,1179],{"class":945},"              href",[796,1181,984],{"class":921},[796,1183,987],{"class":805},[796,1185,1186],{"class":892},"https:\u002F\u002Fexample.com\u002Fverify",[796,1188,1189],{"class":805},"\"\n",[796,1191,1193,1196,1198,1200,1203],{"class":798,"line":1192},32,[796,1194,1195],{"class":945},"              className",[796,1197,984],{"class":921},[796,1199,987],{"class":805},[796,1201,1202],{"class":892},"bg-blue-600 text-white px-5 py-3 box-border",[796,1204,1189],{"class":805},[796,1206,1208],{"class":798,"line":1207},33,[796,1209,1210],{"class":805},"            >\n",[796,1212,1214],{"class":798,"line":1213},34,[796,1215,1216],{"class":917},"              Verify email\n",[796,1218,1220,1222,1224],{"class":798,"line":1219},35,[796,1221,1163],{"class":805},[796,1223,35],{"class":921},[796,1225,995],{"class":805},[796,1227,1229,1232,1234],{"class":798,"line":1228},36,[796,1230,1231],{"class":805},"          \u003C\u002F",[796,1233,51],{"class":921},[796,1235,995],{"class":805},[796,1237,1239,1242,1244],{"class":798,"line":1238},37,[796,1240,1241],{"class":805},"        \u003C\u002F",[796,1243,30],{"class":921},[796,1245,995],{"class":805},[796,1247,1249,1252,1254],{"class":798,"line":1248},38,[796,1250,1251],{"class":805},"      \u003C\u002F",[796,1253,135],{"class":921},[796,1255,995],{"class":805},[796,1257,1259,1262,1264],{"class":798,"line":1258},39,[796,1260,1261],{"class":805},"    \u003C\u002F",[796,1263,69],{"class":921},[796,1265,995],{"class":805},[796,1267,1269],{"class":798,"line":1268},40,[796,1270,1271],{"class":805},"  )\n",[796,1273,1275],{"class":798,"line":1274},41,[796,1276,930],{"class":805},[796,1278,1280],{"class":798,"line":1279},42,[796,1281,901],{"emptyLinePlaceholder":14},[796,1283,1285,1288,1291,1294,1297],{"class":798,"line":1284},43,[796,1286,1287],{"class":811},"WelcomeEmail",[796,1289,1290],{"class":805},".",[796,1292,1293],{"class":801},"PreviewProps",[796,1295,1296],{"class":921}," =",[796,1298,806],{"class":805},[796,1300,1302,1304,1306,1308,1311,1314],{"class":798,"line":1301},44,[796,1303,918],{"class":917},[796,1305,922],{"class":805},[796,1307,889],{"class":805},[796,1309,1310],{"class":892},"Alex",[796,1312,1313],{"class":805},"'",[796,1315,815],{"class":805},[796,1317,1319,1321,1324],{"class":798,"line":1318},45,[796,1320,883],{"class":805},[796,1322,1323],{"class":801}," satisfies",[796,1325,1326],{"class":906}," WelcomeEmailProps\n",[783,1328,1329],{"label":355},[786,1330,1335],{"className":1331,"code":1332,"filename":1333,"language":1334,"meta":792,"style":792},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  defineProps({ name: String })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CPreheader>Welcome to Acme — let's get started.\u003C\u002FPreheader>\n    \u003CTailwind>\n      \u003CBody class=\"bg-white font-sans\">\n        \u003CContainer class=\"max-w-xl p-6\">\n          \u003CHeading class=\"text-2xl\">Hi {{ name }}\u003C\u002FHeading>\n          \u003CText class=\"text-slate-600\">\n            Thanks for signing up. Click below to verify your email.\n          \u003C\u002FText>\n          \u003CButton \n            href=\"https:\u002F\u002Fexample.com\u002Fverify\" \n            class=\"bg-blue-600 text-white px-5 py-3\"\n          >\n            Verify email\n          \u003C\u002FButton>\n        \u003C\u002FContainer>\n      \u003C\u002FBody>\n    \u003C\u002FTailwind>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fwelcome.vue","vue",[365,1336,1337,1350,1368,1376,1380,1389,1398,1409,1425,1433,1452,1471,1498,1516,1521,1529,1538,1553,1567,1572,1577,1585,1593,1601,1609,1618],{"__ignoreMap":792},[796,1338,1339,1342,1345,1348],{"class":798,"line":18},[796,1340,1341],{"class":805},"\u003C",[796,1343,1344],{"class":921},"script",[796,1346,1347],{"class":945}," setup",[796,1349,995],{"class":805},[796,1351,1352,1355,1357,1360,1362,1365],{"class":798,"line":13},[796,1353,1354],{"class":945},"  defineProps",[796,1356,949],{"class":805},[796,1358,1359],{"class":801}," name",[796,1361,922],{"class":805},[796,1363,1364],{"class":811}," String",[796,1366,1367],{"class":805}," })\n",[796,1369,1370,1372,1374],{"class":798,"line":32},[796,1371,1074],{"class":805},[796,1373,1344],{"class":921},[796,1375,995],{"class":805},[796,1377,1378],{"class":798,"line":27},[796,1379,901],{"emptyLinePlaceholder":14},[796,1381,1382,1384,1387],{"class":798,"line":52},[796,1383,1341],{"class":805},[796,1385,1386],{"class":921},"template",[796,1388,995],{"class":805},[796,1390,1391,1394,1396],{"class":798,"line":128},[796,1392,1393],{"class":805},"  \u003C",[796,1395,69],{"class":921},[796,1397,995],{"class":805},[796,1399,1400,1402,1404,1407],{"class":798,"line":124},[796,1401,976],{"class":805},[796,1403,59],{"class":921},[796,1405,1406],{"class":917}," \u002F",[796,1408,995],{"class":805},[796,1410,1411,1413,1415,1417,1419,1421,1423],{"class":798,"line":48},[796,1412,976],{"class":805},[796,1414,111],{"class":921},[796,1416,1068],{"class":805},[796,1418,1071],{"class":917},[796,1420,1074],{"class":805},[796,1422,111],{"class":921},[796,1424,995],{"class":805},[796,1426,1427,1429,1431],{"class":798,"line":23},[796,1428,976],{"class":805},[796,1430,135],{"class":921},[796,1432,995],{"class":805},[796,1434,1435,1437,1439,1442,1444,1446,1448,1450],{"class":798,"line":140},[796,1436,1000],{"class":805},[796,1438,30],{"class":921},[796,1440,1441],{"class":945}," class",[796,1443,984],{"class":805},[796,1445,987],{"class":805},[796,1447,1053],{"class":892},[796,1449,987],{"class":805},[796,1451,995],{"class":805},[796,1453,1454,1456,1458,1460,1462,1464,1467,1469],{"class":798,"line":56},[796,1455,1041],{"class":805},[796,1457,51],{"class":921},[796,1459,1441],{"class":945},[796,1461,984],{"class":805},[796,1463,987],{"class":805},[796,1465,1466],{"class":892},"max-w-xl p-6",[796,1468,987],{"class":805},[796,1470,995],{"class":805},[796,1472,1473,1475,1477,1479,1481,1483,1485,1487,1489,1492,1494,1496],{"class":798,"line":80},[796,1474,1062],{"class":805},[796,1476,62],{"class":921},[796,1478,1441],{"class":945},[796,1480,984],{"class":805},[796,1482,987],{"class":805},[796,1484,1114],{"class":892},[796,1486,987],{"class":805},[796,1488,1068],{"class":805},[796,1490,1491],{"class":917},"Hi {{ name }}",[796,1493,1074],{"class":805},[796,1495,62],{"class":921},[796,1497,995],{"class":805},[796,1499,1500,1502,1504,1506,1508,1510,1512,1514],{"class":798,"line":36},[796,1501,1062],{"class":805},[796,1503,139],{"class":921},[796,1505,1441],{"class":945},[796,1507,984],{"class":805},[796,1509,987],{"class":805},[796,1511,1149],{"class":892},[796,1513,987],{"class":805},[796,1515,995],{"class":805},[796,1517,1518],{"class":798,"line":73},[796,1519,1520],{"class":917},"            Thanks for signing up. Click below to verify your email.\n",[796,1522,1523,1525,1527],{"class":798,"line":132},[796,1524,1231],{"class":805},[796,1526,139],{"class":921},[796,1528,995],{"class":805},[796,1530,1531,1533,1535],{"class":798,"line":66},[796,1532,1062],{"class":805},[796,1534,35],{"class":921},[796,1536,1537],{"class":917}," \n",[796,1539,1540,1543,1545,1547,1549,1551],{"class":798,"line":112},[796,1541,1542],{"class":945},"            href",[796,1544,984],{"class":805},[796,1546,987],{"class":805},[796,1548,1186],{"class":892},[796,1550,987],{"class":805},[796,1552,1537],{"class":917},[796,1554,1555,1558,1560,1562,1565],{"class":798,"line":40},[796,1556,1557],{"class":945},"            class",[796,1559,984],{"class":805},[796,1561,987],{"class":805},[796,1563,1564],{"class":892},"bg-blue-600 text-white px-5 py-3",[796,1566,1189],{"class":805},[796,1568,1569],{"class":798,"line":44},[796,1570,1571],{"class":805},"          >\n",[796,1573,1574],{"class":798,"line":84},[796,1575,1576],{"class":917},"            Verify email\n",[796,1578,1579,1581,1583],{"class":798,"line":96},[796,1580,1231],{"class":805},[796,1582,35],{"class":921},[796,1584,995],{"class":805},[796,1586,1587,1589,1591],{"class":798,"line":88},[796,1588,1241],{"class":805},[796,1590,51],{"class":921},[796,1592,995],{"class":805},[796,1594,1595,1597,1599],{"class":798,"line":100},[796,1596,1251],{"class":805},[796,1598,30],{"class":921},[796,1600,995],{"class":805},[796,1602,1603,1605,1607],{"class":798,"line":144},[796,1604,1261],{"class":805},[796,1606,135],{"class":921},[796,1608,995],{"class":805},[796,1610,1611,1614,1616],{"class":798,"line":1081},[796,1612,1613],{"class":805},"  \u003C\u002F",[796,1615,69],{"class":921},[796,1617,995],{"class":805},[796,1619,1620,1622,1624],{"class":798,"line":92},[796,1621,1074],{"class":805},[796,1623,1386],{"class":921},[796,1625,995],{"class":805},[331,1627,1629],{"id":1628},"styling","Styling",[327,1631,1632],{},"React Email docs suggest using inline style objects. With Maizzle, you typically use Tailwind, but can also use style objects or inline CSS.",[327,1634,1635],{},"We recommend using Tailwind as it's more powerful, easier to maintain, and our CSS pipeline optimizes it for email clients compatibility.",[780,1637,1638,1761],{},[783,1639,1640],{"label":246},[786,1641,1643],{"className":788,"code":1642,"filename":790,"language":791,"meta":792,"style":792},"\u003CButton\n  href=\"https:\u002F\u002Fexample.com\"\n  style={{\n    backgroundColor: '#2563eb',\n    color: '#ffffff',\n    padding: '12px 20px',\n    borderRadius: '6px',\n  }}\n>\n  Verify email\n\u003C\u002FButton>\n",[365,1644,1645,1651,1665,1675,1691,1707,1723,1739,1744,1748,1753],{"__ignoreMap":792},[796,1646,1647,1649],{"class":798,"line":18},[796,1648,1341],{"class":805},[796,1650,1174],{"class":921},[796,1652,1653,1656,1658,1660,1663],{"class":798,"line":13},[796,1654,1655],{"class":945},"  href",[796,1657,984],{"class":921},[796,1659,987],{"class":805},[796,1661,1662],{"class":892},"https:\u002F\u002Fexample.com",[796,1664,1189],{"class":805},[796,1666,1667,1670,1672],{"class":798,"line":32},[796,1668,1669],{"class":945},"  style",[796,1671,984],{"class":921},[796,1673,1674],{"class":805},"{{\n",[796,1676,1677,1680,1682,1684,1687,1689],{"class":798,"line":27},[796,1678,1679],{"class":917},"    backgroundColor",[796,1681,922],{"class":805},[796,1683,889],{"class":805},[796,1685,1686],{"class":892},"#2563eb",[796,1688,1313],{"class":805},[796,1690,815],{"class":805},[796,1692,1693,1696,1698,1700,1703,1705],{"class":798,"line":52},[796,1694,1695],{"class":917},"    color",[796,1697,922],{"class":805},[796,1699,889],{"class":805},[796,1701,1702],{"class":892},"#ffffff",[796,1704,1313],{"class":805},[796,1706,815],{"class":805},[796,1708,1709,1712,1714,1716,1719,1721],{"class":798,"line":128},[796,1710,1711],{"class":917},"    padding",[796,1713,922],{"class":805},[796,1715,889],{"class":805},[796,1717,1718],{"class":892},"12px 20px",[796,1720,1313],{"class":805},[796,1722,815],{"class":805},[796,1724,1725,1728,1730,1732,1735,1737],{"class":798,"line":124},[796,1726,1727],{"class":917},"    borderRadius",[796,1729,922],{"class":805},[796,1731,889],{"class":805},[796,1733,1734],{"class":892},"6px",[796,1736,1313],{"class":805},[796,1738,815],{"class":805},[796,1740,1741],{"class":798,"line":48},[796,1742,1743],{"class":805},"  }}\n",[796,1745,1746],{"class":798,"line":23},[796,1747,995],{"class":805},[796,1749,1750],{"class":798,"line":140},[796,1751,1752],{"class":917},"  Verify email\n",[796,1754,1755,1757,1759],{"class":798,"line":56},[796,1756,1074],{"class":805},[796,1758,35],{"class":921},[796,1760,995],{"class":805},[783,1762,1763],{"label":355},[786,1764,1766],{"className":1331,"code":1765,"filename":1333,"language":1334,"meta":792,"style":792},"\u003CButton\n  href=\"https:\u002F\u002Fexample.com\"\n  class=\"bg-blue-600 text-white px-5 py-3 rounded-md\"\n>\n  Verify email\n\u003C\u002FButton>\n",[365,1767,1768,1774,1786,1800,1804,1808],{"__ignoreMap":792},[796,1769,1770,1772],{"class":798,"line":18},[796,1771,1341],{"class":805},[796,1773,1174],{"class":921},[796,1775,1776,1778,1780,1782,1784],{"class":798,"line":13},[796,1777,1655],{"class":945},[796,1779,984],{"class":805},[796,1781,987],{"class":805},[796,1783,1662],{"class":892},[796,1785,1189],{"class":805},[796,1787,1788,1791,1793,1795,1798],{"class":798,"line":32},[796,1789,1790],{"class":945},"  class",[796,1792,984],{"class":805},[796,1794,987],{"class":805},[796,1796,1797],{"class":892},"bg-blue-600 text-white px-5 py-3 rounded-md",[796,1799,1189],{"class":805},[796,1801,1802],{"class":798,"line":27},[796,1803,995],{"class":805},[796,1805,1806],{"class":798,"line":52},[796,1807,1752],{"class":917},[796,1809,1810,1812,1814],{"class":798,"line":128},[796,1811,1074],{"class":805},[796,1813,35],{"class":921},[796,1815,995],{"class":805},[327,1817,1818],{},"If you'd rather stick to object syntax you can, but with Vue syntax:",[786,1820,1823],{"className":1331,"code":1821,"highlights":1822,"language":1334,"meta":792,"style":792},"\u003CButton\n  href=\"https:\u002F\u002Fexample.com\"\n  :style=\"{ \n    backgroundColor: '#2563eb', \n    color: '#ffffff', \n    padding: '12px 20px', \n    borderRadius: '6px' \n  }\"\n>\n  Verify email\n\u003C\u002FButton>\n",[32,48],[365,1824,1825,1831,1843,1861,1878,1894,1910,1924,1932,1936,1940],{"__ignoreMap":792},[796,1826,1827,1829],{"class":798,"line":18},[796,1828,1341],{"class":805},[796,1830,1174],{"class":921},[796,1832,1833,1835,1837,1839,1841],{"class":798,"line":13},[796,1834,1655],{"class":945},[796,1836,984],{"class":805},[796,1838,987],{"class":805},[796,1840,1662],{"class":892},[796,1842,1189],{"class":805},[796,1844,1847,1850,1853,1855,1857,1859],{"class":1845,"line":32},[798,1846],"highlight",[796,1848,1849],{"class":805},"  :",[796,1851,1852],{"class":945},"style",[796,1854,984],{"class":805},[796,1856,987],{"class":805},[796,1858,1124],{"class":805},[796,1860,1537],{"class":917},[796,1862,1863,1865,1867,1869,1871,1873,1876],{"class":798,"line":27},[796,1864,1679],{"class":917},[796,1866,922],{"class":805},[796,1868,889],{"class":805},[796,1870,1686],{"class":892},[796,1872,1313],{"class":805},[796,1874,1875],{"class":805},",",[796,1877,1537],{"class":917},[796,1879,1880,1882,1884,1886,1888,1890,1892],{"class":798,"line":52},[796,1881,1695],{"class":917},[796,1883,922],{"class":805},[796,1885,889],{"class":805},[796,1887,1702],{"class":892},[796,1889,1313],{"class":805},[796,1891,1875],{"class":805},[796,1893,1537],{"class":917},[796,1895,1896,1898,1900,1902,1904,1906,1908],{"class":798,"line":128},[796,1897,1711],{"class":917},[796,1899,922],{"class":805},[796,1901,889],{"class":805},[796,1903,1718],{"class":892},[796,1905,1313],{"class":805},[796,1907,1875],{"class":805},[796,1909,1537],{"class":917},[796,1911,1912,1914,1916,1918,1920,1922],{"class":798,"line":124},[796,1913,1727],{"class":917},[796,1915,922],{"class":805},[796,1917,889],{"class":805},[796,1919,1734],{"class":892},[796,1921,1313],{"class":805},[796,1923,1537],{"class":917},[796,1925,1927,1930],{"class":1926,"line":48},[798,1846],[796,1928,1929],{"class":805},"  }",[796,1931,1189],{"class":805},[796,1933,1934],{"class":798,"line":23},[796,1935,995],{"class":805},[796,1937,1938],{"class":798,"line":140},[796,1939,1752],{"class":917},[796,1941,1942,1944,1946],{"class":798,"line":56},[796,1943,1074],{"class":805},[796,1945,35],{"class":921},[796,1947,995],{"class":805},[631,1949,255],{"id":1950},"tailwind-css",[327,1952,1953,1954,1956],{},"Both frameworks expose a ",[365,1955,603],{}," wrapper, but configuration is passed differently.",[327,1958,1959,1960,1963,1964,1966],{},"In React Email, you pass a JS config object via the ",[365,1961,1962],{},"config"," prop, which combines their ",[365,1965,1030],{}," with theme extensions:",[786,1968,1970],{"className":788,"code":1969,"filename":790,"language":791,"meta":792,"style":792},"import { Body, Tailwind, pixelBasedPreset } from 'react-email'\n\nexport function WelcomeEmail() {\n  return (\n    \u003CTailwind\n      config={{\n        presets: [pixelBasedPreset],\n        theme: {\n          extend: {\n            colors: { brand: '#6366f1' },\n          },\n        },\n      }}\n    >\n      \u003CBody className=\"bg-brand\">...\u003C\u002FBody>\n    \u003C\u002FTailwind>\n  )\n}\n",[365,1971,1972,2003,2007,2020,2026,2033,2042,2056,2065,2074,2098,2103,2108,2113,2118,2146,2154,2158],{"__ignoreMap":792},[796,1973,1974,1976,1979,1982,1984,1987,1989,1992,1995,1997,1999,2001],{"class":798,"line":18},[796,1975,802],{"class":801},[796,1977,1978],{"class":805}," {",[796,1980,1981],{"class":811}," Body",[796,1983,1875],{"class":805},[796,1985,1986],{"class":811}," Tailwind",[796,1988,1875],{"class":805},[796,1990,1991],{"class":811}," pixelBasedPreset",[796,1993,1994],{"class":805}," }",[796,1996,886],{"class":801},[796,1998,889],{"class":805},[796,2000,893],{"class":892},[796,2002,896],{"class":805},[796,2004,2005],{"class":798,"line":13},[796,2006,901],{"emptyLinePlaceholder":14},[796,2008,2009,2011,2013,2015,2018],{"class":798,"line":32},[796,2010,939],{"class":801},[796,2012,942],{"class":906},[796,2014,946],{"class":945},[796,2016,2017],{"class":805},"()",[796,2019,806],{"class":805},[796,2021,2022,2024],{"class":798,"line":27},[796,2023,968],{"class":801},[796,2025,971],{"class":805},[796,2027,2028,2030],{"class":798,"line":52},[796,2029,976],{"class":805},[796,2031,2032],{"class":921},"Tailwind\n",[796,2034,2035,2038,2040],{"class":798,"line":128},[796,2036,2037],{"class":945},"      config",[796,2039,984],{"class":921},[796,2041,1674],{"class":805},[796,2043,2044,2047,2049,2051,2053],{"class":798,"line":124},[796,2045,2046],{"class":917},"        presets",[796,2048,922],{"class":805},[796,2050,1027],{"class":805},[796,2052,1030],{"class":811},[796,2054,2055],{"class":805},"],\n",[796,2057,2058,2061,2063],{"class":798,"line":48},[796,2059,2060],{"class":917},"        theme",[796,2062,922],{"class":805},[796,2064,806],{"class":805},[796,2066,2067,2070,2072],{"class":798,"line":23},[796,2068,2069],{"class":917},"          extend",[796,2071,922],{"class":805},[796,2073,806],{"class":805},[796,2075,2076,2079,2081,2083,2086,2088,2090,2093,2095],{"class":798,"line":140},[796,2077,2078],{"class":917},"            colors",[796,2080,922],{"class":805},[796,2082,1978],{"class":805},[796,2084,2085],{"class":917}," brand",[796,2087,922],{"class":805},[796,2089,889],{"class":805},[796,2091,2092],{"class":892},"#6366f1",[796,2094,1313],{"class":805},[796,2096,2097],{"class":805}," },\n",[796,2099,2100],{"class":798,"line":56},[796,2101,2102],{"class":805},"          },\n",[796,2104,2105],{"class":798,"line":80},[796,2106,2107],{"class":805},"        },\n",[796,2109,2110],{"class":798,"line":36},[796,2111,2112],{"class":805},"      }}\n",[796,2114,2115],{"class":798,"line":73},[796,2116,2117],{"class":805},"    >\n",[796,2119,2120,2122,2124,2126,2128,2130,2133,2135,2137,2140,2142,2144],{"class":798,"line":132},[796,2121,1000],{"class":805},[796,2123,30],{"class":921},[796,2125,1046],{"class":945},[796,2127,984],{"class":921},[796,2129,987],{"class":805},[796,2131,2132],{"class":892},"bg-brand",[796,2134,987],{"class":805},[796,2136,1068],{"class":805},[796,2138,2139],{"class":917},"...",[796,2141,1074],{"class":805},[796,2143,30],{"class":921},[796,2145,995],{"class":805},[796,2147,2148,2150,2152],{"class":798,"line":66},[796,2149,1261],{"class":805},[796,2151,135],{"class":921},[796,2153,995],{"class":805},[796,2155,2156],{"class":798,"line":112},[796,2157,1271],{"class":805},[796,2159,2160],{"class":798,"line":40},[796,2161,930],{"class":805},[327,2163,2164],{},"In Maizzle, you pass the config to a slot as CSS, just like you'd expect in Tailwind CSS 4:",[786,2166,2169],{"className":1331,"code":2167,"filename":1333,"highlights":2168,"language":1334,"meta":792,"style":792},"\u003Ctemplate>\n  \u003CTailwind>\n    \u003Ctemplate #config>\n      @import \"@maizzle\u002Ftailwindcss\";\n  \n      @theme {\n        --color-brand: #6366f1;\n      }\n    \u003C\u002Ftemplate>\n  \n    \u003CBody>...\u003C\u002FBody>\n  \u003C\u002FTailwind>\n\u003C\u002Ftemplate>\n",[32,27,52,128,124,48,23],[365,2170,2171,2179,2187,2201,2207,2213,2219,2225,2231,2240,2244,2260,2268],{"__ignoreMap":792},[796,2172,2173,2175,2177],{"class":798,"line":18},[796,2174,1341],{"class":805},[796,2176,1386],{"class":921},[796,2178,995],{"class":805},[796,2180,2181,2183,2185],{"class":798,"line":13},[796,2182,1393],{"class":805},[796,2184,135],{"class":921},[796,2186,995],{"class":805},[796,2188,2190,2192,2194,2197,2199],{"class":2189,"line":32},[798,1846],[796,2191,976],{"class":805},[796,2193,1386],{"class":921},[796,2195,2196],{"class":805}," #",[796,2198,1962],{"class":945},[796,2200,995],{"class":805},[796,2202,2204],{"class":2203,"line":27},[798,1846],[796,2205,2206],{"class":917},"      @import \"@maizzle\u002Ftailwindcss\";\n",[796,2208,2210],{"class":2209,"line":52},[798,1846],[796,2211,2212],{"class":917},"  \n",[796,2214,2216],{"class":2215,"line":128},[798,1846],[796,2217,2218],{"class":917},"      @theme {\n",[796,2220,2222],{"class":2221,"line":124},[798,1846],[796,2223,2224],{"class":917},"        --color-brand: #6366f1;\n",[796,2226,2228],{"class":2227,"line":48},[798,1846],[796,2229,2230],{"class":917},"      }\n",[796,2232,2234,2236,2238],{"class":2233,"line":23},[798,1846],[796,2235,1261],{"class":805},[796,2237,1386],{"class":921},[796,2239,995],{"class":805},[796,2241,2242],{"class":798,"line":140},[796,2243,2212],{"class":917},[796,2245,2246,2248,2250,2252,2254,2256,2258],{"class":798,"line":56},[796,2247,976],{"class":805},[796,2249,30],{"class":921},[796,2251,1068],{"class":805},[796,2253,2139],{"class":917},[796,2255,1074],{"class":805},[796,2257,30],{"class":921},[796,2259,995],{"class":805},[796,2261,2262,2264,2266],{"class":798,"line":80},[796,2263,1613],{"class":805},[796,2265,135],{"class":921},[796,2267,995],{"class":805},[796,2269,2270,2272,2274],{"class":798,"line":36},[796,2271,1074],{"class":805},[796,2273,1386],{"class":921},[796,2275,995],{"class":805},[327,2277,2278,2281],{},[365,2279,2280],{},"@maizzle\u002Ftailwindcss"," is Maizzle's official Tailwind CSS 4 config for email and it's included by default, no need to install or import it manually.",[327,2283,2284,2285,2288,2289,2292,2293,2296,2297,2300,2301,1290],{},"It gives you the email-safe defaults like a ",[365,2286,2287],{},"px"," scale instead of ",[365,2290,2291],{},"rem",", HEX colors instead of ",[365,2294,2295],{},"oklch()",", prose typography styles for HTML emails, and even email client targeting variants like ",[365,2298,2299],{},"gmail:"," and ",[365,2302,2303],{},"ios:",[2305,2306,2308],"callout",{"type":2307},"info",[327,2309,2310,2311,2314],{},"You can safely omit the ",[365,2312,2313],{},"#config"," slot and Tailwind CSS will work just fine in Maizzle. Use it only if you need to customize the default configuration: to add custom colors, extend the spacing scale, or define new variants.",[331,2316,2318],{"id":2317},"rendering","Rendering",[327,2320,2321,2322,2325,2326,922],{},"React Email's ",[365,2323,2324],{},"render()"," becomes Maizzle's ",[371,2327,2329],{"href":2328},"\u002Fdocs\u002Fapi\u002Futilities#render",[365,2330,2324],{},[780,2332,2333,2420],{},[783,2334,2335],{"label":246},[786,2336,2341],{"className":2337,"code":2338,"filename":2339,"language":2340,"meta":792,"style":792},"language-ts shiki shiki-themes laserwave","import { render } from 'react-email'\nimport { WelcomeEmail } from '.\u002Femails\u002Fwelcome'\n\nconst html = await render(\u003CWelcomeEmail name=\"Alex\" \u002F>)\n","build.ts","ts",[365,2342,2343,2362,2381,2385],{"__ignoreMap":792},[796,2344,2345,2347,2349,2352,2354,2356,2358,2360],{"class":798,"line":18},[796,2346,802],{"class":801},[796,2348,1978],{"class":805},[796,2350,2351],{"class":811}," render",[796,2353,1994],{"class":805},[796,2355,886],{"class":801},[796,2357,889],{"class":805},[796,2359,893],{"class":892},[796,2361,896],{"class":805},[796,2363,2364,2366,2368,2370,2372,2374,2376,2379],{"class":798,"line":13},[796,2365,802],{"class":801},[796,2367,1978],{"class":805},[796,2369,946],{"class":811},[796,2371,1994],{"class":805},[796,2373,886],{"class":801},[796,2375,889],{"class":805},[796,2377,2378],{"class":892},".\u002Femails\u002Fwelcome",[796,2380,896],{"class":805},[796,2382,2383],{"class":798,"line":32},[796,2384,901],{"emptyLinePlaceholder":14},[796,2386,2387,2390,2393,2395,2398,2400,2403,2405,2407,2409,2411,2413,2415,2417],{"class":798,"line":27},[796,2388,2389],{"class":906},"const",[796,2391,2392],{"class":811}," html",[796,2394,1296],{"class":921},[796,2396,2397],{"class":801}," await",[796,2399,2351],{"class":945},[796,2401,2402],{"class":805},"(\u003C",[796,2404,1287],{"class":921},[796,2406,1359],{"class":921},[796,2408,984],{"class":917},[796,2410,987],{"class":805},[796,2412,1310],{"class":892},[796,2414,987],{"class":805},[796,2416,1406],{"class":917},[796,2418,2419],{"class":805},">)\n",[783,2421,2422],{"label":355},[786,2423,2425],{"className":2337,"code":2424,"filename":2339,"language":2340,"meta":792,"style":792},"import { render } from '@maizzle\u002Fframework'\n\nconst { html } = await render('emails\u002Fwelcome.vue', config?)\n",[365,2426,2427,2446,2450],{"__ignoreMap":792},[796,2428,2429,2431,2433,2435,2437,2439,2441,2444],{"class":798,"line":18},[796,2430,802],{"class":801},[796,2432,1978],{"class":805},[796,2434,2351],{"class":811},[796,2436,1994],{"class":805},[796,2438,886],{"class":801},[796,2440,889],{"class":805},[796,2442,2443],{"class":892},"@maizzle\u002Fframework",[796,2445,896],{"class":805},[796,2447,2448],{"class":798,"line":13},[796,2449,901],{"emptyLinePlaceholder":14},[796,2451,2452,2454,2456,2458,2460,2462,2464,2466,2469,2471,2473,2475,2477,2479,2482],{"class":798,"line":32},[796,2453,2389],{"class":906},[796,2455,1978],{"class":805},[796,2457,2392],{"class":811},[796,2459,1994],{"class":805},[796,2461,1296],{"class":921},[796,2463,2397],{"class":801},[796,2465,2351],{"class":945},[796,2467,2468],{"class":805},"(",[796,2470,1313],{"class":805},[796,2472,1333],{"class":892},[796,2474,1313],{"class":805},[796,2476,1875],{"class":805},[796,2478,1014],{"class":811},[796,2480,2481],{"class":921},"?",[796,2483,2484],{"class":917},")\n",[2305,2486,2487],{"type":2307},[327,2488,2489,2490,2493],{},"In Maizzle, ",[365,2491,2492],{},"render"," accepts a template path or raw SFC string and an optional config object, instead of an imported component like in React Email.",[327,2495,2496,2497,2499,2500,922],{},"To get per-render data into a template, pass it in the ",[365,2498,1962],{}," and read it with ",[371,2501,2503],{"href":2502},"\u002Fdocs\u002Fapi\u002Fcomposables#useconfig",[365,2504,2505],{},"useConfig()",[780,2507,2508,2569],{},[783,2509,2510],{"label":2339},[786,2511,2513],{"className":2337,"code":2512,"filename":2339,"language":2340,"meta":792,"style":792},"const { html } = await render('emails\u002Fwelcome.vue', {\n  recipient: { name: 'Alex' },\n})\n",[365,2514,2515,2543,2564],{"__ignoreMap":792},[796,2516,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541],{"class":798,"line":18},[796,2518,2389],{"class":906},[796,2520,1978],{"class":805},[796,2522,2392],{"class":811},[796,2524,1994],{"class":805},[796,2526,1296],{"class":921},[796,2528,2397],{"class":801},[796,2530,2351],{"class":945},[796,2532,2468],{"class":805},[796,2534,1313],{"class":805},[796,2536,1333],{"class":892},[796,2538,1313],{"class":805},[796,2540,1875],{"class":805},[796,2542,806],{"class":805},[796,2544,2545,2548,2550,2552,2554,2556,2558,2560,2562],{"class":798,"line":13},[796,2546,2547],{"class":917},"  recipient",[796,2549,922],{"class":805},[796,2551,1978],{"class":805},[796,2553,1359],{"class":917},[796,2555,922],{"class":805},[796,2557,889],{"class":805},[796,2559,1310],{"class":892},[796,2561,1313],{"class":805},[796,2563,2097],{"class":805},[796,2565,2566],{"class":798,"line":32},[796,2567,2568],{"class":805},"})\n",[783,2570,2571],{"label":1333},[786,2572,2574],{"className":1331,"code":2573,"filename":1333,"language":1334,"meta":792,"style":792},"\u003Cscript setup>\n  const { recipient } = useConfig()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CText>Hi {{ recipient.name }}\u003C\u002FText>\n\u003C\u002Ftemplate>\n",[365,2575,2576,2586,2607,2615,2619,2627,2644],{"__ignoreMap":792},[796,2577,2578,2580,2582,2584],{"class":798,"line":18},[796,2579,1341],{"class":805},[796,2581,1344],{"class":921},[796,2583,1347],{"class":945},[796,2585,995],{"class":805},[796,2587,2588,2591,2593,2597,2599,2601,2604],{"class":798,"line":13},[796,2589,2590],{"class":906},"  const",[796,2592,1978],{"class":805},[796,2594,2596],{"class":2595},"skd8d"," recipient",[796,2598,1994],{"class":805},[796,2600,1296],{"class":921},[796,2602,2603],{"class":945}," useConfig",[796,2605,2606],{"class":805},"()\n",[796,2608,2609,2611,2613],{"class":798,"line":32},[796,2610,1074],{"class":805},[796,2612,1344],{"class":921},[796,2614,995],{"class":805},[796,2616,2617],{"class":798,"line":27},[796,2618,901],{"emptyLinePlaceholder":14},[796,2620,2621,2623,2625],{"class":798,"line":52},[796,2622,1341],{"class":805},[796,2624,1386],{"class":921},[796,2626,995],{"class":805},[796,2628,2629,2631,2633,2635,2638,2640,2642],{"class":798,"line":128},[796,2630,1393],{"class":805},[796,2632,139],{"class":921},[796,2634,1068],{"class":805},[796,2636,2637],{"class":917},"Hi {{ recipient.name }}",[796,2639,1074],{"class":805},[796,2641,139],{"class":921},[796,2643,995],{"class":805},[796,2645,2646,2648,2650],{"class":798,"line":124},[796,2647,1074],{"class":805},[796,2649,1386],{"class":921},[796,2651,995],{"class":805},[327,2653,2654,2656,2657,2660,2661,1290],{},[365,2655,2324],{}," runs the full pipeline — SSR, CSS inlining, transformers, doctype — and returns ",[365,2658,2659],{},"html"," plus (optionally) ",[365,2662,2663],{},"plaintext",[327,2665,2666,2667,2670],{},"See the ",[371,2668,2669],{"href":16},"API Reference"," for build, dev server, and per-template options.",[331,2672,2674],{"id":2673},"sending-emails","Sending emails",[327,2676,2677,2678,2680],{},"Sending doesn't change, the only swap is the ",[365,2679,2324],{}," import.",[631,2682,167],{"id":2683},"resend",[780,2685,2686,2901],{},[783,2687,2688],{"label":246},[786,2689,2692],{"className":2337,"code":2690,"filename":2691,"language":2340,"meta":792,"style":792},"import { render } from 'react-email'\nimport { Resend } from 'resend'\nimport { WelcomeEmail } from '.\u002Femails\u002Fwelcome'\n\nconst resend = new Resend(process.env.RESEND_API_KEY)\n\nconst html = await render(\u003CWelcomeEmail name=\"Alex\" \u002F>)\n\nawait resend.emails.send({\n  from: 'no-reply@example.com',\n  to: 'alex@example.com',\n  subject: 'Welcome!',\n  html,\n})\n","send.ts",[365,2693,2694,2712,2731,2749,2753,2784,2788,2818,2822,2842,2858,2874,2890,2897],{"__ignoreMap":792},[796,2695,2696,2698,2700,2702,2704,2706,2708,2710],{"class":798,"line":18},[796,2697,802],{"class":801},[796,2699,1978],{"class":805},[796,2701,2351],{"class":811},[796,2703,1994],{"class":805},[796,2705,886],{"class":801},[796,2707,889],{"class":805},[796,2709,893],{"class":892},[796,2711,896],{"class":805},[796,2713,2714,2716,2718,2721,2723,2725,2727,2729],{"class":798,"line":13},[796,2715,802],{"class":801},[796,2717,1978],{"class":805},[796,2719,2720],{"class":811}," Resend",[796,2722,1994],{"class":805},[796,2724,886],{"class":801},[796,2726,889],{"class":805},[796,2728,2683],{"class":892},[796,2730,896],{"class":805},[796,2732,2733,2735,2737,2739,2741,2743,2745,2747],{"class":798,"line":32},[796,2734,802],{"class":801},[796,2736,1978],{"class":805},[796,2738,946],{"class":811},[796,2740,1994],{"class":805},[796,2742,886],{"class":801},[796,2744,889],{"class":805},[796,2746,2378],{"class":892},[796,2748,896],{"class":805},[796,2750,2751],{"class":798,"line":27},[796,2752,901],{"emptyLinePlaceholder":14},[796,2754,2755,2757,2760,2762,2765,2767,2769,2772,2774,2777,2779,2782],{"class":798,"line":52},[796,2756,2389],{"class":906},[796,2758,2759],{"class":811}," resend",[796,2761,1296],{"class":921},[796,2763,2764],{"class":906}," new",[796,2766,2720],{"class":945},[796,2768,2468],{"class":805},[796,2770,2771],{"class":811},"process",[796,2773,1290],{"class":921},[796,2775,2776],{"class":811},"env",[796,2778,1290],{"class":921},[796,2780,2781],{"class":811},"RESEND_API_KEY",[796,2783,2484],{"class":805},[796,2785,2786],{"class":798,"line":128},[796,2787,901],{"emptyLinePlaceholder":14},[796,2789,2790,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812,2814,2816],{"class":798,"line":124},[796,2791,2389],{"class":906},[796,2793,2392],{"class":811},[796,2795,1296],{"class":921},[796,2797,2397],{"class":801},[796,2799,2351],{"class":945},[796,2801,2402],{"class":805},[796,2803,1287],{"class":921},[796,2805,1359],{"class":921},[796,2807,984],{"class":917},[796,2809,987],{"class":805},[796,2811,1310],{"class":892},[796,2813,987],{"class":805},[796,2815,1406],{"class":917},[796,2817,2419],{"class":805},[796,2819,2820],{"class":798,"line":48},[796,2821,901],{"emptyLinePlaceholder":14},[796,2823,2824,2827,2829,2831,2834,2836,2839],{"class":798,"line":23},[796,2825,2826],{"class":801},"await",[796,2828,2759],{"class":811},[796,2830,1290],{"class":921},[796,2832,2833],{"class":811},"emails",[796,2835,1290],{"class":921},[796,2837,2838],{"class":945},"send",[796,2840,2841],{"class":805},"({\n",[796,2843,2844,2847,2849,2851,2854,2856],{"class":798,"line":140},[796,2845,2846],{"class":917},"  from",[796,2848,922],{"class":805},[796,2850,889],{"class":805},[796,2852,2853],{"class":892},"no-reply@example.com",[796,2855,1313],{"class":805},[796,2857,815],{"class":805},[796,2859,2860,2863,2865,2867,2870,2872],{"class":798,"line":56},[796,2861,2862],{"class":917},"  to",[796,2864,922],{"class":805},[796,2866,889],{"class":805},[796,2868,2869],{"class":892},"alex@example.com",[796,2871,1313],{"class":805},[796,2873,815],{"class":805},[796,2875,2876,2879,2881,2883,2886,2888],{"class":798,"line":80},[796,2877,2878],{"class":917},"  subject",[796,2880,922],{"class":805},[796,2882,889],{"class":805},[796,2884,2885],{"class":892},"Welcome!",[796,2887,1313],{"class":805},[796,2889,815],{"class":805},[796,2891,2892,2895],{"class":798,"line":36},[796,2893,2894],{"class":811},"  html",[796,2896,815],{"class":805},[796,2898,2899],{"class":798,"line":73},[796,2900,2568],{"class":805},[783,2902,2903],{"label":355},[786,2904,2906],{"className":2337,"code":2905,"filename":2691,"language":2340,"meta":792,"style":792},"import { render } from '@maizzle\u002Fframework'\nimport { Resend } from 'resend'\n\nconst resend = new Resend(process.env.RESEND_API_KEY)\n\nconst { html, plaintext } = await render('emails\u002Fwelcome.vue', {\n  recipient: { name: 'Alex' },\n  plaintext: true,\n})\n\nawait resend.emails.send({\n  from: 'no-reply@example.com',\n  to: 'alex@example.com',\n  subject: 'Welcome!',\n  html,\n  text: plaintext,\n})\n",[365,2907,2908,2926,2944,2948,2974,2978,3011,3031,3043,3047,3051,3067,3081,3095,3109,3115,3126],{"__ignoreMap":792},[796,2909,2910,2912,2914,2916,2918,2920,2922,2924],{"class":798,"line":18},[796,2911,802],{"class":801},[796,2913,1978],{"class":805},[796,2915,2351],{"class":811},[796,2917,1994],{"class":805},[796,2919,886],{"class":801},[796,2921,889],{"class":805},[796,2923,2443],{"class":892},[796,2925,896],{"class":805},[796,2927,2928,2930,2932,2934,2936,2938,2940,2942],{"class":798,"line":13},[796,2929,802],{"class":801},[796,2931,1978],{"class":805},[796,2933,2720],{"class":811},[796,2935,1994],{"class":805},[796,2937,886],{"class":801},[796,2939,889],{"class":805},[796,2941,2683],{"class":892},[796,2943,896],{"class":805},[796,2945,2946],{"class":798,"line":32},[796,2947,901],{"emptyLinePlaceholder":14},[796,2949,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972],{"class":798,"line":27},[796,2951,2389],{"class":906},[796,2953,2759],{"class":811},[796,2955,1296],{"class":921},[796,2957,2764],{"class":906},[796,2959,2720],{"class":945},[796,2961,2468],{"class":805},[796,2963,2771],{"class":811},[796,2965,1290],{"class":921},[796,2967,2776],{"class":811},[796,2969,1290],{"class":921},[796,2971,2781],{"class":811},[796,2973,2484],{"class":805},[796,2975,2976],{"class":798,"line":52},[796,2977,901],{"emptyLinePlaceholder":14},[796,2979,2980,2982,2984,2986,2988,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009],{"class":798,"line":128},[796,2981,2389],{"class":906},[796,2983,1978],{"class":805},[796,2985,2392],{"class":811},[796,2987,1875],{"class":805},[796,2989,2990],{"class":811}," plaintext",[796,2992,1994],{"class":805},[796,2994,1296],{"class":921},[796,2996,2397],{"class":801},[796,2998,2351],{"class":945},[796,3000,2468],{"class":805},[796,3002,1313],{"class":805},[796,3004,1333],{"class":892},[796,3006,1313],{"class":805},[796,3008,1875],{"class":805},[796,3010,806],{"class":805},[796,3012,3013,3015,3017,3019,3021,3023,3025,3027,3029],{"class":798,"line":124},[796,3014,2547],{"class":917},[796,3016,922],{"class":805},[796,3018,1978],{"class":805},[796,3020,1359],{"class":917},[796,3022,922],{"class":805},[796,3024,889],{"class":805},[796,3026,1310],{"class":892},[796,3028,1313],{"class":805},[796,3030,2097],{"class":805},[796,3032,3033,3036,3038,3041],{"class":798,"line":48},[796,3034,3035],{"class":917},"  plaintext",[796,3037,922],{"class":805},[796,3039,3040],{"class":2595}," true",[796,3042,815],{"class":805},[796,3044,3045],{"class":798,"line":23},[796,3046,2568],{"class":805},[796,3048,3049],{"class":798,"line":140},[796,3050,901],{"emptyLinePlaceholder":14},[796,3052,3053,3055,3057,3059,3061,3063,3065],{"class":798,"line":56},[796,3054,2826],{"class":801},[796,3056,2759],{"class":811},[796,3058,1290],{"class":921},[796,3060,2833],{"class":811},[796,3062,1290],{"class":921},[796,3064,2838],{"class":945},[796,3066,2841],{"class":805},[796,3068,3069,3071,3073,3075,3077,3079],{"class":798,"line":80},[796,3070,2846],{"class":917},[796,3072,922],{"class":805},[796,3074,889],{"class":805},[796,3076,2853],{"class":892},[796,3078,1313],{"class":805},[796,3080,815],{"class":805},[796,3082,3083,3085,3087,3089,3091,3093],{"class":798,"line":36},[796,3084,2862],{"class":917},[796,3086,922],{"class":805},[796,3088,889],{"class":805},[796,3090,2869],{"class":892},[796,3092,1313],{"class":805},[796,3094,815],{"class":805},[796,3096,3097,3099,3101,3103,3105,3107],{"class":798,"line":73},[796,3098,2878],{"class":917},[796,3100,922],{"class":805},[796,3102,889],{"class":805},[796,3104,2885],{"class":892},[796,3106,1313],{"class":805},[796,3108,815],{"class":805},[796,3110,3111,3113],{"class":798,"line":132},[796,3112,2894],{"class":811},[796,3114,815],{"class":805},[796,3116,3117,3120,3122,3124],{"class":798,"line":66},[796,3118,3119],{"class":917},"  text",[796,3121,922],{"class":805},[796,3123,2990],{"class":811},[796,3125,815],{"class":805},[796,3127,3128],{"class":798,"line":112},[796,3129,2568],{"class":805},[631,3131,3133],{"id":3132},"nodemailer-smtp","Nodemailer (SMTP)",[780,3135,3136,3398],{},[783,3137,3138],{"label":246},[786,3139,3141],{"className":2337,"code":3140,"filename":2691,"language":2340,"meta":792,"style":792},"import { render } from 'react-email'\nimport { createTransport } from 'nodemailer'\nimport { WelcomeEmail } from '.\u002Femails\u002Fwelcome'\n\nconst transporter = createTransport({\n  host: 'smtp.example.com',\n  port: 587,\n  auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },\n})\n\nconst html = await render(\u003CWelcomeEmail name=\"Alex\" \u002F>)\n\nawait transporter.sendMail({\n  from: 'no-reply@example.com',\n  to: 'alex@example.com',\n  subject: 'Welcome!',\n  html,\n})\n",[365,3142,3143,3161,3181,3199,3203,3216,3232,3245,3291,3295,3299,3329,3333,3346,3360,3374,3388,3394],{"__ignoreMap":792},[796,3144,3145,3147,3149,3151,3153,3155,3157,3159],{"class":798,"line":18},[796,3146,802],{"class":801},[796,3148,1978],{"class":805},[796,3150,2351],{"class":811},[796,3152,1994],{"class":805},[796,3154,886],{"class":801},[796,3156,889],{"class":805},[796,3158,893],{"class":892},[796,3160,896],{"class":805},[796,3162,3163,3165,3167,3170,3172,3174,3176,3179],{"class":798,"line":13},[796,3164,802],{"class":801},[796,3166,1978],{"class":805},[796,3168,3169],{"class":811}," createTransport",[796,3171,1994],{"class":805},[796,3173,886],{"class":801},[796,3175,889],{"class":805},[796,3177,3178],{"class":892},"nodemailer",[796,3180,896],{"class":805},[796,3182,3183,3185,3187,3189,3191,3193,3195,3197],{"class":798,"line":32},[796,3184,802],{"class":801},[796,3186,1978],{"class":805},[796,3188,946],{"class":811},[796,3190,1994],{"class":805},[796,3192,886],{"class":801},[796,3194,889],{"class":805},[796,3196,2378],{"class":892},[796,3198,896],{"class":805},[796,3200,3201],{"class":798,"line":27},[796,3202,901],{"emptyLinePlaceholder":14},[796,3204,3205,3207,3210,3212,3214],{"class":798,"line":52},[796,3206,2389],{"class":906},[796,3208,3209],{"class":811}," transporter",[796,3211,1296],{"class":921},[796,3213,3169],{"class":945},[796,3215,2841],{"class":805},[796,3217,3218,3221,3223,3225,3228,3230],{"class":798,"line":128},[796,3219,3220],{"class":917},"  host",[796,3222,922],{"class":805},[796,3224,889],{"class":805},[796,3226,3227],{"class":892},"smtp.example.com",[796,3229,1313],{"class":805},[796,3231,815],{"class":805},[796,3233,3234,3237,3239,3243],{"class":798,"line":124},[796,3235,3236],{"class":917},"  port",[796,3238,922],{"class":805},[796,3240,3242],{"class":3241},"s0EtI"," 587",[796,3244,815],{"class":805},[796,3246,3247,3250,3252,3254,3257,3259,3262,3264,3266,3268,3271,3273,3276,3278,3280,3282,3284,3286,3289],{"class":798,"line":48},[796,3248,3249],{"class":917},"  auth",[796,3251,922],{"class":805},[796,3253,1978],{"class":805},[796,3255,3256],{"class":917}," user",[796,3258,922],{"class":805},[796,3260,3261],{"class":811}," process",[796,3263,1290],{"class":921},[796,3265,2776],{"class":811},[796,3267,1290],{"class":921},[796,3269,3270],{"class":811},"SMTP_USER",[796,3272,1875],{"class":805},[796,3274,3275],{"class":917}," pass",[796,3277,922],{"class":805},[796,3279,3261],{"class":811},[796,3281,1290],{"class":921},[796,3283,2776],{"class":811},[796,3285,1290],{"class":921},[796,3287,3288],{"class":811},"SMTP_PASS",[796,3290,2097],{"class":805},[796,3292,3293],{"class":798,"line":23},[796,3294,2568],{"class":805},[796,3296,3297],{"class":798,"line":140},[796,3298,901],{"emptyLinePlaceholder":14},[796,3300,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327],{"class":798,"line":56},[796,3302,2389],{"class":906},[796,3304,2392],{"class":811},[796,3306,1296],{"class":921},[796,3308,2397],{"class":801},[796,3310,2351],{"class":945},[796,3312,2402],{"class":805},[796,3314,1287],{"class":921},[796,3316,1359],{"class":921},[796,3318,984],{"class":917},[796,3320,987],{"class":805},[796,3322,1310],{"class":892},[796,3324,987],{"class":805},[796,3326,1406],{"class":917},[796,3328,2419],{"class":805},[796,3330,3331],{"class":798,"line":80},[796,3332,901],{"emptyLinePlaceholder":14},[796,3334,3335,3337,3339,3341,3344],{"class":798,"line":36},[796,3336,2826],{"class":801},[796,3338,3209],{"class":811},[796,3340,1290],{"class":921},[796,3342,3343],{"class":945},"sendMail",[796,3345,2841],{"class":805},[796,3347,3348,3350,3352,3354,3356,3358],{"class":798,"line":73},[796,3349,2846],{"class":917},[796,3351,922],{"class":805},[796,3353,889],{"class":805},[796,3355,2853],{"class":892},[796,3357,1313],{"class":805},[796,3359,815],{"class":805},[796,3361,3362,3364,3366,3368,3370,3372],{"class":798,"line":132},[796,3363,2862],{"class":917},[796,3365,922],{"class":805},[796,3367,889],{"class":805},[796,3369,2869],{"class":892},[796,3371,1313],{"class":805},[796,3373,815],{"class":805},[796,3375,3376,3378,3380,3382,3384,3386],{"class":798,"line":66},[796,3377,2878],{"class":917},[796,3379,922],{"class":805},[796,3381,889],{"class":805},[796,3383,2885],{"class":892},[796,3385,1313],{"class":805},[796,3387,815],{"class":805},[796,3389,3390,3392],{"class":798,"line":112},[796,3391,2894],{"class":811},[796,3393,815],{"class":805},[796,3395,3396],{"class":798,"line":40},[796,3397,2568],{"class":805},[783,3399,3400],{"label":355},[786,3401,3403],{"className":2337,"code":3402,"filename":2691,"language":2340,"meta":792,"style":792},"import { render } from '@maizzle\u002Fframework'\nimport { createTransport } from 'nodemailer'\n\nconst transporter = createTransport({\n  host: 'smtp.example.com',\n  port: 587,\n  auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },\n})\n\nconst { html, plaintext } = await render('emails\u002Fwelcome.vue', {\n  recipient: { name: 'Alex' },\n  plaintext: true,\n})\n\nawait transporter.sendMail({\n  from: 'no-reply@example.com',\n  to: 'alex@example.com',\n  subject: 'Welcome!',\n  html,\n  text: plaintext,\n})\n",[365,3404,3405,3423,3441,3445,3457,3471,3481,3521,3525,3529,3561,3581,3591,3595,3599,3611,3625,3639,3653,3659,3669],{"__ignoreMap":792},[796,3406,3407,3409,3411,3413,3415,3417,3419,3421],{"class":798,"line":18},[796,3408,802],{"class":801},[796,3410,1978],{"class":805},[796,3412,2351],{"class":811},[796,3414,1994],{"class":805},[796,3416,886],{"class":801},[796,3418,889],{"class":805},[796,3420,2443],{"class":892},[796,3422,896],{"class":805},[796,3424,3425,3427,3429,3431,3433,3435,3437,3439],{"class":798,"line":13},[796,3426,802],{"class":801},[796,3428,1978],{"class":805},[796,3430,3169],{"class":811},[796,3432,1994],{"class":805},[796,3434,886],{"class":801},[796,3436,889],{"class":805},[796,3438,3178],{"class":892},[796,3440,896],{"class":805},[796,3442,3443],{"class":798,"line":32},[796,3444,901],{"emptyLinePlaceholder":14},[796,3446,3447,3449,3451,3453,3455],{"class":798,"line":27},[796,3448,2389],{"class":906},[796,3450,3209],{"class":811},[796,3452,1296],{"class":921},[796,3454,3169],{"class":945},[796,3456,2841],{"class":805},[796,3458,3459,3461,3463,3465,3467,3469],{"class":798,"line":52},[796,3460,3220],{"class":917},[796,3462,922],{"class":805},[796,3464,889],{"class":805},[796,3466,3227],{"class":892},[796,3468,1313],{"class":805},[796,3470,815],{"class":805},[796,3472,3473,3475,3477,3479],{"class":798,"line":128},[796,3474,3236],{"class":917},[796,3476,922],{"class":805},[796,3478,3242],{"class":3241},[796,3480,815],{"class":805},[796,3482,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3517,3519],{"class":798,"line":124},[796,3484,3249],{"class":917},[796,3486,922],{"class":805},[796,3488,1978],{"class":805},[796,3490,3256],{"class":917},[796,3492,922],{"class":805},[796,3494,3261],{"class":811},[796,3496,1290],{"class":921},[796,3498,2776],{"class":811},[796,3500,1290],{"class":921},[796,3502,3270],{"class":811},[796,3504,1875],{"class":805},[796,3506,3275],{"class":917},[796,3508,922],{"class":805},[796,3510,3261],{"class":811},[796,3512,1290],{"class":921},[796,3514,2776],{"class":811},[796,3516,1290],{"class":921},[796,3518,3288],{"class":811},[796,3520,2097],{"class":805},[796,3522,3523],{"class":798,"line":48},[796,3524,2568],{"class":805},[796,3526,3527],{"class":798,"line":23},[796,3528,901],{"emptyLinePlaceholder":14},[796,3530,3531,3533,3535,3537,3539,3541,3543,3545,3547,3549,3551,3553,3555,3557,3559],{"class":798,"line":140},[796,3532,2389],{"class":906},[796,3534,1978],{"class":805},[796,3536,2392],{"class":811},[796,3538,1875],{"class":805},[796,3540,2990],{"class":811},[796,3542,1994],{"class":805},[796,3544,1296],{"class":921},[796,3546,2397],{"class":801},[796,3548,2351],{"class":945},[796,3550,2468],{"class":805},[796,3552,1313],{"class":805},[796,3554,1333],{"class":892},[796,3556,1313],{"class":805},[796,3558,1875],{"class":805},[796,3560,806],{"class":805},[796,3562,3563,3565,3567,3569,3571,3573,3575,3577,3579],{"class":798,"line":56},[796,3564,2547],{"class":917},[796,3566,922],{"class":805},[796,3568,1978],{"class":805},[796,3570,1359],{"class":917},[796,3572,922],{"class":805},[796,3574,889],{"class":805},[796,3576,1310],{"class":892},[796,3578,1313],{"class":805},[796,3580,2097],{"class":805},[796,3582,3583,3585,3587,3589],{"class":798,"line":80},[796,3584,3035],{"class":917},[796,3586,922],{"class":805},[796,3588,3040],{"class":2595},[796,3590,815],{"class":805},[796,3592,3593],{"class":798,"line":36},[796,3594,2568],{"class":805},[796,3596,3597],{"class":798,"line":73},[796,3598,901],{"emptyLinePlaceholder":14},[796,3600,3601,3603,3605,3607,3609],{"class":798,"line":132},[796,3602,2826],{"class":801},[796,3604,3209],{"class":811},[796,3606,1290],{"class":921},[796,3608,3343],{"class":945},[796,3610,2841],{"class":805},[796,3612,3613,3615,3617,3619,3621,3623],{"class":798,"line":66},[796,3614,2846],{"class":917},[796,3616,922],{"class":805},[796,3618,889],{"class":805},[796,3620,2853],{"class":892},[796,3622,1313],{"class":805},[796,3624,815],{"class":805},[796,3626,3627,3629,3631,3633,3635,3637],{"class":798,"line":112},[796,3628,2862],{"class":917},[796,3630,922],{"class":805},[796,3632,889],{"class":805},[796,3634,2869],{"class":892},[796,3636,1313],{"class":805},[796,3638,815],{"class":805},[796,3640,3641,3643,3645,3647,3649,3651],{"class":798,"line":40},[796,3642,2878],{"class":917},[796,3644,922],{"class":805},[796,3646,889],{"class":805},[796,3648,2885],{"class":892},[796,3650,1313],{"class":805},[796,3652,815],{"class":805},[796,3654,3655,3657],{"class":798,"line":44},[796,3656,2894],{"class":811},[796,3658,815],{"class":805},[796,3660,3661,3663,3665,3667],{"class":798,"line":84},[796,3662,3119],{"class":917},[796,3664,922],{"class":805},[796,3666,2990],{"class":811},[796,3668,815],{"class":805},[796,3670,3671],{"class":798,"line":96},[796,3672,2568],{"class":805},[1852,3674,3675],{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}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 .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}",{"title":792,"searchDepth":13,"depth":13,"links":3677},[3678,3681,3682,3685,3686],{"id":333,"depth":13,"text":334,"children":3679},[3680],{"id":633,"depth":32,"text":634},{"id":777,"depth":13,"text":778},{"id":1628,"depth":13,"text":1629,"children":3683},[3684],{"id":1950,"depth":32,"text":255},{"id":2317,"depth":13,"text":2318},{"id":2673,"depth":13,"text":2674,"children":3687},[3688,3689],{"id":2683,"depth":32,"text":167},{"id":3132,"depth":32,"text":3133},"How to migrate your email templates from React Email to Maizzle.","md",{},{"title":246,"description":3690},"docs\u002Fmigrate\u002Freact-email","T2rVbg3ocLIvBllwVqNdJd88Ke6E60dr3tf54a5RR7E",1781015459772]