Email Editor

Ask the Community Get Answers
1

Hi everyone — I’m working on improving the design of emails sent through Knack and running into some formatting limitations with the WYSIWYG editor.

Right now I’m trying to create a simple, clean transactional email (receipt-style) where the container is centered (not full-width).

The main issue I’m running into is that Knack keeps overriding layout styling, so even when I set align="center" or use inline styles, results vary between preview and actual email delivery (Gmail especially).

I’ve tried simplifying the HTML heavily (removing divs, using table-based layout, inline styles only), but I’m still getting inconsistent results.

What I’m looking for:

  • A proven “Knack-safe” email template structure (HTML table-based preferred)

  • Or examples of email templates that reliably render centered layouts inside Knack’s WYSIWYG email editor

If anyone has a base template or has solved this before, I’d really appreciate seeing how you structure it.

2

Hi @Leah ,

Great topic.

First, here is a list of supported tags in the Next-Gen rich text editor, in addition to what’s listed here.

table: [‘style’, ‘cellspacing’, ‘cellpadding’, ‘border’, ‘width’, ‘align’, ‘class’]
td, th: [‘style’, ‘width’, ‘height’, ‘align’, ‘valign’, ‘bgcolor’, ‘class’]
tr: [‘style’, ‘class’, ‘height’]
tbody, thead, caption: [‘style’, ‘class’]

While we’ve made improvements to email rendering with the tags above, email clients like Gmail, Apple Mail, Outlook, and others each interpret HTML and styling differently, many block non-standard tags or styles for security reasons. So an email that looks perfect in one client may appear differently in another, and not always reflective of what you’ve entered in the rich text editor.

This screenshot reflects how the code I entered in the rich text editor displays in the Live App:

image
image3745×1742 323 KB

Same code rendered in Gmail:

image
image3085×1654 344 KB

Same code in Outlook, first as the default, then as I unblocked:

image
image1131×924 84.9 KB

image
image1117×846 63.1 KB

and lastly, this app that is supposed to give you a correct preview between different email clients -

image
image2307×1872 316 KB

So between the background colors, logo placement, font, it seems to vary significantly.

The code I used to center in the example:

On the outer wrapper table:

On the inner 600px email container:

On each table cell holding content:

On each paragraph and heading:

On the logo image - which never centered in the email clients but did in the live app and email previewer… :woman_shrugging:

style="display: block; margin: 0 auto;

The pattern is: align="center" as the HTML attribute (for old email clients), plus text-align: center in the inline style (for modern clients) plus margin: 0 auto when you need to center a block element itself rather than its text content.

I hope this is somewhat helpful?

Thank you,

Kara