[{"data":1,"prerenderedAt":777},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/installation":270,"docs-bottom-nav":704},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":8,"body":272,"description":696,"extension":697,"meta":698,"navigation":699,"path":15,"seo":700,"sitemap":701,"stem":702,"__hash__":703},"docs/docs/installation.md",{"type":273,"value":274,"toc":682},"minimark",[275,279,284,296,303,307,316,319,336,340,344,352,355,364,371,374,381,390,393,402,407,410,415,424,429,437,440,448,451,454,458,461,468,477,487,490,494,497,506,519,526,530,537,583,586,644,651,657,661,675,678],[276,277,8],"h1",{"id":278},"getting-started",[280,281,283],"h2",{"id":282},"video-tutorials","Video Tutorials",[285,286,287,288,295],"p",{},"If you prefer to watch a video, check out the ",[289,290,294],"a",{"href":291,"rel":292},"https://laracasts.com/series/build-html-emails-with-maizzle",[293],"nofollow","Maizzle Series on Laracasts",".",[285,297,298,299,302],{},"They were originally made for Maizzle 4.x, but the same concepts apply in v5 and only some configuration options are different (see our ",[289,300,301],{"href":24},"upgrade guide",").",[280,304,306],{"id":305},"requirements","Requirements",[285,308,309,310,315],{},"You'll need ",[289,311,314],{"href":312,"rel":313},"https://nodejs.org/en/download/",[293],"Node.js"," installed first (comes with NPM included).",[285,317,318],{},"Use this command to check the version:",[320,321,326],"pre",{"className":322,"code":323,"language":324,"meta":325,"style":325},"language-sh shiki shiki-themes tailwind-css tailwind-css","node -v\n","sh","",[327,328,329],"code",{"__ignoreMap":325},[330,331,334],"span",{"class":332,"line":333},"line",1,[330,335,323],{},[337,338,339],"alert",{},"\nMaizzle requires at least Node v18.20.0\n",[280,341,343],{"id":342},"create-a-project","Create a project",[285,345,346,347,295],{},"The fastest way to get started is with the ",[289,348,351],{"href":349,"rel":350},"https://github.com/maizzle/maizzle",[293],"official Starter",[285,353,354],{},"Run this command in your terminal to create a new Maizzle project:",[320,356,358],{"className":322,"code":357,"language":324,"meta":325,"style":325},"npx create-maizzle\n",[327,359,360],{"__ignoreMap":325},[330,361,362],{"class":332,"line":333},[330,363,357],{},[285,365,366,367,370],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[327,368,369],{},"./my-project",", select the Default Starter, and choose Yes to Install dependencies.",[285,372,373],{},"Installing the dependencies will take a while, but usually under a minute.",[285,375,376,377,380],{},"Next, switch the current directory to ",[327,378,379],{},"my-project",":",[320,382,384],{"className":322,"code":383,"language":324,"meta":325,"style":325},"cd my-project\n",[327,385,386],{"__ignoreMap":325},[330,387,388],{"class":332,"line":333},[330,389,383],{},[285,391,392],{},"If you didn't install dependencies in the interactive setup, do so now:",[320,394,396],{"className":322,"code":395,"language":324,"meta":325,"style":325},"npm install\n",[327,397,398],{"__ignoreMap":325},[330,399,400],{"class":332,"line":333},[330,401,395],{},[403,404,406],"h3",{"id":405},"manual-setup","Manual setup",[285,408,409],{},"Alternatively, you may create a new project manually.",[285,411,412,413,380],{},"First, you'll need to download a Starter project - the following command will create a new project using the official Starter in a directory called ",[327,414,379],{},[320,416,418],{"className":322,"code":417,"language":324,"meta":325,"style":325},"npx degit maizzle/maizzle my-project\n",[327,419,420],{"__ignoreMap":325},[330,421,422],{"class":332,"line":333},[330,423,417],{},[285,425,426,427,380],{},"Next, change the current directory to ",[327,428,379],{},[320,430,431],{"className":322,"code":383,"language":324,"meta":325,"style":325},[327,432,433],{"__ignoreMap":325},[330,434,435],{"class":332,"line":333},[330,436,383],{},[285,438,439],{},"Finally, install the project's dependencies:",[320,441,442],{"className":322,"code":395,"language":324,"meta":325,"style":325},[327,443,444],{"__ignoreMap":325},[330,445,446],{"class":332,"line":333},[330,447,395],{},[280,449,71],{"id":450},"development",[285,452,453],{},"Maizzle includes different commands for developing locally on your machine and for building production-ready emails.",[403,455,457],{"id":456},"local","Local",[285,459,460],{},"You can start a development server that watches for file changes and automatically updates a preview in the browser.",[285,462,463,464,467],{},"Do so by running the ",[327,465,466],{},"dev"," npm script in your project's root folder:",[320,469,471],{"className":322,"code":470,"language":324,"meta":325,"style":325},"npm run dev\n",[327,472,473],{"__ignoreMap":325},[330,474,475],{"class":332,"line":333},[330,476,470],{},[285,478,479,480],{},"This will start the local server at ",[481,482,483],"em",{},[289,484,485],{"href":485,"rel":486},"http://localhost:3000",[293],[285,488,489],{},"Navigate to one of the Templates there, make a change to it in your editor and save it: your changes will be injected and the page will reflect them almost instantly.",[403,491,493],{"id":492},"production","Production",[285,495,496],{},"Build production-ready emails that have inlined CSS and many other optimizations, by running the following command:",[320,498,500],{"className":322,"code":499,"language":324,"meta":325,"style":325},"npm run build\n",[327,501,502],{"__ignoreMap":325},[330,503,504],{"class":332,"line":333},[330,505,499],{},[285,507,508,509,512,513,518],{},"This will use settings in your project's ",[327,510,511],{},"config.production.js"," to compile email templates that you can use with your ",[514,515,517],"abbr",{"title":516},"Email Service Provider","ESP"," or in your application.",[337,520,521,522,525],{},"\nThese NPM scripts use the Maizzle CLI, check out the \n",[289,523,524],{"href":33},"CLI Tool docs","\n for more details.\n",[280,527,529],{"id":528},"updating","Updating",[285,531,532,533,536],{},"Maizzle is listed as a dependency in your project's ",[327,534,535],{},"package.json"," file:",[320,538,541],{"className":539,"code":540,"filename":535,"language":5,"meta":325,"style":325},"language-json shiki shiki-themes tailwind-css tailwind-css","\"dependencies\": {\n  \"@maizzle/framework\": \"latest\",\n}\n",[327,542,543,556,577],{"__ignoreMap":325},[330,544,545,549,552],{"class":332,"line":333},[330,546,548],{"class":547},"sfCc6","\"dependencies\"",[330,550,551],{"class":547},": ",[330,553,555],{"class":554},"shy1k","{\n",[330,557,559,563,566,569,571,574],{"class":332,"line":558},2,[330,560,562],{"class":561},"sprQ5","  \"",[330,564,565],{"class":547},"@maizzle/framework",[330,567,568],{"class":561},"\"",[330,570,380],{"class":554},[330,572,573],{"class":547}," \"latest\"",[330,575,576],{"class":561},",\n",[330,578,580],{"class":332,"line":579},3,[330,581,582],{"class":554},"}\n",[285,584,585],{},"To use a specific version, first change the value to the desired release number:",[320,587,592],{"className":588,"code":589,"filename":535,"highlights":590,"language":5,"meta":591,"style":325},"language-json shiki shiki-themes tailwind-css tailwind-css has-diff","\"dependencies\": {\n   \"@maizzle/framework\": \"latest\", // [!code --]\n   \"@maizzle/framework\": \"5.0.6\", // [!code ++]\n}\n",[579],"no-copy",[327,593,594,602,621,639],{"__ignoreMap":325},[330,595,596,598,600],{"class":332,"line":333},[330,597,548],{"class":547},[330,599,551],{"class":547},[330,601,555],{"class":554},[330,603,607,610,612,614,616,618],{"class":604,"line":558},[332,605,606],"diff","remove",[330,608,609],{"class":561},"   \"",[330,611,565],{"class":547},[330,613,568],{"class":561},[330,615,380],{"class":554},[330,617,573],{"class":547},[330,619,620],{"class":561},",",[330,622,626,628,630,632,634,637],{"class":623,"line":579},[332,624,605,625],"highlight","add",[330,627,609],{"class":561},[330,629,565],{"class":547},[330,631,568],{"class":561},[330,633,380],{"class":554},[330,635,636],{"class":547}," \"5.0.6\"",[330,638,620],{"class":561},[330,640,642],{"class":332,"line":641},4,[330,643,582],{"class":554},[285,645,646,647,650],{},"Then, re-install dependencies by running ",[327,648,649],{},"npm install"," in your project's root folder.",[337,652,653,654],{},"\nLatest stable Maizzle release is \n",[655,656],"latest-release",{},[403,658,660],{"id":659},"clean-update","Clean update",[285,662,663,664,667,668,671,672,674],{},"If for some reason you're not getting the correct version or are running into installation issues, delete your ",[327,665,666],{},"node_modules"," folder and your ",[327,669,670],{},"package-lock.json"," file from the root of your project and then run ",[327,673,649],{}," again.",[285,676,677],{},"This will do a fresh install of all dependencies.",[679,680,681],"style",{},"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 .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}",{"title":325,"searchDepth":558,"depth":558,"links":683},[684,685,686,689,693],{"id":282,"depth":558,"text":283},{"id":305,"depth":558,"text":306},{"id":342,"depth":558,"text":343,"children":687},[688],{"id":405,"depth":579,"text":406},{"id":450,"depth":558,"text":71,"children":690},[691,692],{"id":456,"depth":579,"text":457},{"id":492,"depth":579,"text":493},{"id":528,"depth":558,"text":529,"children":694},[695],{"id":659,"depth":579,"text":660},"Installing Maizzle on your machine and creating a new project.","md",{},true,{"title":8,"description":696},{"loc":15},"docs/installation","c-b03gUVahuaW_WidHKjkk4ycAq4CDcVyigad1_DqEM",{"id":4,"extension":5,"items":705,"meta":776,"stem":195,"__hash__":196},[706,716,721,730,743,761,767],{"name":8,"items":707},[708,709,710,711,712,713,714,715],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":717},[718,719,720],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":722},[723,724,725,726,727,728,729],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":731},[732,733,734,735,736,737,738,739,740,741,742],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":744},[745,746,747,748,749,750,751,752,753,754,755,756,757,758,759,760],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":762},[763,764,765,766],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":768},[769,770,771,772,773,774,775],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318594471]