Process
From URL to mockup
in three steps
No design skills required. No account. No watermark. Paste a URL and export a polished device mockup in under two minutes.
Capture
Enter a URL or upload a screenshot
Type any public web address and press Generate. GenMockups spins up a headless browser, loads the page at 1440 px, waits for images to settle, then takes a full-page snapshot. If a site uses bot-detection or login walls, take the screenshot yourself and upload a PNG or JPEG - the rest of the workflow is identical.
GoFullPage (Chrome) and Firefox's built-in screenshot tool are the fastest ways to capture full-page screenshots of sites that block automated browsers.
Analyse
Brand color and headline extraction
While the screenshot processes, a lightweight pass fetches the page HTML and reads three things: og:title for the headline, og:description for the sub-headline, and theme-color for the accent. No theme-color? node-vibrant analyses the screenshot and pulls the dominant hue. Everything is editable in the canvas.
Add <meta name="theme-color" content="#yourcolor"> to your page for the most accurate automatic color matching.
Composite
Fabric.js renders the final mockup
Fabric.js takes the screenshot and drops it inside the device frame SVG at exact screen coordinates - no letterboxing, no pixel drift. Drag the headline anywhere, resize it, or replace the copy. Add callout annotation pins to highlight UI elements. Hit Export for a full-resolution transparent-background PNG at 2× retina quality.
Use the angled style for social posts and hero images. Use flat for documentation, App Store listings, and anywhere you need precision.
Ready to try it?
Paste in a URL and have your first export-ready mockup in under two minutes. Free forever.