Website Mockup

How to use Website Mockup

A complete guide to all features and controls. Click any image to view it full size.

💻
Interface Overview
The full extension UI in different themes and modes
01
💡

Quick start: Navigate to any website in Chrome, then click the Website Mockup extension icon — or right-click and choose “Mockup this page”. The editor opens as a full-screen overlay.

Dark theme, pinned sidebar Dark theme, pinned sidebar
Dark Theme
Sidebar Pinned Mode
Full interface with the settings panel open and anchored to the left. All controls are visible and accessible.
default
Dark theme, collapsed sidebar Dark theme, collapsed sidebar
Dark Theme
Sidebar Collapsed
Collapse the sidebar to maximize your canvas area. A minimal icon strip remains for quick access.
compact view
Dark landscape with safe areas Dark landscape with safe areas
Settings Active
Landscape + Safe Areas + Scrollbar
Landscape rotation with side padding (camera cutout safe area), top status bar, and scrollbar all enabled.
3 settings on
Dark landscape clean Light landscape clean
Settings Inactive
Landscape, Clean Mode
Landscape device with no side padding, no top bar, no scrollbar — ideal for clean marketing shots.
clean output
💾
Topbar & PNG Export
Collapse the sidebar, save or copy your mockup as PNG, and access Rate Us, Share & Help
02
Topbar dark theme Topbar light theme
Topbar
Topbar — All Controls
Left side: the hamburger icon collapses or pins the sidebar; the theme icon toggles light/dark mode; Save exports your mockup as a PNG file to disk; Copy copies the PNG directly to your clipboard.
Right side: branding link, Rate us (Chrome Web Store), Share, and a Help (?) icon.
2 export actions
📱
Device Selector
20+ devices across phones, tablets, and desktop
04
ℹ️

CSS Viewport tooltip: Hover over any device tile to see a popup showing the device’s logical screen dimensions (CSS viewport size) — useful for designing to exact breakpoints.

Device selector section Device selector section
Select Device
Device Info Panel
Shows the active device with its CSS Width, Height, Pixel Ratio, and native Resolution at a glance.
4 properties
Android smartphones dropdown Android smartphones dropdown
Device Dropdown
Android Smartphones
Huawei P10, Pixel 5, 8, 8 Pro, 9 Pro, 9 Pro XL, Galaxy S21 Ultra, Galaxy S25 Ultra.
8 devices
Apple iPhones dropdown with viewport popup Apple iPhones dropdown
Device Dropdown
Apple Smartphones + Viewport Tooltip
Full iPhone 15–16 lineup incl. Air. Hover any tile to see the CSS viewport dimensions popup.
9 devices viewport tooltip
Tablets and desktop dropdown Tablets and desktop dropdown
Device Dropdown
Tablets & Desktop
iPad mini 2024, iPad Pro 11/13 (M5), MacBook Pro M4, Microsoft Surface 13 & 15.
6 devices
⚙️
Display Settings
Frame color and device rendering toggles
05
Frame color section Frame color section
Frame Color
Device Shell Colors
Pick from 5 curated frame colors: titanium, lavender, teal, rose, and silver. The active color gets a ring highlight.
5 presets
Settings display toggles Settings display toggles
Settings
Four Display Toggles
Left to right: Rotate (portrait/landscape) · Status Bar · Scrollbar · Safe Area padding. Rotate is disabled for Desktop devices. Safe Area is hidden in portrait or on devices without floating cameras.
4 toggles
🎨
Background & Zoom
Canvas background options and zoom control
06
⚠️

Note: The Background control is disabled in Frame export mode, since Frame exports only the device with a transparent background.

Background section Background section
Background
Background Selector
Click the dropdown to expand the color picker. Shows the current selection with a color swatch.
color menu
Background color picker expanded Background color picker expanded
Background
Full Color Picker
7 solid presets · 4 gradient presets · Custom field (HEX / RGB / HSL) with eyedropper. Active selection is ringed.
custom colors
Zoom device section Zoom device section
Zoom Device
Canvas Zoom Control
Drag the slider to zoom out (down to 30%). Click the percentage button on the left to instantly reset to 100%.
zoom-out only
📤
Export Modes
Three canvas rendering modes for different use cases
07
Export mode section Export mode section
Export Mode
Mode Selector
Switch between Full, Instagram, and Frame modes. Each changes what gets exported when you hit Save or Copy.
3 export modes
Export full size result Export full size result
Export · Full
Full Size Canvas
Exports the complete canvas with device + background fill. Perfect for website banners, landing pages, and general social media.
full canvas
Export Instagram 9:16 Export Instagram 9:16
Export · Instagram
9:16 Stories Format
Output is cropped to a 9:16 aspect ratio, ready to upload directly to Instagram Stories, Reels, TikTok, or YouTube Shorts.
9:16 ratio
Export frame transparent Export frame transparent
Export · Frame
Device Only + Transparent BG
The background is omitted. You get just the device shell with your website screenshot — ideal for Figma, Sketch, and presentations.
transparent PNG