开发工具

邮件模板沙箱预览

编辑 HTML 邮件模板并在沙盒 iframe 中实时预览渲染效果，支持变量替换和响应式预览。

沙箱隔离运行

运行方式: 沙箱隔离运行
标签: emailhtmltemplatepreviewsandboxmjml
工具标识: email-template-sandbox-preview
Worker: 无需启用
权限: 剪贴板

使用步骤

输入或粘贴 HTML 邮件模板代码。
设置模板变量值查看替换效果。
在桌面和移动端视图之间切换预览。

使用例子

调试邮件模板在不同客户端的渲染效果。
预览变量替换后的个性化邮件内容。

HTML 模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 0; background: #f4f4f4; }
    .container { max-width: 600px; margin: 0 auto; background: #ffffff; }
    .header { background: #4f46e5; color: white; padding: 32px 24px; text-align: center; }
    .header h1 { margin: 0; font-size: 24px; }
    .body { padding: 32px 24px; color: #333; line-height: 1.6; }
    .cta { display: inline-block; background: #4f46e5; color: white; padding: 12px 32px; border-radius: 6px; text-decoration: none; font-weight: 600; margin: 16px 0; }
    .footer { padding: 24px; text-align: center; font-size: 12px; color: #999; border-top: 1px solid #eee; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>{{company_name}}</h1>
    </div>
    <div class="body">
      <h2>Hi {{user_name}},</h2>
      <p>{{message}}</p>
      <a href="{{cta_link}}" class="cta">{{cta_text}}</a>
      <p>如有问题，请回复此邮件联系我们。</p>
    </div>
    <div class="footer">
      <p>&copy; 2024 {{company_name}}. All rights reserved.</p>
      <p>{{address}}</p>
    </div>
  </div>
</body>
</html>

预览

模板变量

模板大小

1229 B

预览宽度

640px

使用 {{变量名}} 语法定义模板变量，右侧自动渲染预览。沙盒 iframe 隔离执行，确保安全预览。

邮件模板沙箱预览

开始使用

使用步骤

使用例子

邮件模板沙箱预览

模板变量

模板大小

预览宽度

邮件模板沙箱预览

邮件模板沙箱预览

模板变量

模板大小

预览宽度