ditto.site
ditto.site is an open-source, MIT-licensed, deterministic website cloner that turns any public URL into clean, componentized Next.js or Vite code—typically in about 5 minutes—without relying on LLM guesswork.
https://ditto.site/?ref=producthunt
Product Information
Updated:Jul 23, 2026
What is ditto.site
ditto.site is a deterministic “website-to-code” tool that generates a self-contained TypeScript web app from what a target page renders in the browser. Instead of needing access to a site’s source repository, you provide a public URL and ditto outputs a maintainable project (Next.js or Vite) with structured components and styling (e.g., Tailwind). The project is open source (MIT) and can be used via self-hosting, a hosted REST API, or an MCP server designed for agent workflows. ditto.site emphasizes consistent, stable output and is intended to be used only where you have the rights to inspect, copy, transform, and operate on the target content.
Key Features of ditto.site
ditto.site is an open-source, MIT-licensed, deterministic website cloner that turns a public URL into a self-contained, maintainable TypeScript web app (Next.js or Vite) in minutes. Instead of using an LLM-based best guess, it runs a stable pipeline that captures what a page renders in the browser, then generates clean, componentized code with extracted design systems (tokens, fonts, breakpoints), interactions (hover/focus, dropdowns, accordions, motion), and production-friendly SEO artifacts (metadata, JSON-LD, sitemaps). It can be used via self-hosted open-source tooling, a hosted REST API, or an MCP server for agent workflows.
Deterministic cloning pipeline: Produces fast, stable, repeatable outputs (capture → generate → verify) without relying on non-deterministic LLM interpretation.
URL-to-app code generation: Converts a public webpage into a fresh, self-contained TypeScript project based on what the page renders in a browser—no original source repo required.
Framework output: Next.js or Vite: Emits a real application scaffold you can run and extend, choosing either Next.js or Vite depending on your stack and deployment needs.
Maintainable, componentized code: Avoids “one giant file” by splitting repeated DOM into components, lifting regions into sections, and extracting an editable content model.
Design system extraction: Extracts tokens, fonts, breakpoints, layout structure, and motion/interactions to preserve the look-and-feel while keeping styling editable.
Multiple integration paths (OSS, API, MCP): Run locally/self-host (MIT), call the hosted REST API to queue/poll jobs and download results, or expose cloning as a tool to agents via an MCP server.
Use Cases of ditto.site
Agency or studio rebuilds/migrations: Recreate an existing marketing site into clean Next.js/Vite code as a starting point for redesigns, performance work, or CMS integration.
Competitive/market research prototyping: Generate faithful, editable replicas of publicly accessible pages (when you have rights to inspect/transform) to study layout patterns, IA, and design systems.
AI app-builder onboarding templates: Give new customers a real-code baseline that matches their current site, replacing the blank-canvas problem with a maintainable starting project.
Engineering handoff from “rendered truth”: When the original source is unavailable, produce a working codebase from the rendered page to accelerate internal documentation, refactors, or modernization.
Agent-assisted site generation workflows: Wire ditto into Claude/Cursor/custom agents via MCP so automated build loops can clone, modify, and iterate on real projects.
SEO-ready site replication baseline: Use generated metadata, JSON-LD, and sitemaps as a foundation for SEO-preserving rebuilds before further optimization.
Pros
Deterministic, consistent outputs suitable for repeatable workflows and automation.
Generates maintainable, componentized Next.js/Vite TypeScript projects rather than flat HTML dumps.
Flexible usage: self-host open source, hosted REST API, or MCP for agent tooling.
Extracts design tokens, interactions, and SEO artifacts to preserve fidelity and accelerate iteration.
Cons
Only appropriate when you have the rights to inspect/copy/transform the target content; misuse can create legal/ethical issues.
Output fidelity is limited to what can be captured from the rendered page; complex app logic/backends aren’t inherently reconstructed.
May still require manual cleanup or adaptation for dynamic content, authentication flows, or site-specific integrations.
How to Use ditto.site
1) Choose how you want to use Ditto: Ditto offers three entry points that use the same deterministic engine: (a) Open-source self-host (run the whole pipeline locally), (b) Hosted REST API (POST a URL, poll job status, then download output), or (c) MCP server (connect Ditto to an agent like Claude/Cursor).
2) Use Ditto via the hosted REST API (quickest path): Go to https://www.ditto.site/api-key and get an API key. Use the hosted endpoint to submit a public URL, then poll the job until it completes, and finally pull the generated project (Next.js App Router by default, or Vite React when requested).
3) Use Ditto via MCP (for agent workflows): Get an API key, then add Ditto as an MCP server in your agent/client configuration using the MCP URL and your Bearer token. Example config: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Self-host Ditto (run the pipeline locally): Clone the open-source repo and install dependencies: `gh repo clone ion-design/ditto.site` then `cd ditto.site && npm install`.
5) Run a local clone job against a URL: From the repo, run the clone command and pass the target URL: `npm run clone -- https://example.com` (replace with the site you’re authorized to clone).
6) Turn Ditto’s clone output into a project on disk (unpack): Use the official unpacker from the checked-out repo: `npm run unpack -- <clone.json|-> <out-dir>`. This writes text files and materializes binary assets (inline base64 or fetched via $DITTO_API_URL / $DITTO_API_KEY).
7) Open and build the generated app: Open the output directory in your editor. Ditto emits a real TypeScript project with componentized code (not one giant file), including extracted tokens/design system, fonts, interactions, motion, breakpoints, and sections.
8) Know what Ditto captures (and what it might miss): Ditto captures what the browser actually rendered at snapshot time. Content that loads later (infinite scroll, lazy-loaded images, or interaction-triggered content) may not be included—ensure the content you want is visible before cloning.
9) Follow usage and rights best practices: Ditto is intended for learning, prototyping, and authorized use cases. You are responsible for ensuring you have the right to clone and use code from any page, respecting copyright, terms of service, and IP.
ditto.site FAQs
ditto.site is an open-source deterministic website cloner that turns a public URL into a clean, componentized codebase (Next.js or Vite) based on what the page renders in a browser.
ditto.site Video
Popular Articles
Atoms: A Multi-Agent AI Platform That Transforms Ideas into Launch-Ready Products
May 22, 2026
Nano Banana SBTI: What It Is, How It Works, and How to Use It in 2026
Apr 15, 2026
Atoms Review — The AI Product Builder Redefining Digital Creation in 2026
Apr 10, 2026
Kilo Claw: How to Deploy and Use a True "Do‑It‑For‑You" AI Agent(2026 Update)
Apr 3, 2026
Latest AI Tools Similar to ditto.site
GPT Easy Web
GPT Easy Web is a user-friendly AI-powered platform that enables users to easily build, customize and manage websites through natural language interactions and automated tools without requiring coding knowledge.
AI Website Tool
AI Website Tool is an AI-powered website builder that creates professional websites in minutes by automatically generating business-focused copy, custom visuals, and responsive designs with just a few clicks.
Softgen
Softgen.ai is an AI-powered full-stack project generator platform that enables users to transform their ideas into functional web applications without coding requirements.
Webifier
Webifier is an AI-powered tool that transforms text prompts into fully functional React landing pages with clean, exportable code using NextJS14, TailwindCSS, and Shadcn components.
Popular AI Tools Like ditto.site
Adobe Express
Adobe Express is an all-in-one AI-powered content creation app for easily making stunning social posts, images, videos, flyers, and more with professionally designed templates and assets.
Hostinger
Hostinger is a web hosting and domain service provider offering AI-powered tools like Horizons that enables anyone to build, edit, and publish custom web apps and websites without coding through a simple chat interface.
GPT Engineer
GPT Engineer is an AI-powered software development tool that enables anyone to build web applications by chatting with an AI engineer.
Manus Shopify Connector
Manus Shopify Connector lets you build a Shopify-backed storefront, manage your catalog, and generate data-driven campaigns from a single chat—using Shopify APIs with OAuth-scoped access and Shopify checkout.