# Website mockup generator > 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. 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. ## 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 1. Enter the address of a public web page. It must start with http:// or https://. 2. Choose a frame: Browser window, Laptop or Phone. 3. Pick a background and set the padding. Add an extra wait if the page loads late. 4. Choose pixel density 1x or 2x, then start the mockup and wait for the result. 5. Download the PNG. When you are signed in, the result also shows the credits charged. ## 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. ## Screenshot mockup, frame and background A screenshot mockup puts a picture of a page inside a frame. This tool works as a simple screenshot frame maker for web pages: it captures the page, adds the frame and a background, and gives you one PNG. People also call this kind of tool a device frame generator, although the frames here are drawn by us and are not photos of real devices. If you want to beautify screenshot output for a portfolio, the gradient backgrounds and padding do most of the work. As a screenshot beautifier it is limited to web pages by address, because it cannot take an image you upload. ## 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. ### Is this an iPhone or MacBook mockup generator? Not in the strict sense. The Phone and Laptop frames are generic shapes drawn in HTML and CSS. As an iphone mockup generator or macbook mockup generator it will not show a branded device, only a phone-shaped or laptop-shaped frame around your page. ## Related - [Website screenshot tool](https://aiipworld.com/tools/website-screenshot/index.md) - [Full page screenshot](https://aiipworld.com/tools/full-page-screenshot/index.md) - [HTML to image](https://aiipworld.com/tools/html-to-image/index.md) - [OG image generator](https://aiipworld.com/tools/og-image-generator/index.md) - [Screenshot API](https://aiipworld.com/screenshot-api/index.md) - [URL to PDF](https://aiipworld.com/tools/url-to-pdf/index.md) - [App Store Screenshot Generator](https://aiipworld.com/tools/app-store-screenshot-generator/index.md) Page: https://aiipworld.com/tools/website-mockup-generator/