‹ HTML Lens

How to get your HTML

Five ways to get HTML you can render, frame, and embed. No coding knowledge needed. And we tell you honestly when a method has limits.

01

An AI wrote it for you Easiest

If ChatGPT, Claude, Gemini, or Cursor gave you HTML, you already have everything. Tap the copy button on the code block, then open HTML Lens or paste it into Device Frame. Done.

02

You have an .html file

From an email attachment, a download, a colleague, anywhere. Open it in HTML Lens directly, or open the file in any text editor, select all, copy, and paste into Device Frame.

03

You only have a website URL

You can copy any live page's code straight from your browser:

  1. Windows (Chrome or Edge): open the page, press Ctrl + U. The code appears in a new tab. Press Ctrl + A then Ctrl + C to copy it all.
  2. Mac (Chrome): open the page, press ⌘ + Option + U, then ⌘A and ⌘C.
  3. Mac (Safari): Safari hides this by default. Go to Settings, Advanced, and turn on "Show features for web developers." Then right-click the page and choose "Show Page Source."
  4. Paste what you copied into HTML Lens or Device Frame.
Honest limit: many modern sites keep their styling and images in separate files, so a copied page can render plain or partly broken. Simple pages usually come through well. Complex web apps usually will not. If the result looks wrong, the AI replica method just below (04) produces a cleaner copy.
04

You have an app, but its code is not HTML

iPhone apps are usually written in Swift, not HTML, so there is no HTML to copy. But your AI builder can create a faithful HTML replica of any screen. Paste this into Cursor, Claude, or ChatGPT inside your app's project:

Create a single standalone HTML file that is a pixel-faithful visual replica of the [screen name] screen of this app, at Apple design quality. Fidelity requirements: - Read the actual view code and design tokens first. Reproduce the real colors, corner radii, spacing, and type scale as exact values, not approximations. - Typography: -apple-system font stack, with the correct weights, sizes, letter-spacing, and line heights per element, matching the source. - Use the screen's real content, never placeholder text. - Match shadows, borders, and opacity values exactly. If the design system forbids shadows, use none. - Layout: mobile viewport meta, 390px design width, safe-area padding top and bottom, correct sticky or fixed behavior for any header, tab bar, or floating element, and natural momentum scrolling for the content between them. - Crisp on retina: use rem/px consistently, SVG for any icons or marks, no raster assets. - All CSS inlined in one style block. No frameworks, no external dependencies except Google Fonts only if the app truly uses a Google font. - Static interactivity only: correct pressed and selected states drawn where visible, but no working logic. Before writing, list the exact color hex values, font sizes, and spacing values you extracted from the source so I can verify them. Then output the complete file as [screen-name]-mockup.html.

Then paste the result into Device Frame for a live, scrolling phone you can embed anywhere.

Honest limit: this is a replica, not your real app. It will look right and scroll, but buttons will not run your actual features. For marketing pages and previews, that is exactly what you need.
05

You only have screenshots

No code at all? Stitch takes your screenshots, frames each one in an iPhone, and gives you a single file. That file is itself a scrolling page: your framed screens glide side by side (or stack vertically), with every image baked directly inside it. Upload it to any web hosting platform (Netlify, Vercel, GitHub Pages, wherever your site lives) or hand it to your AI builder and say "add these framed screens to my landing page."

For the cleanest result:

  1. Use full-screen captures (the whole phone screen, not a cropped section). Odd shapes get trimmed to fit the frame.
  2. Leave a little breathing room in each screen before capturing. Content jammed against the very top or bottom edge can sit under the frame's notch area.
  3. Re-exporting after changes? Save the new file under a different name so your hosting platform and browser don't serve you the stale old version.
See an example

Say you screenshot five screens of your app in the Simulator. Stitch gives you two ways out.

Your app already has a marketing site? Copy Embed Code, then paste it into your site or hand it to your AI builder: "add these framed screens under the hero."

No site yet, and you want something to text a friend or show an investor tonight? Download Website File. You get a page you can open, share, or host as-is.

Honest limit: screenshots are pictures. Each framed phone shows one frozen screen, and nothing inside it scrolls or taps. For a living, scrolling preview, use method 01 or 04 instead.