[{"data":1,"prerenderedAt":1130},["ShallowReactive",2],{"/guides/amp-email":3,"surround":1121},{"id":4,"title":5,"body":6,"date":1112,"description":1113,"extension":1114,"meta":1115,"navigation":455,"path":1116,"seo":1117,"sitemap":1118,"stem":1119,"__hash__":1120},"guides/guides/amp-email.md","How to create an AMP for Email template",{"type":7,"value":8,"toc":1104},"minimark",[9,13,19,22,39,47,52,55,78,85,88,91,95,106,352,356,365,372,743,760,766,770,773,776,828,831,865,869,875,878,907,915,922,973,985,1020,1027,1038,1075,1081,1085,1101],[10,11,5],"h1",{"id":12},"how-to-create-an-amp-for-email-template",[14,15,18],"p",{"className":16},[17],"text-sm","Last updated: March 18, 2023",[14,20,21],{},"In this tutorial, you'll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates.",[14,23,24,25,32,33,38],{},"For a syntax refresher, checkout the ",[26,27,31],"a",{"href":28,"rel":29},"https://amp.dev/documentation/guides-and-tutorials/start/create_email/?format=email",[30],"nofollow","AMP Email docs"," or ",[26,34,37],{"href":35,"rel":36},"https://amp.dev/documentation/examples/?format=email",[30],"AMP Email examples",".",[14,40,41,42,38],{},"Want to dive right in? Checkout our ",[26,43,46],{"href":44,"rel":45},"https://github.com/maizzle/starter-amp4email",[30],"AMP for Email Starter",[48,49,51],"h2",{"id":50},"initial-setup","Initial setup",[14,53,54],{},"As always, let's scaffold a new project:",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[63,64,65],"code",{"__ignoreMap":61},[66,67,70,74],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"sizJ4","npx",[66,75,77],{"class":76},"sfCc6"," create-maizzle\n",[14,79,80,81,84],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[63,82,83],{},"./amp-emails",", and select the Default Starter.",[14,86,87],{},"Choose Yes when prompted to Install dependencies.",[14,89,90],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[48,92,94],{"id":93},"layout","Layout",[14,96,97,98,101,102,105],{},"AMP for Email requires some special markup, so let's create an ",[63,99,100],{},"amp.html"," Layout and save it under ",[63,103,104],{},"layouts",":",[56,107,112],{"className":108,"code":109,"filename":110,"language":111,"meta":61,"style":61},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003C!doctype html>\n\u003Chtml ⚡4email>\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cscript async src=\"https://cdn.ampproject.org/v0.js\">\u003C/script>\n  \u003Cstyle amp4email-boilerplate>body{visibility:hidden}\u003C/style>\n  \u003Cstyle amp-custom>{{{ page.css }}}\u003C/style>\n  \u003Cstack name=\"head\" />\n\u003C/head>\n\u003Cbody>\n  \u003Cyield />\n\u003C/body>\n\u003C/html>\n","layouts/amp.html","html",[63,113,114,130,143,153,178,205,247,284,306,315,324,334,343],{"__ignoreMap":61},[66,115,116,120,123,127],{"class":68,"line":69},[66,117,119],{"class":118},"soJEP","\u003C!",[66,121,122],{"class":72},"doctype",[66,124,126],{"class":125},"sQMLp"," html",[66,128,129],{"class":118},">\n",[66,131,133,136,138,141],{"class":68,"line":132},2,[66,134,135],{"class":118},"\u003C",[66,137,111],{"class":72},[66,139,140],{"class":125}," ⚡4email",[66,142,129],{"class":118},[66,144,146,148,151],{"class":68,"line":145},3,[66,147,135],{"class":118},[66,149,150],{"class":72},"head",[66,152,129],{"class":118},[66,154,156,159,162,165,168,171,174,176],{"class":68,"line":155},4,[66,157,158],{"class":118},"  \u003C",[66,160,161],{"class":72},"meta",[66,163,164],{"class":125}," charset",[66,166,167],{"class":118},"=",[66,169,170],{"class":125},"\"",[66,172,173],{"class":76},"utf-8",[66,175,170],{"class":125},[66,177,129],{"class":118},[66,179,181,183,186,189,191,193,196,198,201,203],{"class":68,"line":180},5,[66,182,158],{"class":118},[66,184,185],{"class":72},"script",[66,187,188],{"class":125}," async src",[66,190,167],{"class":118},[66,192,170],{"class":125},[66,194,195],{"class":76},"https://cdn.ampproject.org/v0.js",[66,197,170],{"class":125},[66,199,200],{"class":118},">\u003C/",[66,202,185],{"class":72},[66,204,129],{"class":118},[66,206,208,210,213,216,219,222,226,230,233,237,240,243,245],{"class":68,"line":207},6,[66,209,158],{"class":118},[66,211,212],{"class":72},"style",[66,214,215],{"class":125}," amp4email-boilerplate",[66,217,218],{"class":118},">",[66,220,221],{"class":72},"body",[66,223,225],{"class":224},"shy1k","{",[66,227,229],{"class":228},"sO1gY","visibility",[66,231,105],{"class":232},"sO3Gh",[66,234,236],{"class":235},"snKqK","hidden",[66,238,239],{"class":224},"}",[66,241,242],{"class":118},"\u003C/",[66,244,212],{"class":72},[66,246,129],{"class":118},[66,248,250,252,254,257,259,261,264,267,269,272,275,278,280,282],{"class":68,"line":249},7,[66,251,158],{"class":118},[66,253,212],{"class":72},[66,255,256],{"class":125}," amp-custom",[66,258,218],{"class":118},[66,260,225],{"class":224},[66,262,263],{"class":232},"{{ ",[66,265,266],{"class":228},"page",[66,268,38],{"class":232},[66,270,271],{"class":228},"css",[66,273,274],{"class":224}," }",[66,276,277],{"class":76},"}}",[66,279,242],{"class":118},[66,281,212],{"class":72},[66,283,129],{"class":118},[66,285,287,289,292,295,297,299,301,303],{"class":68,"line":286},8,[66,288,158],{"class":118},[66,290,291],{"class":72},"stack",[66,293,294],{"class":125}," name",[66,296,167],{"class":118},[66,298,170],{"class":125},[66,300,150],{"class":76},[66,302,170],{"class":125},[66,304,305],{"class":118}," />\n",[66,307,309,311,313],{"class":68,"line":308},9,[66,310,242],{"class":118},[66,312,150],{"class":72},[66,314,129],{"class":118},[66,316,318,320,322],{"class":68,"line":317},10,[66,319,135],{"class":118},[66,321,221],{"class":72},[66,323,129],{"class":118},[66,325,327,329,332],{"class":68,"line":326},11,[66,328,158],{"class":118},[66,330,331],{"class":72},"yield",[66,333,305],{"class":118},[66,335,337,339,341],{"class":68,"line":336},12,[66,338,242],{"class":118},[66,340,221],{"class":72},[66,342,129],{"class":118},[66,344,346,348,350],{"class":68,"line":345},13,[66,347,242],{"class":118},[66,349,111],{"class":72},[66,351,129],{"class":118},[48,353,355],{"id":354},"template","Template",[14,357,358,359,364],{},"For this tutorial, we'll use the ",[26,360,363],{"href":361,"rel":362},"https://amp.dev/documentation/components/amp-carousel/?format=email",[30],"AMP Carousel"," component.",[14,366,367,368,371],{},"Create ",[63,369,370],{},"emails/amp/carousel.html"," and add a basic AMP carousel:",[56,373,375],{"className":108,"code":374,"filename":370,"language":111,"meta":61,"style":61},"\u003Cx-amp>\n  \u003Cpush name=\"head\">\n    \u003Cscript async custom-element=\"amp-carousel\" src=\"https://cdn.ampproject.org/v0/amp-carousel-0.2.js\">\u003C/script>\n  \u003C/push>\n\n  \u003Cdiv class=\"p-4\">\n    \u003Cdiv class=\"max-w-full\">\n      \u003Camp-carousel width=\"600\" height=\"400\" layout=\"responsive\" type=\"slides\">\n        \u003Camp-img src=\"https://ampbyexample.com/img/image1.jpg\" width=\"600\" height=\"400\" alt=\"a sample image\" />\n        \u003Camp-img src=\"https://ampbyexample.com/img/image2.jpg\" width=\"600\" height=\"400\" alt=\"another sample image\" />\n        \u003Camp-img src=\"https://ampbyexample.com/img/image3.jpg\" width=\"600\" height=\"400\" alt=\"and another sample image\" />\n      \u003C/amp-carousel>\n    \u003C/div>\n  \u003C/div>\n\u003C/x-amp>\n",[63,376,377,386,405,442,451,457,478,497,554,607,657,707,716,725,734],{"__ignoreMap":61},[66,378,379,381,384],{"class":68,"line":69},[66,380,135],{"class":118},[66,382,383],{"class":72},"x-amp",[66,385,129],{"class":118},[66,387,388,390,393,395,397,399,401,403],{"class":68,"line":132},[66,389,158],{"class":118},[66,391,392],{"class":72},"push",[66,394,294],{"class":125},[66,396,167],{"class":118},[66,398,170],{"class":125},[66,400,150],{"class":76},[66,402,170],{"class":125},[66,404,129],{"class":118},[66,406,407,410,412,415,417,419,422,424,427,429,431,434,436,438,440],{"class":68,"line":145},[66,408,409],{"class":118},"    \u003C",[66,411,185],{"class":72},[66,413,414],{"class":125}," async custom-element",[66,416,167],{"class":118},[66,418,170],{"class":125},[66,420,421],{"class":76},"amp-carousel",[66,423,170],{"class":125},[66,425,426],{"class":125}," src",[66,428,167],{"class":118},[66,430,170],{"class":125},[66,432,433],{"class":76},"https://cdn.ampproject.org/v0/amp-carousel-0.2.js",[66,435,170],{"class":125},[66,437,200],{"class":118},[66,439,185],{"class":72},[66,441,129],{"class":118},[66,443,444,447,449],{"class":68,"line":155},[66,445,446],{"class":118},"  \u003C/",[66,448,392],{"class":72},[66,450,129],{"class":118},[66,452,453],{"class":68,"line":180},[66,454,456],{"emptyLinePlaceholder":455},true,"\n",[66,458,459,461,464,467,469,471,474,476],{"class":68,"line":207},[66,460,158],{"class":118},[66,462,463],{"class":72},"div",[66,465,466],{"class":125}," class",[66,468,167],{"class":118},[66,470,170],{"class":125},[66,472,473],{"class":76},"p-4",[66,475,170],{"class":125},[66,477,129],{"class":118},[66,479,480,482,484,486,488,490,493,495],{"class":68,"line":249},[66,481,409],{"class":118},[66,483,463],{"class":72},[66,485,466],{"class":125},[66,487,167],{"class":118},[66,489,170],{"class":125},[66,491,492],{"class":76},"max-w-full",[66,494,170],{"class":125},[66,496,129],{"class":118},[66,498,499,502,504,507,509,511,514,516,519,521,523,526,528,531,533,535,538,540,543,545,547,550,552],{"class":68,"line":286},[66,500,501],{"class":118},"      \u003C",[66,503,421],{"class":72},[66,505,506],{"class":125}," width",[66,508,167],{"class":118},[66,510,170],{"class":125},[66,512,513],{"class":76},"600",[66,515,170],{"class":125},[66,517,518],{"class":125}," height",[66,520,167],{"class":118},[66,522,170],{"class":125},[66,524,525],{"class":76},"400",[66,527,170],{"class":125},[66,529,530],{"class":125}," layout",[66,532,167],{"class":118},[66,534,170],{"class":125},[66,536,537],{"class":76},"responsive",[66,539,170],{"class":125},[66,541,542],{"class":125}," type",[66,544,167],{"class":118},[66,546,170],{"class":125},[66,548,549],{"class":76},"slides",[66,551,170],{"class":125},[66,553,129],{"class":118},[66,555,556,559,562,564,566,568,571,573,575,577,579,581,583,585,587,589,591,593,596,598,600,603,605],{"class":68,"line":308},[66,557,558],{"class":118},"        \u003C",[66,560,561],{"class":72},"amp-img",[66,563,426],{"class":125},[66,565,167],{"class":118},[66,567,170],{"class":125},[66,569,570],{"class":76},"https://ampbyexample.com/img/image1.jpg",[66,572,170],{"class":125},[66,574,506],{"class":125},[66,576,167],{"class":118},[66,578,170],{"class":125},[66,580,513],{"class":76},[66,582,170],{"class":125},[66,584,518],{"class":125},[66,586,167],{"class":118},[66,588,170],{"class":125},[66,590,525],{"class":76},[66,592,170],{"class":125},[66,594,595],{"class":125}," alt",[66,597,167],{"class":118},[66,599,170],{"class":125},[66,601,602],{"class":76},"a sample image",[66,604,170],{"class":125},[66,606,305],{"class":118},[66,608,609,611,613,615,617,619,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,653,655],{"class":68,"line":317},[66,610,558],{"class":118},[66,612,561],{"class":72},[66,614,426],{"class":125},[66,616,167],{"class":118},[66,618,170],{"class":125},[66,620,621],{"class":76},"https://ampbyexample.com/img/image2.jpg",[66,623,170],{"class":125},[66,625,506],{"class":125},[66,627,167],{"class":118},[66,629,170],{"class":125},[66,631,513],{"class":76},[66,633,170],{"class":125},[66,635,518],{"class":125},[66,637,167],{"class":118},[66,639,170],{"class":125},[66,641,525],{"class":76},[66,643,170],{"class":125},[66,645,595],{"class":125},[66,647,167],{"class":118},[66,649,170],{"class":125},[66,651,652],{"class":76},"another sample image",[66,654,170],{"class":125},[66,656,305],{"class":118},[66,658,659,661,663,665,667,669,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,703,705],{"class":68,"line":326},[66,660,558],{"class":118},[66,662,561],{"class":72},[66,664,426],{"class":125},[66,666,167],{"class":118},[66,668,170],{"class":125},[66,670,671],{"class":76},"https://ampbyexample.com/img/image3.jpg",[66,673,170],{"class":125},[66,675,506],{"class":125},[66,677,167],{"class":118},[66,679,170],{"class":125},[66,681,513],{"class":76},[66,683,170],{"class":125},[66,685,518],{"class":125},[66,687,167],{"class":118},[66,689,170],{"class":125},[66,691,525],{"class":76},[66,693,170],{"class":125},[66,695,595],{"class":125},[66,697,167],{"class":118},[66,699,170],{"class":125},[66,701,702],{"class":76},"and another sample image",[66,704,170],{"class":125},[66,706,305],{"class":118},[66,708,709,712,714],{"class":68,"line":336},[66,710,711],{"class":118},"      \u003C/",[66,713,421],{"class":72},[66,715,129],{"class":118},[66,717,718,721,723],{"class":68,"line":345},[66,719,720],{"class":118},"    \u003C/",[66,722,463],{"class":72},[66,724,129],{"class":118},[66,726,728,730,732],{"class":68,"line":727},14,[66,729,446],{"class":118},[66,731,463],{"class":72},[66,733,129],{"class":118},[66,735,737,739,741],{"class":68,"line":736},15,[66,738,242],{"class":118},[66,740,383],{"class":72},[66,742,129],{"class":118},[14,744,745,746,751,752,755,756,759],{},"You initialize ",[26,747,750],{"href":748,"rel":749},"https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-components/?format=email",[30],"AMP components"," by pushing their ",[63,753,754],{},"\u003Cscript>"," tag to the ",[63,757,758],{},"\u003Cstack name=\"head\" />"," from the layout, as shown above.",[14,761,762,763,38],{},"You can then use the component's markup inside ",[63,764,765],{},"\u003Cfill:template>\u003C/fill:template>",[48,767,769],{"id":768},"css-inlining","CSS inlining",[14,771,772],{},"Inline style attributes are not allowed in AMP, so you need to disable CSS inlining.",[14,774,775],{},"Do it either globally, in your environment config:",[56,777,782],{"className":778,"code":779,"filename":780,"language":781,"meta":61,"style":61},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  css: {\n    inline: false,\n  }\n}\n","config.js","js",[63,783,784,796,805,818,823],{"__ignoreMap":61},[66,785,786,789,792],{"class":68,"line":69},[66,787,788],{"class":72},"export",[66,790,791],{"class":72}," default",[66,793,795],{"class":794},"sprQ5"," {\n",[66,797,798,801,803],{"class":68,"line":132},[66,799,800],{"class":76},"  css",[66,802,105],{"class":794},[66,804,795],{"class":794},[66,806,807,810,812,815],{"class":68,"line":145},[66,808,809],{"class":76},"    inline",[66,811,105],{"class":794},[66,813,814],{"class":72}," false",[66,816,817],{"class":794},",\n",[66,819,820],{"class":68,"line":155},[66,821,822],{"class":794},"  }\n",[66,824,825],{"class":68,"line":180},[66,826,827],{"class":794},"}\n",[14,829,830],{},"... or locally, in the Template's Front Matter:",[56,832,836],{"className":833,"code":834,"filename":370,"language":835,"meta":61,"style":61},"language-yaml shiki shiki-themes tailwind-css tailwind-css","---\ncss:\n  inline: false\n---\n","yaml",[63,837,838,844,851,861],{"__ignoreMap":61},[66,839,840],{"class":68,"line":69},[66,841,843],{"class":842},"s1Ehh","---\n",[66,845,846,848],{"class":68,"line":132},[66,847,271],{"class":72},[66,849,850],{"class":794},":\n",[66,852,853,856,858],{"class":68,"line":145},[66,854,855],{"class":72},"  inline",[66,857,105],{"class":794},[66,859,860],{"class":72}," false\n",[66,862,863],{"class":68,"line":155},[66,864,843],{"class":842},[48,866,868],{"id":867},"important","!important",[14,870,871,872,874],{},"AMP for Email doesn't support ",[63,873,868],{}," in CSS, either.",[14,876,877],{},"This can be easily turned off in your Tailwind config:",[56,879,882],{"className":778,"code":880,"filename":881,"language":781,"meta":61,"style":61},"export default {\n  important: false,\n}\n","tailwind.config.js",[63,883,884,892,903],{"__ignoreMap":61},[66,885,886,888,890],{"class":68,"line":69},[66,887,788],{"class":72},[66,889,791],{"class":72},[66,891,795],{"class":794},[66,893,894,897,899,901],{"class":68,"line":132},[66,895,896],{"class":76},"  important",[66,898,105],{"class":794},[66,900,814],{"class":72},[66,902,817],{"class":794},[66,904,905],{"class":68,"line":145},[66,906,827],{"class":794},[14,908,909,910,914],{},"However, you probably want to turn it off ",[911,912,913],"em",{},"only"," for AMP templates.",[14,916,917,918,921],{},"You can do this by updating your ",[63,919,920],{},"\u003Cstyle>"," tag for AMP templates to use a different Tailwind config file:",[56,923,925],{"className":108,"code":924,"filename":110,"language":111,"meta":61,"style":61},"\u003Cstyle>\n  @config 'tailwind.amp.js';\n  @tailwind components;\n  @tailwind utilities;\n\u003C/style>\n",[63,926,927,935,946,956,965],{"__ignoreMap":61},[66,928,929,931,933],{"class":68,"line":69},[66,930,135],{"class":118},[66,932,212],{"class":72},[66,934,129],{"class":118},[66,936,937,940,943],{"class":68,"line":132},[66,938,939],{"class":232},"  @config",[66,941,942],{"class":76}," 'tailwind.amp.js'",[66,944,945],{"class":232},";\n",[66,947,948,951,954],{"class":68,"line":145},[66,949,950],{"class":232},"  @tailwind",[66,952,953],{"class":76}," components",[66,955,945],{"class":232},[66,957,958,960,963],{"class":68,"line":155},[66,959,950],{"class":232},[66,961,962],{"class":76}," utilities",[66,964,945],{"class":232},[66,966,967,969,971],{"class":68,"line":180},[66,968,242],{"class":118},[66,970,212],{"class":72},[66,972,129],{"class":118},[14,974,975,976,978,979,982,983,105],{},"Next, duplicate ",[63,977,881],{}," to ",[63,980,981],{},"tailwind.amp.js"," and disable ",[63,984,867],{},[56,986,988],{"className":778,"code":987,"filename":981,"language":781,"meta":61,"style":61},"module.exports = {\n  important: false,\n}\n",[63,989,990,1006,1016],{"__ignoreMap":61},[66,991,992,995,997,1000,1004],{"class":68,"line":69},[66,993,994],{"class":72},"module",[66,996,38],{"class":794},[66,998,999],{"class":72},"exports",[66,1001,1003],{"class":1002},"sVevU"," =",[66,1005,795],{"class":794},[66,1007,1008,1010,1012,1014],{"class":68,"line":132},[66,1009,896],{"class":76},[66,1011,105],{"class":794},[66,1013,814],{"class":72},[66,1015,817],{"class":794},[66,1017,1018],{"class":68,"line":145},[66,1019,827],{"class":794},[14,1021,1022,1023,1026],{},"Finally, run ",[63,1024,1025],{},"maizzle build amp"," to build your ⚡4email templates.",[14,1028,1029,1030,1034,1035,105],{},"In case you haven't installed the ",[26,1031,1033],{"href":1032},"/docs/cli","Maizzle CLI",", add an NPM script to ",[63,1036,1037],{},"package.json",[56,1039,1043],{"className":1040,"code":1041,"filename":1037,"language":1042,"meta":61,"style":61},"language-json shiki shiki-themes tailwind-css tailwind-css","\"scripts\": {\n  \"build:amp\": \"maizzle build amp\"\n}\n","json",[63,1044,1045,1056,1071],{"__ignoreMap":61},[66,1046,1047,1050,1053],{"class":68,"line":69},[66,1048,1049],{"class":76},"\"scripts\"",[66,1051,1052],{"class":76},": ",[66,1054,1055],{"class":224},"{\n",[66,1057,1058,1061,1064,1066,1068],{"class":68,"line":132},[66,1059,1060],{"class":794},"  \"",[66,1062,1063],{"class":76},"build:amp",[66,1065,170],{"class":794},[66,1067,105],{"class":224},[66,1069,1070],{"class":76}," \"maizzle build amp\"\n",[66,1072,1073],{"class":68,"line":145},[66,1074,827],{"class":224},[14,1076,1077,1078,38],{},"You'd then build your AMP emails by running ",[63,1079,1080],{},"npm run build:amp",[48,1082,1084],{"id":1083},"resources","Resources",[1086,1087,1088,1095],"ul",{},[1089,1090,1091],"li",{},[26,1092,1094],{"href":28,"rel":1093},[30],"Official AMP for Email docs",[1089,1096,1097],{},[26,1098,1100],{"href":44,"rel":1099},[30],"Maizzle AMP for Email Starter",[212,1102,1103],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .s1Ehh, html code.shiki .s1Ehh{--shiki-light:#758CA9;--shiki-dark:#758CA9}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}",{"title":61,"searchDepth":132,"depth":132,"links":1105},[1106,1107,1108,1109,1110,1111],{"id":50,"depth":132,"text":51},{"id":93,"depth":132,"text":94},{"id":354,"depth":132,"text":355},{"id":768,"depth":132,"text":769},{"id":867,"depth":132,"text":868},{"id":1083,"depth":132,"text":1084},"2021-03-03T00:00:00.000Z","Use AMP for Email in Maizzle to easily create interactive HTML emails with realtime information and in-line actions.","md",{},"/guides/amp-email",{"title":5,"description":1113},{"loc":1116},"guides/amp-email","KmxORpK7BI3TCN2fNhIZY4fobWp-d-2DN7wJZBQWRng",[1122,1126],{"title":1123,"path":1124,"stem":1125,"children":-1},"How to create an HTML email newsletter from Markdown files","/guides/markdown-emails","guides/markdown-emails",{"title":1127,"path":1128,"stem":1129,"children":-1},"How to create an email newsletter from an RSS feed","/guides/rss-feed","guides/rss-feed",1780318597004]