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.CHECK OUT THE LIVE PREVIEW
MailView renders a three-panel email client interface inspired by modern webmail design. Every detail — the colorful avatar, the unread badge, the reply bar — is crafted to look like an actual inbox. On mobile it collapses into a focused single-email view, keeping your content front and center on every screen size.
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
MailView.tsx — drop straight into Framer as a code component, no setup needed
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.
Framer - Works with any Framer template
One-time purchase. Use on unlimited personal and client projects.
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: info@zo-e.nl
Zo-e
