MailView

MailView is a Framer code component that renders a pixel-perfect email client mockup.

MailView - Email Client Mockup for Framer

Show your product inside an inbox people instantly recognize.MailView is a Framer code component that renders a pixel-perfect email client mockup. Complete with sidebar, inbox list, and open email view. Drop it into any landing page, portfolio, or SaaS website to showcase newsletters, onboarding emails, or transactional messages in a context that feels real.

Features

• Fully editable via Framer's property panel — no coding required

• Customize the open email: sender name, email address, subject, date, and body text

• Upload an image as the email body — perfect for showcasing newsletter designs

• Separate mobile image — upload a portrait-cropped version for small screens, falls back to desktop image if not set

• All 5 inbox rows are editable — sender, subject, preview, time, avatar initials and color

• Editable topbar avatar — set your own initials and color

• Responsive layout — full three-panel on desktop, condensed on tablet, single email view on mobile

• No external dependencies — one file, paste and go

What's included

MailView.tsx — drop straight into Framer as a code component, no setup needed

Who it's for

Designers and founders building landing pages, email marketing sites, or SaaS product pages in Framer who want to showcase email content in a believable, polished way — without spending hours in Figma.

Requirements

Framer - Works with any Framer template

License

One-time purchase. Use on unlimited personal and client projects.

Refund Policy

Due to the digital nature of this product, all sales are final. Once the file has been downloaded, refunds are not offered.However, if you experience a technical issue that prevents the component from working as described, please reach out within 14 days of purchase and I will do my best to resolve it. If the issue cannot be fixed, a full refund will be provided. For questions, contact: [email protected]