Documentation
Everything you need to use GenMockups effectively - from first capture to final export.
Quick start
GenMockups requires no account, no install, and no payment. Open the homepage, enter a URL or upload a screenshot, and export a mockup in under two minutes.
Paste a URL
or upload a screenshot
Choose a device
mobile, tablet, laptop, or desktop
Edit the canvas
text, color, annotations
Export PNG
transparent background, 2× retina
URL capture
Enter any fully-qualified URL starting with https:// or http:// and click Generate Mockup. A headless Chromium browser on the server loads the page at a 1440 px viewport, waits for network activity to settle, then takes a full-page screenshot.
The capture typically completes in 5–15 seconds. Very large pages or pages that load assets lazily may take up to 30 seconds before timing out.
Sites behind Cloudflare, login walls, or anti-bot systems will fail the automated capture. Use the screenshot upload path instead.
Screenshot upload
Click Upload Screenshot and select a PNG, JPEG, or WebP file from your device. The file is processed locally in the browser - it is never sent to or stored on the server.
Accepted formats and recommended dimensions:
Smart scan
During URL capture, a parallel request fetches the page HTML and extracts:
- og:title or <title> - pre-fills the Headline field
- og:description - pre-fills the Subheadline field
- <meta name="theme-color"> - sets the initial background color
If no theme-color tag is present, node-vibrant analyzes the screenshot and picks the most visually prominent hue. All extracted values can be edited manually in the canvas editor.
Add <meta name="theme-color" content="#YourBrandColor"> to your HTML <head> for accurate automatic color matching. Smart scan runs only on URL captures, not on uploaded screenshots.
Canvas editor
The Fabric.js canvas editor loads after a successful capture or upload. All editing is client-side and non-destructive.
Headline & Subheadline
Draggable text boxes pre-filled from smart scan. Double-click to edit the text. Drag to reposition. Use the sidebar to change font size, weight, or color.
Background color
Set by smart scan or enter a hex value manually. The color fills the entire canvas behind the device frame.
Callout annotations
Click "Add Callout" to place a draggable pointer label. Use annotations to highlight UI elements in case studies and product walkthroughs.
Device & style switcher
Change the device frame or switch between flat and angled at any time - your screenshot and text adjustments are preserved.
Device frames
Four device types × two styles = eight frame options.
Export
Click Export Image (or press Ctrl + E) to download a PNG file. The export includes the device frame, screenshot, background, and all text and annotation elements.
- Format: PNG with transparent background
- Resolution: 2× the canvas size (retina-ready)
- Filename: mockup-[device]-[style].png
- Nothing is uploaded to a server - the export runs entirely in the browser via the HTML5 Canvas API
Keyboard shortcuts
All shortcuts are active when the canvas is in focus.