The Official MailPace Blog

Adding HTML Email Previews to our UI

June 03, 2024

One of the most requested features for MailPace is the ability to preview HTML emails within our Dashboard.

We’ve just implemented this, along with a redesign of the Email Details tab:

HTML Email Preview with Tabs

Can’t wait to see your emails like this? Check it out now!

How we did it

We now use Turbo Frames to load the email details, and sprinkling of Stimulus JavaScript to add Tabs and Expanding/Collapsing Accordions.

This means no more Jquery in our app, anywhere!

The email HTML goes inside two places:

Finally, we added three buttons (Desktop, Tablet, Mobile) that let users change with width of the iframe to render the email at different widths.

How to safely embed an iframe

To ensure the iframe renders the content in a safe manner, we can use the sandbox attribute. The sandbox attribute prevents content from within the iframe from breaking out and modifying the parent page:

<iframe sandbox srcdoc="<%= @htmlbody %>" style="height: 800px; width: 100%;" data-email-preview-target="iframe"></iframe>

And that’s it!

You've read this far, want more?

By Paul, founder of MailPace. Follow our journey on Mastodon and Twitter, and sign up to our Product Newsletter.