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