Introduction
Modern websites are becoming increasingly complex.
A simple landing page can contain:
- Thousands of HTML elements
- Hundreds of CSS rules
- GSAP animations
- ScrollTrigger timelines
- Lenis smooth scrolling
- CSS keyframes
- Webflow interactions
- Responsive layouts
- Lazy-loaded content
If you've ever tried recreating one manually, you already know how time-consuming it can be.
Opening Chrome DevTools... Copying CSS... Inspecting elements... Tracing animations... Trying to understand JavaScript...
It can easily take several hours.
So I decided to automate the entire workflow. That's why I built Website Cloner.
What is Website Cloner?
Website Cloner is an educational frontend harvesting tool built with Node.js and Playwright.
Instead of manually inspecting a website, the tool automatically collects frontend information including:
- Rendered HTML
- CSS
- Computed styles
- Color palette
- Layout structure
- Animation metadata
- Smooth scrolling recording
Once everything is collected, it prepares an organized project that can be used for learning, rebuilding, or AI-assisted frontend recreation.
Why I Built It
Whenever I found an amazing portfolio or landing page, I always wondered: "How did they build this?"
Usually that meant spending hours inside DevTools.
Instead, I wanted something that could gather everything automatically with one click.
The result was this project.
Features
HTML Harvesting
Captures the fully rendered DOM, including content generated after JavaScript execution.
Unlike simply downloading page source, this records what users actually see.
CSS Collection
Downloads and merges stylesheets into a single organized CSS file. This makes studying layouts much easier.
Computed Style Extraction
Many websites rely on dynamically calculated styles. The tool records important computed values to preserve spacing, typography, colors and layout.
Animation Detection
Modern websites rarely rely only on CSS. Website Cloner detects:
- GSAP timelines
- ScrollTrigger
- CSS animations
- CSS keyframes
- Webflow interactions
These are stored separately for analysis.
Scroll Recording
One of my favorite features. The tool records a smooth scrolling video of the website.
Why? Because animations aren't always obvious from source code. Watching the recorded page helps both developers and AI understand the intended user experience.
AI Prompt Generator
After harvesting finishes, the tool prepares a structured prompt. Instead of writing a huge prompt manually, everything is already organized. This works well with modern coding assistants.
Organized Output
Instead of hundreds of random files, everything is neatly separated.
output/
├── raw.html
├── styles.css
├── computed-styles.json
├── animations.json
├── scroll_video.webm
├── prompt.txt
└── generated/
How It Works
Phase 1 — Harvest
The tool launches Playwright. It then:
- Opens the website
- Waits until JavaScript finishes
- Downloads CSS
- Records scrolling
- Captures HTML
- Detects animations
- Generates metadata
Phase 2 — AI Reconstruction
After harvesting finishes, a detailed prompt is generated. The harvested assets can be used with an AI coding assistant to help recreate the frontend. Developers can further edit, improve, or customize the resulting project.
Tech Stack
- Node.js
- Playwright
- JavaScript
- HTML / CSS
Installation
git clone https://github.com/susantedit/Website-cloner
cd Website-cloner
npm install
npx playwright install chromium
Running
npm start
Open http://localhost:3000, enter a URL, and start harvesting.
Project Structure
Website-cloner/
public/
server.js
phase1_harvest.js
animation_harvest.js
utils.js
package.json
README.md
output/
raw.html
styles.css
animations.json
scroll_video.webm
Future Roadmap
- Multiple browser support
- Batch website harvesting
- Screenshot comparison
- Responsive breakpoint extraction
- Component detection
- Tailwind converter
- React component generation
- Vue / Next.js export
- Automatic asset downloading
- Font detection
- Live preview editor
- Export to ZIP
- Multi-page harvesting
- CLI support
- Docker image
Responsible Usage
This project is intended for:
✅ Learning frontend architecture ✅ Understanding layouts ✅ Educational purposes ✅ Rapid prototyping ✅ Rebuilding websites you own or have permission to reproduce
Please respect copyright, trademarks, software licenses, and website terms of service. Do not use this tool to infringe on others' intellectual property.
FAQ
Does it clone the backend? No. This project focuses on frontend analysis and reconstruction. It does not copy or recreate backend code, databases, APIs, authentication systems, or server-side logic.
Can it clone React or Next.js websites? It can capture the rendered frontend output (HTML, CSS, and animation metadata), but it does not recover the original React, Next.js, Vue, or Angular source code.
Does it copy APIs? No. Only publicly rendered frontend resources are analyzed. Private APIs, server logic, and protected endpoints are not extracted.
Will it recreate every animation perfectly? Not always. The tool detects many common animation systems (such as GSAP, CSS animations, and Webflow interactions), but complex JavaScript-driven behavior may require manual refinement.
Does it work on every website? No. Some websites use anti-bot protection, authentication, CAPTCHAs, or strict security policies that can limit automated analysis.
Can I clone an entire full-stack application? No. This is not a full-stack cloning tool. It does not extract backend code, databases, authentication, business logic, payment systems, private APIs, or server-side rendering logic. It only analyzes the client-side frontend that is publicly rendered in the browser.
Is this legal? The legality depends on how you use it. Use it only for educational purposes, research, analyzing websites you own, or projects where you have permission to reproduce the content. Respect intellectual property rights and applicable laws.
Contributing
Pull requests are welcome. If you'd like to improve the harvesting engine, animation detection, or output generation, feel free to open an issue or submit a PR on GitHub.
Support
If you enjoy this project:
⭐ Star the repository 🍴 Fork it 📢 Share it with other developers
It helps the project grow.
MIT License