[{"data":1,"prerenderedAt":3271},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs":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":209,"body":318,"description":3265,"extension":3266,"meta":3267,"navigation":14,"order":48,"path":208,"section":197,"seo":3268,"sidebar":14,"stem":3269,"toc":14,"__hash__":3270},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs.md",{"type":319,"value":320,"toc":3247},"minimark",[321,325,334,341,345,348,372,376,381,388,430,434,448,836,840,855,1011,1015,1020,1190,1193,1341,1345,1350,1371,1375,1378,1493,1497,1502,1509,1952,1961,1964,1987,1997,2001,2007,2335,2339,2348,2652,2660,3018,3022,3028,3045,3053,3057,3064,3233,3237,3240,3243],[322,323,209],"h1",{"id":324},"nextjs",[326,327,328,329,333],"p",{},"You can use Maizzle in a Next.js app to render email templates from Route Handlers and Server Actions with the ",[330,331,332],"code",{},"render()"," utility.",[335,336,338],"callout",{"type":337},"info",[326,339,340],{},"Maizzle does not support using JSX or React syntax. This guide shows how to author email templates as Vue SFCs and render them in a Next.js app.",[342,343,227],"h2",{"id":344},"installation",[326,346,347],{},"Install Maizzle in your Next.js project:",[349,350,355],"pre",{"className":351,"code":352,"language":353,"meta":354,"style":354},"language-bash shiki shiki-themes laserwave","npm install @maizzle\u002Fframework\n","bash","",[330,356,357],{"__ignoreMap":354},[358,359,361,365,369],"span",{"class":360,"line":18},"line",[358,362,364],{"class":363},"sZNF3","npm",[358,366,368],{"class":367},"sXiT_"," install",[358,370,371],{"class":367}," @maizzle\u002Fframework\n",[342,373,375],{"id":374},"setup","Setup",[377,378,380],"h3",{"id":379},"project-structure","Project structure",[326,382,383,384,387],{},"Create an ",[330,385,386],{},"emails"," directory in your Next.js project root for your email templates:",[349,389,395],{"className":390,"code":391,"filename":392,"highlights":393,"language":394,"meta":354,"style":354},"language-text shiki shiki-themes laserwave","├── app\u002F\n├── emails\u002F\n│   ├── welcome.vue\n├── next.config.ts\n├── tsconfig.json\n└── package.json\n","nextjs-app",[13,32],"text",[330,396,397,402,409,415,420,425],{"__ignoreMap":354},[358,398,399],{"class":360,"line":18},[358,400,401],{},"├── app\u002F\n",[358,403,406],{"class":404,"line":13},[360,405],"highlight",[358,407,408],{},"├── emails\u002F\n",[358,410,412],{"class":411,"line":32},[360,405],[358,413,414],{},"│   ├── welcome.vue\n",[358,416,417],{"class":360,"line":27},[358,418,419],{},"├── next.config.ts\n",[358,421,422],{"class":360,"line":52},[358,423,424],{},"├── tsconfig.json\n",[358,426,427],{"class":360,"line":128},[358,428,429],{},"└── package.json\n",[377,431,433],{"id":432},"typescript","TypeScript",[326,435,436,437,440,441,444,445,447],{},"For type checking inside ",[330,438,439],{},".vue"," templates, add the extension to your ",[330,442,443],{},"tsconfig.json",". Also, exclude the ",[330,446,386],{}," folder from the Next.js compiler so it doesn't try to parse Vue SFCs:",[349,449,454],{"className":450,"code":451,"filename":452,"language":453,"meta":354,"style":354},"language-json shiki shiki-themes laserwave has-highlighted","{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true\n  },\n  \"include\": [\"next-env.d.ts\", \"**\u002F*.ts\", \"**\u002F*.tsx\", \"**\u002F*.vue\"], \u002F\u002F [!code highlight]\n  \"exclude\": [\"node_modules\", \"emails\"] \u002F\u002F [!code highlight]\n}\n","emails\u002Ftsconfig.json","json",[330,455,456,462,480,503,546,563,578,594,609,624,639,658,678,693,708,728,742,747,799,831],{"__ignoreMap":354},[358,457,458],{"class":360,"line":18},[358,459,461],{"class":460},"sGGKt","{\n",[358,463,464,467,471,474,477],{"class":360,"line":13},[358,465,466],{"class":460},"  \"",[358,468,470],{"class":469},"s0ZPN","compilerOptions",[358,472,473],{"class":460},"\"",[358,475,476],{"class":460},":",[358,478,479],{"class":460}," {\n",[358,481,482,485,488,490,492,495,498,500],{"class":360,"line":32},[358,483,484],{"class":460},"    \"",[358,486,487],{"class":469},"target",[358,489,473],{"class":460},[358,491,476],{"class":460},[358,493,494],{"class":460}," \"",[358,496,497],{"class":367},"es5",[358,499,473],{"class":460},[358,501,502],{"class":460},",\n",[358,504,505,507,510,512,514,517,519,522,524,527,529,532,534,536,538,541,543],{"class":360,"line":27},[358,506,484],{"class":460},[358,508,509],{"class":469},"lib",[358,511,473],{"class":460},[358,513,476],{"class":460},[358,515,516],{"class":460}," [",[358,518,473],{"class":460},[358,520,521],{"class":367},"dom",[358,523,473],{"class":460},[358,525,526],{"class":460},",",[358,528,494],{"class":460},[358,530,531],{"class":367},"dom.iterable",[358,533,473],{"class":460},[358,535,526],{"class":460},[358,537,494],{"class":460},[358,539,540],{"class":367},"esnext",[358,542,473],{"class":460},[358,544,545],{"class":460},"],\n",[358,547,548,550,553,555,557,561],{"class":360,"line":52},[358,549,484],{"class":460},[358,551,552],{"class":469},"allowJs",[358,554,473],{"class":460},[358,556,476],{"class":460},[358,558,560],{"class":559},"skd8d"," true",[358,562,502],{"class":460},[358,564,565,567,570,572,574,576],{"class":360,"line":128},[358,566,484],{"class":460},[358,568,569],{"class":469},"skipLibCheck",[358,571,473],{"class":460},[358,573,476],{"class":460},[358,575,560],{"class":559},[358,577,502],{"class":460},[358,579,580,582,585,587,589,592],{"class":360,"line":124},[358,581,484],{"class":460},[358,583,584],{"class":469},"strict",[358,586,473],{"class":460},[358,588,476],{"class":460},[358,590,591],{"class":559}," false",[358,593,502],{"class":460},[358,595,596,598,601,603,605,607],{"class":360,"line":48},[358,597,484],{"class":460},[358,599,600],{"class":469},"forceConsistentCasingInFileNames",[358,602,473],{"class":460},[358,604,476],{"class":460},[358,606,560],{"class":559},[358,608,502],{"class":460},[358,610,611,613,616,618,620,622],{"class":360,"line":23},[358,612,484],{"class":460},[358,614,615],{"class":469},"noEmit",[358,617,473],{"class":460},[358,619,476],{"class":460},[358,621,560],{"class":559},[358,623,502],{"class":460},[358,625,626,628,631,633,635,637],{"class":360,"line":140},[358,627,484],{"class":460},[358,629,630],{"class":469},"esModuleInterop",[358,632,473],{"class":460},[358,634,476],{"class":460},[358,636,560],{"class":559},[358,638,502],{"class":460},[358,640,641,643,646,648,650,652,654,656],{"class":360,"line":56},[358,642,484],{"class":460},[358,644,645],{"class":469},"module",[358,647,473],{"class":460},[358,649,476],{"class":460},[358,651,494],{"class":460},[358,653,540],{"class":367},[358,655,473],{"class":460},[358,657,502],{"class":460},[358,659,660,662,665,667,669,671,674,676],{"class":360,"line":80},[358,661,484],{"class":460},[358,663,664],{"class":469},"moduleResolution",[358,666,473],{"class":460},[358,668,476],{"class":460},[358,670,494],{"class":460},[358,672,673],{"class":367},"node",[358,675,473],{"class":460},[358,677,502],{"class":460},[358,679,680,682,685,687,689,691],{"class":360,"line":36},[358,681,484],{"class":460},[358,683,684],{"class":469},"resolveJsonModule",[358,686,473],{"class":460},[358,688,476],{"class":460},[358,690,560],{"class":559},[358,692,502],{"class":460},[358,694,695,697,700,702,704,706],{"class":360,"line":73},[358,696,484],{"class":460},[358,698,699],{"class":469},"isolatedModules",[358,701,473],{"class":460},[358,703,476],{"class":460},[358,705,560],{"class":559},[358,707,502],{"class":460},[358,709,710,712,715,717,719,721,724,726],{"class":360,"line":132},[358,711,484],{"class":460},[358,713,714],{"class":469},"jsx",[358,716,473],{"class":460},[358,718,476],{"class":460},[358,720,494],{"class":460},[358,722,723],{"class":367},"react-jsx",[358,725,473],{"class":460},[358,727,502],{"class":460},[358,729,730,732,735,737,739],{"class":360,"line":66},[358,731,484],{"class":460},[358,733,734],{"class":469},"incremental",[358,736,473],{"class":460},[358,738,476],{"class":460},[358,740,741],{"class":559}," true\n",[358,743,744],{"class":360,"line":112},[358,745,746],{"class":460},"  },\n",[358,748,751,753,756,758,760,762,764,767,769,771,773,776,778,780,782,785,787,789,791,794,796],{"class":749,"line":40},[360,750],"highlighted",[358,752,466],{"class":460},[358,754,755],{"class":469},"include",[358,757,473],{"class":460},[358,759,476],{"class":460},[358,761,516],{"class":460},[358,763,473],{"class":460},[358,765,766],{"class":367},"next-env.d.ts",[358,768,473],{"class":460},[358,770,526],{"class":460},[358,772,494],{"class":460},[358,774,775],{"class":367},"**\u002F*.ts",[358,777,473],{"class":460},[358,779,526],{"class":460},[358,781,494],{"class":460},[358,783,784],{"class":367},"**\u002F*.tsx",[358,786,473],{"class":460},[358,788,526],{"class":460},[358,790,494],{"class":460},[358,792,793],{"class":367},"**\u002F*.vue",[358,795,473],{"class":460},[358,797,798],{"class":460},"],",[358,800,802,804,807,809,811,813,815,818,820,822,824,826,828],{"class":801,"line":44},[360,750],[358,803,466],{"class":460},[358,805,806],{"class":469},"exclude",[358,808,473],{"class":460},[358,810,476],{"class":460},[358,812,516],{"class":460},[358,814,473],{"class":460},[358,816,817],{"class":367},"node_modules",[358,819,473],{"class":460},[358,821,526],{"class":460},[358,823,494],{"class":460},[358,825,386],{"class":367},[358,827,473],{"class":460},[358,829,830],{"class":460},"]",[358,832,833],{"class":360,"line":84},[358,834,835],{"class":460},"}\n",[342,837,839],{"id":838},"usage","Usage",[326,841,842,843,846,847,849,850,849,852,854],{},"Author email templates as Vue SFCs in ",[330,844,845],{},"emails\u002F",". Maizzle's components (",[330,848,76],{},", ",[330,851,51],{},[330,853,35],{},", etc.) are auto-imported inside templates:",[349,856,861],{"className":857,"code":858,"filename":859,"language":860,"meta":354,"style":354},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CContainer class=\"bg-slate-100 p-4\">\n          \u003CText class=\"text-lg text-slate-800\">Hello!\u003C\u002FText>\n        \u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n\n","emails\u002Fwelcome.vue","vue",[330,862,863,875,884,897,905,914,936,967,976,985,994,1003],{"__ignoreMap":354},[358,864,865,868,872],{"class":360,"line":18},[358,866,867],{"class":460},"\u003C",[358,869,871],{"class":870},"sb4Pa","template",[358,873,874],{"class":460},">\n",[358,876,877,880,882],{"class":360,"line":13},[358,878,879],{"class":460},"  \u003C",[358,881,69],{"class":870},[358,883,874],{"class":460},[358,885,886,889,891,895],{"class":360,"line":32},[358,887,888],{"class":460},"    \u003C",[358,890,59],{"class":870},[358,892,894],{"class":893},"sLaUg"," \u002F",[358,896,874],{"class":460},[358,898,899,901,903],{"class":360,"line":27},[358,900,888],{"class":460},[358,902,30],{"class":870},[358,904,874],{"class":460},[358,906,907,910,912],{"class":360,"line":52},[358,908,909],{"class":460},"      \u003C",[358,911,135],{"class":870},[358,913,874],{"class":460},[358,915,916,919,921,924,927,929,932,934],{"class":360,"line":128},[358,917,918],{"class":460},"        \u003C",[358,920,51],{"class":870},[358,922,923],{"class":363}," class",[358,925,926],{"class":460},"=",[358,928,473],{"class":460},[358,930,931],{"class":367},"bg-slate-100 p-4",[358,933,473],{"class":460},[358,935,874],{"class":460},[358,937,938,941,943,945,947,949,952,954,957,960,963,965],{"class":360,"line":124},[358,939,940],{"class":460},"          \u003C",[358,942,139],{"class":870},[358,944,923],{"class":363},[358,946,926],{"class":460},[358,948,473],{"class":460},[358,950,951],{"class":367},"text-lg text-slate-800",[358,953,473],{"class":460},[358,955,956],{"class":460},">",[358,958,959],{"class":893},"Hello!",[358,961,962],{"class":460},"\u003C\u002F",[358,964,139],{"class":870},[358,966,874],{"class":460},[358,968,969,972,974],{"class":360,"line":48},[358,970,971],{"class":460},"        \u003C\u002F",[358,973,51],{"class":870},[358,975,874],{"class":460},[358,977,978,981,983],{"class":360,"line":23},[358,979,980],{"class":460},"      \u003C\u002F",[358,982,135],{"class":870},[358,984,874],{"class":460},[358,986,987,990,992],{"class":360,"line":140},[358,988,989],{"class":460},"    \u003C\u002F",[358,991,30],{"class":870},[358,993,874],{"class":460},[358,995,996,999,1001],{"class":360,"line":56},[358,997,998],{"class":460},"  \u003C\u002F",[358,1000,69],{"class":870},[358,1002,874],{"class":460},[358,1004,1005,1007,1009],{"class":360,"line":80},[358,1006,962],{"class":460},[358,1008,871],{"class":870},[358,1010,874],{"class":460},[342,1012,1014],{"id":1013},"route-handler","Route Handler",[326,1016,1017,1018,476],{},"Render an email on demand from an App Router Route Handler. Pass the template's file path directly to ",[330,1019,332],{},[349,1021,1026],{"className":1022,"code":1023,"filename":1024,"language":1025,"meta":354,"style":354},"language-ts shiki shiki-themes laserwave","import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport const runtime = 'nodejs'\n\nexport async function POST() {\n  const { html } = await render(resolve('emails\u002Fwelcome.vue'))\n\n  return Response.json({ html })\n}\n","app\u002Fapi\u002Frender\u002Froute.ts","ts",[330,1027,1028,1055,1075,1080,1102,1106,1124,1161,1165,1186],{"__ignoreMap":354},[358,1029,1030,1033,1036,1040,1043,1046,1049,1052],{"class":360,"line":18},[358,1031,1032],{"class":469},"import",[358,1034,1035],{"class":460}," {",[358,1037,1039],{"class":1038},"sU-n2"," resolve",[358,1041,1042],{"class":460}," }",[358,1044,1045],{"class":469}," from",[358,1047,1048],{"class":460}," '",[358,1050,1051],{"class":367},"node:path",[358,1053,1054],{"class":460},"'\n",[358,1056,1057,1059,1061,1064,1066,1068,1070,1073],{"class":360,"line":13},[358,1058,1032],{"class":469},[358,1060,1035],{"class":460},[358,1062,1063],{"class":1038}," render",[358,1065,1042],{"class":460},[358,1067,1045],{"class":469},[358,1069,1048],{"class":460},[358,1071,1072],{"class":367},"@maizzle\u002Fframework",[358,1074,1054],{"class":460},[358,1076,1077],{"class":360,"line":32},[358,1078,1079],{"emptyLinePlaceholder":14},"\n",[358,1081,1082,1085,1089,1092,1095,1097,1100],{"class":360,"line":27},[358,1083,1084],{"class":469},"export",[358,1086,1088],{"class":1087},"sIihq"," const",[358,1090,1091],{"class":1038}," runtime",[358,1093,1094],{"class":870}," =",[358,1096,1048],{"class":460},[358,1098,1099],{"class":367},"nodejs",[358,1101,1054],{"class":460},[358,1103,1104],{"class":360,"line":52},[358,1105,1079],{"emptyLinePlaceholder":14},[358,1107,1108,1110,1113,1116,1119,1122],{"class":360,"line":128},[358,1109,1084],{"class":469},[358,1111,1112],{"class":893}," async ",[358,1114,1115],{"class":1087},"function",[358,1117,1118],{"class":363}," POST",[358,1120,1121],{"class":460},"()",[358,1123,479],{"class":460},[358,1125,1126,1129,1131,1134,1136,1138,1141,1143,1146,1149,1151,1154,1156,1158],{"class":360,"line":124},[358,1127,1128],{"class":1087},"  const",[358,1130,1035],{"class":460},[358,1132,1133],{"class":1038}," html",[358,1135,1042],{"class":460},[358,1137,1094],{"class":870},[358,1139,1140],{"class":469}," await",[358,1142,1063],{"class":363},[358,1144,1145],{"class":460},"(",[358,1147,1148],{"class":363},"resolve",[358,1150,1145],{"class":460},[358,1152,1153],{"class":460},"'",[358,1155,859],{"class":367},[358,1157,1153],{"class":460},[358,1159,1160],{"class":460},"))\n",[358,1162,1163],{"class":360,"line":48},[358,1164,1079],{"emptyLinePlaceholder":14},[358,1166,1167,1170,1173,1176,1178,1181,1183],{"class":360,"line":23},[358,1168,1169],{"class":469},"  return",[358,1171,1172],{"class":1038}," Response",[358,1174,1175],{"class":870},".",[358,1177,453],{"class":363},[358,1179,1180],{"class":460},"({",[358,1182,1133],{"class":1038},[358,1184,1185],{"class":460}," })\n",[358,1187,1188],{"class":360,"line":140},[358,1189,835],{"class":460},[326,1191,1192],{},"You can also pass an SFC string sent from the client — useful when you have a UI that lets users edit a template:",[349,1194,1196],{"className":1022,"code":1195,"filename":1024,"language":1025,"meta":354,"style":354},"import { render } from '@maizzle\u002Fframework'\n\nexport const runtime = 'nodejs'\n\nexport async function POST(request: Request) {\n  const { template } = await request.json()\n\n  const { html } = await render(template)\n\n  return Response.json({ html })\n}\n",[330,1197,1198,1216,1220,1236,1240,1265,1290,1294,1317,1321,1337],{"__ignoreMap":354},[358,1199,1200,1202,1204,1206,1208,1210,1212,1214],{"class":360,"line":18},[358,1201,1032],{"class":469},[358,1203,1035],{"class":460},[358,1205,1063],{"class":1038},[358,1207,1042],{"class":460},[358,1209,1045],{"class":469},[358,1211,1048],{"class":460},[358,1213,1072],{"class":367},[358,1215,1054],{"class":460},[358,1217,1218],{"class":360,"line":13},[358,1219,1079],{"emptyLinePlaceholder":14},[358,1221,1222,1224,1226,1228,1230,1232,1234],{"class":360,"line":32},[358,1223,1084],{"class":469},[358,1225,1088],{"class":1087},[358,1227,1091],{"class":1038},[358,1229,1094],{"class":870},[358,1231,1048],{"class":460},[358,1233,1099],{"class":367},[358,1235,1054],{"class":460},[358,1237,1238],{"class":360,"line":27},[358,1239,1079],{"emptyLinePlaceholder":14},[358,1241,1242,1244,1246,1248,1250,1252,1255,1257,1260,1263],{"class":360,"line":52},[358,1243,1084],{"class":469},[358,1245,1112],{"class":893},[358,1247,1115],{"class":1087},[358,1249,1118],{"class":363},[358,1251,1145],{"class":460},[358,1253,1254],{"class":1038},"request",[358,1256,476],{"class":870},[358,1258,1259],{"class":870}," Request",[358,1261,1262],{"class":460},")",[358,1264,479],{"class":460},[358,1266,1267,1269,1271,1274,1276,1278,1280,1283,1285,1287],{"class":360,"line":128},[358,1268,1128],{"class":1087},[358,1270,1035],{"class":460},[358,1272,1273],{"class":1038}," template",[358,1275,1042],{"class":460},[358,1277,1094],{"class":870},[358,1279,1140],{"class":469},[358,1281,1282],{"class":1038}," request",[358,1284,1175],{"class":870},[358,1286,453],{"class":363},[358,1288,1289],{"class":460},"()\n",[358,1291,1292],{"class":360,"line":124},[358,1293,1079],{"emptyLinePlaceholder":14},[358,1295,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314],{"class":360,"line":48},[358,1297,1128],{"class":1087},[358,1299,1035],{"class":460},[358,1301,1133],{"class":1038},[358,1303,1042],{"class":460},[358,1305,1094],{"class":870},[358,1307,1140],{"class":469},[358,1309,1063],{"class":363},[358,1311,1145],{"class":460},[358,1313,871],{"class":1038},[358,1315,1316],{"class":460},")\n",[358,1318,1319],{"class":360,"line":23},[358,1320,1079],{"emptyLinePlaceholder":14},[358,1322,1323,1325,1327,1329,1331,1333,1335],{"class":360,"line":140},[358,1324,1169],{"class":469},[358,1326,1172],{"class":1038},[358,1328,1175],{"class":870},[358,1330,453],{"class":363},[358,1332,1180],{"class":460},[358,1334,1133],{"class":1038},[358,1336,1185],{"class":460},[358,1338,1339],{"class":360,"line":56},[358,1340,835],{"class":460},[377,1342,1344],{"id":1343},"nodejs-runtime","Node.js runtime",[326,1346,1347,1349],{},[330,1348,332],{}," reads files and runs Vue's SSR engine, so it must run on Node — not the Edge runtime. Force the Node runtime explicitly:",[349,1351,1353],{"className":1022,"code":1352,"filename":1024,"language":1025,"meta":354,"style":354},"export const runtime = 'nodejs'\n",[330,1354,1355],{"__ignoreMap":354},[358,1356,1357,1359,1361,1363,1365,1367,1369],{"class":360,"line":18},[358,1358,1084],{"class":469},[358,1360,1088],{"class":1087},[358,1362,1091],{"class":1038},[358,1364,1094],{"class":870},[358,1366,1048],{"class":460},[358,1368,1099],{"class":367},[358,1370,1054],{"class":460},[377,1372,1374],{"id":1373},"server-action","Server Action",[326,1376,1377],{},"The same call works inside a Server Action when you'd rather avoid an API round-trip:",[349,1379,1382],{"className":1022,"code":1380,"filename":1381,"language":1025,"meta":354,"style":354},"'use server'\n\nimport { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport async function renderWelcome() {\n  const { html } = await render(resolve('emails\u002Fwelcome.vue'))\n  return html\n}\n","app\u002Factions\u002Frender.ts",[330,1383,1384,1393,1397,1415,1433,1437,1452,1482,1489],{"__ignoreMap":354},[358,1385,1386,1388,1391],{"class":360,"line":18},[358,1387,1153],{"class":460},[358,1389,1390],{"class":367},"use server",[358,1392,1054],{"class":460},[358,1394,1395],{"class":360,"line":13},[358,1396,1079],{"emptyLinePlaceholder":14},[358,1398,1399,1401,1403,1405,1407,1409,1411,1413],{"class":360,"line":32},[358,1400,1032],{"class":469},[358,1402,1035],{"class":460},[358,1404,1039],{"class":1038},[358,1406,1042],{"class":460},[358,1408,1045],{"class":469},[358,1410,1048],{"class":460},[358,1412,1051],{"class":367},[358,1414,1054],{"class":460},[358,1416,1417,1419,1421,1423,1425,1427,1429,1431],{"class":360,"line":27},[358,1418,1032],{"class":469},[358,1420,1035],{"class":460},[358,1422,1063],{"class":1038},[358,1424,1042],{"class":460},[358,1426,1045],{"class":469},[358,1428,1048],{"class":460},[358,1430,1072],{"class":367},[358,1432,1054],{"class":460},[358,1434,1435],{"class":360,"line":52},[358,1436,1079],{"emptyLinePlaceholder":14},[358,1438,1439,1441,1443,1445,1448,1450],{"class":360,"line":128},[358,1440,1084],{"class":469},[358,1442,1112],{"class":893},[358,1444,1115],{"class":1087},[358,1446,1447],{"class":363}," renderWelcome",[358,1449,1121],{"class":460},[358,1451,479],{"class":460},[358,1453,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480],{"class":360,"line":124},[358,1455,1128],{"class":1087},[358,1457,1035],{"class":460},[358,1459,1133],{"class":1038},[358,1461,1042],{"class":460},[358,1463,1094],{"class":870},[358,1465,1140],{"class":469},[358,1467,1063],{"class":363},[358,1469,1145],{"class":460},[358,1471,1148],{"class":363},[358,1473,1145],{"class":460},[358,1475,1153],{"class":460},[358,1477,859],{"class":367},[358,1479,1153],{"class":460},[358,1481,1160],{"class":460},[358,1483,1484,1486],{"class":360,"line":48},[358,1485,1169],{"class":469},[358,1487,1488],{"class":1038}," html\n",[358,1490,1491],{"class":360,"line":23},[358,1492,835],{"class":460},[342,1494,1496],{"id":1495},"reusing-a-renderer","Reusing a renderer",[326,1498,1499,1501],{},[330,1500,332],{}," spins up a fresh Vite SSR server for every call and tears it down afterwards. That's fine for one-off scripts, but slow if you're rendering on every request.",[326,1503,1504,1505,1508],{},"For repeated renders — a dev preview, a UI that lets users edit templates, a queue worker — use ",[330,1506,1507],{},"createRenderer()"," once and reuse it:",[1510,1511,1512,1784],"code-tabs",{},[1513,1514,1516],"code-tab",{"label":1515},"lib\u002Fmaizzle.ts",[349,1517,1519],{"className":1022,"code":1518,"filename":1515,"language":1025,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { createRenderer, resolveConfig, type Renderer, type MaizzleConfig } from '@maizzle\u002Fframework'\n\nlet cached: Promise\u003C{ renderer: Renderer; config: MaizzleConfig }> | null = null\n\nexport function getRenderer() {\n  if (!cached) {\n    cached = (async () => {\n      const config = await resolveConfig()\n      const renderer = await createRenderer({ root: resolve(config.root ?? 'emails') })\n      return { renderer, config }\n    })()\n  }\n\n  return cached\n}\n",[330,1520,1521,1539,1578,1582,1629,1633,1647,1665,1684,1699,1743,1759,1764,1769,1773,1780],{"__ignoreMap":354},[358,1522,1523,1525,1527,1529,1531,1533,1535,1537],{"class":360,"line":18},[358,1524,1032],{"class":469},[358,1526,1035],{"class":460},[358,1528,1039],{"class":1038},[358,1530,1042],{"class":460},[358,1532,1045],{"class":469},[358,1534,1048],{"class":460},[358,1536,1051],{"class":367},[358,1538,1054],{"class":460},[358,1540,1541,1543,1545,1548,1550,1553,1555,1558,1561,1563,1565,1568,1570,1572,1574,1576],{"class":360,"line":13},[358,1542,1032],{"class":469},[358,1544,1035],{"class":460},[358,1546,1547],{"class":1038}," createRenderer",[358,1549,526],{"class":460},[358,1551,1552],{"class":1038}," resolveConfig",[358,1554,526],{"class":460},[358,1556,1557],{"class":469}," type",[358,1559,1560],{"class":1038}," Renderer",[358,1562,526],{"class":460},[358,1564,1557],{"class":469},[358,1566,1567],{"class":1038}," MaizzleConfig",[358,1569,1042],{"class":460},[358,1571,1045],{"class":469},[358,1573,1048],{"class":460},[358,1575,1072],{"class":367},[358,1577,1054],{"class":460},[358,1579,1580],{"class":360,"line":32},[358,1581,1079],{"emptyLinePlaceholder":14},[358,1583,1584,1587,1590,1592,1595,1598,1601,1603,1605,1608,1611,1613,1615,1618,1621,1624,1626],{"class":360,"line":27},[358,1585,1586],{"class":1087},"let",[358,1588,1589],{"class":1038}," cached",[358,1591,476],{"class":870},[358,1593,1594],{"class":870}," Promise",[358,1596,1597],{"class":460},"\u003C{",[358,1599,1600],{"class":1087}," renderer",[358,1602,476],{"class":870},[358,1604,1560],{"class":870},[358,1606,1607],{"class":460},";",[358,1609,1610],{"class":1087}," config",[358,1612,476],{"class":870},[358,1614,1567],{"class":870},[358,1616,1617],{"class":460}," }>",[358,1619,1620],{"class":870}," |",[358,1622,1623],{"class":1087}," null ",[358,1625,926],{"class":870},[358,1627,1628],{"class":559}," null\n",[358,1630,1631],{"class":360,"line":52},[358,1632,1079],{"emptyLinePlaceholder":14},[358,1634,1635,1637,1640,1643,1645],{"class":360,"line":128},[358,1636,1084],{"class":469},[358,1638,1639],{"class":1087}," function",[358,1641,1642],{"class":363}," getRenderer",[358,1644,1121],{"class":460},[358,1646,479],{"class":460},[358,1648,1649,1652,1655,1658,1661,1663],{"class":360,"line":124},[358,1650,1651],{"class":469},"  if",[358,1653,1654],{"class":460}," (",[358,1656,1657],{"class":870},"!",[358,1659,1660],{"class":1038},"cached",[358,1662,1262],{"class":460},[358,1664,479],{"class":460},[358,1666,1667,1670,1672,1674,1677,1679,1682],{"class":360,"line":48},[358,1668,1669],{"class":1038},"    cached",[358,1671,1094],{"class":870},[358,1673,1654],{"class":460},[358,1675,1676],{"class":893},"async ",[358,1678,1121],{"class":460},[358,1680,1681],{"class":870}," =>",[358,1683,479],{"class":460},[358,1685,1686,1689,1691,1693,1695,1697],{"class":360,"line":23},[358,1687,1688],{"class":1087},"      const",[358,1690,1610],{"class":1038},[358,1692,1094],{"class":870},[358,1694,1140],{"class":469},[358,1696,1552],{"class":363},[358,1698,1289],{"class":460},[358,1700,1701,1703,1705,1707,1709,1711,1713,1716,1718,1720,1722,1725,1727,1730,1733,1735,1737,1739,1741],{"class":360,"line":140},[358,1702,1688],{"class":1087},[358,1704,1600],{"class":1038},[358,1706,1094],{"class":870},[358,1708,1140],{"class":469},[358,1710,1547],{"class":363},[358,1712,1180],{"class":460},[358,1714,1715],{"class":893}," root",[358,1717,476],{"class":460},[358,1719,1039],{"class":363},[358,1721,1145],{"class":460},[358,1723,1724],{"class":1038},"config",[358,1726,1175],{"class":870},[358,1728,1729],{"class":469},"root",[358,1731,1732],{"class":870}," ??",[358,1734,1048],{"class":460},[358,1736,386],{"class":367},[358,1738,1153],{"class":460},[358,1740,1262],{"class":460},[358,1742,1185],{"class":460},[358,1744,1745,1748,1750,1752,1754,1756],{"class":360,"line":56},[358,1746,1747],{"class":469},"      return",[358,1749,1035],{"class":460},[358,1751,1600],{"class":1038},[358,1753,526],{"class":460},[358,1755,1610],{"class":1038},[358,1757,1758],{"class":460}," }\n",[358,1760,1761],{"class":360,"line":80},[358,1762,1763],{"class":460},"    })()\n",[358,1765,1766],{"class":360,"line":36},[358,1767,1768],{"class":460},"  }\n",[358,1770,1771],{"class":360,"line":73},[358,1772,1079],{"emptyLinePlaceholder":14},[358,1774,1775,1777],{"class":360,"line":132},[358,1776,1169],{"class":469},[358,1778,1779],{"class":1038}," cached\n",[358,1781,1782],{"class":360,"line":66},[358,1783,835],{"class":460},[1513,1785,1786],{"label":1024},[349,1787,1789],{"className":1022,"code":1788,"filename":1024,"language":1025,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { getRenderer } from '@\u002Flib\u002Fmaizzle'\n\nexport const runtime = 'nodejs'\n\nexport async function POST() {\n  const { renderer, config } = await getRenderer()\n  const { html } = await renderer.render(resolve('emails\u002Fwelcome.vue'), config)\n\n  return Response.json({ html })\n}\n",[330,1790,1791,1809,1828,1832,1848,1852,1866,1888,1928,1932,1948],{"__ignoreMap":354},[358,1792,1793,1795,1797,1799,1801,1803,1805,1807],{"class":360,"line":18},[358,1794,1032],{"class":469},[358,1796,1035],{"class":460},[358,1798,1039],{"class":1038},[358,1800,1042],{"class":460},[358,1802,1045],{"class":469},[358,1804,1048],{"class":460},[358,1806,1051],{"class":367},[358,1808,1054],{"class":460},[358,1810,1811,1813,1815,1817,1819,1821,1823,1826],{"class":360,"line":13},[358,1812,1032],{"class":469},[358,1814,1035],{"class":460},[358,1816,1642],{"class":1038},[358,1818,1042],{"class":460},[358,1820,1045],{"class":469},[358,1822,1048],{"class":460},[358,1824,1825],{"class":367},"@\u002Flib\u002Fmaizzle",[358,1827,1054],{"class":460},[358,1829,1830],{"class":360,"line":32},[358,1831,1079],{"emptyLinePlaceholder":14},[358,1833,1834,1836,1838,1840,1842,1844,1846],{"class":360,"line":27},[358,1835,1084],{"class":469},[358,1837,1088],{"class":1087},[358,1839,1091],{"class":1038},[358,1841,1094],{"class":870},[358,1843,1048],{"class":460},[358,1845,1099],{"class":367},[358,1847,1054],{"class":460},[358,1849,1850],{"class":360,"line":52},[358,1851,1079],{"emptyLinePlaceholder":14},[358,1853,1854,1856,1858,1860,1862,1864],{"class":360,"line":128},[358,1855,1084],{"class":469},[358,1857,1112],{"class":893},[358,1859,1115],{"class":1087},[358,1861,1118],{"class":363},[358,1863,1121],{"class":460},[358,1865,479],{"class":460},[358,1867,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886],{"class":360,"line":124},[358,1869,1128],{"class":1087},[358,1871,1035],{"class":460},[358,1873,1600],{"class":1038},[358,1875,526],{"class":460},[358,1877,1610],{"class":1038},[358,1879,1042],{"class":460},[358,1881,1094],{"class":870},[358,1883,1140],{"class":469},[358,1885,1642],{"class":363},[358,1887,1289],{"class":460},[358,1889,1890,1892,1894,1896,1898,1900,1902,1904,1906,1909,1911,1913,1915,1917,1919,1921,1924,1926],{"class":360,"line":48},[358,1891,1128],{"class":1087},[358,1893,1035],{"class":460},[358,1895,1133],{"class":1038},[358,1897,1042],{"class":460},[358,1899,1094],{"class":870},[358,1901,1140],{"class":469},[358,1903,1600],{"class":1038},[358,1905,1175],{"class":870},[358,1907,1908],{"class":363},"render",[358,1910,1145],{"class":460},[358,1912,1148],{"class":363},[358,1914,1145],{"class":460},[358,1916,1153],{"class":460},[358,1918,859],{"class":367},[358,1920,1153],{"class":460},[358,1922,1923],{"class":460},"),",[358,1925,1610],{"class":1038},[358,1927,1316],{"class":460},[358,1929,1930],{"class":360,"line":23},[358,1931,1079],{"emptyLinePlaceholder":14},[358,1933,1934,1936,1938,1940,1942,1944,1946],{"class":360,"line":140},[358,1935,1169],{"class":469},[358,1937,1172],{"class":1038},[358,1939,1175],{"class":870},[358,1941,453],{"class":363},[358,1943,1180],{"class":460},[358,1945,1133],{"class":1038},[358,1947,1185],{"class":460},[358,1949,1950],{"class":360,"line":56},[358,1951,835],{"class":460},[326,1953,1954,1957,1958,1960],{},[330,1955,1956],{},"renderer.render()"," only runs the SSR step — it skips the transformer pipeline that ",[330,1959,332],{}," runs after SSR (CSS inlining, unused-CSS purging, HTML formatting, doctype prepending). It is faster, but the HTML you get back is not the same HTML you'd send to subscribers.",[326,1962,1963],{},"A reasonable split:",[1965,1966,1967,1978],"ul",{},[1968,1969,1970,1974,1975,1977],"li",{},[1971,1972,1973],"strong",{},"Previewing in the browser"," — ",[330,1976,1507],{}," is enough. Email clients aren't viewing your iframe, so skipping inlining\u002Fpurging is fine, and reusing the renderer makes the preview snappy on every keystroke or save.",[1968,1979,1980,1983,1984,1986],{},[1971,1981,1982],{},"Sending the email"," — use ",[330,1985,332],{},". You want CSS inlined and unused styles purged before the message hits an inbox. The cold-start cost is paid once per send, not once per preview.",[326,1988,1989,1990,1996],{},"When you do need the full pipeline on top of a reusable renderer (for example, a queue worker rendering hundreds of emails), call the individual transformers yourself — see ",[1991,1992,1994],"a",{"href":1993},"\u002Fdocs\u002Fapi\u002Futilities#createrenderer",[330,1995,1507],{}," in the API reference.",[342,1998,2000],{"id":1999},"displaying-the-result","Displaying the result",[326,2002,2003,2004,476],{},"The compiled email is a full HTML document, so you may render it inside an ",[330,2005,2006],{},"\u003Ciframe>",[349,2008,2013],{"className":2009,"code":2010,"filename":2011,"language":2012,"meta":354,"style":354},"language-tsx shiki shiki-themes laserwave","'use client'\n\nimport { useEffect, useState } from 'react'\n\nexport default function PreviewPage() {\n  const [html, setHtml] = useState('')\n\n  useEffect(() => {\n    const load = () => {\n      fetch('\u002Fapi\u002Frender', { method: 'POST' })\n        .then(r => r.json())\n        .then(d => setHtml(d.html))\n    }\n\n    load()\n  }, [])\n\n  return (\n    \u003Ciframe srcDoc={html} style={{ width: '100%', height: '100vh', border: 'none' }} \u002F>\n  )\n}\n","app\u002Fpreview\u002Fpage.tsx","tsx",[330,2014,2015,2024,2028,2053,2057,2073,2100,2104,2116,2133,2165,2191,2217,2222,2226,2233,2241,2245,2252,2326,2331],{"__ignoreMap":354},[358,2016,2017,2019,2022],{"class":360,"line":18},[358,2018,1153],{"class":460},[358,2020,2021],{"class":367},"use client",[358,2023,1054],{"class":460},[358,2025,2026],{"class":360,"line":13},[358,2027,1079],{"emptyLinePlaceholder":14},[358,2029,2030,2032,2034,2037,2039,2042,2044,2046,2048,2051],{"class":360,"line":32},[358,2031,1032],{"class":469},[358,2033,1035],{"class":460},[358,2035,2036],{"class":1038}," useEffect",[358,2038,526],{"class":460},[358,2040,2041],{"class":1038}," useState",[358,2043,1042],{"class":460},[358,2045,1045],{"class":469},[358,2047,1048],{"class":460},[358,2049,2050],{"class":367},"react",[358,2052,1054],{"class":460},[358,2054,2055],{"class":360,"line":27},[358,2056,1079],{"emptyLinePlaceholder":14},[358,2058,2059,2061,2064,2066,2069,2071],{"class":360,"line":52},[358,2060,1084],{"class":469},[358,2062,2063],{"class":469}," default",[358,2065,1639],{"class":1087},[358,2067,2068],{"class":363}," PreviewPage",[358,2070,1121],{"class":460},[358,2072,479],{"class":460},[358,2074,2075,2077,2079,2082,2084,2087,2089,2091,2093,2095,2098],{"class":360,"line":128},[358,2076,1128],{"class":1087},[358,2078,516],{"class":460},[358,2080,2081],{"class":1038},"html",[358,2083,526],{"class":460},[358,2085,2086],{"class":1038}," setHtml",[358,2088,830],{"class":460},[358,2090,1094],{"class":870},[358,2092,2041],{"class":363},[358,2094,1145],{"class":460},[358,2096,2097],{"class":460},"''",[358,2099,1316],{"class":460},[358,2101,2102],{"class":360,"line":124},[358,2103,1079],{"emptyLinePlaceholder":14},[358,2105,2106,2109,2112,2114],{"class":360,"line":48},[358,2107,2108],{"class":363},"  useEffect",[358,2110,2111],{"class":460},"(()",[358,2113,1681],{"class":870},[358,2115,479],{"class":460},[358,2117,2118,2121,2124,2126,2129,2131],{"class":360,"line":23},[358,2119,2120],{"class":1087},"    const",[358,2122,2123],{"class":363}," load",[358,2125,1094],{"class":870},[358,2127,2128],{"class":460}," ()",[358,2130,1681],{"class":870},[358,2132,479],{"class":460},[358,2134,2135,2138,2140,2142,2145,2147,2149,2151,2154,2156,2158,2161,2163],{"class":360,"line":140},[358,2136,2137],{"class":363},"      fetch",[358,2139,1145],{"class":460},[358,2141,1153],{"class":460},[358,2143,2144],{"class":367},"\u002Fapi\u002Frender",[358,2146,1153],{"class":460},[358,2148,526],{"class":460},[358,2150,1035],{"class":460},[358,2152,2153],{"class":893}," method",[358,2155,476],{"class":460},[358,2157,1048],{"class":460},[358,2159,2160],{"class":367},"POST",[358,2162,1153],{"class":460},[358,2164,1185],{"class":460},[358,2166,2167,2170,2173,2175,2178,2181,2184,2186,2188],{"class":360,"line":56},[358,2168,2169],{"class":460},"        .",[358,2171,2172],{"class":363},"then",[358,2174,1145],{"class":460},[358,2176,2177],{"class":893},"r ",[358,2179,2180],{"class":870},"=>",[358,2182,2183],{"class":1038}," r",[358,2185,1175],{"class":460},[358,2187,453],{"class":363},[358,2189,2190],{"class":460},"())\n",[358,2192,2193,2195,2197,2199,2202,2204,2206,2208,2211,2213,2215],{"class":360,"line":80},[358,2194,2169],{"class":460},[358,2196,2172],{"class":363},[358,2198,1145],{"class":460},[358,2200,2201],{"class":893},"d ",[358,2203,2180],{"class":870},[358,2205,2086],{"class":363},[358,2207,1145],{"class":460},[358,2209,2210],{"class":1038},"d",[358,2212,1175],{"class":460},[358,2214,2081],{"class":469},[358,2216,1160],{"class":460},[358,2218,2219],{"class":360,"line":36},[358,2220,2221],{"class":460},"    }\n",[358,2223,2224],{"class":360,"line":73},[358,2225,1079],{"emptyLinePlaceholder":14},[358,2227,2228,2231],{"class":360,"line":132},[358,2229,2230],{"class":363},"    load",[358,2232,1289],{"class":460},[358,2234,2235,2238],{"class":360,"line":66},[358,2236,2237],{"class":460},"  },",[358,2239,2240],{"class":460}," [])\n",[358,2242,2243],{"class":360,"line":112},[358,2244,1079],{"emptyLinePlaceholder":14},[358,2246,2247,2249],{"class":360,"line":40},[358,2248,1169],{"class":469},[358,2250,2251],{"class":460}," (\n",[358,2253,2254,2256,2259,2262,2264,2267,2269,2272,2275,2277,2280,2283,2285,2287,2290,2292,2294,2297,2299,2301,2304,2306,2308,2311,2313,2315,2318,2320,2323],{"class":360,"line":44},[358,2255,888],{"class":460},[358,2257,2258],{"class":870},"iframe",[358,2260,2261],{"class":363}," srcDoc",[358,2263,926],{"class":870},[358,2265,2266],{"class":460},"{",[358,2268,2081],{"class":1038},[358,2270,2271],{"class":460},"}",[358,2273,2274],{"class":363}," style",[358,2276,926],{"class":870},[358,2278,2279],{"class":460},"{{",[358,2281,2282],{"class":893}," width",[358,2284,476],{"class":460},[358,2286,1048],{"class":460},[358,2288,2289],{"class":367},"100%",[358,2291,1153],{"class":460},[358,2293,526],{"class":460},[358,2295,2296],{"class":893}," height",[358,2298,476],{"class":460},[358,2300,1048],{"class":460},[358,2302,2303],{"class":367},"100vh",[358,2305,1153],{"class":460},[358,2307,526],{"class":460},[358,2309,2310],{"class":893}," border",[358,2312,476],{"class":460},[358,2314,1048],{"class":460},[358,2316,2317],{"class":367},"none",[358,2319,1153],{"class":460},[358,2321,2322],{"class":460}," }}",[358,2324,2325],{"class":460}," \u002F>\n",[358,2327,2328],{"class":360,"line":84},[358,2329,2330],{"class":460},"  )\n",[358,2332,2333],{"class":360,"line":96},[358,2334,835],{"class":460},[342,2336,2338],{"id":2337},"sending-emails","Sending emails",[326,2340,2341,2342,476],{},"Send the rendered HTML from a Route Handler. Example with ",[1991,2343,167],{"href":2344,"rel":2345,"target":2347},"https:\u002F\u002Fresend.com\u002F",[2346],"nofollow","_blank",[349,2349,2352],{"className":1022,"code":2350,"filename":2351,"language":1025,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport { Resend } from 'resend'\n\nexport const runtime = 'nodejs'\n\nconst resend = new Resend(process.env.RESEND_API_KEY)\n\nexport async function POST(request: Request) {\n  const { to } = await request.json()\n\n  const { html } = await render(resolve('emails\u002Fwelcome.vue'))\n\n  await resend.emails.send({\n    from: 'no-reply@example.com',\n    to,\n    subject: 'Welcome!',\n    html,\n  })\n\n  return Response.json({ success: true })\n}\n","app\u002Fapi\u002Fsend\u002Froute.ts",[330,2353,2354,2372,2390,2410,2414,2430,2434,2466,2470,2492,2515,2519,2549,2553,2572,2588,2595,2611,2618,2623,2627,2648],{"__ignoreMap":354},[358,2355,2356,2358,2360,2362,2364,2366,2368,2370],{"class":360,"line":18},[358,2357,1032],{"class":469},[358,2359,1035],{"class":460},[358,2361,1039],{"class":1038},[358,2363,1042],{"class":460},[358,2365,1045],{"class":469},[358,2367,1048],{"class":460},[358,2369,1051],{"class":367},[358,2371,1054],{"class":460},[358,2373,2374,2376,2378,2380,2382,2384,2386,2388],{"class":360,"line":13},[358,2375,1032],{"class":469},[358,2377,1035],{"class":460},[358,2379,1063],{"class":1038},[358,2381,1042],{"class":460},[358,2383,1045],{"class":469},[358,2385,1048],{"class":460},[358,2387,1072],{"class":367},[358,2389,1054],{"class":460},[358,2391,2392,2394,2396,2399,2401,2403,2405,2408],{"class":360,"line":32},[358,2393,1032],{"class":469},[358,2395,1035],{"class":460},[358,2397,2398],{"class":1038}," Resend",[358,2400,1042],{"class":460},[358,2402,1045],{"class":469},[358,2404,1048],{"class":460},[358,2406,2407],{"class":367},"resend",[358,2409,1054],{"class":460},[358,2411,2412],{"class":360,"line":27},[358,2413,1079],{"emptyLinePlaceholder":14},[358,2415,2416,2418,2420,2422,2424,2426,2428],{"class":360,"line":52},[358,2417,1084],{"class":469},[358,2419,1088],{"class":1087},[358,2421,1091],{"class":1038},[358,2423,1094],{"class":870},[358,2425,1048],{"class":460},[358,2427,1099],{"class":367},[358,2429,1054],{"class":460},[358,2431,2432],{"class":360,"line":128},[358,2433,1079],{"emptyLinePlaceholder":14},[358,2435,2436,2439,2442,2444,2447,2449,2451,2454,2456,2459,2461,2464],{"class":360,"line":124},[358,2437,2438],{"class":1087},"const",[358,2440,2441],{"class":1038}," resend",[358,2443,1094],{"class":870},[358,2445,2446],{"class":1087}," new",[358,2448,2398],{"class":363},[358,2450,1145],{"class":460},[358,2452,2453],{"class":1038},"process",[358,2455,1175],{"class":870},[358,2457,2458],{"class":1038},"env",[358,2460,1175],{"class":870},[358,2462,2463],{"class":1038},"RESEND_API_KEY",[358,2465,1316],{"class":460},[358,2467,2468],{"class":360,"line":48},[358,2469,1079],{"emptyLinePlaceholder":14},[358,2471,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490],{"class":360,"line":23},[358,2473,1084],{"class":469},[358,2475,1112],{"class":893},[358,2477,1115],{"class":1087},[358,2479,1118],{"class":363},[358,2481,1145],{"class":460},[358,2483,1254],{"class":1038},[358,2485,476],{"class":870},[358,2487,1259],{"class":870},[358,2489,1262],{"class":460},[358,2491,479],{"class":460},[358,2493,2494,2496,2498,2501,2503,2505,2507,2509,2511,2513],{"class":360,"line":140},[358,2495,1128],{"class":1087},[358,2497,1035],{"class":460},[358,2499,2500],{"class":1038}," to",[358,2502,1042],{"class":460},[358,2504,1094],{"class":870},[358,2506,1140],{"class":469},[358,2508,1282],{"class":1038},[358,2510,1175],{"class":870},[358,2512,453],{"class":363},[358,2514,1289],{"class":460},[358,2516,2517],{"class":360,"line":56},[358,2518,1079],{"emptyLinePlaceholder":14},[358,2520,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547],{"class":360,"line":80},[358,2522,1128],{"class":1087},[358,2524,1035],{"class":460},[358,2526,1133],{"class":1038},[358,2528,1042],{"class":460},[358,2530,1094],{"class":870},[358,2532,1140],{"class":469},[358,2534,1063],{"class":363},[358,2536,1145],{"class":460},[358,2538,1148],{"class":363},[358,2540,1145],{"class":460},[358,2542,1153],{"class":460},[358,2544,859],{"class":367},[358,2546,1153],{"class":460},[358,2548,1160],{"class":460},[358,2550,2551],{"class":360,"line":36},[358,2552,1079],{"emptyLinePlaceholder":14},[358,2554,2555,2558,2560,2562,2564,2566,2569],{"class":360,"line":73},[358,2556,2557],{"class":469},"  await",[358,2559,2441],{"class":1038},[358,2561,1175],{"class":870},[358,2563,386],{"class":1038},[358,2565,1175],{"class":870},[358,2567,2568],{"class":363},"send",[358,2570,2571],{"class":460},"({\n",[358,2573,2574,2577,2579,2581,2584,2586],{"class":360,"line":132},[358,2575,2576],{"class":893},"    from",[358,2578,476],{"class":460},[358,2580,1048],{"class":460},[358,2582,2583],{"class":367},"no-reply@example.com",[358,2585,1153],{"class":460},[358,2587,502],{"class":460},[358,2589,2590,2593],{"class":360,"line":66},[358,2591,2592],{"class":1038},"    to",[358,2594,502],{"class":460},[358,2596,2597,2600,2602,2604,2607,2609],{"class":360,"line":112},[358,2598,2599],{"class":893},"    subject",[358,2601,476],{"class":460},[358,2603,1048],{"class":460},[358,2605,2606],{"class":367},"Welcome!",[358,2608,1153],{"class":460},[358,2610,502],{"class":460},[358,2612,2613,2616],{"class":360,"line":40},[358,2614,2615],{"class":1038},"    html",[358,2617,502],{"class":460},[358,2619,2620],{"class":360,"line":44},[358,2621,2622],{"class":460},"  })\n",[358,2624,2625],{"class":360,"line":84},[358,2626,1079],{"emptyLinePlaceholder":14},[358,2628,2629,2631,2633,2635,2637,2639,2642,2644,2646],{"class":360,"line":96},[358,2630,1169],{"class":469},[358,2632,1172],{"class":1038},[358,2634,1175],{"class":870},[358,2636,453],{"class":363},[358,2638,1180],{"class":460},[358,2640,2641],{"class":893}," success",[358,2643,476],{"class":460},[358,2645,560],{"class":559},[358,2647,1185],{"class":460},[358,2649,2650],{"class":360,"line":88},[358,2651,835],{"class":460},[326,2653,2654,2655,2659],{},"Or via ",[1991,2656,161],{"href":2657,"rel":2658,"target":2347},"https:\u002F\u002Fnodemailer.com\u002F",[2346]," over SMTP:",[349,2661,2663],{"className":1022,"code":2662,"filename":2351,"language":1025,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport { createTransport } from 'nodemailer'\n\nexport const runtime = 'nodejs'\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: Request) {\n  const { to } = await request.json()\n\n  const { html } = await render(resolve('emails\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",[330,2664,2665,2683,2701,2721,2725,2741,2745,2758,2774,2787,2796,2817,2837,2841,2846,2850,2872,2894,2898,2928,2932,2945,2959,2965,2979,2986,2990,2994,3014],{"__ignoreMap":354},[358,2666,2667,2669,2671,2673,2675,2677,2679,2681],{"class":360,"line":18},[358,2668,1032],{"class":469},[358,2670,1035],{"class":460},[358,2672,1039],{"class":1038},[358,2674,1042],{"class":460},[358,2676,1045],{"class":469},[358,2678,1048],{"class":460},[358,2680,1051],{"class":367},[358,2682,1054],{"class":460},[358,2684,2685,2687,2689,2691,2693,2695,2697,2699],{"class":360,"line":13},[358,2686,1032],{"class":469},[358,2688,1035],{"class":460},[358,2690,1063],{"class":1038},[358,2692,1042],{"class":460},[358,2694,1045],{"class":469},[358,2696,1048],{"class":460},[358,2698,1072],{"class":367},[358,2700,1054],{"class":460},[358,2702,2703,2705,2707,2710,2712,2714,2716,2719],{"class":360,"line":32},[358,2704,1032],{"class":469},[358,2706,1035],{"class":460},[358,2708,2709],{"class":1038}," createTransport",[358,2711,1042],{"class":460},[358,2713,1045],{"class":469},[358,2715,1048],{"class":460},[358,2717,2718],{"class":367},"nodemailer",[358,2720,1054],{"class":460},[358,2722,2723],{"class":360,"line":27},[358,2724,1079],{"emptyLinePlaceholder":14},[358,2726,2727,2729,2731,2733,2735,2737,2739],{"class":360,"line":52},[358,2728,1084],{"class":469},[358,2730,1088],{"class":1087},[358,2732,1091],{"class":1038},[358,2734,1094],{"class":870},[358,2736,1048],{"class":460},[358,2738,1099],{"class":367},[358,2740,1054],{"class":460},[358,2742,2743],{"class":360,"line":128},[358,2744,1079],{"emptyLinePlaceholder":14},[358,2746,2747,2749,2752,2754,2756],{"class":360,"line":124},[358,2748,2438],{"class":1087},[358,2750,2751],{"class":1038}," transporter",[358,2753,1094],{"class":870},[358,2755,2709],{"class":363},[358,2757,2571],{"class":460},[358,2759,2760,2763,2765,2767,2770,2772],{"class":360,"line":48},[358,2761,2762],{"class":893},"  host",[358,2764,476],{"class":460},[358,2766,1048],{"class":460},[358,2768,2769],{"class":367},"smtp.example.com",[358,2771,1153],{"class":460},[358,2773,502],{"class":460},[358,2775,2776,2779,2781,2785],{"class":360,"line":23},[358,2777,2778],{"class":893},"  port",[358,2780,476],{"class":460},[358,2782,2784],{"class":2783},"s0EtI"," 587",[358,2786,502],{"class":460},[358,2788,2789,2792,2794],{"class":360,"line":140},[358,2790,2791],{"class":893},"  auth",[358,2793,476],{"class":460},[358,2795,479],{"class":460},[358,2797,2798,2801,2803,2806,2808,2810,2812,2815],{"class":360,"line":56},[358,2799,2800],{"class":893},"    user",[358,2802,476],{"class":460},[358,2804,2805],{"class":1038}," process",[358,2807,1175],{"class":870},[358,2809,2458],{"class":1038},[358,2811,1175],{"class":870},[358,2813,2814],{"class":1038},"SMTP_USER",[358,2816,502],{"class":460},[358,2818,2819,2822,2824,2826,2828,2830,2832,2835],{"class":360,"line":80},[358,2820,2821],{"class":893},"    pass",[358,2823,476],{"class":460},[358,2825,2805],{"class":1038},[358,2827,1175],{"class":870},[358,2829,2458],{"class":1038},[358,2831,1175],{"class":870},[358,2833,2834],{"class":1038},"SMTP_PASS",[358,2836,502],{"class":460},[358,2838,2839],{"class":360,"line":36},[358,2840,746],{"class":460},[358,2842,2843],{"class":360,"line":73},[358,2844,2845],{"class":460},"})\n",[358,2847,2848],{"class":360,"line":132},[358,2849,1079],{"emptyLinePlaceholder":14},[358,2851,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870],{"class":360,"line":66},[358,2853,1084],{"class":469},[358,2855,1112],{"class":893},[358,2857,1115],{"class":1087},[358,2859,1118],{"class":363},[358,2861,1145],{"class":460},[358,2863,1254],{"class":1038},[358,2865,476],{"class":870},[358,2867,1259],{"class":870},[358,2869,1262],{"class":460},[358,2871,479],{"class":460},[358,2873,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892],{"class":360,"line":112},[358,2875,1128],{"class":1087},[358,2877,1035],{"class":460},[358,2879,2500],{"class":1038},[358,2881,1042],{"class":460},[358,2883,1094],{"class":870},[358,2885,1140],{"class":469},[358,2887,1282],{"class":1038},[358,2889,1175],{"class":870},[358,2891,453],{"class":363},[358,2893,1289],{"class":460},[358,2895,2896],{"class":360,"line":40},[358,2897,1079],{"emptyLinePlaceholder":14},[358,2899,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926],{"class":360,"line":44},[358,2901,1128],{"class":1087},[358,2903,1035],{"class":460},[358,2905,1133],{"class":1038},[358,2907,1042],{"class":460},[358,2909,1094],{"class":870},[358,2911,1140],{"class":469},[358,2913,1063],{"class":363},[358,2915,1145],{"class":460},[358,2917,1148],{"class":363},[358,2919,1145],{"class":460},[358,2921,1153],{"class":460},[358,2923,859],{"class":367},[358,2925,1153],{"class":460},[358,2927,1160],{"class":460},[358,2929,2930],{"class":360,"line":84},[358,2931,1079],{"emptyLinePlaceholder":14},[358,2933,2934,2936,2938,2940,2943],{"class":360,"line":96},[358,2935,2557],{"class":469},[358,2937,2751],{"class":1038},[358,2939,1175],{"class":870},[358,2941,2942],{"class":363},"sendMail",[358,2944,2571],{"class":460},[358,2946,2947,2949,2951,2953,2955,2957],{"class":360,"line":88},[358,2948,2576],{"class":893},[358,2950,476],{"class":460},[358,2952,1048],{"class":460},[358,2954,2583],{"class":367},[358,2956,1153],{"class":460},[358,2958,502],{"class":460},[358,2960,2961,2963],{"class":360,"line":100},[358,2962,2592],{"class":1038},[358,2964,502],{"class":460},[358,2966,2967,2969,2971,2973,2975,2977],{"class":360,"line":144},[358,2968,2599],{"class":893},[358,2970,476],{"class":460},[358,2972,1048],{"class":460},[358,2974,2606],{"class":367},[358,2976,1153],{"class":460},[358,2978,502],{"class":460},[358,2980,2982,2984],{"class":360,"line":2981},25,[358,2983,2615],{"class":1038},[358,2985,502],{"class":460},[358,2987,2988],{"class":360,"line":92},[358,2989,2622],{"class":460},[358,2991,2992],{"class":360,"line":148},[358,2993,1079],{"emptyLinePlaceholder":14},[358,2995,2996,2998,3000,3002,3004,3006,3008,3010,3012],{"class":360,"line":120},[358,2997,1169],{"class":469},[358,2999,1172],{"class":1038},[358,3001,1175],{"class":870},[358,3003,453],{"class":363},[358,3005,1180],{"class":460},[358,3007,2641],{"class":893},[358,3009,476],{"class":460},[358,3011,560],{"class":559},[358,3013,1185],{"class":460},[358,3015,3016],{"class":360,"line":136},[358,3017,835],{"class":460},[342,3019,3021],{"id":3020},"standalone-preview-ui","Standalone preview UI",[326,3023,3024,3025,3027],{},"Next.js doesn't run Vite, so you don't get the in-app Maizzle preview UI you'd get in Laravel or Nuxt. To use the full preview UI while authoring templates, start the Maizzle dev server from the ",[330,3026,845],{}," directory:",[349,3029,3032],{"className":351,"code":3030,"filename":3031,"language":353,"meta":354,"style":354},"npx maizzle dev\n","nextjs-app\u002Femails",[330,3033,3034],{"__ignoreMap":354},[358,3035,3036,3039,3042],{"class":360,"line":18},[358,3037,3038],{"class":363},"npx",[358,3040,3041],{"class":367}," maizzle",[358,3043,3044],{"class":367}," dev\n",[335,3046,3047],{"type":337},[326,3048,3049,3050,1175],{},"This starts the Maizzle dev server with live preview and HMR on its own port, so it can run alongside ",[330,3051,3052],{},"next dev",[342,3054,3056],{"id":3055},"pages-router","Pages Router",[326,3058,3059,3060,3063],{},"The same patterns work in the Pages Router — use an API route under ",[330,3061,3062],{},"pages\u002Fapi\u002F"," instead of a Route Handler:",[349,3065,3068],{"className":1022,"code":3066,"filename":3067,"language":1025,"meta":354,"style":354},"import type { NextApiRequest, NextApiResponse } from 'next'\nimport { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n  const { html } = await render(resolve('emails\u002Fwelcome.vue'))\n  res.status(200).json({ html })\n}\n","pages\u002Fapi\u002Frender.ts",[330,3069,3070,3097,3115,3133,3137,3172,3202,3229],{"__ignoreMap":354},[358,3071,3072,3074,3076,3078,3081,3083,3086,3088,3090,3092,3095],{"class":360,"line":18},[358,3073,1032],{"class":469},[358,3075,1557],{"class":469},[358,3077,1035],{"class":460},[358,3079,3080],{"class":1038}," NextApiRequest",[358,3082,526],{"class":460},[358,3084,3085],{"class":1038}," NextApiResponse",[358,3087,1042],{"class":460},[358,3089,1045],{"class":469},[358,3091,1048],{"class":460},[358,3093,3094],{"class":367},"next",[358,3096,1054],{"class":460},[358,3098,3099,3101,3103,3105,3107,3109,3111,3113],{"class":360,"line":13},[358,3100,1032],{"class":469},[358,3102,1035],{"class":460},[358,3104,1039],{"class":1038},[358,3106,1042],{"class":460},[358,3108,1045],{"class":469},[358,3110,1048],{"class":460},[358,3112,1051],{"class":367},[358,3114,1054],{"class":460},[358,3116,3117,3119,3121,3123,3125,3127,3129,3131],{"class":360,"line":32},[358,3118,1032],{"class":469},[358,3120,1035],{"class":460},[358,3122,1063],{"class":1038},[358,3124,1042],{"class":460},[358,3126,1045],{"class":469},[358,3128,1048],{"class":460},[358,3130,1072],{"class":367},[358,3132,1054],{"class":460},[358,3134,3135],{"class":360,"line":27},[358,3136,1079],{"emptyLinePlaceholder":14},[358,3138,3139,3141,3143,3145,3147,3150,3152,3155,3157,3159,3161,3164,3166,3168,3170],{"class":360,"line":52},[358,3140,1084],{"class":469},[358,3142,2063],{"class":469},[358,3144,1112],{"class":893},[358,3146,1115],{"class":1087},[358,3148,3149],{"class":363}," handler",[358,3151,1145],{"class":460},[358,3153,3154],{"class":1038},"req",[358,3156,476],{"class":870},[358,3158,3080],{"class":870},[358,3160,526],{"class":460},[358,3162,3163],{"class":1038}," res",[358,3165,476],{"class":870},[358,3167,3085],{"class":870},[358,3169,1262],{"class":460},[358,3171,479],{"class":460},[358,3173,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200],{"class":360,"line":128},[358,3175,1128],{"class":1087},[358,3177,1035],{"class":460},[358,3179,1133],{"class":1038},[358,3181,1042],{"class":460},[358,3183,1094],{"class":870},[358,3185,1140],{"class":469},[358,3187,1063],{"class":363},[358,3189,1145],{"class":460},[358,3191,1148],{"class":363},[358,3193,1145],{"class":460},[358,3195,1153],{"class":460},[358,3197,859],{"class":367},[358,3199,1153],{"class":460},[358,3201,1160],{"class":460},[358,3203,3204,3207,3209,3212,3214,3217,3219,3221,3223,3225,3227],{"class":360,"line":124},[358,3205,3206],{"class":1038},"  res",[358,3208,1175],{"class":870},[358,3210,3211],{"class":363},"status",[358,3213,1145],{"class":460},[358,3215,3216],{"class":2783},"200",[358,3218,1262],{"class":460},[358,3220,1175],{"class":870},[358,3222,453],{"class":363},[358,3224,1180],{"class":460},[358,3226,1133],{"class":1038},[358,3228,1185],{"class":460},[358,3230,3231],{"class":360,"line":48},[358,3232,835],{"class":460},[342,3234,3236],{"id":3235},"other-frameworks","Other frameworks",[326,3238,3239],{},"Not using Next.js? Check out the other framework guides:",[3241,3242],"framework-guides",{":exclude":324},[3244,3245,3246],"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 .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}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 .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}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":354,"searchDepth":13,"depth":13,"links":3248},[3249,3250,3254,3255,3259,3260,3261,3262,3263,3264],{"id":344,"depth":13,"text":227},{"id":374,"depth":13,"text":375,"children":3251},[3252,3253],{"id":379,"depth":32,"text":380},{"id":432,"depth":32,"text":433},{"id":838,"depth":13,"text":839},{"id":1013,"depth":13,"text":1014,"children":3256},[3257,3258],{"id":1343,"depth":32,"text":1344},{"id":1373,"depth":32,"text":1374},{"id":1495,"depth":13,"text":1496},{"id":1999,"depth":13,"text":2000},{"id":2337,"depth":13,"text":2338},{"id":3020,"depth":13,"text":3021},{"id":3055,"depth":13,"text":3056},{"id":3235,"depth":13,"text":3236},"How to use Maizzle with Next.js to render email templates from Route Handlers and Server Actions.","md",{},{"title":209,"description":3265},"docs\u002Finstallation\u002Fframeworks\u002Fnextjs","ctwgu9Z9HHEwH8-Z2LvWk9iuBYsznM30N3gqh7-cxl0",1781015483599]