Website mockup generator
The website mockup generator puts a screenshot of a public web page inside a browser window, a laptop or a phone frame. You get one PNG image that you can use in a portfolio, a case study or a client preview. Anonymous use needs a human check, and signed-in users pay with credits.
- Only the first screen of the page is captured. Content further down the page does not appear in the mockup.
- Enter a public address only. You cannot upload your own screenshot, and a page behind a login shows the login screen.
- The page image is compressed before it is framed, so small text can look soft.
A website mockup takes 2 renders: one to capture the page, one to place it in the frame. Signed in, that costs 2 credits in total. Without an account, both count toward the free limits and the human check runs twice.
The page is captured at the top of the page only, then placed in a frame drawn with plain CSS. The capture is compressed to fit the free tool's size limit.
Complete the human check to enable the button.
Result
Your image will appear here.
The free web tool captures at most 2000px of height. For taller captures, use the API.
Retention: web-tool results are deleted after 10 minutes and no history is kept. API results are kept 1 day on the free plan and 7 days on Starter and Pro (30 days on Business).
No account needed
10 per minute and 50 per day for free.
Real browser rendering
Headless Chromium, the same engine as the API.
Deleted automatically
Web tool results are removed after 10 minutes.
Privacy: what you submit is used only to make this file. The working copy is deleted when the job ends, the result after 10 minutes. See the privacy policy.
Do this from your code
The same request, built from the input and options above. Create an account to get an API key.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Batches
The web tool handles 1 document at a time. The API takes one request per document, so you can script as many as your plan allows.
More control
Whole-page capture (full_page), clipping to a region, request headers and a custom user agent are API options. See the docs.
Retention
Web-tool results are kept 10 minutes; free API results 1 day; Starter and Pro results 7 days; Business 30 days. The web tool allows 10 conversions per minute and 50 per day per visitor.
In one sentence
A free online tool that places a screenshot of a public web page inside a browser window, laptop or phone frame and saves one PNG.
Key facts
- Input: a public http or https address; only the first screen of the page is captured.
- Frames are drawn in CSS by us; backgrounds: Ocean, Sunset and Mint gradients, Slate, White or Transparent.
- Output: one PNG at 1x or 2x pixel density.
- Free without an account: each mockup uses two renders, and both count toward the 10 per minute and 50 per day per visitor limits, with the human check run twice. Signed in, a mockup costs 2 credits (2 renders).
- Files are deleted automatically: 10 minutes after conversion without an account, 1 day with a free account.
- Developers can run the same render with POST https://api.aiipworld.com/v1/render and an API key (see the screenshot API page).
How it works
- Enter the address of a public web page. It must start with http:// or https://.
- Choose a frame: Browser window, Laptop or Phone.
- Pick a background and set the padding. Add an extra wait if the page loads late.
- Choose pixel density 1x or 2x, then start the mockup and wait for the result.
- Download the PNG. When you are signed in, the result also shows the credits charged.
Example output
How to make a website mockup
A website mockup shows a page inside a device frame, so a viewer sees the page the way it would look on a screen. The website mockup generator builds this in two steps, so you do not need design software.
Start by entering the address of a public page. The tool loads the page in a headless browser on our render server. JavaScript runs during the capture by default, so a page that builds its content with scripts appears in the image.
Use the extra wait when the page fills in after it first loads. The wait is short, and it gives the page time to finish drawing before the capture.
What the three frames show
The Browser window frame captures the page at 1280 x 800 pixels. The address bar shows the host name of the URL, so the viewer can see where the page comes from.
The Laptop frame also captures the page at 1280 x 800 pixels. The screen is shown at 75% inside a laptop-shaped bezel and base.
The Phone frame captures the page at 390 x 844 pixels and places it inside a rounded phone bezel. Use it for pages that you want to show as a mobile layout.
Why it costs two renders
A mockup is made in two renders. The first render captures your page as a JPEG at quality 85. Your browser then compresses that image so it fits the free HTML limit of 256 KB, and places it inside the frame. The second render turns that HTML into the PNG you download.
Each render is charged. When you are signed in, one mockup uses 2 renders, which costs 2 credits.
Without an account, both renders count toward the free limits, and the human check runs twice. When you are signed in, the result shows the credits charged.
Backgrounds, padding and size
Choose one background: Ocean, Sunset or Mint gradients, Slate, White or Transparent. A transparent background gives you a PNG with no backdrop, so you can place the device on your own design.
Padding sets the space around the device. Use more padding when you want the frame to sit in the middle of a larger image with room around it.
Pixel density is 1x or 2x. Density 2x creates more pixels, so the file is larger, and it suits images that you will show at full size.
The compression step means fine text can look soft. Plan for that when the page has small type that you want readers to see clearly.
Pages that need a login
The tool loads the page as a visitor who is not signed in. A page behind a login shows its login screen, not the content behind it.
The address must be public. Private networks, localhost and cloud metadata addresses are blocked, so a page on your own computer cannot be captured.
If you need a mockup of a page that normally needs a login, use a public demo or staging page that you have permission to show.
What people use mockups for
Designers use mockups in portfolios to show a finished page inside a device frame.
A case study can use a mockup to show the result of a project next to the text that describes it.
A mockup can go into a social post or a client preview, so the client sees the page in context before it goes live.
Show only pages that you own or have permission to show. A mockup should show the real page, not an edited copy made to look like another site.
Website mockup generator from code
The same two steps work through the API. Send a screenshot request with the page address to get the first image. Then send a screenshot request with HTML that places that image inside a frame, to get the PNG.
Send your API key as Authorization: Bearer followed by the key. Requests are asynchronous: POST to /v1/render returns 202 with a job_id. Poll GET /v1/jobs/:id until the status is succeeded, failed or timeout.
When the job succeeds, download the file from the download_url. That link is short-lived, so download the file soon after it appears. Credits for failed and timed-out jobs are returned, and webhooks are not available yet, so polling is the only way to know when a job finishes.
Choosing a frame for your mockup
Pick the frame that fits the page. A browser mockup generator result in the Browser window frame suits a website, while the Phone frame suits a mobile layout. The Phone frame captures the page at phone size, so its first screen can differ from the desktop frames.
Before you use a mockup, check that the page is public and that the first screen shows what you want to present. Download the PNG and keep a copy, because results are deleted after 10 minutes.
A mockup screenshot is one image, so you can reuse it in a proposal, a post or a slide without another step.
Questions
How do I put a website screenshot in a browser frame?
Enter a public URL, choose the Browser window frame, pick a background and start the mockup. The tool captures the page and places it in a browser window, with the host name of the URL in the address bar.
Why does it use two renders?
The first render captures the page as an image. The second render builds the frame around that image and turns it into a PNG. Each render is counted separately, so one mockup uses 2 renders.
How many credits does it cost?
When you are signed in, one mockup costs 2 credits. Without an account, both renders count toward the free limits and the human check runs twice. When you are signed in, the result shows the credits charged.
Can I capture the whole page?
No. The mockup captures only the first screen of the page, so content lower down does not appear in the image. The frame shows the top of the page as a visitor first sees it.
Can I upload my own screenshot?
No. The tool takes a public web address and captures the page itself. It does not accept uploaded images, so you cannot frame a screenshot that you took on your own computer.
Are the frames from a device maker?
No. The frames are drawn in plain HTML and CSS by us. They do not use device photos, brand images or third-party artwork.
Why is the screenshot slightly soft?
The page is saved as a JPEG first, and the browser then compresses that image to fit the free HTML limit of 256 KB. Small text can look less sharp as a result, so use larger type on the page when you can.
Can I mock up a page behind a login?
Not directly. The tool loads the page as a visitor who is not signed in, so a login screen is what appears in the frame. Use a public page that you have permission to show.
How long is the result kept?
Results are deleted after 10 minutes. No history is kept, so download the PNG as soon as the result appears.
Is the tool free?
You can use the free tool without an account, and anonymous use needs a human check. Signed-in users use credits instead. We add no watermark to the mockup.
Can I build the same mockup with the API?
Yes. You can send the same two screenshot steps through the API, one request for the page and one for the framed HTML. Each step is an asynchronous job, so you poll it until it succeeds.
What size is the output image?
The output is a PNG. Its size depends on the frame, the padding and the pixel density you choose. Density 2x produces a larger file than density 1x.
What is a webpage mockup?
A webpage mockup shows a public page inside a device or browser frame, so the page looks as if it sits on a screen. This tool makes one PNG from a web address. You can use it for a portfolio, a case study or a client preview.
Can I make a web mockup for a client without design software?
Yes. Enter the address of a public page, choose a frame and a background, and download the PNG. No design software is needed. The tool captures only the first screen, so the top of the page is what your client sees in the image.
Can I put a mockup screenshot in a case study?
Yes. Save the PNG and place it in your case study or portfolio. Choose the Browser window frame for a desktop look, the Laptop frame for a laptop look or the Phone frame for a mobile page. The result is one image, so the layout stays the same wherever you use it.
Need this in your app or in bulk?
This tool runs on the render API, so the same image is one HTTP request from your code. A free account includes 100 credits a month.