{"updated_at":1698082790622,"name":"Sandbox template","created_at":1698082790622,"description":"A demo email template showcasing how you can combine Markdown with React Email in MDX to create beautiful templates.","id":"sandbox","source":"## New template\n\nHi {props.name || 'there'},\n\nYou can create an email template here by using MDX, which is a combination of \n**Markdown** and **JSX**.\n\n_We use [React Email](https://react.email) under the hood, so feel free to use \nany of those components here!_\n\nFor example...\n\n<Section className=\"text-center\">\n  <Button href={props.url}>\n    Call to action\n  </Button>\n</Section>\n\nYou can also use dynamic content in the form of **`props.myDynamicVariable`**,\nsimilar to how it would be done in React. \n\n_(See the \"Props\" section in the upper left corner of the page to preview what \nyour template will look like with different values.)_\n\nIf you need help with anything, feel free to join the \n[Booper Discord server](https://discord.gg/pD7pnd2bUH) and ask 🤓\n\nHappy Booping!\n\n---\n\n<Row>\n  <Column className=\"text-left\">\n    <Text className=\"text-xs text-zinc-500\">\n      This template was created with [Booper](https://booper.dev/).\n    </Text>\n  </Column>\n  <Column className=\"text-right\">\n    <Text className=\"text-xs text-zinc-500\">\n      <Link href={props.unsubscribe}>Unsubscribe</Link>\n    </Text>\n  </Column>\n</Row>\n\n","type":"mdx","default_props":{"unsubscribe":"https://example.com/unsubscribe","name":"Alex","url":"https://example.com"},"text":"NEW TEMPLATE\n\nHi there,\n\nYou can create an email template here by using MDX, which is a combination of\nMarkdown and JSX.\n\nWe use React Email [https://react.email] under the hood, so feel free to use any\nof those components here!\n\nFor example...\n\nCall to action\n\nYou can also use dynamic content in the form of props.myDynamicVariable, similar\nto how it would be done in React.\n\n(See the \"Props\" section in the upper left corner of the page to preview what\nyour template will look like with different values.)\n\nIf you need help with anything, feel free to join the Booper Discord server\n[https://discord.gg/pD7pnd2bUH] and ask 🤓\n\nHappy Booping!\n\n--------------------------------------------------------------------------------\n\nThis template was created with Booper [https://booper.dev/].\n\nUnsubscribe","html":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html lang=\"en\"><head data-id=\"__react-email-head\"><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/></head><body data-id=\"__react-email-body\" style=\"margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji\"><table align=\"center\" width=\"100%\" data-id=\"__react-email-container\" role=\"presentation\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" style=\"max-width:44em;background-color:rgb(255,255,255);color:rgb(24,24,27);padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:1rem\"><tbody><tr style=\"width:100%\"><td><h2 data-id=\"react-email-heading\">New template</h2>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">Hi there,</p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">You can create an email template here by using MDX, which is a combination of\n<strong>Markdown</strong> and <strong>JSX</strong>.</p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\"><em>We use <a href=\"https://react.email\" data-id=\"react-email-link\" target=\"_blank\" style=\"color:rgb(59,130,246);text-decoration:none\">React Email</a> under the hood, so feel free to use\nany of those components here!</em></p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">For example...</p>\n<table align=\"center\" width=\"100%\" data-id=\"react-email-section\" border=\"0\" cellPadding=\"0\" cellSpacing=\"0\" role=\"presentation\" style=\"text-align:center\"><tbody><tr><td><a data-id=\"react-email-button\" target=\"_blank\" style=\"line-height:1.25rem;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px;border-radius:0.25rem;background-color:rgb(59,130,246);padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:0.875rem;color:rgb(255,255,255)\"><span></span><span style=\"max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0\"><span ignore=\"true\">Call to action</span></span><span></span></a></td></tr></tbody></table>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">You can also use dynamic content in the form of <strong><code>props.myDynamicVariable</code></strong>,\nsimilar to how it would be done in React.</p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\"><em>(See the &quot;Props&quot; section in the upper left corner of the page to preview what\nyour template will look like with different values.)</em></p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">If you need help with anything, feel free to join the\n<a href=\"https://discord.gg/pD7pnd2bUH\" data-id=\"react-email-link\" target=\"_blank\" style=\"color:rgb(59,130,246);text-decoration:none\">Booper Discord server</a> and ask 🤓</p>\n<p data-id=\"react-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;color:rgb(63,63,70)\">Happy Booping!</p>\n<hr data-id=\"react-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea\"/>\n<table align=\"center\" width=\"100%\" data-id=\"react-email-row\" role=\"presentation\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\"><tbody style=\"width:100%\"><tr style=\"width:100%\"><td data-id=\"__react-email-column\" style=\"text-align:left\"><p data-id=\"react-email-text\" style=\"font-size:0.75rem;line-height:1rem;margin:16px 0;color:rgb(113,113,122)\"><span ignore=\"true\">This template was created with <a href=\"https://booper.dev/\" data-id=\"react-email-link\" target=\"_blank\" style=\"color:rgb(59,130,246);text-decoration:none\">Booper</a>.</span></p></td><td data-id=\"__react-email-column\" style=\"text-align:right\"><p data-id=\"react-email-text\" style=\"font-size:0.75rem;line-height:1rem;margin:16px 0;color:rgb(113,113,122)\"><a ignore=\"true\" data-id=\"react-email-link\" target=\"_blank\" style=\"color:#067df7;text-decoration:none\">Unsubscribe</a></p></td></tr></tbody></table></td></tr></tbody></table></body></html>"}