What ChatGPT can do for email HTML

In our previous article, we shared how we at Scalero tested ChatGPT’s ability to code full production email designs, from Robinhood to Sundays newsletters. The takeaway? It’s getting better, but it’s not there yet. ChatGPT can produce functional HTML for simple layouts, but it still struggles with brand consistency, complex design fidelity, and cross-client quirks.

So instead of asking “Can ChatGPT code your email?”, let’s ask a better question: What can ChatGPT actually help you do right now?

Here are some practical, real-world ways ChatGPT can help you build, troubleshoot, and speed up the email development process, without replacing the developer expertise that still matters most.

1. Write and compile MJML

If you haven’t worked with MJML before, it’s a markup language designed specifically for email. Instead of writing dozens of nested tables and inline styles by hand, you write simple, readable tags like <mj-section>, <mj-column>, and <mj-text>. Then, the MJML compiler turns that into fully compatible HTML that renders well across Outlook, Gmail, Apple Mail, and others.

That’s why MJML is such a good match for ChatGPT: the language is declarative. You tell it what you want, not how to hack it together with tables.

For example, you could prompt ChatGPT with something like:

“Write an MJML email template for a product update. Include a header logo, two-column layout with product images, and a CTA button. Use Open Sans as the font, brand blue (#1A73E8) for headings, and light gray (#F5F5F5) for the background.”

ChatGPT will often generate a clean, well-structured MJML file that you can compile into bulletproof HTML. The results are surprisingly robust, responsive layouts, consistent spacing, and simple customization.

If you are wondering, “what do I do with MJML, does my ESP take it?” The answer is, no, you have to render the MJML here first, then copy and paste the rendered HTML into your ESP second. It’s not magic, but it’s a fast way to scaffold a strong foundation before refining it manually or running it through Litmus or Email on Acid.

2. Build HTML components

When you’re working in plain HTML, ChatGPT can still help, especially with components like buttons, headers, and reusable content blocks.

The key is to give clear specs, not just “make a button.” A good prompt looks something like this:

“Write HTML and inline CSS for a bulletproof email button. The button should have blue background (#1A73E8), white text, 16px font, 10px top and bottom padding, 24px left and right padding, a 4px border radius, and it should render correctly in Outlook and Gmail.”

ChatGPT will return something close to a “bulletproof button” pattern: table-based markup with VML support for Outlook. You can then tweak the colors, fonts, and alignment as needed.

The same logic applies to other components:

• Hero images with background colors

• Text blocks with adjustable padding

• Product grids or dividers

Even if you wouldn’t use its output in production immediately, it can save time setting up the scaffolding for your dev environment or documentation.

3. Troubleshoot and explain code

ChatGPT can also help explain why your HTML isn’t behaving. You can paste in code and ask:

“Why is this layout collapsing in Outlook?”
“Why is Gmail ignoring this background color?”

It’s often good at spotting missing table structures, unclosed tags, or unsupported CSS. While it can’t replicate every client’s rendering engine, it’s useful for identifying common issues or teaching junior team members why email HTML behaves the way it does.

4. Generate starter code from specs or wireframes

ChatGPT works well when you give it structured direction. Instead of pasting a Figma screenshot, try outlining your layout in plain text:

“Generate an MJML email with a hero image, headline, body copy, and footer with social icons. Use Arial font, 18px headline, and 14px body text. Include 24px padding around each section.”

This helps ChatGPT understand intent without having to interpret design visuals. You’ll get a usable starting point that you can quickly polish up in your ESP or code editor.

5. Translate or localize content safely

If you already have a finished HTML or MJML email and need to translate it, ChatGPT is surprisingly reliable at keeping the structure intact. You can prompt:

“Translate this HTML email into French, but keep all the tags and formatting exactly the same.”

It will usually translate only the visible text, leaving the markup untouched, a big time saver for multilingual campaigns.

6. Improve accessibility and inline styles

ChatGPT can help you make your emails more accessible and reliable by:

• Adding alt text to images

• Inserting ARIA labels where needed

• Converting embedded or external CSS into inline styles

• Suggesting fixes for low contrast text

Prompt it to audit your HTML, and it can highlight simple fixes that improve both usability and deliverability.

7. Speed up workflow documentation

Finally, you can use ChatGPT to document your templates or components. Paste your MJML or HTML and ask:

“Explain what each section of this email does in plain English for a developer handoff.”

It will label sections, describe their purpose, and even propose naming conventions for ESP modules or reusable blocks. Great for onboarding new team members or organizing shared template libraries.

Closing thoughts

ChatGPT still can’t replace a dedicated email developer as it doesn’t understand the quirks of Outlook’s VML or Gmail’s CSS rules the way a human does. But it can make the process faster, cleaner, and more exploratory.

Use it to scaffold templates, generate MJML, build HTML components, or troubleshoot odd rendering issues. The key is to treat it as a collaborator, not an autopilot.