An email mockup generator for newsletter and campaign screenshots.

Desktop and mobile email mockups

For a desktop view, open the email in a browser or web-based preview, capture the window, and use a Safari or Chrome frame in light or dark mode. For a mobile view, capture the email from your phone or a mobile preview and use an iPhone 17 or Google Pixel frame. Each canvas uses one frame type, so make the desktop and mobile versions as two images, or use a duo layout to put two captures in the same frame side by side, such as the light and dark versions of the same email.

Match the screenshot to the frame. A desktop capture squeezed into a phone frame shows a tiny, unreadable email and tells the viewer the mobile version was never checked. If you only have the desktop version, use only the browser frame.

• Browser frames: Safari and Chrome, light and dark
• Phone frames: iPhone 17 family, Google Pixel 7 Pro, Nothing Phone
• Duo and trio layouts: two or three captures in matching frames on one canvas

Capture the email cleanly

The mockup can only be as good as the capture. Most email platforms have a preview mode with desktop and mobile widths; a test send to yourself gives the real rendering in a real client; the “view in browser” link gives a clean desktop version. In MockupX you can capture a browser tab or window straight from the editor, or scan a QR code to send a screenshot from your phone in a private 10-minute session.

Long newsletters do not fit a single frame. Choose what to show: the first screen (logo, headline, first call to action) for an approval or sign-up page, or one mid-email section, cropped with the editor's 4:5 or 9:16 crop, for a post about a specific feature.

• Remove subscriber names, email addresses and personal merge fields
• Hide unsubscribe tokens and tracking parameters visible in links or the address bar
• Close unrelated tabs and turn off notifications before capturing
• On a phone, capture with the email scrolled to the section you want to show

Separate the inbox promise from the email body

Sender name, subject line and preview text earn the open; the body earns the click. When the review is about the open, capture the inbox row. When it is about the design, capture the opened message and keep the first screen (logo, headline, first call to action) inside the visible frame.

For a sign-up page, the opened email usually works better: visitors want to know what they will receive, so show a real recent issue with its headline readable at the size the page displays it.

Canvas sizes by destination

Pick the canvas for where the mockup will be shown, not for the email. The email's own width stays the same; only the frame, background and output size change.

Product screenshots inside an email

A second job people search for is the reverse: an image of the product to put inside an email campaign. Here the mockup is an image asset in the email, not the email itself. Show one useful product moment at a width the email layout can display, which is commonly around 600 pixels on desktop (a convention, not a rule).

Worked example: a newsletter introducing a new calendar filter uses one 1200 × 800 custom canvas, a frameless screenshot of the filter panel with 8% padding and a soft background, and no headline on the image. The email's own heading and button carry the message.

• Export at twice the display width for sharp results on high-density screens: a 600 px slot needs a 1200 px wide image, which a custom canvas gives you on the free plan
• Use JPEG for photographic backgrounds to keep the email light; PNG for flat interface shots
• Add alt text and the real link in your email tool, since an exported image carries neither
• Keep the call to action as live text or a button in the email, not only inside the image

Mockups for client and stakeholder review

An email preview is useful before development, as long as reviewers know what they are looking at. Label it as a design concept or a screenshot of a test send, and list what has not been tested yet. Ask reviewers specific questions, such as whether the headline is clear and the first call to action visible, rather than “any thoughts?”

• Name the file with the campaign, version and status, such as spring-sale-email-v3-concept.png
• State which clients the screenshot came from, or that it is a design file
• Note what still needs testing: dark mode, Outlook, images off

What a mockup cannot test

A static image cannot show how Outlook, Gmail or Apple Mail will render your HTML, how dark mode will invert colors, or what happens when images are blocked. Use the mockup to agree on content and hierarchy, then test the coded email in your email platform's preview or a rendering tool before sending. Free MockupX exports carry a small watermark; Pro removes it.

The same applies to deliverability, link tracking and personalization. A beautiful mockup of an email that lands in spam is still an email that lands in spam.