Screenshot to code

Take a screenshot of a page you can see in the browser and IMG2HTML writes the HTML and Tailwind CSS that rebuilds it: navigation, headings, buttons, lists and code blocks as real, editable markup. Below is one real run on the home page of upload-post.com, with the output exactly as it came back.

Convert a screenshot Capture from Chrome

A screenshot of a live landing page

Screenshot of the Upload-Post home page: navigation with dropdowns, the headline Social Media API, One Call, Every Platform, rows of social network icons, a terminal window with a curl command and a Create your free account button
Input: Browser screenshot of upload-post.com (PNG, 1280 x 800)
The generated HTML rendered in a browser: the same navigation, two-colour headline, social icons, the terminal with the curl command, feature list, call to action button and integration chips
Output: the generated HTML rendered in Chrome at 1280px wide, unedited. 463 lines of HTML with Tailwind CSS, returned in 27 seconds.

What it got right

  • The navigation, with the dropdown carets, the dark-mode button, the language picker and the Try for free button.
  • The two-colour headline, the green counter badge, the feature list with its small icons and the Create your free account button.
  • The terminal window with all eight lines of the curl command, as real text you can edit, not an image.
  • Recognisable brand icons from Font Awesome for TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV and Google.

What to fix by hand

  • Brands that Font Awesome 5 does not have were approximated: X shows the old Twitter bird, Threads an @ sign and Bluesky a cloud. Drop in the official SVGs.
  • The user avatars and the flag became placehold.co placeholders (U1, U2, U3).
  • The icons wrap into three rows instead of two and the hero sits a little lower than in the original, so spacing needs a pass.
upload-post-screenshot.html (first lines of the body)
 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">
Open the full generated page (463 lines)

Looking for screenshot-to-code?

abi/screenshot-to-code is a popular open-source project: you run it yourself with your own OpenAI or Anthropic API key (its author also sells a hosted version). IMG2HTML does the same job as a ready-to-use service: nothing to install, no API key, an editor to fix the result by prompt, and export to Tailwind HTML, React, Vue or Angular. Self-host the open-source repo if you want full control; use IMG2HTML if you want the HTML in 30 seconds from your browser or the Chrome extension.

Taking a screenshot that converts well

The model rebuilds everything in the image, so the cleaner the capture, the less you delete afterwards. The Upload-Post screenshot above was taken at 1280 x 800 after closing the cookie banner; with the banner open, the banner would have been rebuilt too.

  • Chrome or Edge: open DevTools (F12), press Ctrl+Shift+P (Cmd+Shift+P on a Mac) and run Capture screenshot for the visible area or Capture node screenshot after selecting one section in the Elements panel. No browser bars, no scaling.
  • macOS: Cmd+Shift+4 and drag over the part you want, or press Space to capture one window.
  • Windows: Win+Shift+S opens the snipping bar; the capture goes to the clipboard and can be saved from the notification.

Keep the browser at 100% zoom and a normal desktop width (1280 to 1440 pixels). Close cookie banners, chat bubbles and popups first. If a page is long, capture the hero, the feature grid and the footer as separate images.

From screenshot to a working page

  1. Upload the screenshot. The conversion took 27 seconds for this example.
  2. Check the preview against the original. In this run the layout, the copy and the curl command were right; the X, Threads and Bluesky icons needed replacing.
  3. Ask the editor for fixes in plain words, or edit the code. Then swap the placeholders (the avatars and the flag here) for your files.
  4. Export as Tailwind HTML, or switch to React or Vue if the page is going into an app.

Screenshots of apps and designs

A screenshot does not have to come from a website. Screens of desktop apps, admin panels and email templates convert the same way. For mobile screens and mockups, see image to code; for frames exported from a design tool, see Figma to HTML. All four real examples, side by side, are on the image to HTML converter page.

If you already have the HTML of a page and only want to look at it, the free HTML viewer renders it at phone, tablet and desktop widths.

IMG2HTML and other image to code tools

The tools people compare most often for turning an image or a screenshot into code, and how they differ. Details of other tools are as published on their own sites; check them for current plans.

ToolWhat it isOutputPrice
IMG2HTMLHosted converter: web app, Chrome extension and APIHTML + Tailwind CSS; inline CSS, React, Vue or Angular from the editorFrom $1.99/month for 3 conversions
screenshot-to-code (abi)Open-source project you run with your own OpenAI, Anthropic or Gemini API key; a paid hosted version also existsHTML + Tailwind, React, Vue and other stacksFree code; you pay for the model API
v0 by VercelAI app builder that starts from a prompt or an imageReact and Next.js with Tailwind and shadcn/uiFree tier and paid plans
FrontyImage to HTML/CSS service with a visual editorHTML and CSSSee fronty.com
AnimaDesign to code plugin for FigmaReact, HTML and VueSee animaapp.com

Screenshot to code questions

What code does a screenshot turn into?

A single HTML file that uses Tailwind CSS utility classes, Font Awesome icons and a Google Font close to the one in the image (all four examples on this site came back with Inter). From the editor you can switch it to inline CSS, React, Vue or Angular.

Does it copy the images and the behaviour of the page?

No. Photos, avatars and logos become placeholders with a description, and menus, dropdowns and tabs are rebuilt as static markup. None of the four example outputs contained JavaScript other than the Tailwind CDN script.

Should I use a full-page screenshot?

Split tall pages into sections of one or two screens and convert them one at a time. Every example on this site is a single-screen capture, and shorter sections are also quicker to review against the original.

Can I convert any website this way?

Use it on pages and designs you own or have permission to reproduce. The result is a rebuild of what the screenshot shows, not the original site's source.