[{"data":1,"prerenderedAt":2572},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid":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":218,"body":318,"description":2566,"extension":2567,"meta":2568,"navigation":14,"order":128,"path":217,"section":197,"seo":2569,"sidebar":14,"stem":2570,"toc":14,"__hash__":2571},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid.md",{"type":319,"value":320,"toc":2547},"minimark",[321,325,338,342,354,357,381,385,390,401,454,458,469,659,665,669,675,874,879,1073,1077,1091,1291,1294,1297,1312,1329,1332,1336,1345,1359,1363,1370,1376,1380,1387,1518,1521,1690,1694,1697,1962,1966,1973,2344,2348,2357,2530,2533,2537,2540,2543],[322,323,218],"h1",{"id":324},"solid",[326,327,328,329,333,334,337],"p",{},"Maizzle plugs into SolidStart as a Vite plugin. Run ",[330,331,332],"code",{},"npm start"," and a sibling preview server starts alongside your app; run ",[330,335,336],{},"npm run build"," and email templates compile to static HTML.",[339,340,227],"h2",{"id":341},"installation",[326,343,344,345,353],{},"In this guide, we'll use ",[346,347,352],"a",{"href":348,"rel":349,"target":351},"https:\u002F\u002Fdocs.solidjs.com\u002Fsolid-start",[350],"nofollow","_blank","SolidStart"," as the framework.",[326,355,356],{},"After setting up SolidStart, install Maizzle:",[358,359,364],"pre",{"className":360,"code":361,"language":362,"meta":363,"style":363},"language-bash shiki shiki-themes laserwave","npm install @maizzle\u002Fframework\n","bash","",[330,365,366],{"__ignoreMap":363},[367,368,370,374,378],"span",{"class":369,"line":18},"line",[367,371,373],{"class":372},"sZNF3","npm",[367,375,377],{"class":376},"sXiT_"," install",[367,379,380],{"class":376}," @maizzle\u002Fframework\n",[339,382,384],{"id":383},"setup","Setup",[386,387,389],"h3",{"id":388},"project-structure","Project structure",[326,391,392,393,396,397,400],{},"Create an ",[330,394,395],{},"emails"," directory inside ",[330,398,399],{},"src"," for your email templates:",[358,402,408],{"className":403,"code":404,"filename":405,"highlights":406,"language":407,"meta":363,"style":363},"language-text shiki shiki-themes laserwave","├── src\u002F\n│   ├── emails\u002F\n│   │   ├── welcome.vue\n│   │   └── tsconfig.json\n│   ├── routes\u002F\n├── app.config.ts\n├── tsconfig.json\n└── package.json\n","your-solidstart-app",[13,32,27],"text",[330,409,410,415,422,428,434,439,444,449],{"__ignoreMap":363},[367,411,412],{"class":369,"line":18},[367,413,414],{},"├── src\u002F\n",[367,416,419],{"class":417,"line":13},[369,418],"highlight",[367,420,421],{},"│   ├── emails\u002F\n",[367,423,425],{"class":424,"line":32},[369,418],[367,426,427],{},"│   │   ├── welcome.vue\n",[367,429,431],{"class":430,"line":27},[369,418],[367,432,433],{},"│   │   └── tsconfig.json\n",[367,435,436],{"class":369,"line":52},[367,437,438],{},"│   ├── routes\u002F\n",[367,440,441],{"class":369,"line":128},[367,442,443],{},"├── app.config.ts\n",[367,445,446],{"class":369,"line":124},[367,447,448],{},"├── tsconfig.json\n",[367,450,451],{"class":369,"line":48},[367,452,453],{},"└── package.json\n",[386,455,457],{"id":456},"app-config","App config",[326,459,460,461,464,465,468],{},"Register the Maizzle Vite plugin in the ",[330,462,463],{},"vite.plugins"," option in your ",[330,466,467],{},"app.config.ts",":",[358,470,474],{"className":471,"code":472,"filename":467,"language":473,"meta":363,"style":363},"language-ts shiki shiki-themes laserwave","import { defineConfig } from '@solidjs\u002Fstart\u002Fconfig'\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  vite: {\n    plugins: [\n      maizzle({\n        root: 'src\u002Femails',\n        content: ['**\u002F*.vue'],\n        output: {\n          path: 'build\u002Femails',\n        },\n      }),\n    ],\n  },\n})\n","ts",[330,475,476,505,525,530,543,554,564,571,589,609,618,634,639,644,649,654],{"__ignoreMap":363},[367,477,478,482,486,490,493,496,499,502],{"class":369,"line":18},[367,479,481],{"class":480},"s0ZPN","import",[367,483,485],{"class":484},"sGGKt"," {",[367,487,489],{"class":488},"sU-n2"," defineConfig",[367,491,492],{"class":484}," }",[367,494,495],{"class":480}," from",[367,497,498],{"class":484}," '",[367,500,501],{"class":376},"@solidjs\u002Fstart\u002Fconfig",[367,503,504],{"class":484},"'\n",[367,506,507,509,511,514,516,518,520,523],{"class":369,"line":13},[367,508,481],{"class":480},[367,510,485],{"class":484},[367,512,513],{"class":488}," maizzle",[367,515,492],{"class":484},[367,517,495],{"class":480},[367,519,498],{"class":484},[367,521,522],{"class":376},"@maizzle\u002Fframework",[367,524,504],{"class":484},[367,526,527],{"class":369,"line":32},[367,528,529],{"emptyLinePlaceholder":14},"\n",[367,531,532,535,538,540],{"class":369,"line":27},[367,533,534],{"class":480},"export",[367,536,537],{"class":480}," default",[367,539,489],{"class":372},[367,541,542],{"class":484},"({\n",[367,544,545,549,551],{"class":369,"line":52},[367,546,548],{"class":547},"sLaUg","  vite",[367,550,468],{"class":484},[367,552,553],{"class":484}," {\n",[367,555,556,559,561],{"class":369,"line":128},[367,557,558],{"class":547},"    plugins",[367,560,468],{"class":484},[367,562,563],{"class":484}," [\n",[367,565,566,569],{"class":369,"line":124},[367,567,568],{"class":372},"      maizzle",[367,570,542],{"class":484},[367,572,573,576,578,580,583,586],{"class":369,"line":48},[367,574,575],{"class":547},"        root",[367,577,468],{"class":484},[367,579,498],{"class":484},[367,581,582],{"class":376},"src\u002Femails",[367,584,585],{"class":484},"'",[367,587,588],{"class":484},",\n",[367,590,591,594,596,599,601,604,606],{"class":369,"line":23},[367,592,593],{"class":547},"        content",[367,595,468],{"class":484},[367,597,598],{"class":484}," [",[367,600,585],{"class":484},[367,602,603],{"class":376},"**\u002F*.vue",[367,605,585],{"class":484},[367,607,608],{"class":484},"],\n",[367,610,611,614,616],{"class":369,"line":140},[367,612,613],{"class":547},"        output",[367,615,468],{"class":484},[367,617,553],{"class":484},[367,619,620,623,625,627,630,632],{"class":369,"line":56},[367,621,622],{"class":547},"          path",[367,624,468],{"class":484},[367,626,498],{"class":484},[367,628,629],{"class":376},"build\u002Femails",[367,631,585],{"class":484},[367,633,588],{"class":484},[367,635,636],{"class":369,"line":80},[367,637,638],{"class":484},"        },\n",[367,640,641],{"class":369,"line":36},[367,642,643],{"class":484},"      }),\n",[367,645,646],{"class":369,"line":73},[367,647,648],{"class":484},"    ],\n",[367,650,651],{"class":369,"line":132},[367,652,653],{"class":484},"  },\n",[367,655,656],{"class":369,"line":66},[367,657,658],{"class":484},"})\n",[326,660,661,662,664],{},"See ",[346,663,173],{"href":172}," for all available options.",[386,666,668],{"id":667},"typescript","TypeScript",[326,670,671,672,468],{},"Maizzle generates type declarations for auto-imported components and composables post-installation. To enable type checking for your email templates, add a ",[330,673,674],{},"tsconfig.json",[358,676,681],{"className":677,"code":678,"filename":679,"language":680,"meta":363,"style":363},"language-json shiki shiki-themes laserwave","{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"composite\": true,\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\n    \".\u002F**\u002F*.vue\",\n    \".\u002F.maizzle\u002F*.d.ts\"\n  ]\n}\n","src\u002Femails\u002Ftsconfig.json","json",[330,682,683,688,703,725,745,765,782,797,812,826,830,843,854,864,869],{"__ignoreMap":363},[367,684,685],{"class":369,"line":18},[367,686,687],{"class":484},"{\n",[367,689,690,693,696,699,701],{"class":369,"line":13},[367,691,692],{"class":484},"  \"",[367,694,695],{"class":480},"compilerOptions",[367,697,698],{"class":484},"\"",[367,700,468],{"class":484},[367,702,553],{"class":484},[367,704,705,708,711,713,715,718,721,723],{"class":369,"line":32},[367,706,707],{"class":484},"    \"",[367,709,710],{"class":480},"target",[367,712,698],{"class":484},[367,714,468],{"class":484},[367,716,717],{"class":484}," \"",[367,719,720],{"class":376},"ES2022",[367,722,698],{"class":484},[367,724,588],{"class":484},[367,726,727,729,732,734,736,738,741,743],{"class":369,"line":27},[367,728,707],{"class":484},[367,730,731],{"class":480},"module",[367,733,698],{"class":484},[367,735,468],{"class":484},[367,737,717],{"class":484},[367,739,740],{"class":376},"ESNext",[367,742,698],{"class":484},[367,744,588],{"class":484},[367,746,747,749,752,754,756,758,761,763],{"class":369,"line":52},[367,748,707],{"class":484},[367,750,751],{"class":480},"moduleResolution",[367,753,698],{"class":484},[367,755,468],{"class":484},[367,757,717],{"class":484},[367,759,760],{"class":376},"bundler",[367,762,698],{"class":484},[367,764,588],{"class":484},[367,766,767,769,772,774,776,780],{"class":369,"line":128},[367,768,707],{"class":484},[367,770,771],{"class":480},"composite",[367,773,698],{"class":484},[367,775,468],{"class":484},[367,777,779],{"class":778},"skd8d"," true",[367,781,588],{"class":484},[367,783,784,786,789,791,793,795],{"class":369,"line":124},[367,785,707],{"class":484},[367,787,788],{"class":480},"strict",[367,790,698],{"class":484},[367,792,468],{"class":484},[367,794,779],{"class":778},[367,796,588],{"class":484},[367,798,799,801,804,806,808,810],{"class":369,"line":48},[367,800,707],{"class":484},[367,802,803],{"class":480},"esModuleInterop",[367,805,698],{"class":484},[367,807,468],{"class":484},[367,809,779],{"class":778},[367,811,588],{"class":484},[367,813,814,816,819,821,823],{"class":369,"line":23},[367,815,707],{"class":484},[367,817,818],{"class":480},"skipLibCheck",[367,820,698],{"class":484},[367,822,468],{"class":484},[367,824,825],{"class":778}," true\n",[367,827,828],{"class":369,"line":140},[367,829,653],{"class":484},[367,831,832,834,837,839,841],{"class":369,"line":56},[367,833,692],{"class":484},[367,835,836],{"class":480},"include",[367,838,698],{"class":484},[367,840,468],{"class":484},[367,842,563],{"class":484},[367,844,845,847,850,852],{"class":369,"line":80},[367,846,707],{"class":484},[367,848,849],{"class":376},".\u002F**\u002F*.vue",[367,851,698],{"class":484},[367,853,588],{"class":484},[367,855,856,858,861],{"class":369,"line":36},[367,857,707],{"class":484},[367,859,860],{"class":376},".\u002F.maizzle\u002F*.d.ts",[367,862,863],{"class":484},"\"\n",[367,865,866],{"class":369,"line":73},[367,867,868],{"class":484},"  ]\n",[367,870,871],{"class":369,"line":132},[367,872,873],{"class":484},"}\n",[326,875,876,877,468],{},"Then add it as a project reference in your root ",[330,878,674],{},[358,880,883],{"className":881,"code":882,"language":680,"meta":363,"style":363},"language-json shiki shiki-themes laserwave has-diff","{\n  \"compilerOptions\": {\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"noEmit\": true,\n    \"strict\": true\n  },\n  \"references\": [\n    { \"path\": \".\u002Fsrc\u002Femails\" } \u002F\u002F [!code ++]\n  ]\n}\n",[330,884,885,889,901,921,941,959,977,995,1010,1022,1026,1039,1065,1069],{"__ignoreMap":363},[367,886,887],{"class":369,"line":18},[367,888,687],{"class":484},[367,890,891,893,895,897,899],{"class":369,"line":13},[367,892,692],{"class":484},[367,894,695],{"class":480},[367,896,698],{"class":484},[367,898,468],{"class":484},[367,900,553],{"class":484},[367,902,903,905,908,910,912,914,917,919],{"class":369,"line":32},[367,904,707],{"class":484},[367,906,907],{"class":480},"jsx",[367,909,698],{"class":484},[367,911,468],{"class":484},[367,913,717],{"class":484},[367,915,916],{"class":376},"preserve",[367,918,698],{"class":484},[367,920,588],{"class":484},[367,922,923,925,928,930,932,934,937,939],{"class":369,"line":27},[367,924,707],{"class":484},[367,926,927],{"class":480},"jsxImportSource",[367,929,698],{"class":484},[367,931,468],{"class":484},[367,933,717],{"class":484},[367,935,936],{"class":376},"solid-js",[367,938,698],{"class":484},[367,940,588],{"class":484},[367,942,943,945,947,949,951,953,955,957],{"class":369,"line":52},[367,944,707],{"class":484},[367,946,710],{"class":480},[367,948,698],{"class":484},[367,950,468],{"class":484},[367,952,717],{"class":484},[367,954,740],{"class":376},[367,956,698],{"class":484},[367,958,588],{"class":484},[367,960,961,963,965,967,969,971,973,975],{"class":369,"line":128},[367,962,707],{"class":484},[367,964,731],{"class":480},[367,966,698],{"class":484},[367,968,468],{"class":484},[367,970,717],{"class":484},[367,972,740],{"class":376},[367,974,698],{"class":484},[367,976,588],{"class":484},[367,978,979,981,983,985,987,989,991,993],{"class":369,"line":124},[367,980,707],{"class":484},[367,982,751],{"class":480},[367,984,698],{"class":484},[367,986,468],{"class":484},[367,988,717],{"class":484},[367,990,760],{"class":376},[367,992,698],{"class":484},[367,994,588],{"class":484},[367,996,997,999,1002,1004,1006,1008],{"class":369,"line":48},[367,998,707],{"class":484},[367,1000,1001],{"class":480},"noEmit",[367,1003,698],{"class":484},[367,1005,468],{"class":484},[367,1007,779],{"class":778},[367,1009,588],{"class":484},[367,1011,1012,1014,1016,1018,1020],{"class":369,"line":23},[367,1013,707],{"class":484},[367,1015,788],{"class":480},[367,1017,698],{"class":484},[367,1019,468],{"class":484},[367,1021,825],{"class":778},[367,1023,1024],{"class":369,"line":140},[367,1025,653],{"class":484},[367,1027,1028,1030,1033,1035,1037],{"class":369,"line":56},[367,1029,692],{"class":484},[367,1031,1032],{"class":480},"references",[367,1034,698],{"class":484},[367,1036,468],{"class":484},[367,1038,563],{"class":484},[367,1040,1044,1047,1049,1052,1054,1056,1058,1061,1063],{"class":1041,"line":80},[369,1042,1043],"diff","add",[367,1045,1046],{"class":484},"    {",[367,1048,717],{"class":484},[367,1050,1051],{"class":480},"path",[367,1053,698],{"class":484},[367,1055,468],{"class":484},[367,1057,717],{"class":484},[367,1059,1060],{"class":376},".\u002Fsrc\u002Femails",[367,1062,698],{"class":484},[367,1064,492],{"class":484},[367,1066,1067],{"class":369,"line":36},[367,1068,868],{"class":484},[367,1070,1071],{"class":369,"line":73},[367,1072,873],{"class":484},[339,1074,1076],{"id":1075},"usage","Usage",[326,1078,1079,1080,1082,1083,1085,1086,1085,1088,1090],{},"Create Vue SFC email templates in your ",[330,1081,582],{}," directory. Maizzle components like ",[330,1084,76],{},", ",[330,1087,51],{},[330,1089,35],{},", etc. are auto-imported:",[358,1092,1097],{"className":1093,"code":1094,"filename":1095,"language":1096,"meta":363,"style":363},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  const name = 'World'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading class=\"text-2xl\">Hello, {{ name }}!\u003C\u002FHeading>\n      \u003CButton\n        href=\"https:\u002F\u002Fexample.com\"\n        class=\"bg-slate-950 hover:bg-slate-800\"\n      >Get Started\u003C\u002FButton>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n","src\u002Femails\u002Fwelcome.vue","vue",[330,1098,1099,1114,1133,1142,1146,1155,1164,1186,1216,1223,1237,1251,1265,1274,1283],{"__ignoreMap":363},[367,1100,1101,1104,1108,1111],{"class":369,"line":18},[367,1102,1103],{"class":484},"\u003C",[367,1105,1107],{"class":1106},"sb4Pa","script",[367,1109,1110],{"class":372}," setup",[367,1112,1113],{"class":484},">\n",[367,1115,1116,1120,1123,1126,1128,1131],{"class":369,"line":13},[367,1117,1119],{"class":1118},"sIihq","  const",[367,1121,1122],{"class":778}," name",[367,1124,1125],{"class":1106}," =",[367,1127,498],{"class":484},[367,1129,1130],{"class":376},"World",[367,1132,504],{"class":484},[367,1134,1135,1138,1140],{"class":369,"line":32},[367,1136,1137],{"class":484},"\u003C\u002F",[367,1139,1107],{"class":1106},[367,1141,1113],{"class":484},[367,1143,1144],{"class":369,"line":27},[367,1145,529],{"emptyLinePlaceholder":14},[367,1147,1148,1150,1153],{"class":369,"line":52},[367,1149,1103],{"class":484},[367,1151,1152],{"class":1106},"template",[367,1154,1113],{"class":484},[367,1156,1157,1160,1162],{"class":369,"line":128},[367,1158,1159],{"class":484},"  \u003C",[367,1161,76],{"class":1106},[367,1163,1113],{"class":484},[367,1165,1166,1169,1171,1174,1177,1179,1182,1184],{"class":369,"line":124},[367,1167,1168],{"class":484},"    \u003C",[367,1170,51],{"class":1106},[367,1172,1173],{"class":372}," class",[367,1175,1176],{"class":484},"=",[367,1178,698],{"class":484},[367,1180,1181],{"class":376},"max-w-xl",[367,1183,698],{"class":484},[367,1185,1113],{"class":484},[367,1187,1188,1191,1193,1195,1197,1199,1202,1204,1207,1210,1212,1214],{"class":369,"line":48},[367,1189,1190],{"class":484},"      \u003C",[367,1192,62],{"class":1106},[367,1194,1173],{"class":372},[367,1196,1176],{"class":484},[367,1198,698],{"class":484},[367,1200,1201],{"class":376},"text-2xl",[367,1203,698],{"class":484},[367,1205,1206],{"class":484},">",[367,1208,1209],{"class":547},"Hello, {{ name }}!",[367,1211,1137],{"class":484},[367,1213,62],{"class":1106},[367,1215,1113],{"class":484},[367,1217,1218,1220],{"class":369,"line":23},[367,1219,1190],{"class":484},[367,1221,1222],{"class":1106},"Button\n",[367,1224,1225,1228,1230,1232,1235],{"class":369,"line":140},[367,1226,1227],{"class":372},"        href",[367,1229,1176],{"class":484},[367,1231,698],{"class":484},[367,1233,1234],{"class":376},"https:\u002F\u002Fexample.com",[367,1236,863],{"class":484},[367,1238,1239,1242,1244,1246,1249],{"class":369,"line":56},[367,1240,1241],{"class":372},"        class",[367,1243,1176],{"class":484},[367,1245,698],{"class":484},[367,1247,1248],{"class":376},"bg-slate-950 hover:bg-slate-800",[367,1250,863],{"class":484},[367,1252,1253,1256,1259,1261,1263],{"class":369,"line":80},[367,1254,1255],{"class":484},"      >",[367,1257,1258],{"class":547},"Get Started",[367,1260,1137],{"class":484},[367,1262,35],{"class":1106},[367,1264,1113],{"class":484},[367,1266,1267,1270,1272],{"class":369,"line":36},[367,1268,1269],{"class":484},"    \u003C\u002F",[367,1271,51],{"class":1106},[367,1273,1113],{"class":484},[367,1275,1276,1279,1281],{"class":369,"line":73},[367,1277,1278],{"class":484},"  \u003C\u002F",[367,1280,76],{"class":1106},[367,1282,1113],{"class":484},[367,1284,1285,1287,1289],{"class":369,"line":132},[367,1286,1137],{"class":484},[367,1288,1152],{"class":1106},[367,1290,1113],{"class":484},[386,1292,174],{"id":1293},"development",[326,1295,1296],{},"Run your dev command as usual. Maizzle starts its own dev server alongside SolidStart:",[358,1298,1300],{"className":360,"code":1299,"language":362,"meta":363,"style":363},"npm run dev\n",[330,1301,1302],{"__ignoreMap":363},[367,1303,1304,1306,1309],{"class":369,"line":18},[367,1305,373],{"class":372},[367,1307,1308],{"class":376}," run",[367,1310,1311],{"class":376}," dev\n",[1313,1314,1315,1323],"ul",{},[1316,1317,1318,1319,1322],"li",{},"Your SolidStart app runs on its default port (typically ",[330,1320,1321],{},"3000",")",[1316,1324,1325,1326,1322],{},"The Maizzle email preview UI runs on the next available port (normally ",[330,1327,1328],{},"3001",[326,1330,1331],{},"Changes to email templates are automatically reflected in the Maizzle preview UI.",[386,1333,1335],{"id":1334},"production-build","Production build",[326,1337,1338,1339,1342,1343,468],{},"When you build your app, Maizzle compiles your email templates to static HTML files in the configured ",[330,1340,1341],{},"output.path",", which in our example is ",[330,1344,629],{},[358,1346,1348],{"className":360,"code":1347,"language":362,"meta":363,"style":363},"npm run build\n",[330,1349,1350],{"__ignoreMap":363},[367,1351,1352,1354,1356],{"class":369,"line":18},[367,1353,373],{"class":372},[367,1355,1308],{"class":376},[367,1357,1358],{"class":376}," build\n",[339,1360,1362],{"id":1361},"server-api","Server API",[326,1364,1365,1366,1369],{},"You can render email templates on-demand using Maizzle's ",[330,1367,1368],{},"render"," function in a SolidStart API route. This is useful when you need to render emails dynamically, for example with user data from a database.",[326,1371,1372,1373,1375],{},"The ",[330,1374,1368],{}," function accepts either a file path or an SFC string directly, and returns compiled HTML with CSS inlined, purged, and formatted.",[386,1377,1379],{"id":1378},"api-route","API route",[326,1381,1382,1383,1386],{},"Create a server endpoint that renders an email template. You can read a ",[330,1384,1385],{},".vue"," file from disk:",[358,1388,1391],{"className":471,"code":1389,"filename":1390,"language":473,"meta":363,"style":363},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport async function GET() {\n  const { html } = await render(resolve('src\u002Femails\u002Fwelcome.vue'))\n\n  return Response.json({ html })\n}\n","src\u002Froutes\u002Fapi\u002Frender.ts",[330,1392,1393,1413,1432,1436,1454,1489,1493,1514],{"__ignoreMap":363},[367,1394,1395,1397,1399,1402,1404,1406,1408,1411],{"class":369,"line":18},[367,1396,481],{"class":480},[367,1398,485],{"class":484},[367,1400,1401],{"class":488}," resolve",[367,1403,492],{"class":484},[367,1405,495],{"class":480},[367,1407,498],{"class":484},[367,1409,1410],{"class":376},"node:path",[367,1412,504],{"class":484},[367,1414,1415,1417,1419,1422,1424,1426,1428,1430],{"class":369,"line":13},[367,1416,481],{"class":480},[367,1418,485],{"class":484},[367,1420,1421],{"class":488}," render",[367,1423,492],{"class":484},[367,1425,495],{"class":480},[367,1427,498],{"class":484},[367,1429,522],{"class":376},[367,1431,504],{"class":484},[367,1433,1434],{"class":369,"line":32},[367,1435,529],{"emptyLinePlaceholder":14},[367,1437,1438,1440,1443,1446,1449,1452],{"class":369,"line":27},[367,1439,534],{"class":480},[367,1441,1442],{"class":547}," async ",[367,1444,1445],{"class":1118},"function",[367,1447,1448],{"class":372}," GET",[367,1450,1451],{"class":484},"()",[367,1453,553],{"class":484},[367,1455,1456,1458,1460,1463,1465,1467,1470,1472,1475,1478,1480,1482,1484,1486],{"class":369,"line":52},[367,1457,1119],{"class":1118},[367,1459,485],{"class":484},[367,1461,1462],{"class":488}," html",[367,1464,492],{"class":484},[367,1466,1125],{"class":1106},[367,1468,1469],{"class":480}," await",[367,1471,1421],{"class":372},[367,1473,1474],{"class":484},"(",[367,1476,1477],{"class":372},"resolve",[367,1479,1474],{"class":484},[367,1481,585],{"class":484},[367,1483,1095],{"class":376},[367,1485,585],{"class":484},[367,1487,1488],{"class":484},"))\n",[367,1490,1491],{"class":369,"line":128},[367,1492,529],{"emptyLinePlaceholder":14},[367,1494,1495,1498,1501,1504,1506,1509,1511],{"class":369,"line":124},[367,1496,1497],{"class":480},"  return",[367,1499,1500],{"class":488}," Response",[367,1502,1503],{"class":1106},".",[367,1505,680],{"class":372},[367,1507,1508],{"class":484},"({",[367,1510,1462],{"class":488},[367,1512,1513],{"class":484}," })\n",[367,1515,1516],{"class":369,"line":48},[367,1517,873],{"class":484},[326,1519,1520],{},"Or accept an SFC string in the request body:",[358,1522,1524],{"className":471,"code":1523,"filename":1390,"language":473,"meta":363,"style":363},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport type { APIEvent } from '@solidjs\u002Fstart\u002Fserver'\n\nexport async function POST({ request }: APIEvent) {\n  const { template } = await request.json()\n\n  const { html } = await render(template)\n\n  return Response.json({ html })\n}\n",[330,1525,1526,1544,1562,1585,1589,1615,1639,1643,1666,1670,1686],{"__ignoreMap":363},[367,1527,1528,1530,1532,1534,1536,1538,1540,1542],{"class":369,"line":18},[367,1529,481],{"class":480},[367,1531,485],{"class":484},[367,1533,1401],{"class":488},[367,1535,492],{"class":484},[367,1537,495],{"class":480},[367,1539,498],{"class":484},[367,1541,1410],{"class":376},[367,1543,504],{"class":484},[367,1545,1546,1548,1550,1552,1554,1556,1558,1560],{"class":369,"line":13},[367,1547,481],{"class":480},[367,1549,485],{"class":484},[367,1551,1421],{"class":488},[367,1553,492],{"class":484},[367,1555,495],{"class":480},[367,1557,498],{"class":484},[367,1559,522],{"class":376},[367,1561,504],{"class":484},[367,1563,1564,1566,1569,1571,1574,1576,1578,1580,1583],{"class":369,"line":32},[367,1565,481],{"class":480},[367,1567,1568],{"class":480}," type",[367,1570,485],{"class":484},[367,1572,1573],{"class":488}," APIEvent",[367,1575,492],{"class":484},[367,1577,495],{"class":480},[367,1579,498],{"class":484},[367,1581,1582],{"class":376},"@solidjs\u002Fstart\u002Fserver",[367,1584,504],{"class":484},[367,1586,1587],{"class":369,"line":27},[367,1588,529],{"emptyLinePlaceholder":14},[367,1590,1591,1593,1595,1597,1600,1602,1605,1607,1609,1611,1613],{"class":369,"line":52},[367,1592,534],{"class":480},[367,1594,1442],{"class":547},[367,1596,1445],{"class":1118},[367,1598,1599],{"class":372}," POST",[367,1601,1508],{"class":484},[367,1603,1604],{"class":488}," request",[367,1606,492],{"class":484},[367,1608,468],{"class":1106},[367,1610,1573],{"class":1106},[367,1612,1322],{"class":484},[367,1614,553],{"class":484},[367,1616,1617,1619,1621,1624,1626,1628,1630,1632,1634,1636],{"class":369,"line":128},[367,1618,1119],{"class":1118},[367,1620,485],{"class":484},[367,1622,1623],{"class":488}," template",[367,1625,492],{"class":484},[367,1627,1125],{"class":1106},[367,1629,1469],{"class":480},[367,1631,1604],{"class":488},[367,1633,1503],{"class":1106},[367,1635,680],{"class":372},[367,1637,1638],{"class":484},"()\n",[367,1640,1641],{"class":369,"line":124},[367,1642,529],{"emptyLinePlaceholder":14},[367,1644,1645,1647,1649,1651,1653,1655,1657,1659,1661,1663],{"class":369,"line":48},[367,1646,1119],{"class":1118},[367,1648,485],{"class":484},[367,1650,1462],{"class":488},[367,1652,492],{"class":484},[367,1654,1125],{"class":1106},[367,1656,1469],{"class":480},[367,1658,1421],{"class":372},[367,1660,1474],{"class":484},[367,1662,1152],{"class":488},[367,1664,1665],{"class":484},")\n",[367,1667,1668],{"class":369,"line":23},[367,1669,529],{"emptyLinePlaceholder":14},[367,1671,1672,1674,1676,1678,1680,1682,1684],{"class":369,"line":140},[367,1673,1497],{"class":480},[367,1675,1500],{"class":488},[367,1677,1503],{"class":1106},[367,1679,680],{"class":372},[367,1681,1508],{"class":484},[367,1683,1462],{"class":488},[367,1685,1513],{"class":484},[367,1687,1688],{"class":369,"line":56},[367,1689,873],{"class":484},[386,1691,1693],{"id":1692},"displaying-the-result","Displaying the result",[326,1695,1696],{},"Since the rendered email is a full HTML document, use an iframe to display it in a SolidStart page:",[358,1698,1703],{"className":1699,"code":1700,"filename":1701,"language":1702,"meta":363,"style":363},"language-tsx shiki shiki-themes laserwave","import { onMount } from 'solid-js'\n\nexport default function Preview() {\n  let iframeRef: HTMLIFrameElement | undefined\n\n  onMount(async () => {\n    const res = await fetch('\u002Fapi\u002Frender')\n    const { html } = await res.json()\n\n    if (iframeRef) {\n      iframeRef.srcdoc = html\n    }\n  })\n\n  return \u003Ciframe ref={iframeRef} style={{ width: '100%', height: '100vh', border: 'none' }} \u002F>\n}\n","src\u002Froutes\u002Fpreview.tsx","tsx",[330,1704,1705,1724,1728,1744,1763,1767,1784,1810,1832,1836,1851,1866,1871,1876,1880,1958],{"__ignoreMap":363},[367,1706,1707,1709,1711,1714,1716,1718,1720,1722],{"class":369,"line":18},[367,1708,481],{"class":480},[367,1710,485],{"class":484},[367,1712,1713],{"class":488}," onMount",[367,1715,492],{"class":484},[367,1717,495],{"class":480},[367,1719,498],{"class":484},[367,1721,936],{"class":376},[367,1723,504],{"class":484},[367,1725,1726],{"class":369,"line":13},[367,1727,529],{"emptyLinePlaceholder":14},[367,1729,1730,1732,1734,1737,1740,1742],{"class":369,"line":32},[367,1731,534],{"class":480},[367,1733,537],{"class":480},[367,1735,1736],{"class":1118}," function",[367,1738,1739],{"class":372}," Preview",[367,1741,1451],{"class":484},[367,1743,553],{"class":484},[367,1745,1746,1749,1752,1754,1757,1760],{"class":369,"line":27},[367,1747,1748],{"class":1118},"  let",[367,1750,1751],{"class":488}," iframeRef",[367,1753,468],{"class":1106},[367,1755,1756],{"class":1118}," HTMLIFrameElement ",[367,1758,1759],{"class":1106},"|",[367,1761,1762],{"class":1118}," undefined\n",[367,1764,1765],{"class":369,"line":52},[367,1766,529],{"emptyLinePlaceholder":14},[367,1768,1769,1772,1774,1777,1779,1782],{"class":369,"line":128},[367,1770,1771],{"class":372},"  onMount",[367,1773,1474],{"class":484},[367,1775,1776],{"class":547},"async ",[367,1778,1451],{"class":484},[367,1780,1781],{"class":1106}," =>",[367,1783,553],{"class":484},[367,1785,1786,1789,1792,1794,1796,1799,1801,1803,1806,1808],{"class":369,"line":124},[367,1787,1788],{"class":1118},"    const",[367,1790,1791],{"class":488}," res",[367,1793,1125],{"class":1106},[367,1795,1469],{"class":480},[367,1797,1798],{"class":372}," fetch",[367,1800,1474],{"class":484},[367,1802,585],{"class":484},[367,1804,1805],{"class":376},"\u002Fapi\u002Frender",[367,1807,585],{"class":484},[367,1809,1665],{"class":484},[367,1811,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830],{"class":369,"line":48},[367,1813,1788],{"class":1118},[367,1815,485],{"class":484},[367,1817,1462],{"class":488},[367,1819,492],{"class":484},[367,1821,1125],{"class":1106},[367,1823,1469],{"class":480},[367,1825,1791],{"class":488},[367,1827,1503],{"class":484},[367,1829,680],{"class":372},[367,1831,1638],{"class":484},[367,1833,1834],{"class":369,"line":23},[367,1835,529],{"emptyLinePlaceholder":14},[367,1837,1838,1841,1844,1847,1849],{"class":369,"line":140},[367,1839,1840],{"class":480},"    if",[367,1842,1843],{"class":484}," (",[367,1845,1846],{"class":488},"iframeRef",[367,1848,1322],{"class":484},[367,1850,553],{"class":484},[367,1852,1853,1856,1858,1861,1863],{"class":369,"line":56},[367,1854,1855],{"class":488},"      iframeRef",[367,1857,1503],{"class":484},[367,1859,1860],{"class":480},"srcdoc",[367,1862,1125],{"class":1106},[367,1864,1865],{"class":488}," html\n",[367,1867,1868],{"class":369,"line":80},[367,1869,1870],{"class":484},"    }\n",[367,1872,1873],{"class":369,"line":36},[367,1874,1875],{"class":484},"  })\n",[367,1877,1878],{"class":369,"line":73},[367,1879,529],{"emptyLinePlaceholder":14},[367,1881,1882,1884,1887,1890,1893,1895,1898,1900,1903,1906,1908,1911,1914,1916,1918,1921,1923,1926,1929,1931,1933,1936,1938,1940,1943,1945,1947,1950,1952,1955],{"class":369,"line":132},[367,1883,1497],{"class":480},[367,1885,1886],{"class":484}," \u003C",[367,1888,1889],{"class":1106},"iframe",[367,1891,1892],{"class":372}," ref",[367,1894,1176],{"class":1106},[367,1896,1897],{"class":484},"{",[367,1899,1846],{"class":488},[367,1901,1902],{"class":484},"}",[367,1904,1905],{"class":372}," style",[367,1907,1176],{"class":1106},[367,1909,1910],{"class":484},"{{",[367,1912,1913],{"class":547}," width",[367,1915,468],{"class":484},[367,1917,498],{"class":484},[367,1919,1920],{"class":376},"100%",[367,1922,585],{"class":484},[367,1924,1925],{"class":484},",",[367,1927,1928],{"class":547}," height",[367,1930,468],{"class":484},[367,1932,498],{"class":484},[367,1934,1935],{"class":376},"100vh",[367,1937,585],{"class":484},[367,1939,1925],{"class":484},[367,1941,1942],{"class":547}," border",[367,1944,468],{"class":484},[367,1946,498],{"class":484},[367,1948,1949],{"class":376},"none",[367,1951,585],{"class":484},[367,1953,1954],{"class":484}," }}",[367,1956,1957],{"class":484}," \u002F>\n",[367,1959,1960],{"class":369,"line":66},[367,1961,873],{"class":484},[386,1963,1965],{"id":1964},"sending-emails","Sending emails",[326,1967,1968,1969,468],{},"You can use the rendered HTML to send emails. Here's an example using ",[346,1970,161],{"href":1971,"rel":1972,"target":351},"https:\u002F\u002Fnodemailer.com\u002F",[350],[358,1974,1977],{"className":471,"code":1975,"filename":1976,"language":473,"meta":363,"style":363},"import type { APIEvent } from '@solidjs\u002Fstart\u002Fserver'\nimport { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport { createTransport } from 'nodemailer'\n\nconst transporter = createTransport({\n  host: 'smtp.example.com',\n  port: 587,\n  auth: {\n    user: process.env.SMTP_USER,\n    pass: process.env.SMTP_PASS,\n  },\n})\n\nexport async function POST({ request }: APIEvent) {\n  const { to } = await request.json()\n\n  const { html } = await render(resolve('src\u002Femails\u002Fwelcome.vue'))\n\n  await transporter.sendMail({\n    from: 'no-reply@example.com',\n    to,\n    subject: 'Welcome!',\n    html,\n  })\n\n  return Response.json({ success: true })\n}\n","src\u002Froutes\u002Fapi\u002Fsend.ts",[330,1978,1979,1999,2017,2035,2055,2059,2073,2089,2102,2111,2133,2153,2157,2161,2165,2189,2212,2216,2246,2250,2264,2280,2287,2303,2310,2315,2319,2340],{"__ignoreMap":363},[367,1980,1981,1983,1985,1987,1989,1991,1993,1995,1997],{"class":369,"line":18},[367,1982,481],{"class":480},[367,1984,1568],{"class":480},[367,1986,485],{"class":484},[367,1988,1573],{"class":488},[367,1990,492],{"class":484},[367,1992,495],{"class":480},[367,1994,498],{"class":484},[367,1996,1582],{"class":376},[367,1998,504],{"class":484},[367,2000,2001,2003,2005,2007,2009,2011,2013,2015],{"class":369,"line":13},[367,2002,481],{"class":480},[367,2004,485],{"class":484},[367,2006,1401],{"class":488},[367,2008,492],{"class":484},[367,2010,495],{"class":480},[367,2012,498],{"class":484},[367,2014,1410],{"class":376},[367,2016,504],{"class":484},[367,2018,2019,2021,2023,2025,2027,2029,2031,2033],{"class":369,"line":32},[367,2020,481],{"class":480},[367,2022,485],{"class":484},[367,2024,1421],{"class":488},[367,2026,492],{"class":484},[367,2028,495],{"class":480},[367,2030,498],{"class":484},[367,2032,522],{"class":376},[367,2034,504],{"class":484},[367,2036,2037,2039,2041,2044,2046,2048,2050,2053],{"class":369,"line":27},[367,2038,481],{"class":480},[367,2040,485],{"class":484},[367,2042,2043],{"class":488}," createTransport",[367,2045,492],{"class":484},[367,2047,495],{"class":480},[367,2049,498],{"class":484},[367,2051,2052],{"class":376},"nodemailer",[367,2054,504],{"class":484},[367,2056,2057],{"class":369,"line":52},[367,2058,529],{"emptyLinePlaceholder":14},[367,2060,2061,2064,2067,2069,2071],{"class":369,"line":128},[367,2062,2063],{"class":1118},"const",[367,2065,2066],{"class":488}," transporter",[367,2068,1125],{"class":1106},[367,2070,2043],{"class":372},[367,2072,542],{"class":484},[367,2074,2075,2078,2080,2082,2085,2087],{"class":369,"line":124},[367,2076,2077],{"class":547},"  host",[367,2079,468],{"class":484},[367,2081,498],{"class":484},[367,2083,2084],{"class":376},"smtp.example.com",[367,2086,585],{"class":484},[367,2088,588],{"class":484},[367,2090,2091,2094,2096,2100],{"class":369,"line":48},[367,2092,2093],{"class":547},"  port",[367,2095,468],{"class":484},[367,2097,2099],{"class":2098},"s0EtI"," 587",[367,2101,588],{"class":484},[367,2103,2104,2107,2109],{"class":369,"line":23},[367,2105,2106],{"class":547},"  auth",[367,2108,468],{"class":484},[367,2110,553],{"class":484},[367,2112,2113,2116,2118,2121,2123,2126,2128,2131],{"class":369,"line":140},[367,2114,2115],{"class":547},"    user",[367,2117,468],{"class":484},[367,2119,2120],{"class":488}," process",[367,2122,1503],{"class":1106},[367,2124,2125],{"class":488},"env",[367,2127,1503],{"class":1106},[367,2129,2130],{"class":488},"SMTP_USER",[367,2132,588],{"class":484},[367,2134,2135,2138,2140,2142,2144,2146,2148,2151],{"class":369,"line":56},[367,2136,2137],{"class":547},"    pass",[367,2139,468],{"class":484},[367,2141,2120],{"class":488},[367,2143,1503],{"class":1106},[367,2145,2125],{"class":488},[367,2147,1503],{"class":1106},[367,2149,2150],{"class":488},"SMTP_PASS",[367,2152,588],{"class":484},[367,2154,2155],{"class":369,"line":80},[367,2156,653],{"class":484},[367,2158,2159],{"class":369,"line":36},[367,2160,658],{"class":484},[367,2162,2163],{"class":369,"line":73},[367,2164,529],{"emptyLinePlaceholder":14},[367,2166,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187],{"class":369,"line":132},[367,2168,534],{"class":480},[367,2170,1442],{"class":547},[367,2172,1445],{"class":1118},[367,2174,1599],{"class":372},[367,2176,1508],{"class":484},[367,2178,1604],{"class":488},[367,2180,492],{"class":484},[367,2182,468],{"class":1106},[367,2184,1573],{"class":1106},[367,2186,1322],{"class":484},[367,2188,553],{"class":484},[367,2190,2191,2193,2195,2198,2200,2202,2204,2206,2208,2210],{"class":369,"line":66},[367,2192,1119],{"class":1118},[367,2194,485],{"class":484},[367,2196,2197],{"class":488}," to",[367,2199,492],{"class":484},[367,2201,1125],{"class":1106},[367,2203,1469],{"class":480},[367,2205,1604],{"class":488},[367,2207,1503],{"class":1106},[367,2209,680],{"class":372},[367,2211,1638],{"class":484},[367,2213,2214],{"class":369,"line":112},[367,2215,529],{"emptyLinePlaceholder":14},[367,2217,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236,2238,2240,2242,2244],{"class":369,"line":40},[367,2219,1119],{"class":1118},[367,2221,485],{"class":484},[367,2223,1462],{"class":488},[367,2225,492],{"class":484},[367,2227,1125],{"class":1106},[367,2229,1469],{"class":480},[367,2231,1421],{"class":372},[367,2233,1474],{"class":484},[367,2235,1477],{"class":372},[367,2237,1474],{"class":484},[367,2239,585],{"class":484},[367,2241,1095],{"class":376},[367,2243,585],{"class":484},[367,2245,1488],{"class":484},[367,2247,2248],{"class":369,"line":44},[367,2249,529],{"emptyLinePlaceholder":14},[367,2251,2252,2255,2257,2259,2262],{"class":369,"line":84},[367,2253,2254],{"class":480},"  await",[367,2256,2066],{"class":488},[367,2258,1503],{"class":1106},[367,2260,2261],{"class":372},"sendMail",[367,2263,542],{"class":484},[367,2265,2266,2269,2271,2273,2276,2278],{"class":369,"line":96},[367,2267,2268],{"class":547},"    from",[367,2270,468],{"class":484},[367,2272,498],{"class":484},[367,2274,2275],{"class":376},"no-reply@example.com",[367,2277,585],{"class":484},[367,2279,588],{"class":484},[367,2281,2282,2285],{"class":369,"line":88},[367,2283,2284],{"class":488},"    to",[367,2286,588],{"class":484},[367,2288,2289,2292,2294,2296,2299,2301],{"class":369,"line":100},[367,2290,2291],{"class":547},"    subject",[367,2293,468],{"class":484},[367,2295,498],{"class":484},[367,2297,2298],{"class":376},"Welcome!",[367,2300,585],{"class":484},[367,2302,588],{"class":484},[367,2304,2305,2308],{"class":369,"line":144},[367,2306,2307],{"class":488},"    html",[367,2309,588],{"class":484},[367,2311,2313],{"class":369,"line":2312},25,[367,2314,1875],{"class":484},[367,2316,2317],{"class":369,"line":92},[367,2318,529],{"emptyLinePlaceholder":14},[367,2320,2321,2323,2325,2327,2329,2331,2334,2336,2338],{"class":369,"line":148},[367,2322,1497],{"class":480},[367,2324,1500],{"class":488},[367,2326,1503],{"class":1106},[367,2328,680],{"class":372},[367,2330,1508],{"class":484},[367,2332,2333],{"class":547}," success",[367,2335,468],{"class":484},[367,2337,779],{"class":778},[367,2339,1513],{"class":484},[367,2341,2342],{"class":369,"line":120},[367,2343,873],{"class":484},[339,2345,2347],{"id":2346},"static-assets","Static assets",[326,2349,2350,2351,2354,2355,468],{},"To include images or other static files with your emails, configure the ",[330,2352,2353],{},"static"," option on the Maizzle plugin in ",[330,2356,467],{},[358,2358,2361],{"className":2359,"code":2360,"filename":467,"language":473,"meta":363,"style":363},"language-ts shiki shiki-themes laserwave has-diff","import { defineConfig } from '@solidjs\u002Fstart\u002Fconfig'\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  vite: {\n    plugins: [\n      maizzle({\n        content: ['.\u002Fsrc\u002Femails\u002F**\u002F*.vue'],\n        output: {\n          path: 'build\u002Femails',\n        },\n        static: { \u002F\u002F [!code ++]\n          source: ['src\u002Femails\u002Fimages'], \u002F\u002F [!code ++]\n        }, \u002F\u002F [!code ++]\n      }),\n    ],\n  },\n})\n",[330,2362,2363,2381,2399,2403,2413,2421,2429,2435,2452,2460,2474,2478,2488,2508,2514,2518,2522,2526],{"__ignoreMap":363},[367,2364,2365,2367,2369,2371,2373,2375,2377,2379],{"class":369,"line":18},[367,2366,481],{"class":480},[367,2368,485],{"class":484},[367,2370,489],{"class":488},[367,2372,492],{"class":484},[367,2374,495],{"class":480},[367,2376,498],{"class":484},[367,2378,501],{"class":376},[367,2380,504],{"class":484},[367,2382,2383,2385,2387,2389,2391,2393,2395,2397],{"class":369,"line":13},[367,2384,481],{"class":480},[367,2386,485],{"class":484},[367,2388,513],{"class":488},[367,2390,492],{"class":484},[367,2392,495],{"class":480},[367,2394,498],{"class":484},[367,2396,522],{"class":376},[367,2398,504],{"class":484},[367,2400,2401],{"class":369,"line":32},[367,2402,529],{"emptyLinePlaceholder":14},[367,2404,2405,2407,2409,2411],{"class":369,"line":27},[367,2406,534],{"class":480},[367,2408,537],{"class":480},[367,2410,489],{"class":372},[367,2412,542],{"class":484},[367,2414,2415,2417,2419],{"class":369,"line":52},[367,2416,548],{"class":547},[367,2418,468],{"class":484},[367,2420,553],{"class":484},[367,2422,2423,2425,2427],{"class":369,"line":128},[367,2424,558],{"class":547},[367,2426,468],{"class":484},[367,2428,563],{"class":484},[367,2430,2431,2433],{"class":369,"line":124},[367,2432,568],{"class":372},[367,2434,542],{"class":484},[367,2436,2437,2439,2441,2443,2445,2448,2450],{"class":369,"line":48},[367,2438,593],{"class":547},[367,2440,468],{"class":484},[367,2442,598],{"class":484},[367,2444,585],{"class":484},[367,2446,2447],{"class":376},".\u002Fsrc\u002Femails\u002F**\u002F*.vue",[367,2449,585],{"class":484},[367,2451,608],{"class":484},[367,2453,2454,2456,2458],{"class":369,"line":23},[367,2455,613],{"class":547},[367,2457,468],{"class":484},[367,2459,553],{"class":484},[367,2461,2462,2464,2466,2468,2470,2472],{"class":369,"line":140},[367,2463,622],{"class":547},[367,2465,468],{"class":484},[367,2467,498],{"class":484},[367,2469,629],{"class":376},[367,2471,585],{"class":484},[367,2473,588],{"class":484},[367,2475,2476],{"class":369,"line":56},[367,2477,638],{"class":484},[367,2479,2481,2484,2486],{"class":2480,"line":80},[369,1042,1043],[367,2482,2483],{"class":547},"        static",[367,2485,468],{"class":484},[367,2487,485],{"class":484},[367,2489,2491,2494,2496,2498,2500,2503,2505],{"class":2490,"line":36},[369,1042,1043],[367,2492,2493],{"class":547},"          source",[367,2495,468],{"class":484},[367,2497,598],{"class":484},[367,2499,585],{"class":484},[367,2501,2502],{"class":376},"src\u002Femails\u002Fimages",[367,2504,585],{"class":484},[367,2506,2507],{"class":484},"],",[367,2509,2511],{"class":2510,"line":73},[369,1042,1043],[367,2512,2513],{"class":484},"        },",[367,2515,2516],{"class":369,"line":132},[367,2517,643],{"class":484},[367,2519,2520],{"class":369,"line":66},[367,2521,648],{"class":484},[367,2523,2524],{"class":369,"line":112},[367,2525,653],{"class":484},[367,2527,2528],{"class":369,"line":40},[367,2529,658],{"class":484},[326,2531,2532],{},"Static files are copied to the output directory during production builds.",[339,2534,2536],{"id":2535},"other-frameworks","Other frameworks",[326,2538,2539],{},"Not using Solid? Check out the other framework guides:",[2541,2542],"framework-guides",{":exclude":324},[2544,2545,2546],"style",{},"html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}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 .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}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 .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}",{"title":363,"searchDepth":13,"depth":13,"links":2548},[2549,2550,2555,2559,2564,2565],{"id":341,"depth":13,"text":227},{"id":383,"depth":13,"text":384,"children":2551},[2552,2553,2554],{"id":388,"depth":32,"text":389},{"id":456,"depth":32,"text":457},{"id":667,"depth":32,"text":668},{"id":1075,"depth":13,"text":1076,"children":2556},[2557,2558],{"id":1293,"depth":32,"text":174},{"id":1334,"depth":32,"text":1335},{"id":1361,"depth":13,"text":1362,"children":2560},[2561,2562,2563],{"id":1378,"depth":32,"text":1379},{"id":1692,"depth":32,"text":1693},{"id":1964,"depth":32,"text":1965},{"id":2346,"depth":13,"text":2347},{"id":2535,"depth":13,"text":2536},"How to use Maizzle with Solid to build email templates alongside your web application.","md",{},{"title":218,"description":2566},"docs\u002Finstallation\u002Fframeworks\u002Fsolid","l7be_sgcSlSEkKgUruEdOe9Z6ZwZfTESSPKMKLyE4PI",1781015475682]