How to Clone a Website from a URL: Step-by-Step (2026)

"How to clone a website" sounds like one task, but it's really three. Some people want the design to look the same. Some want the actual reusable code for a section. Some want every file on disk for an offline archive. Each goal needs a different method, and picking the wrong one is why so many clones come out broken or generic.

Most of the time you also have something specific in hand: a URL. A live page you want to rebuild, reuse, or learn from. That detail matters more than any tool choice, because it means the real HTML and CSS already exist and your browser is rendering them right now. You don't need to screenshot the page and you don't need an AI to guess at it.

I build MiroMiro, a tool for the first method below, so I've watched a lot of people reach for the wrong one and end up frustrated. This guide sorts out what you actually want first, then walks through three methods step by step, then covers when to use which and where the legal line sits.

First, decide what you actually want to clone

Before you touch a tool, name your goal. "Clone a website" or "copy a website" covers three different jobs:

• The visual look. You like how a hero, navbar, or pricing table looks and want that look in your own project. This is what most people mean.
• Reusable sections as code. You want the real, editable HTML and CSS for a specific section so you can drop it into your codebase or paste it into Cursor and customize it.
• A full mirror. You want every page, asset, and file saved to disk, byte for byte, usually for an offline archive.

Nearly everyone searching for a website cloner wants the first two: the design, as clean code they can reuse. Full-mirror tools are a different category, built for archiving, not for building. For the first two goals, the methods below are ordered best to worst. For a full mirror, skip to Method 3.

Why having the URL changes the right approach

"From a URL" is a quiet but important clue. It means you have a live page, not a Figma mockup or a screenshot someone sent you. The markup, the stylesheet rules, the font stack, and the spacing values are all loaded in your browser already. You can confirm that yourself in the browser's developer tools (our guide to inspect element on any device shows how), but reading a page out of DevTools by hand is slow: you get one element's rules at a time, half of them overridden, with no clean way to copy a whole section.

So the fork that decides everything is simple:

• The design is a live website → don't screenshot it. Read the code it already renders (Method 1).
• The design only exists as an image → an AI rebuild is reasonable, because a guess is your only option (Method 2).
• You need every file on disk → mirror it and accept the mess (Method 3).

Method 1: Clone a website from its URL with a browser extension

This is the recommended path for cloning a live site's design. A browser extension that reads the rendered DOM gives you the exact code the site ships, with fonts, spacing and colors included. MiroMiro is the Chrome extension I make for exactly this, so I'm biased, but the flow is the same whichever extraction tool you use.

Step 1: Install the extension

Add MiroMiro from the Chrome Web Store. It's free to install, and a new account gets a 3-day trial of everything, code export included. It's a desktop Chrome extension, so do this on a computer, not a phone.

Step 2: Open the live page you want to clone

Load the URL in Chrome and let it finish, including web fonts and lazy-loaded sections further down. Scroll once to the bottom if the page animates content in. You want the page in the state you'd want to copy. If the extension was installed while the tab was already open, reload it so the extension can read what's rendered.

Step 3: Click the section you want (or take the whole page)

Open the MiroMiro panel, press Export, and click the part of the page you're after: a hero, a navbar, a pricing grid, a card. Or export the whole page. You're selecting real DOM, not drawing a box around a picture, so the extension knows exactly which elements and styles belong to your selection. It reads the rendered result rather than the raw, minified source files, so what you get is the styling that actually applies.

Step 4: Pick a format and copy the code

Choose Tailwind (the default, since it's what AI coding tools expect), HTML + CSS, React, Vue, or an Elementor template if you build in WordPress (how the Elementor route works). You get the markup bundled with the CSS that applies to it, not a reference to a stylesheet you then have to chase down. Hover and focus states come along, so buttons and links still react.

Here's the one-click extraction in action, live section in, clean code out:

Step 5: Paste it into your project or your AI editor

Drop the code into your build and swap in your own content. Or paste it into Cursor, Claude, v0, or Lovable as context, so the AI adapts real code instead of hallucinating from an image. The last time I cloned a SaaS pricing section this way, the export needed nothing but a copy swap and a brand-color change before it shipped. Compare that to the hour I'd have spent nudging an AI's guess back into alignment.

That's the whole loop, usually under a minute per section. The Website Cloner page shows every format and what else it pulls from a page.

What you get, and what's free

Cloning from a URL this way gives you the code the site really ships, not an interpretation of it:

• Real HTML and the CSS that applies to it, exact, not inferred
• Tailwind, HTML + CSS, React or Vue you can paste without untangling it first
• True fonts, colors, and spacing values, read from the live page, not sampled from pixels
• Whole sections in one click, instead of rebuilding element by element
• The page's assets: images, SVG icons, font files and videos

On plans: after the 3-day trial, inspecting fonts, colors and CSS and downloading assets stay free on every account. Copying CSS and exporting sections as code is Pro.

One customer put the difference between this and the screenshot route well:

If you're choosing between extraction tools, the export-to-clean-code roundup compares the options side by side.

Method 2: Clone with AI from a screenshot

Sometimes there's no live page to read. You have a Figma frame, a screenshot a client sent you, or a design that only exists as an image. That's where AI screenshot-to-code earns its place.

Step 1: Capture or export the design as an image

Take a clean, full-resolution screenshot. The sharper the image, the less the model has to guess. Crop to one section at a time; a whole landing page in one image gives the model too much to get wrong at once.

Step 2: Paste it into an AI tool

Drop the image into the open-source screenshot-to-code project, or any AI editor that accepts images, and ask it to rebuild the layout as HTML and CSS.

Step 3: Expect drift, and budget time to fix it

The model only has pixels, so it infers everything:

• Fonts become lookalikes, not the originals.
• Spacing and sizes are estimated, and the errors stack down the page.
• Semantic structure (<nav>, <section>, <button>) is guessed from appearance.
• Hover states, transitions, and responsive breakpoints aren't in a static image, so they're missing.
• Colors are sampled approximations, not the real hex values.

The output is close but off, and the more detailed the design, the more it drifts. That ceiling comes with working from a picture, and it's covered in depth in what actually works with screenshot-to-code.

People who tried to do this with live sites hit the same wall:

The better hybrid: real code in, AI on top

If the design is live, you don't have to choose between accuracy and AI. Extract the real code with Method 1, then hand that to the AI with your instructions ("rebuild this as a React component with my brand colors", "make this pricing grid four columns"). The model edits real markup instead of reconstructing it, so the fonts, spacing and structure survive.

For a tool-by-tool look at the AI side, see the best AI website cloners compared: what each gets right and where it drifts.

Method 3: Full-site download or mirror (HTTrack-style)

The third method is the one most people picture when they hear "clone a website," and it's usually not the one they want. A full-site downloader crawls a site and saves every page, stylesheet, script, and image to disk as a static mirror.

Step 1: Pick a downloader

The classic open-source tool is HTTrack. You point it at a URL, set how deep to crawl, and it walks the links.

Step 2: Run the crawl

It downloads the files and rewrites links so the saved copy works offline. Large sites take a while and produce thousands of files. Set a depth limit, or you'll mirror half the internet through outbound links.

Step 3: Open the mirror locally

You get a folder of raw HTML, CSS, JS, and assets that opens in a browser as an offline copy.

When this is the right tool: archiving a site before it goes down, keeping an offline reference, or auditing a static site you own.

Why it's usually not what you want: the output is bulky, the markup is raw and often minified, pages that build their content with JavaScript or API calls frequently break, and none of it is reusable as clean components. If your goal is to copy a website's design into your own build, this gives you a museum exhibit, not editable code.

Clone a website: the three approaches compared

The short rule: if the page is live, read its real code. If it's only a picture, let AI rebuild it and plan to clean up. If you need the whole thing on disk, mirror it and accept the mess. Most people land on Method 1, because most of the time the design they want to clone is a live website.

Cloning many pages, or from an AI agent

If you're cloning one section at a time, the extension is the fastest route. If you're building a swipe file of fifty landing pages, or you want ChatGPT, Claude or Codex to fetch a design while it codes, the same extraction engine is available as an API and a remote MCP server. Your agent passes a URL (and optionally a section like pricing or hero) and gets the real HTML and CSS back as Tailwind, JSX, Vue or plain HTML, with no browser open on your side.

When the clone still looks off

Even with real code, a few things trip people up:

• Fonts fall back to system fonts. The site's web fonts are licensed to its domain. Download the font files where the license allows, or swap in a similar font you have rights to.
• Images break later. Exported code can still reference images hosted on the original site. Download the assets and point the paths at your own copies before you ship.
• The section depends on JavaScript. Carousels, tabs and animated counters are driven by the site's scripts. The extracted markup and styling are right, but you wire up the behavior yourself (or ask your AI editor to).
• The page is behind a login or paywall. If it doesn't render in your browser, there's nothing to extract. A public URL is the requirement.

Legal and ethical notes (read this part)

Cloning is a spectrum, and so is the ethics of it.

Generally fine: studying a layout, recreating a pattern like a sticky navbar or a pricing grid, and using a clone as a starting point you make your own. This is how the web has always been built.

Not fine: copying a site's proprietary assets wholesale (its logos, brand identity, original copy, and images) and passing them off as yours. Republishing someone's content verbatim. Ignoring a site's terms of service.

The rule I follow: take the structure, bring your own substance. Treat the extracted code as scaffolding, then swap in your content, your brand, and your assets. Do that and you stay on the right side of the line.

Keep reading

• Best AI website cloners compared - the tools in this space, what each gets right and where it drifts.
• Best tools to export websites to clean code - extraction tools side by side.
• How to copy a hero, pricing, or navbar section into Cursor - the full AI-editor workflow.
• How to convert a website to Elementor - the same clone, delivered as an Elementor template for WordPress.

Start with one URL

If the site you want to clone is live, you don't need a screenshot and you don't need an AI to guess. You need the real code, cleanly.

Install MiroMiro, open the URL, and export your first section during the free 3-day trial. Or see everything it exports on the Website Cloner page.