2b:["$","div",null,{"children":[["$","span",null,{"className":"text-sm font-medium text-text","children":"MJML"}],["$","span",null,{"className":"text-sm text-text-dim","children":[" — ","A markup language purpose-built for email, compiles to cross-client-safe HTML — a good fit if your stack is not React"]}]]}] 2c:["$","li","2",{"className":"flex gap-3","children":[["$","span",null,{"className":"mt-1 shrink-0 w-4 h-4 rounded-full flex items-center justify-center","style":{"border":"1px solid #2563EB40","background":"#2563EB15"},"children":["$","span",null,{"className":"w-1.5 h-1.5 rounded-full","style":{"background":"#2563EB"}}]}],["$","div",null,{"children":[["$","span",null,{"className":"text-sm font-medium text-text","children":"Provider-hosted template editors"}],["$","span",null,{"className":"text-sm text-text-dim","children":[" — ","Postmark and SendGrid both offer drag-and-drop template builders if you would rather not maintain template code at all"]}]]}]]}] 2d:["$","div","3",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"A transactional template with react-email"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"export function PasswordResetEmail({ resetUrl, userName }: { resetUrl: string; userName: string }) {\n return (\n \n \n Hi {userName}, click below to reset your password:\n \n This link expires in 1 hour. If you didn't request this, ignore this email.\n \n \n )\n}"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"]}] 2e:["$","div","4",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border mb-4","style":{"borderColor":"#2563EB25","background":"#2563EB06"},"children":[["$","div",null,{"className":"shrink-0 text-lg leading-none mt-0.5","children":"💡"}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold mb-0.5","style":{"color":"#2563EB"},"children":"Designing for email clients is designing for a museum of old browsers"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"Building a modern website means supporting the last two versions of a handful of browsers. Building an email template means your layout has to survive being rendered by software with the rough rendering capability of a browser from over a decade ago, alongside fully modern ones — all at once, for the same email."}]]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}] 2f:["$","div","5",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border border-blue/20 bg-blue/5 mb-4","children":[["$","div",null,{"className":"w-5 h-5 rounded border border-blue/40 bg-blue/10 flex items-center justify-center shrink-0 mt-0.5","children":["$","span",null,{"className":"text-blue text-xs font-bold","children":"→"}]}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold text-blue mb-0.5","children":"Try this"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"Take one transactional email you plan to send (or already send) and check it against an email-client preview tool (Litmus, or react-email's own preview server). Specifically check how it renders in Outlook — if your layout still looks correct there, it will likely survive everywhere else too."}]]}]]}],"$undefined"]}] 30:["$","span",null,{"className":"font-mono w-5 shrink-0","children":"06"}] 31:["$","span",null,{"className":"truncate flex-1","ch

Templates & Dynamic Content