How to Mock Up Pages Behind a Login (Dashboards, Admin Panels, Staging)

For most SaaS products, the homepage is not the product. The product is the dashboard, the editor, the report - and all of it sits behind a login. That is exactly what buyers want to see in your launch images, your deck, and your sales follow-ups.

URL-based screenshot tools see what a logged-out visitor sees, so they cannot reach those screens - and you should never hand your credentials to a tool just to get a picture. Here is the workflow that works instead.

The approach: capture yourself, frame with a tool

1. You take the screenshot, in your own browser, while logged in.
2. The mockup tool takes the image and does the framing, background, sizing, and export.

Your credentials and session never leave your machine. The tool only ever sees a picture.

Step 1: Prepare the screen

Before you capture, make the screen worth showing:

• Use a demo account with realistic data. Empty states and "Test User 1" undermine the image. Seed believable names, numbers, and dates.
• Remove private data. No real customer names, emails, revenue, or API keys. Treat every screenshot as public, because it will be.
• Close the noise. Dismiss notifications, onboarding tooltips, chat widgets, and banners.
• Pick the right moment. Show the screen mid-task, with the key feature visible, rather than a blank starting state.

Step 2: Capture at the right size

The screenshot needs to match the device frame you will put it in.

For a laptop mockup:

• Size the browser window to about 1440 × 900 (a common laptop viewport).
• Use your browser's DevTools device toolbar with a responsive size of 1440 × 900 and a device pixel ratio of 2 for a crisp result.
• Capture the viewport, not the full page - device frames show one screen.

For a phone mockup:

• In DevTools, choose an iPhone preset (or about 390 px wide) with a pixel ratio of 3.
• Capture the viewport.

Chrome's DevTools menu includes "Capture screenshot", which saves exactly the emulated viewport. Built-in OS screenshots also work if the window is sized correctly.

Step 3: Turn it into a mockup

1. Open the screenshot to mockup tool (or Upload screenshot in the dashboard).
2. Upload your PNG, JPG, or WebP (up to 12 MB).
3. Choose the device that matches how you captured it - laptop or phone.
4. Pick a background, padding, and canvas size: Open Graph, X, Product Hunt, slide, square, portrait, or story.
5. Download the HD image or create a share link.

Uploads cost fewer credits than a URL capture, since there is no page to render, and styling and HD downloads are always included.

Staging and preview environments

Staging sites are often public but password-protected, or only reachable on a VPN. The same rule applies: if a public visitor cannot open the URL, capture it yourself and upload the image. Do not loosen access controls just to take a screenshot.

If your preview deployment is publicly reachable (for example a branch preview URL), you can paste it like any other URL - just make sure the page shows production-like content.

Privacy checklist before sharing

• Demo account, not a real customer's workspace
• No real emails, names, payment details, or keys visible
• Browser extensions, bookmarks bar, and notifications hidden
• URL bar does not reveal internal hostnames you would rather keep private
• Share links set to private unless you mean to publish them

FAQ

Can a mockup tool log in to my app for me?

It should not need to. Sharing credentials with a third-party tool is a security risk. Capture the screen yourself and upload the image.

What resolution should a dashboard screenshot be?

For a laptop frame, capture a 1440 × 900 viewport at 2x (2880 × 1800 pixels). For a phone, about 390 px wide at 3x.

Can I blur sensitive data instead of using a demo account?

You can, but blurred areas draw attention and look unfinished in marketing images. A demo account with realistic data looks better and is safer.

Related reading: SaaS launch screenshots that convert · Website mockups for pitch decks