Clone any website with pixel-perfect accuracy, analyze DOM structures, and edit with AI assistance
Website Cloner is a sophisticated web application that allows you to clone any website with remarkable precision, analyze its structure, and edit it with AI-powered assistance. Built with cutting-edge technologies, it provides developers and designers with powerful tools for website analysis, prototyping, and learning.
- 🎯 Pixel-Perfect Cloning: Clone any website with preserved styling, layout, and visual fidelity
- 🧠 AI-Powered Analysis: Integrated Google Gemini AI for intelligent code analysis and suggestions
- 🔧 Live Visual Editor: Edit websites directly in the browser with drag-and-drop functionality
- 🌳 DOM Tree Visualization: Interactive DOM structure analysis with semantic scoring
- 📱 Responsive Design: Fully responsive interface that works on all devices
- ⚡ Real-time Preview: Instant preview of changes with hot-reload capabilities
- 🎨 Monaco Code Editor: Professional code editing experience with syntax highlighting
- 📊 Website Analytics: Comprehensive analysis of website structure and performance
- 🔍 Semantic Analysis: Intelligent identification of website components and layout patterns
- Next.js 15.3.3 - React framework with App Router for server-side rendering and optimal performance
- React 19.0 - Latest React with concurrent features and improved performance
- TypeScript 5.0 - Type-safe development with enhanced developer experience
- Tailwind CSS 4.0 - Utility-first CSS framework for rapid UI development
- Tailwind Typography - Beautiful typography defaults for content-rich applications
- Custom CSS - Advanced styling for Monaco Editor and interactive components
- Puppeteer 24.10.1 - Headless Chrome automation for website screenshots and DOM extraction
- Cheerio 1.1.0 - Server-side jQuery implementation for HTML parsing and manipulation
- Axios 1.10.0 - HTTP client for fetching external resources and stylesheets
- Google Generative AI 0.21.0 - Gemini 2.5 Flash model for intelligent code analysis
- Custom AI Prompts - Specialized prompts for website component analysis and suggestions
- Monaco Editor 0.52.2 - VS Code's editor for in-browser code editing
- React Monaco Editor 0.58.0 - React wrapper with TypeScript support
- ESLint 9 - Code linting with Next.js configuration
- PostCSS - CSS processing and optimization
- Sharp 0.34.2 - High-performance image processing
- Node.js 18.0 or higher
- npm, yarn, pnpm, or bun package manager
- Google Gemini API key (for AI features)
-
Clone the repository
git clone https://github.com/yourusername/website-cloner.git cd website-cloner -
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Set up environment variables
cp .env.local.example .env.local
Add your Google Gemini API key to
.env.local:GEMINI_API_KEY=your_gemini_api_key_here
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
- Enter URL: Input any website URL in the search field
- Preview: Click "Preview Website" to analyze and capture the site
- Clone: Click "Show Final Output" to generate the cloned version
- Edit: Use the visual editor or code editor to make modifications
- Toggle edit mode to enable drag-and-drop editing
- Resize elements with corner handles
- Move components between containers
- Real-time visual feedback
- Ask Gemini AI about code structure and components
- Get suggestions for improvements
- Analyze website patterns and best practices
- Interactive code analysis and explanations
- Visualize website structure hierarchically
- Semantic scoring for accessibility and SEO
- Component identification and classification
- Performance and structure recommendations
- Professional Monaco editor with syntax highlighting
- Real-time HTML/CSS editing
- Auto-completion and error detection
- Integrated with live preview
src/
├── app/
│ ├── api/
│ │ ├── analyze-dom/ # DOM structure analysis
│ │ ├── ask/ # Gemini AI integration
│ │ ├── clone/ # Website cloning logic
│ │ └── preview/ # Website preview generation
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main application page
├── components/
│ └── MonacoEditor.tsx # Code editor component
└── utils/
└── gemini.js # Gemini AI utilities
Analyzes a website and generates preview data including screenshots, metadata, and basic analysis.
Performs deep cloning of a website with computed styles and DOM tree extraction.
Analyzes DOM structure and provides semantic scoring and improvement suggestions.
Interacts with Gemini AI for code analysis and intelligent suggestions.
- Metadata Extraction: Title, description, Open Graph data, favicons
- Screenshot Generation: Full-page and viewport screenshots
- Style Extraction: Inline, internal, and external CSS collection
- Asset Discovery: Images, fonts, and resource identification
- Computed Styles: Real browser-computed CSS values
- Semantic Classification: Automatic component type detection
- Structure Analysis: Layout patterns and hierarchy mapping
- Accessibility Scoring: Semantic HTML usage evaluation
- Visual Manipulation: Drag, drop, and resize elements
- Code Synchronization: Bidirectional sync between visual and code editors
- Live Preview: Real-time rendering of changes
- Undo/Redo: Change history management
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team - For the incredible React framework
- Google AI - For the powerful Gemini API
- Puppeteer Team - For headless browser automation
- Monaco Editor - For the professional code editing experience
- Tailwind CSS - For the utility-first CSS framework
- Open Source Community - For the amazing tools and libraries
If you encounter any issues or have questions:
- 🐛 Bug Reports: Open an issue
- 💡 Feature Requests: Start a discussion
- 📧 Contact: your.email@example.com
Made with ❤️ by developers, for developers
⭐ Star this repo if you find it useful!