diff --git a/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md b/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
index 028537ead68cd..f0974a6ed9f1a 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
+++ b/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
@@ -1,6 +1,11 @@
 CHANGELOG
 =========
 
+5.4
+---
+
+ * Add a "preview" tab in mailer profiler for HTML email
+
 5.2.0
 -----
 
@@ -33,7 +38,7 @@ CHANGELOG
 -----
 
  * added information about orphaned events
- * made the toolbar auto-update with info from ajax reponses when they set the 
+ * made the toolbar auto-update with info from ajax reponses when they set the
    `Symfony-Debug-Toolbar-Replace header` to `1`
 
 4.0.0
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
index cc85c413fcc52..bdca4eb968fbd 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
@@ -141,6 +141,18 @@
                                             </div>
                                             {% if message.htmlBody is defined %}
                                                 {# Email instance #}
+                                                <div class="tab">
+                                                    <h3 class="tab-title">HTML preview</h3>
+                                                    <div class="tab-content">
+                                                        <pre class="prewrap" style="max-height: 600px">
+                                                            <iframe
+                                                                src="data:text/html;base64;charset=utf-8,{{ collector.base64Encode(message.htmlBody()) }}"
+                                                                style="height: 80vh;width: 100%;"
+                                                            >
+                                                            </iframe>
+                                                        </pre>
+                                                    </div>
+                                                </div>
                                                 <div class="tab">
                                                     <h3 class="tab-title">HTML Content</h3>
                                                     <div class="tab-content">
diff --git a/src/Symfony/Component/Mailer/DataCollector/MessageDataCollector.php b/src/Symfony/Component/Mailer/DataCollector/MessageDataCollector.php
index 2200d9fe61804..07f77b27b0d3d 100644
--- a/src/Symfony/Component/Mailer/DataCollector/MessageDataCollector.php
+++ b/src/Symfony/Component/Mailer/DataCollector/MessageDataCollector.php
@@ -42,6 +42,14 @@ public function getEvents(): MessageEvents
         return $this->data['events'];
     }
 
+    /**
+     * @internal
+     */
+    public function base64Encode(string $data): string
+    {
+        return base64_encode($data);
+    }
+
     /**
      * {@inheritdoc}
      */