Emails render the way the customer sees them

Email bodies display inside a sandboxed, auto-sizing frame so table-based formatting survives instead of being stripped.

What it is

Rather than injecting sanitized HTML into the page, an email body is rendered in a sandboxed iframe that auto-resizes to its content, so it reads inline like a conversation message but looks exactly like the real email.

Also called: email looks broken in the CRM · formatted email · html email preview

See it
Emails render the way the customer sees them
CustomerBuildingAmountStatus
Delia Yoder40×64 Shop$6,710Open
Sutter Kline40×64 Shop$13,740Open
Marlin Hoover30×40 Garage$8,230Paid
Gideon AltHobby Shop$16,400Draft
Sutter KlineHobby Shop$16,780Paid
A formatted, table-based email rendering correctly inside the thread at its natural height. EmailBodyFrame.tsx. Sample data — no customer information appears here.
How it works
  1. 1HTML is sanitized with DOMPurify and written into a sandboxed iframe
  2. 2The frame measures its content and resizes so the email reads inline
  3. 3A DOMPurify hook forces rel="noopener noreferrer" onto every anchor
  4. 4Registered once at module scope so hooks do not accumulate per render
Why we built it

Customer emails were stripped of the table and style markup that almost all formatted mail is built from, so a supplier quote or a marketing email arrived looking broken and the builder could not tell whether the problem was the sender or the software. Emails now render inside a sandboxed, auto-sizing frame that shows them the way the customer sees them. The frame also closes a hole where a link a customer pasted into an email could reach back into the page that opened it.

The problem
  • Table-based email layouts destroyed by aggressive sanitisation
  • Reverse-tabnabbing from links inside customer email
Sound familiar?
What you get
Read the email as sent, in place
Hostile markup cannot execute against the app

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →