Live Preview — In-Context Website Mockups
Let visitors explore your portfolio sites without ever leaving your page.
Live Preview is a self-contained code component that showcases live, fully interactive websites inside realistic device mockups — right inside an overlay on your own page. Instead of redirecting visitors when they click a portfolio item, the site opens in a polished iPhone, tablet, or laptop frame, keeping them immersed in your experience.
Key features:
• Real, interactive embeds, loads any URL in a live iframe so visitors can scroll and click through the actual work, not a static screenshot.
• Automatic device detection — opens each site in the best-fitting mockup, with manual iPhone / Tablet / Laptop toggles in the header.
• Pixel-perfect scaling — iframes render at true viewport widths (390/820/1440px) and are CSS-scaled to fit the screen, with no zoomed-in crops.
• Graceful fallback — blocked sites show a clean message with an “Open in new tab” link. • Fully themeable and CMS-ready as a drop-in trigger over existing cards.
How it works:
CMS as the source of truth — each project is a Collection entry with a name, thumbnail, and live URL, repeated through a Collection List.
URL binding — the URL field passes into Live Preview on the card template, so every new entry instantly gets its own working preview. Connect it once.
Invisible trigger — a transparent layer over each card opens the overlay with that item’s URL instead of navigating away.
Smart rendering — on open it detects the right device frame and loads the site at its true viewport width, scaled to fit the mockup.
Switch and explore — toggle iPhone, tablet, and laptop views, interact with the real site, or open externally.
A single component, wired once to your CMS, that turns every published project into an immersive, on-brand preview — without sending visitors off-site.
Live Preview — In-Context Website Mockups
Let visitors explore your portfolio sites without ever leaving your page.
Live Preview is a self-contained code component that showcases live, fully interactive websites inside realistic device mockups — right inside an overlay on your own page. Instead of redirecting visitors when they click a portfolio item, the site opens in a polished iPhone, tablet, or laptop frame, keeping them immersed in your experience.
Key features:
• Real, interactive embeds, loads any URL in a live iframe so visitors can scroll and click through the actual work, not a static screenshot.
• Automatic device detection — opens each site in the best-fitting mockup, with manual iPhone / Tablet / Laptop toggles in the header.
• Pixel-perfect scaling — iframes render at true viewport widths (390/820/1440px) and are CSS-scaled to fit the screen, with no zoomed-in crops.
• Graceful fallback — blocked sites show a clean message with an “Open in new tab” link. • Fully themeable and CMS-ready as a drop-in trigger over existing cards.
How it works:
CMS as the source of truth — each project is a Collection entry with a name, thumbnail, and live URL, repeated through a Collection List.
URL binding — the URL field passes into Live Preview on the card template, so every new entry instantly gets its own working preview. Connect it once.
Invisible trigger — a transparent layer over each card opens the overlay with that item’s URL instead of navigating away.
Smart rendering — on open it detects the right device frame and loads the site at its true viewport width, scaled to fit the mockup.
Switch and explore — toggle iPhone, tablet, and laptop views, interact with the real site, or open externally.
A single component, wired once to your CMS, that turns every published project into an immersive, on-brand preview — without sending visitors off-site.