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