Server-side JSX
JSX for emails

HTML emails are stuck in the past: mail clients ignore most CSS, so layouts are built from tables with inline styles. JSX components hide this mess behind tidy building blocks like <Heading>, <Button> or <Table>, and templates read like any other page.
Bulletproof markupTables and inline styles that survive Gmail, Outlook and Apple Mail.
Plain text for freeComponents read this.format and render "html" or "text" from the same template.
Async componentsThe receipt loads its order while rendering, like any other page.
Your receipt for order #1042Jeasx Expo <noreply@example.com> Ada Lovelace <ada@example.com>multipart/alternativetext/html · 5.2 KBtext/plain · 0.6 KB
Download .eml
HTML 5.2 KB
Plain text 0.6 KB
Generated HTML

What the components above turn into: nested tables and inline styles, formatted with Prettier and highlighted with Prism on the server.
receipt.html5.2 KB
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="color-scheme" content="light" />
  <title>Receipt for order #1042</title>
 </head>
 <body style="margin: 0; padding: 0; background-color: #f4f2fb">
  <div style="display: none; max-height: 0; overflow: hidden">Thanks for your order of €57.60.</div>
  <table
   role="presentation"
   width="100%"
   cellpadding="0"
   cellspacing="0"
   style="background-color:#f4f2fb;font-family:-apple-system, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif">
   <tr>
    <td align="center" style="padding: 32px 12px">
     <table
      role="presentation"
      width="600"
      cellpadding="0"
      cellspacing="0"
      style="
       width: 100%;
       max-width: 600px;
       background-color: #ffffff;
       border: 1px solid #ece9f5;
       border-radius: 16px;
       box-shadow: 0 12px 32px -16px rgba(76, 29, 149, 0.25);
       color: #1f2937;
       overflow: hidden;
      ">
      <tr>
       <td
        style="
         height: 6px;
         line-height: 6px;
         font-size: 0;
         background-color: #6d28d9;
         background-image: linear-gradient(120deg, #8b5cf6, #ec4899);
        ">
        &nbsp;
       </td>
      </tr>
      <tr>
       <td style="padding: 24px 40px 0">
        <table role="presentation" cellpadding="0" cellspacing="0">
         <tr>
          <td
           width="32"
           height="32"
           align="center"
           style="
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background-color: #6d28d9;
            background-image: linear-gradient(120deg, #8b5cf6, #ec4899);
            color: #ffffff;
            font-size: 17px;
            font-weight: 800;
           ">
           J
          </td>
          <td style="padding-left: 10px; font-size: 16px; font-weight: 700">Jeasx Shop</td>
         </tr>
        </table>
       </td>
      </tr>
      <tr>
       <td style="padding: 32px 40px 8px">
        <div
         style="
          width: 56px;
          height: 56px;
          line-height: 56px;
          border-radius: 16px;
          background-color: #f5f3ff;
          font-size: 28px;
          text-align: center;
         ">
         🧾
        </div>
        <h1
         style="margin: 20px 0 12px; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em">
         Thanks for your order!
        </h1>
        <p style="margin: 0; font-size: 16px; line-height: 1.6; color: #6b7280">
         Hi Ada, we&#39;ve received your order and will ship it shortly.
        </p>
       </td>
      </tr>
      <tr>
       <td style="padding: 16px 40px 0">
        <h2
         style="
          margin: 8px 0 12px;
          color: #6b7280;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
         ">
         Order summary
        </h2>
        <table
         role="presentation"
         width="100%"
         cellpadding="0"
         cellspacing="0"
         style="margin-bottom: 20px">
         <tr>
          <td style="padding: 12px 0; border-bottom: 1px solid #ece9f5; font-size: 15px">
           2 × Jeasx T-shirt
          </td>
          <td
           align="right"
           style="
            padding: 12px 0;
            border-bottom: 1px solid #ece9f5;
            font-size: 15px;
            white-space: nowrap;
           ">
           €39.80
          </td>
         </tr>
         <tr>
          <td style="padding: 12px 0; border-bottom: 1px solid #ece9f5; font-size: 15px">
           1 × Sticker pack &lt;JSX/&gt;
          </td>
          <td
           align="right"
           style="
            padding: 12px 0;
            border-bottom: 1px solid #ece9f5;
            font-size: 15px;
            white-space: nowrap;
           ">
           €4.90
          </td>
         </tr>
         <tr>
          <td style="padding: 12px 0; border-bottom: 1px solid #ece9f5; font-size: 15px">
           1 × Coffee mug
          </td>
          <td
           align="right"
           style="
            padding: 12px 0;
            border-bottom: 1px solid #ece9f5;
            font-size: 15px;
            white-space: nowrap;
           ">
           €12.90
          </td>
         </tr>
         <tr>
          <td colspan="2" style="height: 12px"></td>
         </tr>
         <tr>
          <td
           style="
            padding: 14px 12px;
            background-color: #f5f3ff;
            font-weight: 800;
            border-radius: 8px 0 0 8px;
            font-size: 16px;
           ">
           Total
          </td>
          <td
           align="right"
           style="
            padding: 14px 12px;
            background-color: #f5f3ff;
            font-weight: 800;
            border-radius: 0 8px 8px 0;
            color: #6d28d9;
            font-size: 18px;
           ">
           €57.60
          </td>
         </tr>
        </table>
        <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 8px 0 24px">
         <tr>
          <td
           style="
            border-radius: 10px;
            background-color: #6d28d9;
            background-image: linear-gradient(120deg, #8b5cf6, #ec4899);
            box-shadow: 0 8px 20px -8px rgba(109, 40, 217, 0.6);
           ">
           <a
            href="https://www.jeasx.dev"
            style="
             display: inline-block;
             padding: 14px 28px;
             color: #ffffff;
             font-size: 16px;
             font-weight: 700;
             text-decoration: none;
            "
            >Track your order →</a
           >
          </td>
         </tr>
        </table>
        <hr style="margin: 8px 0 24px; border: 0; border-top: 1px solid #ece9f5" />
        <h2
         style="
          margin: 8px 0 12px;
          color: #6b7280;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
         ">
         Details
        </h2>
        <table
         role="presentation"
         width="100%"
         cellpadding="0"
         cellspacing="0"
         style="margin-bottom: 16px">
         <tr>
          <td
           width="120"
           valign="top"
           style="padding: 4px 0; font-size: 14px; line-height: 1.5; color: #6b7280">
           Order
          </td>
          <td style="padding: 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600">#1042</td>
         </tr>
         <tr>
          <td
           width="120"
           valign="top"
           style="padding: 4px 0; font-size: 14px; line-height: 1.5; color: #6b7280">
           Date
          </td>
          <td style="padding: 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600">
           2026-11-14
          </td>
         </tr>
         <tr>
          <td
           width="120"
           valign="top"
           style="padding: 4px 0; font-size: 14px; line-height: 1.5; color: #6b7280">
           Shipping to
          </td>
          <td style="padding: 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600">
           Ada Lovelace, 12 St James&#39;s Square, London
          </td>
         </tr>
         <tr>
          <td
           width="120"
           valign="top"
           style="padding: 4px 0; font-size: 14px; line-height: 1.5; color: #6b7280">
           Delivery
          </td>
          <td style="padding: 4px 0; font-size: 14px; line-height: 1.5; font-weight: 600">
           2–3 business days
          </td>
         </tr>
        </table>
       </td>
      </tr>
      <tr>
       <td style="height: 24px"></td>
      </tr>
     </table>
     <table
      role="presentation"
      width="600"
      cellpadding="0"
      cellspacing="0"
      style="width: 100%; max-width: 600px">
      <tr>
       <td
        align="center"
        style="padding: 24px 40px; color: #6b7280; font-size: 12px; line-height: 1.6">
        <a href="https://www.jeasx.dev" style="color: #6b7280; text-decoration: underline"
         >Help center</a
        >
        ·
        <a href="https://www.jeasx.dev" style="color: #6b7280; text-decoration: underline"
         >Email preferences</a
        ><br />Jeasx Shop · 1 Example Street · 12345 Berlin
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </body>
</html>