Copy any website's source code — and what "source code" really means
How to get the HTML, CSS and assets of any page you can open, why View Source usually shows you the wrong thing, and which parts of a site's code you can never have.
Two different things get called source code, and mixing them up is why people end up with a file that renders nothing.
The source the server sent is what View Source shows: the raw HTML response. On a React, Vue, Next or Astro-hydrated site that can be a near-empty <div id="root"> and a script tag. Nothing you can look at.
The source the browser ended up with is the DOM after scripts ran, with a full set of computed styles, resolved custom properties, decoded fonts and the srcset candidate actually chosen for your viewport. That is the thing that looks like the page, and it is what you want.
And then there is the code you cannot have at all: the server-side application, the database, the build inputs (your .tsx files were compiled away), private API keys, and anything behind an endpoint your browser never called.
Getting the rendered source
- DevTools, by hand. Right-click → Inspect, then on
<html>choose Copy → Copy outerHTML. You get the rendered markup, and nothing else: no CSS, no fonts, no images. Fine for reading one component, useless as an artefact. - Chrome's save. HTML plus a
_filesfolder of whatever had loaded. Misses late-loaded assets and non-chosensrcsetvariants. - A capture extension. Reads the rendered DOM and the computed styles and the assets, then writes them out together — either as one standalone HTML file or as a ZIP with
index.html, a stylesheet and an assets folder you can open in an editor.
For actual development work the ZIP is the useful shape: readable files, real paths, importable into any project. A single-file export is for keeping and sending; a folder export is for working.
What you get in a code export
index.html— the rendered markup, tidied and re-indented, with the original class names preserved so the CSS still matches.- A stylesheet with the rules the page actually used, custom properties resolved where they had to be,
@font-facerules pointing at the local font files. assets/— images, SVG, fonts, media, with the references rewritten to relative paths.- Optionally an agent kit: the same content plus a written spec of the page's structure, palette, type scale and spacing, so a coding agent can rebuild it in your stack instead of pasting somebody's markup. See turning a website into an AI prompt kit.
The JavaScript problem, stated plainly
You can capture a page's behaviour-free result, and that is usually what people want. What you cannot meaningfully copy is the site's application logic: minified bundles are legible to a machine and not to you, they reference APIs you have no credentials for, and re-running them against a dead origin produces errors, not features. A copied page's dropdown might still open (CSS), its search will not return results (server).
If you need the interactions back, treat the capture as a design and markup starting point and reimplement the behaviour. That is faster and safer than trying to revive somebody's bundle.
Legality, briefly
Markup and stylesheets are copyrightable, and "it was in my browser" is not a licence. Reading and learning from them is normal engineering practice; shipping a competitor's page as your own is not. See is it legal to copy a website, and if you want the layout without the liability, copy the design rather than the page.
FAQ
How do I copy the HTML code of any website?
For the raw server response, use View Source or curl. For the code that produced what you are looking at, copy the rendered DOM — DevTools' Copy outerHTML for a fragment, or a capture export when you also need the CSS, fonts and images that go with it.
Why does the source code I copied look nothing like the page?
Because you copied the server's HTML, not the rendered DOM. On a client-rendered site the server sends a shell and JavaScript builds the page; the shell alone renders blank.
Can I get a website's CSS as a file?
Yes. A capture writes out the rules the page actually used as a stylesheet, including resolved custom properties and @font-face rules pointing at local copies of the fonts.
Can I copy a website's JavaScript?
You can save the bundles the browser downloaded, but they are minified and depend on APIs you cannot call. Copying behaviour is reimplementation, not file copying.
Try it on the page you are looking at
CopyAnySite is a Chrome extension: open any page you can reach, press capture, and take away a standalone HTML file, an editable WordPress page, or a kit a coding agent can build from. The free key needs no card.
Download CopyAnySite