You've spent three days building a beautiful landing page. You want the client to see how it looks on their iPhone before the Wednesday call. So you email them the staging URL, they try to type it into their phone from the email on their computer, fat-finger the subdomain, give up, and never actually open it on mobile. On Wednesday they approve it based on the desktop version. It launches. It breaks on every phone.
This scenario plays out in agencies and freelance engagements every week. The fix is embarrassingly simple: QR codes. A client points their camera at a code on your screen, taps the notification, and they're immediately on the staging site on their personal device. No typing, no email, no "the link didn't work." Just their real phone showing your real work.
This guide covers every workflow scenario where QR code previews save time and improve outcomes — from client calls to design reviews to cross-device QA.
Why QR Codes Beat Every Other Mobile Preview Method
Let's quickly acknowledge what developers typically do instead of QR codes — and why each approach breaks down:
| Method | Time to Preview | Works for Clients | Works on Staging | Real Device |
|---|---|---|---|---|
| Email the URL | 2–5 min | Fragile | Auth issues | Yes |
| Screenshot from browser | 1 min | Easy | Yes | No — static |
| Browser DevTools responsive mode | Instant | Needs sharing | Yes | No — simulated |
| USB cable + remote debug | 5–10 min | Not practical | Yes | Yes |
| QR Code (Mobile Viewer) | < 10 seconds | Instant scan | Yes | Yes |
The QR code approach wins on every dimension that matters in a client or team context. The only requirement is that the URL being previewed is reachable from the phone (either publicly accessible or on the same local network for dev servers).
Generating QR Codes with Mobile Viewer
Mobile Viewer's QR Code Generator is designed specifically for this workflow. Here's how to use it:
Paste your URL into Mobile Viewer
Open mobileviewer.github.io and paste any URL — a live site, a staging domain, a localhost address, or any publicly accessible link. The tool works with https://, http://, and local network addresses like 192.168.1.x:3000.
Click "QR Code" in the toolbar
The QR Code button is prominently placed in Mobile Viewer's controls. One click generates a scannable QR code encoding your exact URL. No account required, no expiry, no tracking codes appended.
Share the screen or screenshot the QR
In a live meeting: turn your laptop toward the client and ask them to scan. In a recorded Loom or video call: screenshare and hold the code still for 3 seconds. In a document: screenshot the QR and paste it directly into Notion, Figma, Google Docs, or your email.
Client scans and sees the live site
Any modern smartphone camera app will detect the QR code without a separate app. A notification pops up, the client taps it, and their Safari or Chrome opens the URL on their actual device, with their actual screen size, their actual browser engine. That's a real mobile preview.
8 Workflows Where QR Previews Save the Day
The obvious use case is showing a client a website on their phone. But QR previews are valuable in a much wider range of situations:
Client Approval Calls
Show clients the staging site on their own device during a call. They experience real tap targets, real fonts, real scroll behavior — not a screenshot.
Design Review Sessions
Designers reviewing their Figma prototypes or live implementations can scan to see the design at their device's exact resolution and see how fonts render on OLED screens.
Cross-Device QA
Pass a QR code to the iOS tester, the Android tester, and the tablet tester simultaneously. All three can load the same build instantly on their devices.
Handoff Documentation
Embed a QR code in your project handoff doc or Notion page. Stakeholders who open the doc weeks later can still scan to the live site instantly.
Conference & Presentation
Presenting at a meetup or to a board? Display a QR code on your slide so the room can pull up the demo on their own phones without you having to type the URL.
Dev-to-Phone Handoff
Skip USB cable debugging for quick visual checks. Scan your localhost address (on the same network) from your phone to spot rendering issues before committing code.
Async Feedback Loops
Record a Loom showing the QR code. Remote team members or clients can pause the video, scan the code, and explore the build independently.
Pre-Launch Sanity Check
15 minutes before a launch, send a QR code to your entire team in Slack. A dozen people can check the site on their personal devices in under 2 minutes.
Real Scenario Walkthroughs
Agency: Client Review Call for an E-commerce Redesign
You've built the new product page on a staging server at staging.client-store.com/products/featured. The client wants to see it before approving the mobile layout. During the Zoom call, you open Mobile Viewer, paste the staging URL, and click QR Code. You share your screen.
The client opens their phone camera, points it at the QR on their screen, taps the link, and sees the product page on their own iPhone 15. They can scroll, zoom in on the product images, and tap the Add to Cart button — experiencing it exactly as their customers will. The review takes 8 minutes instead of 45.
Freelancer: Testing Localhost on a Real Device
You're working on a portfolio site at localhost:5173 and want to check it on your iPhone without deploying to staging. Open Mobile Viewer, switch to the local network URL (192.168.1.x:5173 — your machine's local IP + dev server port), generate a QR code, and scan.
Your phone and laptop are on the same Wi-Fi network, so the scan opens your dev server directly in Mobile Safari. You're now seeing real WebKit rendering, real safe area insets, and real touch behavior on a live build without a single deployment step.
In-House Team: Async QA Before a Feature Launch
Your team is distributed across three time zones. You push a feature to the staging branch at 2pm. You want QA feedback before the 9am merge window. Post a screenshot of the QR code in your Slack channel with a note: "Scan to test the new checkout flow on your device and leave feedback in this thread."
Over the next 6 hours, teammates in London, São Paulo, and Singapore each scan, test on their devices (mix of iOS and Android), and post feedback. By 9am you have real-device feedback from multiple operating systems without scheduling a single meeting.
Tips and Best Practices
Testing Localhost with QR Codes
For localhost URLs to work when scanned on a phone, both devices must be on the same Wi-Fi network. Use your machine's local IP address instead of localhost:
- macOS: System Preferences → Network → your Wi-Fi connection → IP Address. Typically
192.168.1.x - Windows: Run
ipconfigin Command Prompt. Look for IPv4 Address under your Wi-Fi adapter - Replace
localhostwith that IP in your URL:http://192.168.1.42:3000 - Make sure your dev server is bound to
0.0.0.0(not just127.0.0.1). For Vite:vite --host. For Next.js: already handles this. For webpack-dev-server: add--host 0.0.0.0
If your phone can't reach your dev server via the local IP, check your machine's firewall settings. On macOS, System Preferences → Security → Firewall. On Windows, Windows Defender Firewall → Allow an app — add your Node/Python/etc. executable. The dev server port must be allowed through.
QR Codes for Password-Protected Staging
QR codes encode a URL, not credentials. If your staging site is behind HTTP Basic Auth or a login page, clients will still need to enter credentials after scanning. Options for smoother previews:
- Create a temporary shareable link via Netlify, Vercel, or GitHub Pages with a preview-only URL that doesn't require auth
- Use Vercel's password-protected preview deployments and share the password verbally during the call
- Include credentials in the URL itself if your staging uses HTTP Basic Auth:
https://user:pass@staging.example.com— note this is insecure and appropriate only for non-sensitive reviews
Embedding QR Codes in Deliverables
A QR code in a static document or presentation will always point to wherever the URL was pointing at the time of generation. This makes them excellent for:
- Figma prototype links: generate a QR for the Figma preview URL and embed it in the component spec page
- Design handoff PDFs: include a QR pointing to the live staging build alongside the spec
- Proposal decks: QR code to a demo site so prospects can scan during the pitch
- Test reports: include a QR to the specific page under test so reviewers can verify fixes directly
Screenshot the QR code generated by Mobile Viewer and drop it into your project's README.md. Any developer who clones the repo can instantly scan to the live demo on their phone — no URL copying needed.
Combining QR Previews with the Simulator
QR previews and the device simulator complement each other in a complete testing workflow. Use the simulator first to catch layout bugs without needing a device, then use QR codes for the final real-device validation:
- During development: Use Mobile Viewer's Responsive Checker to iterate on the layout at iPhone 15, Galaxy S23, and tablet viewports
- Before review: Use the Multi-Device Preview to screenshot your site across 4 viewports simultaneously as a reference image
- During client call: Generate a QR code and have the client scan to experience the site on their real device
- After review: Use QR codes to distribute the updated staging URL to all QA reviewers across iOS and Android devices
This workflow catches the maximum number of issues with the minimum amount of back-and-forth. The simulator handles 90% of layout testing, and QR-based real-device testing catches the remaining 10% that only real hardware exposes.
For deeper guidance on the full testing workflow, see our article on how to test responsive design without buying 20 phones.