Step 01
Guarded fetch
Our server fetches the page, its stylesheets and the source maps its scripts declare — once, honouring robots.txt, refusing private and internal addresses, capped at 5 MB and 15 seconds. Nothing is stored.
Source Code Extractor · v0.3
Deconstruct
The Web.
Website Source Code Extractor for Frontend Engineers
The definitive extraction tool for frontend engineers. Pull clean, semantic structures from any URL and map the architectural DNA of modern websites — instantly.
Built for engineers · No signup · Nothing stored · Respects robots.txt
extractor · live
01
// enter a URL above and press Extract
02
// the page and its stylesheets are fetched once, then analysed in your browser
03
// nothing is stored on our server
Report
Analyse rendered HTML For pages built by JavaScript — paste what the browser actually renders
Nothing here executes the site's JavaScript, so a page built in the browser arrives nearly empty. To analyse what a visitor really sees: open the page, press F12, and in the Console run
copy(document.documentElement.outerHTML)
then paste it below. The stylesheets already fetched for this address are reused, so the CSS, tokens and components are analysed against the real DOM. This stays in your browser — nothing is sent anywhere.
How It Works
One guarded fetch, then everything happens in your browser
Step 02
Analysis in your tab
Your browser parses the HTML without running any of its scripts and hands the CSS to Project Wallace’s analyzer: structure, accessibility checks, asset map, 220 technology fingerprints, 200+ CSS metrics and design tokens.
Step 03
Components and sources
Repeated DOM patterns become components, each with only the CSS rules, variables, keyframes and fonts it needs. Shipped source maps give back the original files and the npm dependencies behind a bundle.
Step 04
Exports for people and agents
A ZIP of everything, report.json, W3C design tokens, a generated tailwind.config.js and @theme block, and a context-sized Markdown brief you can hand to a coding agent.
Ten tabs.
One honest report.
- Overview & Structure
- Document meta, landmarks, heading outline, forms, links, images, ten static accessibility checks.
- Components
- Repeated patterns and page sections, each extractable as HTML plus exactly the CSS that applies to it.
- Assets & Stack
- Origins by category, load order, render-blocking flags, fonts — and the technologies, with versions and evidence.
- Source
- Bundler signatures, licence banners, npm dependencies and original files recovered from source maps when a site ships them.
- CSS & Tokens
- Specificity, !important, media queries, custom properties; a palette normalised to sRGB (oklch included), type and spacing scales, radii, shadows, motion.
- Brief & Export
- An agent brief in Markdown, tailwind.config.js, a v4 @theme block, W3C tokens, and a ZIP of it all — built in your browser.
Privacy & limits
- Nothing is stored. The server fetches and forwards; the analysis and every export happen in your tab.
- robots.txt is respected. Private, local and cloud-internal addresses are refused before any connection is made.
- No JavaScript is executed. Content a site renders client-side is reported as not captured, never guessed.
- 30 extractions per hour per visitor; 5 MB and 15 seconds per extraction, up to 20 stylesheets and 4 source maps.
The extracted material remains the property of its authors. Use it to learn and to inform your own work, not to copy.
Open Source · Free to Use
Why Source Architecture Matters
Analyzing the source code of top-performing websites is the fastest path to mastering high-performance frontend architecture, semantic HTML implementation, and SEO-first DOM structuring.
HTML5
CSS3
JavaScript
JSON
Web APIs
DOM
Built in the open
The analysis engine is a dependency-free ES module under the MIT licence, and the fetch proxy that feeds it is a single guarded Django view. CSS metrics come from Project Wallace’s analyzer (MIT); the technology fingerprints were written for this tool, so nothing here is encumbered by GPL data.