AI Design Studio
Docs chevron_right AI Design Studio chevron_right Code & preview

Code & preview

The Studio shows your email exactly as recipients will see it, and gives you direct access to the underlying HTML whenever you want it. You get the speed of AI with the control of code.

Live preview

As you generate and edit, a live preview renders your email in real time. Because every design is built as standard, responsive HTML, the preview reflects how the email behaves across screen sizes — so you can check that it looks right on both desktop and mobile before you send. Use it to sanity-check spacing, image choices, button placement, and overall hierarchy.

The code view

When you need precise control, open the code tab to see the email's HTML in a full syntax-highlighted editor. This is useful for:

  • Fine-tuning spacing, alignment, or inline styles.
  • Pasting in a snippet or adjusting a specific element by hand.
  • Auditing exactly what will be sent.

Edits in the code view and edits via chat stay in sync, so you can move between them freely — let the AI do the heavy lifting, then polish the markup yourself.

code
The output is portable, email-safe HTML. There's no proprietary block format to wrestle with, so what you see in the code view is what gets delivered.

Responsive by default

Designs are built to adapt to the recipient's device without extra work from you. The preview helps you confirm that hero images scale, columns stack on small screens, and buttons stay tappable. If something doesn't adapt the way you want, ask the AI to adjust it or tweak the HTML directly.

Previewing before you send

Before launching a campaign, give the email one final review in the preview and, where supported, send yourself a test. Pair this with a strong subject line and clean recipient targeting for the best results.

Tips for using the code view

  • Make small, deliberate edits. The preview updates as you go, so change one thing and confirm it before moving on.
  • Keep styles inline. Email clients ignore much external CSS, so inline styles render most reliably.
  • Let the AI do the heavy lifting. Use chat to build or restructure sections, then hand-tune the details in code.
  • Check both screen sizes. Toggle between desktop and mobile in the preview before you finalize.

When you're done

Once the preview looks right at every size, your email is ready to use. Attach it to a campaign or an automation, pair it with a strong subject line, and send with confidence — what you previewed is exactly what your recipients receive.